/* ==========================================================================
   11 Plus Blocks: the homepage's own sections
   ========================================================================== */

/* --- Hero extras ---------------------------------------------------------- */
.hero__microcopy {
  margin-top: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--ink-soft);
  max-width: 30rem;
}
.hero__secondary { margin-top: var(--space-xs); }
.hero__secondary a {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: var(--step-0);
}

/* --- Objection blocks -----------------------------------------------------
   Copy and evidence, side by side. The heading is a sentence a parent has
   actually said, which is why it is in quote marks and in their register. */
.objection {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .objection { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .objection--flip .objection__copy { order: 2; }
}
.objection h2 { font-size: var(--step-3); }
.objection__copy p:not(.lede):not(.eyebrow) { color: var(--ink-soft); }

/* --- Try a question -------------------------------------------------------
   One card that changes paper. The tab strip only appears once JavaScript has
   taken over; without it all four questions are simply stacked and readable. */
.demo {
  max-width: 44rem;
  margin-inline: auto;
}

.demo__tabs {
  display: none;                 /* revealed by .js, see below */
  gap: var(--space-3xs);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--space-m);
}
.js .demo__tabs { display: flex; }

.demo__tab {
  --course-accent: var(--purple);
  padding: 0.55em 1em;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-label);
  font-size: var(--step--1);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.demo__tab[data-course="maths"]      { --course-accent: var(--maths); }
.demo__tab[data-course="english"]    { --course-accent: var(--english); }
.demo__tab[data-course="verbal"]     { --course-accent: var(--verbal); }
.demo__tab[data-course="non-verbal"] { --course-accent: var(--non-verbal); }
.demo__tab:hover { color: var(--course-accent); border-color: var(--course-accent); }
.demo__tab[aria-selected="true"] {
  background: var(--course-accent);
  border-color: var(--course-accent);
  color: var(--on-accent);
}

.demo__panel {
  --course-accent: var(--purple);
  background: var(--ground);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: var(--space-m);
  box-shadow: var(--shadow-sm);
}
.demo__panel + .demo__panel { margin-top: var(--space-s); }
.js .demo__panel + .demo__panel { margin-top: 0; }
.demo__panel[data-course="maths"]      { --course-accent: var(--maths); }
.demo__panel[data-course="english"]    { --course-accent: var(--english); }
.demo__panel[data-course="verbal"]     { --course-accent: var(--verbal); }
.demo__panel[data-course="non-verbal"] { --course-accent: var(--non-verbal); }

.demo__paper {
  font-family: var(--font-label);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--course-accent);
  margin: 0 0 var(--space-2xs);
}
.js .demo__paper { display: none; }   /* the tab already says which paper */

.demo__prompt {
  font-size: var(--step-2);
  color: var(--deep);
  margin-bottom: var(--space-s);
}
.demo__prompt em { font-style: italic; color: var(--course-accent); }
.demo__prompt strong { color: var(--course-accent); }

.demo__figure {
  color: var(--course-accent);
  margin-bottom: var(--space-s);
  padding: var(--space-s);
  background: var(--surface);
  border-radius: var(--radius-row);
  border: 1px solid var(--hairline);
}
.demo__figure svg { width: 100%; height: auto; }
.nvr-sequence { opacity: 0.95; }

.demo__options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.demo__options li { margin: 0; }

.demo__option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.75em 0.9em;
  min-height: 52px;
  text-align: left;
  background: var(--surface);
  border: 2px solid var(--hairline);
  border-radius: var(--radius-row);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-spring);
}
.demo__option:hover:not([disabled]) {
  border-color: var(--course-accent);
  transform: translateY(-1px);
}
.demo__option[disabled] { cursor: default; }

.demo__letter {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--course-accent) 16%, transparent);
  color: var(--course-accent);
  font-family: var(--font-label);
  font-size: 0.85rem;
  font-weight: 700;
}

/* Verdict colours are the app's muted pair, not traffic lights. */
.demo__option.is-correct {
  border-color: var(--correct);
  background: color-mix(in srgb, var(--correct) 12%, var(--surface));
}
.demo__option.is-correct .demo__letter { background: var(--correct); color: var(--on-accent); }
.demo__option.is-wrong {
  border-color: var(--incorrect);
  background: color-mix(in srgb, var(--incorrect) 10%, var(--surface));
}
.demo__option.is-wrong .demo__letter { background: var(--incorrect); color: var(--on-accent); }
.demo__option.is-muted { opacity: 0.5; }

