/* ─────────────────────────────────────────────────────────────────────────────
   Home page — composition only. Visual pieces come from components.
   ───────────────────────────────────────────────────────────────────────────── */

@layer page {

  /* ── Hero: the illustration from edge to edge, the copy on its open side ──
     The artwork (16:9) shows the teacher and the children on its left 55%
     and leaves its right side open and light (#FCEFF5 on average), so on wide
     screens the hero keeps the artwork's proportion and the copy sits inside
     that open area — measured against the viewport, since the artwork scales
     with it. Narrower screens stack the copy above the artwork. */
  .hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    display: grid;
    align-items: center;
    min-height: clamp(36rem, 56.25vw, 100svh);
    /* Room for the header above and for the facts panel rising into the foot,
       so neither ever meets the copy when the copy is taller than the artwork. */
    padding-top: calc(var(--header-h) + var(--s-6));
    padding-bottom: calc(var(--hero-foot) * -1 * var(--facts-rise, -1.35) + var(--s-6));
  }

  .hero__backdrop { position: absolute; inset: 0; z-index: -2; }
  .hero__backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: 22% 38%; }
  /* A light veil behind the copy and a fade into the page under the facts. */
  .hero__backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(closest-side at 80% 46%, rgb(252 248 249 / 0.55), transparent),
      linear-gradient(to bottom, transparent 74%, var(--bg));
  }

  /* Clouds rest on the artwork: one on the desk's near corner under the
     teacher, one in the far corner under the copy, behind the facts panel. */
  .hero__cloud { position: absolute; z-index: -1; pointer-events: none; }
  .hero__cloud img { width: 100%; height: auto; }
  .hero__cloud--desk   { width: clamp(11rem, 22vw, 26rem); left: -2vw; bottom: calc(var(--hero-foot) * 0.85); animation: cloud-drift 11s ease-in-out infinite alternate; }
  .hero__cloud--corner { width: clamp(10rem, 20vw, 24rem); right: -2.5vw; bottom: calc(var(--hero-foot) * 1.1); animation: cloud-drift 14s ease-in-out infinite alternate-reverse; }
  @keyframes cloud-drift {
    from { transform: translate(-10px, 0); }
    to   { transform: translate(12px, -6px); }
  }

  /* The copy spans the open side from 10.5vw off the edge to just clear of
     the artwork's last floating icon (the bell ends at 55% of its width), and
     scales with the viewport like the artwork does. Measured with the page
     font: the lead keeps at least 20px from the bell from 1200px up, and the
     gap grows with the screen. */
  .hero__inner { padding-inline: clamp(var(--gutter), 10.5vw, 16rem) clamp(var(--gutter), 6vw, 9rem); }
  /* A touch narrower on small laptops, where the lead would otherwise run up
     to the bell. */
  .hero__copy { width: clamp(20rem, min(32vw, 34vw - 1.875rem), 40rem); display: grid; gap: var(--s-6); align-content: center; }
  .hero__eyebrow { font-size: clamp(var(--fs-small), 0.5rem + 0.7vw, 1.15rem); }
  .hero__title {
    font-size: min(5.6rem, 6vw);
    line-height: 1.12;
    font-weight: 700;
  }
  /* A line never breaks: «تألّق بشغف.» is the widest phrase and may reach a
     few pixels past the copy column into the picture's empty side. */
  .hero__title-line { display: block; white-space: nowrap; }
  .hero__title-line--accent { color: var(--pink); }
  .hero__lead { max-width: 38rem; color: var(--ink-2); font-size: clamp(var(--fs-lead), 0.55rem + 0.95vw, 1.45rem); line-height: 1.85; }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
  .hero__actions .btn { min-height: clamp(3.25rem, 2.3rem + 1vw, 3.75rem); padding-inline: clamp(1.5rem, 0.8rem + 1vw, 2.25rem); font-size: clamp(var(--fs-body), 0.6rem + 0.55vw, 1.2rem); }

  /* «تعلّم بثقة · بشغف · بحب» — the word after «تعلّم» changes
     (scripts/modules/word-cycle.js). The words share one grid cell, so the line
     keeps the width of the widest and nothing around it moves. A marker swash
     (the highlight component's shape) stays behind the word: it draws itself
     once when the page opens, then only eases its width to fit each word. The
     leaving word lifts away through a blur and the next rises into focus.
     Word motion runs only once the cycle has begun, so the first word paints at
     once (it is part of the page's largest text). */
  /* Baseline measured on the page font at the title's line height of 1.12. */
  .word-cycle { --hl-baseline: 0.791em; display: inline-grid; vertical-align: top; }
  .word-cycle__stage { position: relative; isolation: isolate; display: grid; }
  .word-cycle__word { grid-area: 1 / 1; justify-self: start; white-space: nowrap; }
  .word-cycle__word:not(.is-current, .is-leaving) { visibility: hidden; }
  .word-cycle__swash {
    position: absolute;
    z-index: -1;
    top: calc(var(--hl-baseline) - 0.44em);
    inset-inline-start: -0.14em;
    width: calc(var(--swash-w, 100%) + 0.26em);
    height: 0.6em;
    background: var(--hero-highlight, rgb(255 196 211 / 0.92));
    mask: url("../../assets/images/marks/highlight.svg") center / 100% 100% no-repeat;
    rotate: -0.8deg;
    transition: width 0.7s var(--ease-out);
    animation: swash-in 0.85s var(--ease-out) 0.6s both;
  }
  .is-cycling .word-cycle__word.is-current { animation: word-in 0.8s var(--ease-out) 0.16s both; }
  .is-cycling .word-cycle__word.is-leaving { animation: word-out 0.48s cubic-bezier(0.55, 0, 1, 0.45) both; }
  @keyframes word-in {
    from { opacity: 0; translate: 0 0.32em; filter: blur(12px); }
    to   { opacity: 1; translate: 0 0; filter: blur(0); }
  }
  @keyframes word-out {
    from { opacity: 1; translate: 0 0; filter: blur(0); }
    to   { opacity: 0; translate: 0 -0.26em; filter: blur(10px); }
  }
  @keyframes swash-in {
    from { clip-path: inset(0 0 0 100%); }
    to   { clip-path: inset(0 0 0 0); }
  }

  /* ── Facts band (rises into the hero's foot; the panel is a component) ── */
  .facts { position: relative; z-index: 2; margin-top: calc(var(--hero-foot) * var(--facts-rise, -1.35)); }

  /* ── Courses ─────────────────────────────────────────────────────────────── */
  .courses-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--s-6);
  }
  /* 7 courses → 2 wide · 3 regular · 2 wide. No orphan card. */
  .courses-grid > :nth-child(1), .courses-grid > :nth-child(2),
  .courses-grid > :nth-child(6), .courses-grid > :nth-child(7) { grid-column: span 3; }
  .courses-grid > :nth-child(3), .courses-grid > :nth-child(4), .courses-grid > :nth-child(5) { grid-column: span 2; }

  /* ── Course reel: the pinned drum (scripts/modules/course-reel.js) ─────────
     Applies only while the script has turned the section into a reel. The
     reel is one screen tall plus a scroll step per course; its frame sticks
     to the top of the screen. The card size follows the screen height so the
     front course, its details and the ticks always fit. */
  .courses:has(.is-reel) { padding-block: 0; }
  .course-reel.is-reel {
    --reel-body: 11.5rem;   /* title, chips, summary and link under the poster */
    --reel-chrome: 22rem;   /* header, heading, ticks and breathing room */
    --reel-card-w: min(32vw, 32rem, (100svh - var(--reel-chrome) - var(--reel-body)) * 1.7778);
    height: calc(100svh + var(--reel-steps, 6.4) * 48svh);
  }
  .is-reel .course-reel__frame {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: clip;
    padding-top: var(--header-h);
  }
  .is-reel .course-reel__inner {
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding-block: clamp(1rem, 3svh, 2.5rem) clamp(1rem, 3svh, 2rem);
  }
  .is-reel .section-head { margin-bottom: 0; }

  /* The stage: a soft floor of light under the front course. */
  .is-reel .course-reel__stage {
    position: relative;
    isolation: isolate;
    margin-inline: calc(var(--gutter) * -1);
  }
  .is-reel .course-reel__stage::before {
    content: "";
    position: absolute;
    inset: 12% 18% 0;
    z-index: -1;
    background: radial-gradient(closest-side at 50% 62%, rgb(244 63 117 / 0.13), transparent);
    pointer-events: none;
  }
  .is-reel .courses-grid {
    display: block;
    position: relative;
    height: 100%;
    perspective: 1800px;
    perspective-origin: 50% 45%;
    transform-style: preserve-3d;
  }
  .is-reel .course-reel__item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--reel-card-w);
    will-change: transform, opacity;
    backface-visibility: hidden;
  }

  /* On the drum the cards are solid, so a card never shows through another. */
  .is-reel .course-card { background: var(--white); box-shadow: var(--shadow-inset), var(--shadow-md); transition: box-shadow var(--dur-slow) var(--ease-out); }
  .is-reel .course-card:hover { transform: none; }
  .is-reel .is-front .course-card { box-shadow: var(--shadow-inset), 0 40px 80px -40px rgb(190 33 82 / 0.45), 0 0 0 1px var(--pink-border); }
  /* Courses turned away are veiled in the page's pink light. */
  .is-reel .course-reel__item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: var(--r-lg);
    background: linear-gradient(160deg, rgb(255 240 245 / 0.92), rgb(252 248 249 / 0.8));
    opacity: var(--reel-shade, 0);
    pointer-events: none;
  }
  /* Only the front course shows its summary and link; the others show their
     poster, title and chips. */
  .is-reel .course-card__desc { max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-out), opacity var(--dur-base) linear; }
  .is-reel .course-card__foot { max-height: 0; opacity: 0; overflow: hidden; padding-top: 0; border-top-color: transparent; transition: max-height var(--dur-slow) var(--ease-out), opacity var(--dur-base) linear, padding var(--dur-slow) var(--ease-out); }
  .is-reel .is-front .course-card__desc { max-height: 4em; opacity: 1; }
  .is-reel .is-front .course-card__foot { max-height: 4rem; padding-top: var(--s-4); border-top-color: var(--line); opacity: 1; }

  /* Ticks and count under the drum. */
  .course-reel__nav[hidden] { display: none; }
  .course-reel__nav {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-6);
    width: min(100%, 46rem);
    margin-inline: auto;
    padding-top: var(--s-4);
  }
  .course-reel__count { display: flex; align-items: baseline; gap: var(--s-2); font-family: var(--font-display); font-weight: 700; }
  .course-reel__count > .num { font-size: 1.8rem; color: var(--pink-strong); min-width: 1.2ch; text-align: center; }
  .course-reel__of { color: var(--ink-2); font-family: var(--font-body); font-size: var(--fs-small); font-weight: 400; }
  .course-reel__title { justify-self: start; color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .course-reel__ticks {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-2);
  }
  .course-reel__tick {
    position: relative;
    width: 2.25rem;
    height: 1.75rem;
    border-radius: var(--r-pill);
  }
  .course-reel__tick::before {
    content: "";
    position: absolute;
    inset: 50% 0.35rem auto;
    height: 4px;
    translate: 0 -50%;
    border-radius: var(--r-pill);
    background: var(--pink-border);
    transition: background-color var(--dur-base) var(--ease-out), inset var(--dur-base) var(--ease-out);
  }
  .course-reel__tick:hover::before { background: var(--pink); }
  .course-reel__tick[aria-current="true"]::before { inset-inline: 0.1rem; background: var(--pink-strong); }
  .course-reel__tick:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

  @media (max-width: 699px) {
    .course-reel.is-reel { --reel-card-w: min(80vw, 22rem); }
    .is-reel .section-head__lead { display: none; }
    .course-reel__nav { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3) var(--s-4); }
    .course-reel__ticks { grid-column: 1 / -1; justify-content: center; }
    .course-reel__tick { width: 1.9rem; }
  }
  @media (max-height: 820px) {
    .is-reel .section-head__lead { display: none; }
    .course-reel.is-reel { --reel-chrome: 19rem; }
  }
  @media (max-height: 720px) {
    .course-reel.is-reel { --reel-body: 8.5rem; }
    .is-reel .is-front .course-card__desc { max-height: 0; opacity: 0; }
  }

  /* ── Features: the list advances, its illustration takes the stage ─────── */
  .features { background: var(--bg-deep); }
  .features__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 1rem + 5vw, 6rem);
    align-items: start;
  }
  .features__intro {
    position: sticky;
    top: calc(var(--header-h) + var(--s-10));
    display: grid;
    gap: var(--s-4);
  }

  .features__stage {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 25rem);
    aspect-ratio: 1 / 0.9;
    margin-top: var(--s-4);
  }
  /* An arch like the hero's, holding the illustration. */
  .features__stage::before {
    content: "";
    position: absolute;
    inset: 6% 7% 0;
    border-radius: 999px 999px var(--r-xl) var(--r-xl);
    background:
      radial-gradient(closest-side at 50% 58%, rgb(244 63 117 / 0.14), transparent),
      linear-gradient(180deg, rgb(255 255 255 / 0.9), rgb(255 240 245 / 0.66));
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-lg);
  }
  .features__art {
    grid-area: 1 / 1;
    z-index: 1;
    width: 80%;
    margin-top: 10%;
    opacity: 0;
    transform: translateY(18px) scale(0.86) rotate(-5deg);
    filter: drop-shadow(0 22px 26px rgb(204 39 89 / 0.2));
    transition:
      opacity 0.45s var(--ease-out),
      transform 0.8s var(--ease-out);
  }
  .features__art.is-active { opacity: 1; transform: none; }
  .features__art img { width: 100%; height: auto; }

  /* Reading progress: a track runs through the nodes and fills as the middle
     of the viewport moves down the list. JS measures the first and last node
     centres (--track-top, --track-height) and writes the fill. */
  .features__steps { position: relative; }
  .features__track {
    position: absolute;
    z-index: 1;
    top: var(--track-top, 0px);
    height: var(--track-height, 0px);
    inset-inline-start: calc(var(--s-6) + 0.6rem);
    width: 2px;
    translate: 50% 0;
    border-radius: 2px;
    background: rgb(244 63 117 / 0.16);
    pointer-events: none;
  }
  .features__fill {
    position: absolute;
    inset: 0 0 auto;
    height: calc(var(--features-progress, 0) * 100%);
    border-radius: inherit;
    background: linear-gradient(180deg, var(--pink-border), var(--pink));
    box-shadow: 0 0 10px rgb(244 63 117 / 0.45);
  }
  .features__list { display: grid; gap: var(--s-2); }
  .feature {
    display: flex;
    align-items: flex-start;
    gap: var(--s-5);
    padding: var(--s-6);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    transition:
      background-color var(--dur-slow) var(--ease-out),
      border-color var(--dur-slow) var(--ease-out),
      box-shadow var(--dur-slow) var(--ease-out);
  }
  .feature.is-active {
    background: rgb(255 255 255 / 0.72);
    border-color: var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-md);
  }
  .feature__node {
    position: relative;
    z-index: 2; /* above the track */
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.45rem;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0 0 2px rgb(244 63 117 / 0.22);
    transition: background-color var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  }
  .feature.is-passed .feature__node { background: var(--pink-border); box-shadow: 0 0 0 2px var(--pink); }
  .feature.is-active .feature__node { background: var(--pink); box-shadow: 0 0 0 6px rgb(244 63 117 / 0.16), 0 0 16px rgb(244 63 117 / 0.55); }
  .feature__body { flex: 1; min-width: 0; }
  .feature__title { font-size: var(--fs-h3); }
  /* The text under a title folds away in the pinned walk-through below. */
  .feature__more {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--dur-slow) var(--ease-out), opacity var(--dur-base) linear;
  }
  .feature__text { min-height: 0; overflow: hidden; padding-top: var(--s-1); color: var(--ink-2); }
  .feature__art { display: none; } /* phones only: the stage is not sticky there */

  /* ── Pinned walk-through (wide screens tall enough to hold the list) ───────
     The scroller is one screen tall plus a step per feature; the frame inside
     sticks to the top of the screen, so the section holds still while
     scrolling carries the progress through every feature, and only then
     moves on. Features not yet reached or already passed fold to their
     titles so the whole list fits the screen; the active one opens. */
  @media (min-width: 901px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
    .features { padding-block: 0; }
    .features__scroller { height: calc(100svh + var(--features-steps, 6) * 42svh); }
    .features__frame {
      position: sticky;
      top: 0;
      height: 100svh;
      display: grid;
      align-items: center;
      padding-top: var(--header-h);
    }
    .features__intro { position: static; }
    .features__stage { width: min(100%, 25rem, 46svh - 3rem); }
    .feature { padding-block: var(--s-4); }
    .feature.is-active { padding-block: var(--s-5); }
    .feature:not(.is-active) .feature__more { grid-template-rows: 0fr; opacity: 0; }
  }

  /* ── Testimonials: parents' words on the note paper ──────────────────────── */
  .testimonials__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2.5rem, 1rem + 5vw, 6rem);
    align-items: center;
  }
  .testimonials__intro { display: grid; gap: var(--s-8); align-content: center; }
  .notes-controls { display: flex; align-items: center; gap: var(--s-4); }
  .notes-controls__count { min-width: 3.5rem; color: var(--ink-2); font-size: var(--fs-small); }
  .notes-controls__buttons { display: flex; gap: var(--s-2); }

  /* The stage keeps the room of the longest note (set by notes.js) so the
     page around it never moves; the paper inside is as tall as the note on it.
     The paper stays at the top of the stage in layout and is centred with a
     translation, so a change of note resizes it without shifting anything. */
  .note-stage {
    display: grid;
    align-items: start;
    min-height: var(--note-stage-h, auto);
    padding: var(--s-10) var(--s-4) var(--s-12);
  }

  /* The paper is the note from the owner's Canva board rebuilt at any height:
     its colours, holes and rules are taken from the artwork, and its real
     paper clip and flowers sit on top. Rules are spaced by the text's own
     line height, so every line of writing rests on a rule. */
  .note {
    --note-paper: #F6EBEA;
    --note-rule-color: #D3BFB1;
    --note-rule: 2.6rem;
    --note-hole: 0.85rem;
    position: relative;
    rotate: -1.5deg;
    padding-block: 4.5rem 3rem;
    padding-inline: clamp(1.75rem, 1rem + 2.5vw, 3rem) clamp(4.5rem, 3.6rem + 2vw, 6rem);
    border-radius: 2.25rem;
    background: var(--note-paper);
    box-shadow:
      0 30px 60px -34px rgb(120 36 70 / 0.38),
      0 8px 18px -10px rgb(120 36 70 / 0.16);
  }
  /* Punched holes down the binding side, showing the page behind. */
  .note::before {
    content: "";
    position: absolute;
    top: 4.5rem;
    bottom: 3rem;
    inset-inline-end: clamp(1.4rem, 1rem + 1vw, 2rem);
    width: calc(var(--note-hole) * 2);
    background: radial-gradient(circle, var(--bg) 0 var(--note-hole), transparent calc(var(--note-hole) + 0.5px)) center top / 100% calc(var(--note-rule) * 2);
    background-repeat: no-repeat space;
  }

  .note__clip    { position: absolute; z-index: 2; width: 88px;  top: -34px; inset-inline-end: 26px; }
  .note__flowers { position: absolute; z-index: 2; width: 140px; top: -30px; inset-inline-start: -26px; }
  .note__hearts  { position: absolute; z-index: 2; width: 124px; bottom: -46px; inset-inline-end: -30px; rotate: -10deg; animation: sticker-float 6s ease-in-out infinite; }
  .note__clip img, .note__flowers img, .note__hearts img { width: 100%; height: auto; }

  /* All notes share one cell. Without JS the paper takes the longest note's
     height; with JS its height follows the note on show (at least three rules)
     and eases between notes. */
  .note__pages {
    display: grid;
    min-height: calc(var(--note-rule) * 3);
    background-image: linear-gradient(to bottom, transparent calc(var(--note-rule) - 1.5px), var(--note-rule-color) calc(var(--note-rule) - 1.5px), var(--note-rule-color) var(--note-rule));
    background-size: 100% var(--note-rule);
  }
  .note { translate: 0 calc(var(--note-offset, 0px) * var(--note-centred, 1)); }
  .note:has(.note__pages.is-fitted) { transition: translate 0.6s var(--ease-out); }
  .note__pages.is-fitted { transition: height 0.6s var(--ease-out); }
  .note__page {
    grid-area: 1 / 1;
    align-self: start; /* each note keeps its own height, so it can be measured */
    display: grid;
    align-content: start;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-out), visibility 0s linear 0.6s;
  }
  .note__page.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0.15s, 0.15s, 0s;
  }
  .note__text {
    font-family: var(--font-display);
    font-size: clamp(1.08rem, 1rem + 0.35vw, 1.28rem);
    font-weight: 500;
    line-height: var(--note-rule);
    color: var(--ink);
    white-space: pre-line;
  }
  .note__page .read-more { justify-self: start; line-height: var(--note-rule); }
  .note__by {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    line-height: var(--note-rule);
    font-size: var(--fs-small);
  }
  .note__by::before { content: "—"; color: var(--pink); }
  .note__name { font-weight: 600; color: var(--pink-strong); }
  .note__role { color: var(--ink-2); }

  /* ── Responsive ──────────────────────────────────────────────────────────── */
  /* Below 1200px the open side of the artwork is too narrow for the copy:
     the copy comes first, the artwork follows edge to edge with its clouds,
     and the facts panel rises into the artwork's foot. */
  @media (max-width: 1199px) {
    .hero { min-height: 0; align-items: start; padding-bottom: 0; }
    .hero__inner { padding-top: clamp(2rem, 1rem + 3vw, 3.5rem); padding-inline: var(--gutter); }
    .hero__copy { width: auto; max-width: 40rem; }
    .hero__title { font-size: var(--fs-display); }
    .hero__backdrop { position: relative; inset: auto; z-index: 0; grid-row: 2; aspect-ratio: 16 / 9; margin-top: var(--s-6); }
    .hero__backdrop::after { background: linear-gradient(to bottom, var(--bg), transparent 16%, transparent 72%, var(--bg)); }
    .hero__cloud { z-index: 1; }
    .hero__cloud--desk { bottom: calc(var(--hero-foot) * 0.35); }
    .hero__cloud--corner { bottom: calc(var(--hero-foot) * 0.75); }
    .hero__eyebrow { font-size: var(--fs-small); }
    /* The panel rises less here, so it never covers the laptop in the artwork. */
    .facts { --facts-rise: -0.72; }
  }
  @media (max-width: 640px) {
    /* A phone shows the people: a taller crop around the teacher and children. */
    .hero__backdrop { aspect-ratio: 5 / 4; }
    .hero__backdrop img { object-position: 10% 40%; }
    /* Small clouds in the two bottom corners, clear of the faces and the laptop. */
    .hero__cloud--desk { width: 32vw; left: -6vw; bottom: calc(var(--hero-foot) * 0.55); }
    .hero__cloud--corner { width: 30vw; right: -6vw; bottom: calc(var(--hero-foot) * 0.65); }
  }

  @media (max-width: 1080px) {
    .courses-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .courses-grid > * { grid-column: span 1 !important; }
    .courses-grid > :nth-child(7) { grid-column: 1 / -1 !important; }
    .testimonials__grid { grid-template-columns: minmax(0, 1fr); }
    /* Stacked under the intro: the paper sits right below it, not centred in its room. */
    .note-stage { --note-centred: 0; }
  }

  @media (max-width: 900px) {
    .features__grid { grid-template-columns: minmax(0, 1fr); }
    .features__intro { position: static; }
    .features__stage { display: none; }
    .feature__art { display: block; order: 3; width: 96px; flex: none; }
    .feature__art img { width: 100%; height: auto; }
  }

  @media (max-width: 640px) {
    .courses-grid { grid-template-columns: minmax(0, 1fr); }
    .courses-grid > :nth-child(7) { grid-column: auto !important; }
    .hero__actions .btn { flex: 1 1 100%; }
    .feature { padding: var(--s-5) var(--s-4); gap: var(--s-4); }
    .features__track { inset-inline-start: calc(var(--s-4) + 0.6rem); }
    .feature__art { width: 72px; }
    .note { --note-rule: 2.25rem; padding-inline: 1.25rem 3.4rem; rotate: -1deg; }
    .note::before { inset-inline-end: 1rem; --note-hole: 0.7rem; }
    .note__clip { width: 64px; top: -26px; inset-inline-end: 16px; }
    .note__flowers { width: 96px; top: -22px; inset-inline-start: -10px; }
    .note__hearts { width: 84px; bottom: -34px; inset-inline-end: -8px; }
  }

  /* ── Reduced motion: content appears in place, nothing drifts or cycles ── */
  @media (prefers-reduced-motion: reduce) {
    .hero__cloud, .note__hearts, .word-cycle__word, .word-cycle__swash { animation: none; transition: none; }
    .course-card, .teacher-card, .btn, .course-card__media img,
    .feature, .feature__node, .features__art, .note__page, .note__pages.is-fitted, .note { transition-duration: 0.01ms; }
  }
}