.demo__reveal {
  margin-top: var(--space-s);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.demo__reveal summary {
  cursor: pointer;
  font-family: var(--font-label);
  font-weight: 700;
  color: var(--course-accent);
}
.demo__reveal p { margin-top: var(--space-2xs); }
.js .demo__reveal { display: none; }

.demo__feedback {
  margin-top: var(--space-s);
  padding: var(--space-s);
  border-radius: var(--radius-row);
  background: var(--wash);
  border: 1px solid var(--hairline);
}
.demo__verdict {
  font-family: var(--font-label);
  font-weight: 700;
  margin: 0 0 0.25em;
}
.demo__verdict.is-correct { color: var(--correct); }
.demo__verdict.is-wrong { color: var(--incorrect); }
.demo__why { margin: 0; color: var(--ink-soft); font-size: var(--step-0); }

.demo__source {
  margin: var(--space-s) 0 0;
  font-size: 0.78rem;
  color: var(--ink-faint);
  font-family: var(--font-label);
}

/* --- Timeline -------------------------------------------------------------
   Where the reader is in the 11 Plus year. The "now" marker is computed in
   PHP, so it moves through the year on its own. */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  counter-reset: none;
}
.timeline__item {
  position: relative;
  margin: 0;
  padding: var(--space-s);
  padding-top: calc(var(--space-s) + 10px);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-row);
}
.timeline__item::before {
  content: "";
  position: absolute;
  top: 0; left: var(--space-s); right: var(--space-s);
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--hairline-2);
}
.timeline__item.is-past { opacity: 0.6; }
.timeline__item.is-past::before { background: var(--lilac); }
.timeline__item.is-now {
  border-color: var(--purple);
  box-shadow: var(--shadow-md);
}
.timeline__item.is-now::before { background: var(--purple); height: 6px; }

.timeline__when {
  display: block;
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--purple);
  margin-bottom: 0.2em;
}
.timeline h3 { font-size: var(--step-1); margin-bottom: 0.3em; }
.timeline p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }

/* --- Price card -----------------------------------------------------------
   Explains, never sells: the transaction happens inside the app, because a
   card payment on the web leaves no receipt the device can re-present. */
.price-card {
  max-width: 30rem;
  margin-inline: auto;
  text-align: center;
  padding: var(--space-l) var(--space-m);
  border-radius: var(--radius-tile);
  background:
    radial-gradient(130% 110% at 50% 0%, color-mix(in srgb, var(--purple) 14%, transparent), transparent 65%),
    var(--surface);
  border: 1px solid var(--hairline-2);
  box-shadow: var(--shadow-md);
}
.price-card__label {
  font-family: var(--font-label);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--purple);
  margin: 0;
}
.price-card__amount {
  font-family: var(--font-display);
  font-size: var(--step-6);
  font-weight: 600;
  color: var(--deep);
  line-height: 1;
  margin: 0.1em 0 0.15em;
}
.price-card__model {
  font-family: var(--font-label);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-m);
}
.price-card__list {
  list-style: none;
  margin: 0 0 var(--space-m);
  padding: 0;
  text-align: left;
  display: inline-block;
}
.price-card__list li {
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
  color: var(--ink-soft);
  font-size: var(--step-0);
  margin-bottom: 0.5em;
}
.price-card__list svg { color: var(--correct); flex: none; margin-top: 0.15em; }
.price-card__note {
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin-bottom: var(--space-m);
}

/* --- Friends -------------------------------------------------------------- */
.friends { text-align: center; }
.friends__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--deep);
  margin-bottom: var(--space-m);
}
.friends__row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.25rem);
  flex-wrap: wrap;
}
.friends__friend { margin: 0; text-align: center; }
.friends__art { display: grid; place-items: end center; min-height: 150px; }
.friends__art .blockie { height: auto; }
.friends__friend figcaption { margin-top: var(--space-2xs); }
.friends__name {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--course-accent);
}
.friends__paper {
  display: block;
  font-family: var(--font-label);
  font-size: 0.72rem;
  color: var(--ink-faint);
}
.friends__note {
  margin-top: var(--space-m);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.blockie.is-locked { opacity: 0.75; }

/* --- Progress preview ----------------------------------------------------- */
.progress-preview__stats { margin-bottom: var(--space-m); }
.progress-preview__heading {
  font-family: var(--font-label);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  margin-bottom: var(--space-s);
}
.progress-preview__tower {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2xs);
  align-items: end;
}
.progress-preview__column { text-align: center; }
.progress-preview__column .tower__stack {
  align-items: center;
  margin-bottom: var(--space-2xs);
}
.progress-preview__column .tower__block { width: 100%; max-width: 42px; }
.progress-preview__label {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--course-accent);
  margin: 0;
}
.progress-preview__count {
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin: 0;
}
.progress-preview__note {
  margin-top: var(--space-m);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* ==========================================================================
   The app, rebuilt in HTML inside the phone frame
   --------------------------------------------------------------------------
   The question screen, mid-answer. Same palette, type, radii and components as
   the real thing, scaled by one custom property so the whole screen shrinks
   together instead of every element needing its own breakpoint.
   ========================================================================== */
.appui {
  --appui-scale: 0.78;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  font-size: calc(1rem * var(--appui-scale));
  overflow: hidden;
  position: relative;
}

/* The accent comes from [data-course] on the same element. Setting it in the
   .appui rule as well loses: equal specificity, and this file loads after
   components.css, so the hard-coded value won and every screen rendered in
   Maths purple. This is the fallback for a frame with no course at all. */
.appui:not([data-course]) { --course-accent: var(--purple); }

/* --- Status bar ----------------------------------------------------------- */
.appui__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5em 1.5em 0.2em;
  font-family: var(--font-label);
  font-size: 0.78em;
  font-weight: 700;
  color: var(--ink);
  flex: none;
}
.appui__status-icons { display: inline-flex; gap: 0.35em; align-items: center; color: var(--ink); }
.appui__status-icons svg { height: 0.72em; width: auto; fill: currentColor; }

/* --- Navigation bar ------------------------------------------------------- */
.appui__nav {
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5em 0.9em 0.4em;
  flex: none;
}
.appui__back { color: var(--course-accent); display: grid; place-items: center; }
.appui__back svg { width: 1.15em; height: 1.15em; }
.appui__nav-title {
  font-family: var(--font-display);
  font-size: 1.02em;
  font-weight: 600;
  color: var(--course-accent);
}
.appui__chips { margin-left: auto; display: inline-flex; gap: 0.3em; }
.appui__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  padding: 0.2em 0.5em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--course-accent) 16%, transparent);
  color: var(--course-accent);
  font-family: var(--font-label);
  font-size: 0.72em;
  font-weight: 700;
}
.appui__chip svg { width: 0.95em; height: 0.95em; }

/* --- Progress ------------------------------------------------------------- */
.appui__progress {
  height: 4px;
  margin: 0 1em 0.9em;
  border-radius: 2px;
  background: var(--wash-strong);
  overflow: hidden;
  flex: none;
}
.appui__progress span { display: block; height: 100%; background: var(--course-accent); border-radius: 2px; }

/* --- The question --------------------------------------------------------- */
.appui__body {
  padding: 0 1em 4.2em;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.appui__question {
  font-family: var(--font-display);
  font-size: 1.18em;
  font-weight: 600;
  line-height: 1.3;
  color: var(--deep);
  margin: 0 0 0.85em;
}
.appui__question strong { color: var(--course-accent); font-weight: 600; }

/* The revealed answer. In the app this unfolds downward from under the
   question, anchored to its own top edge: a move transition would slide it in
   from the top of the scrolling column, travelling across the question to get
   to where a child is already looking. */
.appui__reveal {
  padding: 0.7em;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  margin-bottom: 0.8em;
}
.appui__answer-text {
  margin: 0 0 0.55em;
  font-size: 1em;
  font-weight: 700;
  color: var(--ink);
}

.appui__tip {
  padding: 0.6em 0.7em;
  border-radius: 11px;
  background: color-mix(in srgb, var(--course-accent) 9%, transparent);
}
.appui__tip-head {
  font-family: var(--font-label);
  font-size: 0.68em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--course-accent);
  margin: 0 0 0.2em;
}
.appui__tip p:last-child {
  margin: 0;
  font-size: 0.84em;
  line-height: 1.45;
  color: var(--ink);
}

/* The pager, at the foot of the screen and clearing the floating menu the way
   the app pads by Brand.Metrics.menuClearance. */
.appui__pager {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
}
.appui__pager-btn {
  width: 2.2em; height: 2.2em;
  display: grid; place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--course-accent) 14%, transparent);
  color: var(--course-accent);
}
.appui__pager-btn.is-off { opacity: 0.3; }
.appui__pager-btn svg { width: 1.05em; height: 1.05em; }
.appui__pager-count {
  font-family: var(--font-label);
  font-size: 0.76em;
  font-weight: 700;
  color: var(--ink-faint);
}

/* The block award, over the progress bar rather than over the question. */
.appui__award {
  position: absolute;
  top: 6.2em;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  background: var(--course-accent);
  color: var(--on-accent);
  font-family: var(--font-label);
  font-size: 0.76em;
  font-weight: 700;
  box-shadow: var(--shadow-md);
}
.appui__award svg { width: 1em; height: 1em; }


/* --- Floating menu -------------------------------------------------------- */
.appui__menu {
  position: absolute;
  left: 50%;
  bottom: 1em;
  transform: translateX(-50%);
  display: flex;
  gap: 0.45em;
  padding: 0.45em 0.7em;
  border-radius: 999px;
}
.appui__menu-item {
  width: 1.95em; height: 1.95em;
  display: grid; place-items: center;
  border-radius: 999px;
  color: var(--ink-soft);
}
.appui__menu-item svg { width: 1.12em; height: 1.12em; }
.appui__menu-item.is-on { background: var(--course-accent); color: var(--on-accent); }


/* ==========================================================================
   The other three phone screens
   --------------------------------------------------------------------------
   home, topics and progress, so a reader moving between pages sees the app
   change rather than the same picture four times. Each is drawn from the real
   screen; see the header of includes/app-preview.php for which is which.
   ========================================================================== */

/* A body with its own internal padding, for the screens that are lists rather
   than a single question. */
.appui__body--flush { padding: 0 0.8em; overflow: hidden; }

.appui__masthead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.5em 0 0.7em;
  font-family: var(--font-display);
  font-size: 1.05em;
  font-weight: 600;
  color: var(--deep);
  flex: none;
}
.appui__masthead img { width: 1.3em; height: 1.3em; }

/* --- Home: the daily card ------------------------------------------------- */
.appui__daily {
  display: flex;
  gap: 0.6em;
  align-items: center;
  padding: 0.7em;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  margin-bottom: 0.8em;
}
.appui__mascot { flex: none; width: 2.9em; }
.appui__mascot .blockie { width: 100%; height: auto; }
.appui__daily-copy { flex: 1; min-width: 0; }

.appui__hello {
  font-family: var(--font-label);
  font-size: 0.68em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin: 0;
}
.appui__goal {
  font-family: var(--font-display);
  font-size: 0.98em;
  font-weight: 600;
  color: var(--deep);
  margin: 0.1em 0 0.4em;
  line-height: 1.2;
}

/* Segmented, so it reads as blocks being laid rather than a bar filling. */
.appui__segments { display: flex; gap: 2px; margin-bottom: 0.5em; }
.appui__segment { flex: 1; height: 6px; border-radius: 2px; background: var(--wash-strong); }
.appui__segment.is-done { background: var(--purple); }

.appui__stats { display: flex; gap: 0.7em; margin: 0; flex-wrap: wrap; }
.appui__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.22em;
  font-family: var(--font-label);
  font-size: 0.7em;
  font-weight: 700;
  color: var(--ink-soft);
}
.appui__stat svg { width: 1em; height: 1em; color: var(--purple); }

.appui__heading {
  font-family: var(--font-label);
  font-size: 0.68em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  margin: 0 0 0.45em;
}

/* --- Home: the course tiles ----------------------------------------------- */
.appui__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45em; }
.appui__tile {
  --course-accent: var(--purple);
  padding: 0.5em;
  border-radius: 13px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--course-accent) 10%, transparent),
      color-mix(in srgb, var(--course-accent) 4%, transparent)),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--course-accent) 20%, transparent);
}
.appui__tile-scene {
  height: 2.8em;
  color: var(--course-accent);
  display: grid;
  place-items: center;
  margin-bottom: 0.25em;
}
.appui__tile-scene svg {
  width: 100%; height: 100%;
  stroke: var(--course-accent);
  stroke-width: 2.2;
}
.appui__tile-scene svg * { vector-effect: non-scaling-stroke; }
.appui__tile-name {
  font-family: var(--font-display);
  font-size: 0.76em;
  font-weight: 600;
  color: var(--course-accent);
  margin: 0;
  line-height: 1.15;
}

/* --- Topics: difficulty, categories, rows ---------------------------------- */
.appui__toggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: var(--wash-strong);
  margin-bottom: 0.8em;
}
.appui__toggle span {
  flex: 1;
  text-align: center;
  padding: 0.3em 0;
  border-radius: 999px;
  font-family: var(--font-label);
  font-size: 0.72em;
  font-weight: 700;
  color: var(--ink-soft);
}
.appui__toggle span.is-on { background: var(--course-accent); color: var(--on-accent); }

/* The category heading takes the course colour. Grey headings were a big part
   of why the course accent never registered in the app. */
.appui__category {
  font-family: var(--font-label);
  font-size: 0.66em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--course-accent);
  margin: 0 0 0.35em;
}

.appui__rows { display: grid; gap: 0.3em; margin-bottom: 0.75em; }
.appui__row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45em 0.6em 0.45em 0;
  border-radius: 11px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* A solid leading edge in the course colour, not another faint wash. */
.appui__row-edge {
  width: 4px;
  align-self: stretch;
  background: var(--course-accent);
  flex: none;
}
.appui__row-name {
  flex: 1;
  min-width: 0;
  font-size: 0.78em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.appui__row-count {
  font-family: var(--font-label);
  font-size: 0.68em;
  font-weight: 700;
  padding: 0.12em 0.5em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--course-accent) 20%, transparent);
  color: var(--course-accent);
}
.appui__row.is-done .appui__row-count {
  background: var(--course-accent);
  color: var(--on-accent);
}

/* --- Progress: friends and the tower --------------------------------------- */
.appui__friends {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.25em;
  padding: 0.7em 0.6em 0.5em;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.appui__friend { display: block; flex: 1; }
.appui__friend .blockie { width: 100%; height: auto; }
.appui__friends-note {
  text-align: center;
  font-family: var(--font-label);
  font-size: 0.7em;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 0.5em 0 0.9em;
}

/* Course-coloured, so the tower shows WHAT was learned rather than only how
   much. Three weeks of maths and no English is legible at a glance. */
.appui__tower { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35em; align-items: end; }
.appui__tower-col { text-align: center; }
.appui__tower-stack {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  margin-bottom: 0.3em;
}
.appui__brick {
  height: 0.55em;
  border-radius: 3px;
  background: var(--course-accent);
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.12), inset 0 1px 0 rgb(255 255 255 / 0.22);
}
.appui__brick.is-empty {
  background: color-mix(in srgb, var(--course-accent) 9%, transparent);
  box-shadow: none;
}
.appui__tower-label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.62em;
  font-weight: 700;
  color: var(--course-accent);
}
.appui__tower-count { display: block; font-size: 0.6em; color: var(--ink-faint); }

/* --- Blockie beside the phone --------------------------------------------- */
.hero__art { position: relative; }
.hero__mascot {
  position: absolute;
  left: 2%;
  bottom: 6%;
  z-index: 2;                 /* in front of the phone, not sliced by it */
  width: clamp(66px, 8.5vw, 92px);
  filter: drop-shadow(0 10px 24px rgb(78 51 119 / 0.22));
  animation: blockie-bob 4.5s var(--ease-out) infinite;
}
.hero__mascot .blockie { width: 100%; height: auto; }

/* The app's own note: a repeatForever animation adopts any layout change the
   parent makes, so it is kept to transform on an absolutely positioned element
   with nothing else moving it. */
@keyframes blockie-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__mascot { animation: none; }
}

@media (max-width: 900px) {
  .hero__mascot { left: 2%; width: 62px; }
}
@media (max-width: 560px) {
  .appui { --appui-scale: 0.68; }
  .hero__mascot { display: none; }
}