/* Sideways-scroll containment now lives on `html` in global.css, which covers
   every page rather than the seven that happened to be listed here. */

/* This hero carries the most copy of any page, so it still runs ~36px past
   the shared 720px in the 1200-1399 band, just after the fluid height in
   components.css has handed back to the fixed one. Only that band needs it —
   below 1200 the shared rule already applies, and by 1400 the column is wide
   enough for the copy to fit. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .page-live-lessons .hero { height: auto; min-height: var(--hero-min); }
}


.page-home .hero h1 .hero-line2 { white-space: nowrap; }


.page-home .role-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}


/* The collage below is deliberately wider than its column and is nudged left,
   so it reaches past the container. At 1440 that lands inside the viewport;
   at 1200 it ran 56px past and the page scrolled. Clipping here keeps the
   breakout without letting it extend the document. `clip` rather than
   `hidden` so the section does not become a scroll container. */
.page-home .smarter {
  padding: 88px 0 104px;
  overflow-x: clip;

  @media (max-width: 991.98px) {
    padding: var(--section-y) 0;
  }
}
.page-home .smarter .shot-b { top: 59.27%; }
.page-home .smarter .shot-c { top: 59.27%; }
/* The collage breaks out of the panel top and bottom. Negative margins
   shrink its layout box while the image keeps its real height, so it
   overhangs by exactly this much — the text column (314px) is shorter, so
   the stack still sets the panel height and the overhang stays even. */
@media (min-width: 992px) {
  .page-home .smarter .shot-stack {
    margin-top: -88px;
    margin-bottom: -88px;
    z-index: var(--z-base);
  }
  /* Scaled past the column so the art is taller than the panel, then nudged up
   so the overhang reads the same top and bottom — the collage is
   bottom-heavy, so centring it alone would hang far lower than it rises. */
  .page-home .smarter .shot-stack {
    width: 704px;
    max-width: none;
    top: -34px;
    left: -60px;
  }
}


.page-home .understand .section-head { margin-bottom: 40px; }

.page-home .trial h2 { margin-bottom: 10px; }

.page-home .trial h2 .accent {
  background: linear-gradient(95deg, #9589dd 0%, #91bed5 52%, #ace5d0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #9589dd;
}


/* The photo-and-facts teacher rows on their own backdrop. Shared by home,
   videos and the tuition landing, which carry the same rows. `contain` +
   `center bottom` keeps the artwork sitting under the rows rather than
   filling behind them. */
.page-home .teachers,
.page-videos .teachers,
.page-science-tuition .teachers,
.page-live-lessons .teachers { position: relative; overflow: hidden; background: var(--white); }
.page-home .teachers-bg,
.page-videos .teachers-bg,
.page-science-tuition .teachers-bg,
.page-live-lessons .teachers-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.page-home .teachers-bg img,
.page-videos .teachers-bg img,
.page-science-tuition .teachers-bg img,
.page-live-lessons .teachers-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.page-home .teachers > .container,
.page-videos .teachers > .container,
.page-science-tuition .teachers > .container,
.page-live-lessons .teachers > .container { position: relative; z-index: 1; }
.page-home .teacher,
.page-videos .teacher,
.page-science-tuition .teacher,
.page-live-lessons .teacher { margin: 0 auto 50px; width: 80%; }

.page-home .teachers,
.page-science-tuition .teachers,
.page-live-lessons .teachers {
  padding: 60px 0 90px;

  @media (max-width: 991.98px) {
    padding: var(--section-y) 0;
  }
}


/* The panel and the feature cards are one section. The gap between them
   matches the g-4 gutter between the cards themselves, so the whole block
   reads as one evenly-spaced group rather than two stacked sections. */


.page-home .pricing,
.page-parents .pricing {
  position: relative;
  padding: 80px 0 104px;

  @media (max-width: 991.98px) {
    padding: var(--section-y) 0;
  }
}

.page-home .pricing,
.page-parents .pricing { --soft-fade: 500px; }
.page-home .pricing-head,
.page-home .pricing-head p { position: relative; z-index: 1; }

.page-home .pricing > .container {
  position: relative;
  z-index: 1;
}


.page-home .accent-teal-text,
.page-science-tuition .accent-teal-text   { color: var(--teal);-webkit-text-fill-color: unset; }
.page-home .accent-purple-text,
.page-science-tuition .accent-purple-text { color: var(--purple);-webkit-text-fill-color: unset; }

@media (max-width: 991.98px) {
  .page-home .hero-media { margin-top: 10px; }
  /* Below lg only two 320px pills fit a row, so stack them rather than leave
   the third orphaned on its own line. */
  .page-home .role-row { flex-direction: column; align-items: center; }
  .page-home .teacher,
  .page-videos .teacher { width: 100%; }
  .excel-devices { margin-top: 26px; }
  .excel-devices > img { max-width: 560px; }
}
@media (max-width: 575.98px) {
  .page-home .hero h1 { font-size: 28px; }
  .page-home .hero h1 .hero-line2 { white-space: normal; }
}


.page-parents .hero::before {
  content: "";
  position: absolute;
  top: -30%;
  left: 4%;
  width: 1040px;
  height: 1040px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 42%, rgba(var(--white-rgb), .45), rgba(200,230,245,.10) 55%, transparent 68%);
  pointer-events: none;
}
.page-parents .hero h1 .accent-teal-text   { color: var(--teal); }
.page-parents .hero h1 .accent-purple-text { color: var(--purple); }

.page-parents .shot-a {
  top: 50%;
  left: 2%;
  width: 35%;
  z-index: 4;
}
.page-parents .shot-b {
  top: 13%;
  left: 52%;
  width: 30%;
  z-index: 3;
}
.page-parents .shot-c {
  top: 50%;
  left: 40%;
  width: 54%;
  z-index: 2;
}
.page-parents .shot-d {
  top: 0%;
  left: -1%;
  width: 50%;
  z-index: 1;
}


/* No tinted card of its own: the section now sits in a .panel-mint, and a
   second gradient card inside it read as a box within a box. The collage
   just sits on the panel, as home's .smarter collage does. */
.page-parents .gets-media { padding: 0; }

/* Pointer-parallax depths. The homework list is the backdrop so it barely
   moves; the stat tiles float above it and travel further, which is what
   separates the two planes. Without a --depth every layer would move by the
   same amount and the collage would just slide as one block. */
.page-parents .gets-hw { --depth: .35; }
.page-parents .gets-media .stat-tile { --depth: 1; }
.page-parents .gets-media .stat-tile:nth-child(2) { --depth: 1.25; }
.page-parents .gets-media .stat-tile:nth-child(3) { --depth: .85; }
.page-parents .gets-media .stat-tile:nth-child(4) { --depth: 1.35; }
.page-parents .gets-media .stat-tile:nth-child(5) { --depth: .95; }

.page-parents .stat-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 16px 16px;
  box-shadow: var(--shadow-sm);
}
.page-parents .stat-tile img { width: auto; max-width: 100%; display: block; }
.page-parents .stats-sm .stat-tile img { height: 30px; }
.page-parents .stats-sm .stat-tile:last-child img { height: 34px; }
.page-parents .stats-lg .stat-tile { padding: 16px 22px; }
.page-parents .stats-lg .stat-tile img { height: 30px; }
.page-parents .gets-hw { border-radius: 14px; overflow: hidden; }
.page-parents .gets-hw img { width: 100%; height: auto; display: block; border-radius: 14px; }
/* The .gets-content wrapper went when the section moved onto the shared
   panel; the spacing it carried is kept, scoped to the section instead. */
.page-parents .gets .eyebrow { margin-bottom: 12px; }
.page-parents .gets h2 { margin-bottom: 26px; }
.page-parents .gets-checks li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  color: var(--body);
  font-size: var(--text-md);
}
.page-parents .gets-checks img.tick { width: 20px; height: 20px; margin-top: 3px; flex: 0 0 auto; }


.page-parents .feature-banner img { -webkit-filter: brightness(.78) saturate(1.55) contrast(1.08); filter: brightness(.78) saturate(1.55) contrast(1.08); }


.page-parents .pain-icon { height: 180px; min-height: 180px; align-self: flex-start; }


.page-parents .price-desc { text-align: left; }
.page-parents .price-includes { font-size: min(16px, calc((100cqi - 24px) / 24)); }
.page-parents .price-best { padding-left: 0; }
.page-parents .price-best span { font-size: 12px; }


@media (max-width: 991.98px) {
  .page-parents .hero-content { padding-bottom: 20px; max-width: 620px; }
  .page-parents .shot-stack { margin-top: 0; }
}
@media (max-width: 575.98px) {
  .page-parents .hero h1 { font-size: 28px; }
  .page-parents .stat-tile { padding: 10px 12px; }
  .page-parents .stats-sm .stat-tile img { height: 24px; }
  .page-parents .stats-sm .stat-tile:last-child img { height: 27px; }
  .page-parents .stats-lg .stat-tile { padding: 12px 16px; }
  .page-parents .stats-lg .stat-tile img { height: 34px; }
}


.page-schools .trial-brain { --trial-brain-w: 140px; }


.page-schools { overflow-x: clip; }

.page-schools .hero-shot {
  position: absolute;
  z-index: 1;
  display: block;
  height: auto;
  border-radius: 10px;
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.page-schools .hero-shot-year     { top: -8%; left: 2.5%; width: 80%; }
.page-schools .hero-shot-students { top: 45%; left: 0;    width: 67%;   z-index: 2; }

.page-schools .hero-shot-quiz     { top: 31%; left: 68%;  width: 31.5%; z-index: 3; }


.page-schools .testimonial-card {
  position: relative;
  overflow: clip;
  max-width: 1004px;
  margin: 0 auto;
  padding: 56px;
  border-radius: var(--radius-2xl);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-frame);
}
.page-schools .testimonial-card::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: var(--grad-panel);
  opacity: .28;
  filter: blur(70px);
  pointer-events: none;
}
.page-schools .testimonial-card .row { position: relative; z-index: 1; }
.page-schools .testimonial-eyebrow {
  display: inline-block;
  margin: 0 0 20px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: rgba(var(--navy-rgb), .07);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--purple-dark);
}
.page-schools .testimonial-title {
  margin: 0 0 20px;
  font-size: clamp(30px, 4vw, var(--text-5xl));
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.page-schools .testimonial-desc {
  margin: 0 0 28px;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--body);
  max-width: 520px;
}
.page-schools .testimonial-quote {
  position: relative;
  margin: 0 0 32px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, #eef0fb 0%, #ecf8f6 100%);
  max-width: 520px;
}
.page-schools .testimonial-quote blockquote { margin: 0 0 14px; }
.page-schools .testimonial-quote blockquote p {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--navy);
  text-align: justify;
  text-align-last: left;
}
.page-schools .testimonial-quote figcaption { display: flex; flex-direction: column; gap: 2px; }
.page-schools .testimonial-quote figcaption strong { font-weight: var(--weight-semibold); color: var(--purple-dark); }
.page-schools .testimonial-quote figcaption span { font-size: var(--text-sm); color: var(--muted); }

.page-schools .testimonial-media {
  position: relative;
  max-width: 400px;
  margin-left: auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--navy-dark);
  box-shadow: var(--shadow-lg);
}
.page-schools .testimonial-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-schools .testimonial-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: linear-gradient(180deg, rgba(var(--black-rgb), 0) 55%, rgba(var(--black-rgb), .25) 100%);
  cursor: pointer;
}
.page-schools .testimonial-play i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  padding-left: 4px;
  border-radius: 50%;
  border: 2px solid rgba(var(--white-rgb), .9);
  background: rgba(var(--white-rgb), .18);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  color: var(--white);
  font-size: 40px;
  transition: transform var(--duration-base) var(--ease);
}
.page-schools .testimonial-play:hover i,
.page-schools .testimonial-play:focus-visible i { transform: scale(1.08); }
.page-schools .testimonial-media.is-playing .testimonial-play { display: none; }
@media (min-width: 992px) {
  .page-schools .testimonial-video-col { position: relative; align-self: stretch; flex: 0 0 auto; width: 361px; }
  .page-schools .testimonial-media {
    position: absolute;
    top: 0;
    left: calc(50% - var(--bs-gutter-x) * .5 + 28px);
    height: calc(100% - 42px);
    width: auto;
    max-width: none;
    margin: 0;
    translate: -50% 0;
  }
}
@media (min-width: 1200px) {
  .page-schools .testimonial-media { left: calc(50% - var(--bs-gutter-x) * .5 + 23px); }
}


.page-schools .needs { padding-top: 40px; }

/* The LeadConnector widget draws its own 1px-bordered card inside the
   iframe, padded top/bottom by an amount that depends on the layout it
   picks from the iframe width (two-column needs ~982px+). Negative margins
   push that border and padding outside .book-embed, whose overflow clips
   them, so only our card shows. The card's min-height is set by the inline
   script in schools.blade.php so switching widget steps doesn't resize it. */
.page-schools .book-widget {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.page-schools .book-embed {
  overflow: hidden;
}
.page-schools .book-embed iframe {
  display: block;
  width: calc(100% + 4px);
  height: 700px;
  margin: -2px -2px -2px;
}
@media (min-width: 992px) {
  .page-schools .book-embed iframe { margin: -18px -2px -18px; }
}
@media (min-width: 1200px) {
  .page-schools .book-embed iframe { margin: -66px -2px -23px; }
}
.page-schools .dept-note {
  margin: 16px 0 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #46467f;
}


.glass {
  background: var(--grad-glass);
  border: 2px solid var(--white);
  border-radius: var(--radius-2xl);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.page-schools .feat { padding: 36px 40px 40px; }
.page-schools .feat-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.page-schools .feat-ico {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 14px;
  background: rgba(var(--white-rgb), .55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--purple-dark);
  font-size: 28px;
}
.page-schools .feat-head h3 { margin: 0 0 2px; font-size: var(--text-2xl); font-weight: var(--weight-bold); }
.page-schools .feat-head p { margin: 0; font-size: 14px; color: #4c4c85; }
.page-schools .feat-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: 14.5px;
  color: var(--navy);
  line-height: 1.4;
  margin-bottom: 16px;
}
.page-schools .feat-list img.tick { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.page-schools .feat .btn-outline-brand {
  border-color: rgba(var(--navy-rgb), .35);
  background: rgba(var(--white-rgb), .35);
  color: var(--navy);
}

.page-schools .mini-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 24px 16px;
  height: 100%;
}
.page-schools .mini-ico {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 14px;
  background: rgba(var(--white-rgb), .55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--purple-dark);
  font-size: 28px;
}
.page-schools .mini-ico img { width: 100%; height: 100%; object-fit: contain; }
.page-schools .mini-card p { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--navy); line-height: 1.4; }

@media (min-width: 992px) {
  /* Stretch the student card to the teacher + badges column, without
     growing the teacher card itself (height: 100% on both .feat did that). */
  .page-schools .dept .row.g-4 > [class*="col-"] { display: flex; flex-direction: column; }
  .page-schools .dept .row.g-4 > [class*="col-"]:first-child .feat { flex: 1 1 auto; }
}


.page-schools .enquiry-captcha { margin-bottom: 8px; transform: scale(.9); transform-origin: left top; }
.page-schools .enquiry-err { color: #b3261e; font-size: var(--text-sm); margin-top: 6px; }
.page-schools .enquiry-success {
  margin-top: 16px;
  padding: 16px 16px;
  border-radius: var(--radius-md);
  background: rgba(215, 238, 255, .85);
  color: #24507a;
  font-size: 14px;
}


.text-grad-cool {
  background: var(--grad-cool);
  -webkit-background-clip: text;
          background-clip: text;
  color: var(--purple);
  -webkit-text-fill-color: transparent;
}

@media (max-width: 991.98px) {
  .page-schools .hero-content { max-width: none; }

  .page-schools .testimonial-card { padding: 34px; }
  .page-schools .testimonial-media { margin: 0 auto; max-width: 340px; }
  .page-schools .book-widget { max-width: 560px; }
}
@media (max-width: 767.98px) {
  .page-schools .hero-shot { position: static; width: 100% !important; }

  /* shot-c is left:64% + width:40% = 104%; the overhang the container absorbs
     on desktop has nowhere to go once the stack is the full viewport. */
  .page-schools .shot-stack .shot-c { left: 60%; width: 40%; }
}
@media (max-width: 575.98px) {
  .page-schools .testimonial-card { padding: 24px 20px; }
  .page-schools .testimonial-quote { padding: 20px; }
  .page-schools .testimonial-quote blockquote p { text-align: left; }
}

.page-tutors .trial-brain { --trial-brain-w: 150px; }


.page-tutors { overflow-x: clip; }


/* Top-anchored rather than centred: the H1 starts level with the top edge of */
.page-tutors .hero h1 span { display: block; }

.page-tutors .hero-shot {
  position: absolute;
  z-index: 1;
  display: block;
  height: auto;

  border-radius: 0;
  background: var(--white);
  box-shadow: var(--shadow-md);
}
.page-tutors .hero-shot-data  { top: 9.5%; left: 3.5%; width: 48%; }

.page-tutors .hero-shot-video { top: 42%;  left: 44%;  width: 56%; }


/* The stat cards are .shot members now, so position/background/shadow come
   from that; this only adds the row layout and the tighter padding. */
.page-tutors .fcard {
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  box-shadow: var(--shadow-md);
  padding: 10px 15px 10px 11px;
  white-space: nowrap;
}
.page-tutors .fcard-ico {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: var(--text-md);
}
.page-tutors .fcard-num { font-size: 17px; font-weight: var(--weight-bold); line-height: 1.15; color: var(--navy); }
.page-tutors .fcard-label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--body); line-height: 1.2; }

/* `width` resets the generic .shot-c/.shot-d sizes — these cards size to
   their own content. Depths vary so they do not drift as one block. */
.page-tutors .fcard-quizzes {
  top: 2%;
  left: 40%;
  width: auto;
  --depth: 1.2;
}
.page-tutors .fcard-homework {
  top: 30%;
  left: 66%;
  width: auto;
  --depth: 1.35;
}
.page-tutors .fcard-minutes {
  top: 18%;
  left: -22%;
  width: auto;
  --depth: 1.1;
}
.page-tutors .fcard-questions {
  top: 42%;
  left: -12%;
  width: auto;
  --depth: 1.45;
}
.page-tutors .fcard-independent {
  top: 58%;
  left: 60%;
  width: auto;
  --depth: 1.25;
}

.page-tutors .fcard-quizzes     .fcard-ico { background: #dceafb; color: #5b8fd6; }
.page-tutors .fcard-homework    .fcard-ico { background: #d8f3ec; color: #3bb59e; }
.page-tutors .fcard-minutes     .fcard-ico { background: #e6e2f8; color: #8477d6; }
.page-tutors .fcard-questions   .fcard-ico { background: #fdecd4; color: #dda04a; }
.page-tutors .fcard-independent .fcard-ico { background: #fbdfdf; color: #e07d7d; }


.page-tutors .trust { margin-top: -40px; position: relative; z-index: 3; }
.page-tutors .trust-inner {
  margin: 0 auto;
  padding: 24px;
  border-radius: var(--radius-2xl);
  background: linear-gradient(120deg, #d6efe9 0%, #f1f8f8 48%, #d7f0ea 100%);
}
.page-tutors .trust-item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 6px 32px;
  position: relative;
  height: 100%;
}

.page-tutors .trust-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: rgba(var(--navy-rgb), .12);
}
.page-tutors .col:first-child .trust-item::before { display: none; }
.page-tutors .trust-ico {
  width: 104px;
  height: 104px;
	padding: 8px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(var(--white-rgb), .9) 0%, rgba(var(--white-rgb), .35) 70%, rgba(var(--white-rgb), 0) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-tutors .trust-ico img { width: 100%; height: 100%; object-fit: contain; }
.page-tutors .trust-item h3 { margin: 0 0 4px; font-size: var(--text-lg); font-weight: var(--weight-bold); }
.page-tutors .trust-item p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--body); }


.page-tutors .flow { position: relative; overflow-x: clip; }

.page-tutors .flow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #e7e3f7 0%, #dfe6f6 34%, #d2ecf4 60%, rgba(234,246,249,0) 82%);
  z-index: 0;
  pointer-events: none;
}
.page-tutors .flow > .container,
.page-tutors .flow > .container-fluid { 
	position: relative; z-index: 1;
}


.page-tutors .dept-cta { text-align: center; margin-bottom: 54px; }

.page-tutors .features-card { padding: 24px; height: 100%; }
.page-tutors .features-head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.page-tutors .features-ico { 
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 14px;
  background: rgba(var(--white-rgb), .55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--purple-dark);
  font-size: 28px;
 }
.page-tutors .features-ico img { width: 100%; height: 100%; object-fit: contain; }
.page-tutors .features-head h3 { margin: 0 0 2px; font-size: 26px; font-weight: var(--weight-bold); }
.page-tutors .features-head p { margin: 0; font-size: var(--text-base); color: #4c4c85; }
.page-tutors .features-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: var(--text-base);
  color: var(--navy);
  margin-bottom: 2px;
}
.page-tutors .features-list img.tick { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.page-tutors .features-card .btn-outline-brand {
  border-color: rgba(var(--navy-rgb), .35);
  background: rgba(var(--white-rgb), .35);
  color: var(--navy);
}

.page-tutors .mini-card { display: flex; align-items: center; gap: 18px; padding: 24px; height: 100%; }
.page-tutors .mini-ico { 
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 14px;
  background: rgba(var(--white-rgb), .55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--purple-dark);
  font-size: 28px;
 }
.page-tutors .mini-ico img { width: 100%; height: 100%; object-fit: contain; }
.page-tutors .mini-card p { margin: 0; font-size: 17px; font-weight: var(--weight-semibold); color: var(--navy); line-height: 1.4; }

@media (min-width: 992px) {
  /* The student card is the tall side; stretch the three badges so the
     column bottoms line up. Below lg they stack and this does not apply. */
  .page-tutors .dept .col-lg-8,
  .page-tutors .dept .col-lg-4 { display: flex; flex-direction: column; }
  .page-tutors .dept .features-card { flex: 1 1 auto; }
  .page-tutors .dept .col-lg-4 > .row {
    flex: 1 1 auto;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .page-tutors .dept .col-lg-4 > .row > [class*="col"] {
    flex: 1 1 0;
    width: 100%;
    max-width: 100%;
  }
}


@media (max-width: 1199.98px) {
}
@media (max-width: 991.98px) {
  .page-tutors .hero-content { max-width: none; margin-top: 0; }
  /* Between md and lg the container is too narrow to absorb the two cards'
     negative left offsets, so the leftmost was sliced by the viewport. */
  .page-tutors .fcard-minutes   { left: -12%; }
  .page-tutors .fcard-questions { left: -6%; }
  .page-tutors .fcard { padding: 9px 13px 9px 10px; gap: 9px; }
  .page-tutors .fcard-ico { width: 28px; height: 28px; }
  .page-tutors .fcard-num { font-size: var(--text-md); }
  .page-tutors .fcard-label { font-size: 10.5px; }
}
@media (max-width: 767.98px) {
  /* The collage is kept, not dismantled. Stacking the stat cards into a flex
     column used to break it two ways: the cards overflowed .shot-stack's
     aspect-ratio box (five 62px cards in a 342px stack), and the two
     screenshots stayed absolutely positioned, so they sat *behind* the list
     with only slivers showing. The composition scales down perfectly well —
     it is intact at 900px — so it just needs the cards sized for the narrower
     stack. `em` keeps every part in proportion to the shrinking font. */
  .page-tutors .fcard {
    padding: .5em .7em .5em .55em;
    gap: .5em;
    font-size: 8.5px;
    border-radius: 10px;
  }
  .page-tutors .fcard-ico { width: 2.4em; height: 2.4em; border-radius: .7em; font-size: 1.35em; }
  .page-tutors .fcard-num { font-size: 1.55em; }
  .page-tutors .fcard-label { font-size: 1em; }

  /* Two cards hang off the left of the stack by design (-22% and -12%), which
     the container absorbs on desktop. At this width there is no room outside
     the stack, so they were sliced by the viewport edge — bring them in. */
  .page-tutors .fcard-minutes   { left: 0; }
  .page-tutors .fcard-questions { left: 4%; }

  .page-tutors .trust-item { padding: 14px 6px; }
  .page-tutors .trust-item::before { display: none; }
}
@media (max-width: 575.98px) {
  .page-tutors .hero-proof { gap: 18px; }
}
/* Below ~340px the widest card no longer fits beside its 60% offset. */
@media (max-width: 359.98px) {
  .page-tutors .fcard-independent { left: 48%; }
}


.page-videos .trial-brain { --trial-brain-w: 120px; }

.page-videos { overflow-x: clip; }

.page-videos .eyebrow-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--purple-dark);
}


.page-videos .hero h1 .hero-line1,
.page-videos .hero h1 .hero-line2 { white-space: nowrap; }


.page-videos .hero-shot {
  position: absolute;
  display: block;
  height: auto;
  background: var(--white);
  padding: 4px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.page-videos .video-card {
  position: absolute;
  top: -6px;
  right: 0;
  width: 470px;
  padding: 16px;
  z-index: 3;
  background: var(--white);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
}
.page-videos .video-card img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }

.page-videos .badge-video {
  background: #ece9fb;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  font-size: 10.5px;
  letter-spacing: .08em;
}
.page-videos .badge-video i { font-size: 12px; }

.page-videos .hero-shot-a { top: 0; right: 462px; width: 210px; z-index: 2; }

.page-videos .hero-shot-c { bottom: 70px; right: 30px; width: 190px; z-index: 5; }




.cta-bubble {
  position: relative;
  background: #f4f5fb;
  border-radius: 22px;
  padding: 16px 24px;
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  text-align: center;
  color: var(--navy);
  box-shadow: -8px 7px 16px 0px rgb(80 79 172 / 27%);
  margin-top: 16px;
}
.page-videos .btn-google img,

.page-videos .lose-ico-mint   { background: var(--grad-tile-mint); }
.page-videos .lose-ico-teal   { background: var(--grad-tile-teal); }
.page-videos .lose-ico-blue   { background: var(--grad-tile-blue); }
.page-videos .lose-ico-purple { background: var(--grad-tile-purple); }

/* The videos / live-lessons "What Students Get" cards: a white card with a
   coloured GRADIENT BANNER at the top, rather than the shared version where
   the whole card carries the tone. Scoped off .page-past-papers, which
   renders a different .get-card (topic mocks). */
.page-videos .get-card,
.page-live-lessons .get-card {
  height: 100%;
  background: var(--white);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.page-videos .get-banner,
.page-live-lessons .get-banner {
  display: grid;
  place-items: center;
  overflow: hidden;         /* the banner is flush with the card's top edge */
}
.page-videos .get-banner img,
.page-live-lessons .get-banner img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}

.page-videos .get-banner-shot,
.page-live-lessons .get-banner-shot { padding: 8px; }
/* The shots sit inset on the gradient, so they carry their own rounding --
   the banner's own overflow clip is flush to the card and cannot round them. */
.page-videos .get-banner-shot img,
.page-live-lessons .get-banner-shot img {
	object-fit: cover;
	border-radius: var(--radius-sm);
}
.page-videos .get-banner-ico,
.page-live-lessons .get-banner-ico { display: grid; place-items: center; }
.page-videos .get-banner-ico i,
.page-live-lessons .get-banner-ico i { font-size: 60px; color: var(--white); }

.page-videos .get-banner-green,
.page-live-lessons .get-banner-green  { background: linear-gradient(155deg, #a5e6d0, #6fc9a9); }
.page-videos .get-banner-teal,
.page-live-lessons .get-banner-teal   { background: linear-gradient(155deg, #9ce0d6, #5cb9c4); }
.page-videos .get-banner-purple,
.page-live-lessons .get-banner-purple { background: linear-gradient(155deg, var(--purple-light), var(--purple)); }
.page-videos .get-banner-light,
.page-live-lessons .get-banner-light  { background: linear-gradient(155deg, #f2f4fc, #e6eaf8); }
.page-videos .get-body,
.page-live-lessons .get-body { padding: 18px 24px 0 24px; }


@media (max-width: 1199.98px) {
  /* stacked: the cluster keeps its own height (children are absolute) and
   Stacked: shot A stays right-anchored so the overlap never changes. */
  .page-videos .video-card { top: -6px; right: 60px; width: 470px; }
  .page-videos .hero-shot-a { left: auto; right: 522px; width: 210px; }
  .page-videos .hero-shot-c { bottom: 70px; right: 90px; width: 190px; }
}
@media (max-width: 991.98px) {
  .page-videos .teacher-arrow { display: none; }
}
@media (max-width: 575.98px) {
  .page-videos .hero h1 { font-size: var(--text-2xl); }
  .page-videos .hero h1 .hero-line1,
  .page-videos .hero h1 .hero-line2 { white-space: normal; }

  /* shot-b is left:70% + width:34% = 104%, an overhang the container absorbs
     on desktop. At phone width the stack is the viewport, so it was sliced. */
  .page-videos .shot-stack .shot-b { left: 64%; width: 34%; }
}


.page-past-papers { overflow-x: clip; }


.page-past-papers .ring-stat {
  position: relative;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: conic-gradient(var(--success) calc(var(--val) * 1%), #e6f6ef 0);
}
.page-past-papers .ring-stat span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--success);
  z-index: 1;
}

.page-past-papers .ring-stat::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: var(--white);
  border-radius: 50%;
  z-index: 0;
}


.page-past-papers .hero-shot {
  position: absolute;
  display: block;
  height: auto;

  -webkit-filter: drop-shadow(0 18px 40px rgba(var(--navy-rgb), .18));
          filter: drop-shadow(0 18px 40px rgba(var(--navy-rgb), .18));
}

.page-past-papers .hero-shot-mark  { top: 0;   left: 0;   width: 45.6%; z-index: 2; }
.page-past-papers .hero-shot-video { top: 6%;  left: 45%; width: 48.4%; z-index: 1; }
.page-past-papers .hero-shot-quiz  { top: 61%; left: 8%;  width: 38%;   z-index: 3; }


/* Same card as the videos page: full-width banner tile, copy left-aligned.
   Only the tile colours differ — one per card, rather than one shared mint. */
.page-past-papers .trial-brain { --trial-brain-w: 130px; }

.page-past-papers .lose-card {
  height: 100%;
  background: var(--white);
  border: 1px solid rgba(var(--navy-rgb), .06);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  padding: 16px 16px 24px;
  text-align: left;
}
.page-past-papers .lose-ico {
  width: 100%;
  aspect-ratio: 1.35 / 1;
  border-radius: 16px;
  margin: 0 0 16px;
  display: grid;
  place-items: center;
}

.page-past-papers .lose-ico img {
  width: 88%;
  height: 88%;
  max-width: 178px;
  max-height: 178px;
  object-fit: contain;
  -webkit-filter: brightness(.86) saturate(1.25) contrast(1.05);
          filter: brightness(.86) saturate(1.25) contrast(1.05);
}
.page-past-papers .lose-ico-green  { background: linear-gradient(155deg, #ddf6ea 0%, #a5e6d0 100%); }
.page-past-papers .lose-ico-teal   { background: linear-gradient(155deg, #d6f3ec 0%, #9ce0d6 100%); }
.page-past-papers .lose-ico-blue   { background: linear-gradient(155deg, #dcf0fc 0%, #a6d2f2 100%); }
.page-past-papers .lose-ico-purple { background: linear-gradient(155deg, #e6dff9 0%, var(--purple-light) 100%); }
/* At banner size the old deep tile (#776bc9) overpowered the other four — it
   reads as a highlight rather than a fifth peer. Lightened to match. */
.page-past-papers .lose-ico-deep   { background: linear-gradient(155deg, #ded7f7 0%, #b3a8ea 100%); }
.page-past-papers .lose-card h3 { margin: 0 0 12px; font-size: 18px; font-weight: var(--weight-semibold); }
.page-past-papers .lose-card p { margin: 0; font-size: var(--text-base); line-height: 1.5; color: var(--body); }


.page-past-papers .flow { position: relative; overflow-x: clip;  }
.page-past-papers .flow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 160%;
  height: 150%;
  transform: translateX(-50%);
  background: radial-gradient(58% 82% at 50% 8%, #e7e3f7 0%, #dfe6f6 34%, #d2ecf4 60%, rgba(234,246,249,0) 82%);
  border-radius: 0 0 50% 50%;
  z-index: 0;
  pointer-events: none;
}
.page-past-papers .flow > .container { position: relative; z-index: 1; }


/* Exam questions by topic. Restored to the earlier design: a tinted subject
   panel (.subject-bio / -chem / -phys) wrapping a white mock, with the blurb
   beneath in .subject-meta -- rather than the .get-card banner treatment. */
.page-past-papers .subject { border-radius: var(--radius-2xl); padding: 24px; text-align: center; height: 100%; }
.page-past-papers .subject-bio  { background: linear-gradient(180deg, #bfeeda 0%, #e5f7f0 60%, #f4fbf8 100%); }
.page-past-papers .subject-chem { background: linear-gradient(180deg, #b7e6df 0%, #dff3f2 60%, #f2fafa 100%); }
.page-past-papers .subject-phys { background: linear-gradient(180deg, #cdc6f0 0%, #e8e4f8 60%, #f6f4fc 100%); }

.page-past-papers .subject-mock {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 16px;
  text-align: left;
  margin-bottom: 32px;
}
.page-past-papers .mock-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.page-past-papers .mock-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex: none;
  display: grid;
  place-items: center;
  background: #ece9fb;
  color: var(--purple-dark);
  font-size: 19px;
}
.page-past-papers .mock-title h4 { margin: 0; font-size: var(--text-base); font-weight: var(--weight-bold); }
.page-past-papers .mock-title span { font-size: var(--text-xs); color: var(--muted); }
.page-past-papers .mock-top .ring-stat { margin-left: auto; }
.page-past-papers .mock-body { display: grid; grid-template-columns: 120px 1fr; gap: 12px; }
.page-past-papers .mock-topics-head { grid-column: 1 / -1; font-size: 12px; font-weight: var(--weight-bold); color: var(--navy); }
.page-past-papers .mock-topics { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.page-past-papers .mock-topics li {
  font-size: var(--text-xs);
  color: var(--body);
  padding: 7px 8px;
  border-radius: 7px;
  border: 1px solid #f0f0f6;
}
.page-past-papers .mock-topics li.is-active { background: #eaf7f1; color: #2fa584; border-color: transparent; font-weight: var(--weight-semibold); }
.page-past-papers .mock-q { border-left: 1px solid #f0f0f6; padding-left: 12px; }
.page-past-papers .mock-qnum { font-size: 10.5px; font-weight: var(--weight-semibold); color: var(--purple-dark); }
.page-past-papers .mock-q p { margin: 6px 0 10px; font-size: var(--text-xs); color: var(--navy); line-height: 1.4; }
.page-past-papers .mock-opts { display: flex; flex-direction: column; gap: 6px; }
.page-past-papers .mock-opts span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--body);
  border: 1px solid #f0f0f6;
  border-radius: 7px;
  padding: 6px 8px;
}
.page-past-papers .mock-opts i { width: 11px; height: 11px; border-radius: 50%; border: 1.4px solid #cfcfe4; flex: none; }
.page-past-papers .mock-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.page-past-papers .mock-actions em { font-style: normal; font-size: 10px; color: var(--muted); }
.page-past-papers .mock-actions button {
  border: 0;
  background: var(--purple-dark);
  color: var(--white);
  border-radius: 7px;
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.page-past-papers .subject-meta { text-align: left; }
.page-past-papers .subject-meta h3 { margin: 0 0 6px; font-size: var(--text-3xl); font-weight: var(--weight-bold); }
.page-past-papers .subject-meta p { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--navy); line-height: 1.6; }


@media (max-width: 1199.98px) {
  .page-past-papers .hero-media { min-height: 0; margin-top: 20px; }
  .page-past-papers .shot-stack { margin: 0 auto; }
}
@media (max-width: 991.98px) {
  /* the hero collage overlaps by design; hide it rather than let it clip */
  .page-past-papers .hero-content { margin-top: 0; }
}
@media (max-width: 575.98px) {
  .page-past-papers .mock-body { grid-template-columns: 1fr; }
  .page-past-papers .mock-q { border-left: 0; padding-left: 0; border-top: 1px solid #f0f0f6; padding-top: 12px; }
}


.page-live-lessons .trial-content h2 { margin-bottom: 16px; }
.page-live-lessons .trial-content p { color: var(--body); font-size: var(--text-base); line-height: 1.7; margin: 0 0 26px; max-width: 460px; }
.page-live-lessons .trial-brain { --trial-brain-w: 150px; }


.page-live-lessons .mock-card {
  position: absolute;
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}


.page-live-lessons .card-upcoming { top: 0; left: 0; width: 230px; padding: 14px; z-index: 3; }
.page-live-lessons .card-upcoming .tag {
  display: inline-block;
  background: var(--grad-brand);
  color: var(--white);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.page-live-lessons .card-upcoming .card-lesson { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--navy); margin: 0 0 12px; line-height: 1.35; }
.page-live-lessons .card-timer { display: flex; gap: 8px; margin-bottom: 12px; }
.page-live-lessons .card-timer div { flex: 1; background: #f4f2fd; border-radius: var(--radius-sm); text-align: center; padding: 6px 0 5px; }
.page-live-lessons .card-timer b { display: block; font-size: var(--text-base); color: var(--navy); }
.page-live-lessons .card-timer span { font-size: 9px; color: var(--muted); text-transform: uppercase; }
.page-live-lessons .card-upcoming .card-btn {
  display: block;
  text-align: center;
  background: var(--grad-brand);
  color: var(--white);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  padding: 9px 0;
  border-radius: var(--radius-sm);
}


.page-live-lessons .card-live { top: 40px; right: 0; width: 500px; padding: 14px; z-index: 1; }
.page-live-lessons .card-live .live-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--purple-dark);
  margin-bottom: 10px;
}
.page-live-lessons .card-live .live-head i { font-size: 14px; }
.page-live-lessons .live-body { position: relative; border-radius: var(--radius-md); overflow: hidden; background: #2c2c3e; display: flex; }
.page-live-lessons .live-teacher { position: relative; flex: 1; min-height: 190px; }
.page-live-lessons .live-teacher img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-live-lessons .live-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--purple-dark);
  color: var(--white);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: .04em;
  padding: 4px 9px;
  border-radius: 6px;
}
.page-live-lessons .live-badge i { width: 6px; height: 6px; border-radius: 50%; background: #ff5c6c; display: inline-block; }
.page-live-lessons .live-diagram {
  width: 150px;
  background: #f4f4f8;
  padding: 10px;
  font-size: 9px;
  color: var(--navy);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.page-live-lessons .live-diagram b { font-size: 10px; }
.page-live-lessons .live-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #23232f;
  color: #cfcfe0;
  font-size: 10px;
}
.page-live-lessons .live-foot span { display: flex; align-items: center; gap: 5px; }
.page-live-lessons .live-foot .is-live { color: #ff8f97; font-weight: var(--weight-bold); }
.page-live-lessons .live-people {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.page-live-lessons .live-person {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(var(--white-rgb), .92);
  border-radius: 20px;
  padding: 3px 10px 3px 3px;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.page-live-lessons .live-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.page-live-lessons .live-count {
  background: rgba(var(--white-rgb), .95);
  border-radius: 10px;
  padding: 8px 12px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.page-live-lessons .live-count b { display: block; font-size: var(--text-base); color: var(--navy); }
.page-live-lessons .live-count span { font-size: 9px; color: var(--muted); }


.page-live-lessons .card-mini { bottom: -10px; left: 0; width: 250px; padding: 12px 14px; z-index: 3; }
.page-live-lessons .card-label {
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: .05em;
  color: var(--purple-dark);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.page-live-lessons .mini-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid #f0eef8;
  font-size: 10px;
}
.page-live-lessons .mini-row:first-of-type { border-top: 0; }
.page-live-lessons .mini-row b { display: block; color: var(--navy); font-weight: var(--weight-semibold); font-size: 10.5px; }
.page-live-lessons .mini-row span { color: var(--muted); }
.page-live-lessons .mini-pill {
  align-self: center;
  font-size: 9px;
  font-weight: var(--weight-bold);
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.page-live-lessons .mini-pill-live { background: #e6f7f2; color: var(--teal); }
.page-live-lessons .mini-pill-ok   { background: #eef0fc; color: var(--purple-dark); }


.page-live-lessons .card-progress { bottom: -40px; right: 20px; width: 190px; padding: 14px; z-index: 3; text-align: center; }
.page-live-lessons .card-progress .card-sub { font-size: 10px; color: var(--muted); margin-bottom: 10px; }
.page-live-lessons .progress-ring {
  width: 78px;
  height: 78px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: conic-gradient(var(--purple) 0deg 280deg, #ece9fb 280deg 360deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-live-lessons .progress-ring span {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--navy);
}


.page-live-lessons .note {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 24px 8px;
  text-align: center;
  color: var(--body);
  font-size: var(--text-base);
}


.page-live-lessons .guidance {  text-align: center; }
.page-live-lessons .guidance .pain p { margin: 0 0 12px; }
.page-live-lessons .guidance .pain small {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--purple-dark);
  line-height: 1.5;
}
/* the forced 3-line break only helps where the row actually fits */
@media (max-width: 991.98px) { .lead-br { display: none; } }


.page-live-lessons .together-card {
  max-width: 880px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 32px 40px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.page-live-lessons .together-icon {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 20px;
  background: #f2effc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple-dark);
  font-size: 46px;
}
.page-live-lessons .together-body h3 { font-size: 19px; font-weight: var(--weight-semibold); margin: 0 0 16px; }
.page-live-lessons .together-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 32px;
}
.page-live-lessons .together-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--weight-semibold);
  font-size: 14.5px;
  color: var(--navy);
}
.page-live-lessons .together-list img.tick { width: 15px; height: 15px; flex: none; }
.page-live-lessons .together-list b { color: var(--purple-dark); font-weight: var(--weight-semibold); }


.page-live-lessons .timetable {  text-align: center; padding-top: var(--section-y-sm); }
.page-live-lessons .timetable h2 { margin-bottom: 30px; }
/* The tinted backdrop wraps ONLY the table card — the heading stays outside
   visible (a full-bleed element's radius never shows). */
.page-live-lessons .timetable-backdrop {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px;
  border-radius: calc(var(--radius-xl) + 14px);

  background: linear-gradient(to right, rgba(143, 220, 207, .55) 0%, rgba(143, 220, 207, .08) 100%), var(--white);
}
.page-live-lessons .timetable-frame {
  border-radius: var(--radius-xl);
  background: linear-gradient(120deg, var(--teal-light), var(--purple));
  box-shadow: var(--shadow-lg);
  /* the table can still scroll on its own if a week has more columns than The
   table scrolls on its own; it never pushes past this frame. */
  overflow-x: auto;
}
.page-live-lessons .timetable-inner {
  background: var(--white);
  border-radius: calc(var(--radius-xl) - 3px);
  padding: 24px;
  text-align: left;
}

.page-live-lessons .timetable table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--text-sm); margin: 0; }
.page-live-lessons .timetable th,
.page-live-lessons .timetable td {
  border: 1px solid var(--line);
  padding: 8px 16px;
  text-align: left;
  vertical-align: top;
  width: 130px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.page-live-lessons .timetable thead th { color: var(--navy); font-weight: var(--weight-bold); background: #faf9fe; }
.page-live-lessons .timetable thead th:first-child { color: var(--purple-dark); }
.page-live-lessons .timetable td.today,
.page-live-lessons .timetable th.today { background: #f6f4fd; }
.page-live-lessons .timetable .subject-box h5 {
  margin: 0 0 4px;
  font-size: 12.5px;
  font-weight: var(--weight-bold);
  color: var(--navy);
  overflow-wrap: break-word;
  word-break: break-word;
}

.page-live-lessons .timetable .subject-box div {
  font-size: 11.5px;
  color: var(--body);
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap !important;
}
.page-live-lessons .timetable-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 8px 16px;
  border-radius: 10px;
  background: #f6f4fd;
  color: var(--navy);
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
}
.page-live-lessons .timetable-download i { font-size: var(--text-md); color: var(--purple-dark); flex: none; }
.page-live-lessons .timetable-download span {
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
  color: var(--purple-dark);
}
.page-live-lessons .timetable-empty { padding: 30px 12px; text-align: center; color: var(--muted); }


@media (max-width: 991.98px) {
  .page-live-lessons .hero { padding-top: 130px; }
  .page-live-lessons .hero-media { min-height: 380px; margin-top: 40px; }
  .page-live-lessons .shot-stack .shot-e { width: 36%; left: 66%; top: -22%; }
  .page-live-lessons .together-card { flex-direction: column; text-align: center; }
  .page-live-lessons .together-list { grid-template-columns: 1fr; }
}

/* The hero collage below lg. Same problem the tutors stack had: the cards are
   positioned in % but sized in fixed px (230/500/250/190), so as the stack
   narrows the px widths stop matching the % offsets and the cards pile up --
   .card-live alone was 500px inside a 366px stack, and stayed 16px/14px
   internally, so it could not compress. It also grew taller than the
   aspect-ratio box, which is why cards overlapped their neighbours.

   The composition is kept, not dismantled (dismantling is what broke tutors).
   Widths go back to the % the positions assume, the stack gets the height its
   content needs, and one font-size on each card scales the padding, radii and
   type together via em. */
@media (max-width: 991.98px) {
  .page-live-lessons .shot-stack { aspect-ratio: auto; min-height: 430px; }
  .page-live-lessons .card-upcoming { width: 46%; padding: .9em; font-size: 13px; }
  .page-live-lessons .card-live     { width: 62%; right: 0; padding: .9em; font-size: 13px; }
  .page-live-lessons .card-mini     { width: 48%; padding: .8em .9em; font-size: 13px; }
  .page-live-lessons .card-progress { width: 40%; padding: .9em; font-size: 13px; }

  .page-live-lessons .card-upcoming .card-lesson { margin-bottom: .9em; }
  .page-live-lessons .card-timer { gap: .5em; margin-bottom: .9em; }
  .page-live-lessons .card-timer div { border-radius: .55em; padding: .45em 0 .35em; }
  .page-live-lessons .card-timer b { font-size: 1.1em; }
  .page-live-lessons .card-timer span { font-size: .7em; }
}

@media (max-width: 767.98px) {
  /* Below md the stack is ~350px wide. The cards are laid out in two bands --
     upcoming + live on top, timetable + progress below -- with the review
     floated over the join, which is the desktop reading order preserved. */
  .page-live-lessons .shot-stack { min-height: 430px; }
  .page-live-lessons .card-upcoming { font-size: 11px; }
  .page-live-lessons .card-live     { font-size: 11px; }
  .page-live-lessons .card-mini     { font-size: 11px; }
  .page-live-lessons .card-progress { font-size: 11px; }

  /* shot-a hung off the left edge (-10%) -- desktop absorbs that in the
     container gutter, a phone has nothing to spare, so it was sliced. */
  .page-live-lessons .shot-stack .shot-a { left: 0;   top: -6%; width: 48%; }
  .page-live-lessons .shot-stack .shot-b { left: 8%;  top: 4%;  width: 76%; }
  /* Bottom-anchored: these two are content-sized, so a % top drifts past the
     stack floor as the cards grow. Pinning to the bottom keeps them inside. */
  .page-live-lessons .shot-stack .shot-c { left: 0;   top: auto; bottom: 0; width: 48%; }
  .page-live-lessons .shot-stack .shot-d { left: 52%; top: auto; bottom: 0; width: 48%; }

  /* The review floats over the live mock on desktop, where there is slack
     around it. Here it is pulled right and up so it laps the live card's
     lower edge rather than sitting on the timetable's heading and rows --
     still the topmost layer, but covering card edge, not content. */
  .page-live-lessons .shot-stack .shot-e { left: 52%; top: -6%; width: 48%; z-index: 4; }
}
@media (max-width: 767.98px) {
  /* 11.5px here was buying narrower columns, but the frame scrolls anyway
     (see below), so the table was shrinking real content to save width it
     did not need to save. --text-sm keeps the day and subject names
     legible and lets the swipe absorb the extra width. */
  .page-live-lessons .timetable table { font-size: var(--text-sm); }
  .page-live-lessons .timetable th,
  .page-live-lessons .timetable td { padding: 8px; width: 116px; }

  /* A five-day week is ~550px wide and cannot shrink to a phone, so the
     frame scrolls. Nothing said so: the table was simply cut off at the
     edge and later columns looked absent rather than off-screen. The
     backdrop and inner padding also cost ~112px of the 390px viewport,
     which is width the table needs more than the frame does. */
  .page-live-lessons .timetable-backdrop { padding: 12px; }
  .page-live-lessons .timetable-inner { padding: 12px; }

  /* Momentum scrolling plus a note, so the gesture is discoverable. */
  .page-live-lessons .timetable-frame {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  /* A block child only ever fills the *visible* width of a scroll container,
     so scrolling right ran the white panel out and exposed the gradient
     behind the table. `min-content` makes it as wide as the table it holds. */
  .page-live-lessons .timetable-inner { min-width: min-content; }

  /* Downloading the timetable is the main action here for anyone who does
     not want to swipe, so it gets a full-width 44px target. */
  .page-live-lessons .timetable-download {
    display: flex;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
  }
  .page-live-lessons .timetable thead th { scroll-snap-align: start; }
  .page-live-lessons .timetable-frame::after {
    content: "Swipe to see the rest of the week →";
    display: block;
    padding: 8px 12px 10px;
    font-size: 12px;
    color: var(--white);
    text-align: center;
  }
}


/* Copy-only heroes: no media column, so the shared floor would leave a tall
   empty right-hand side. These pages size to their content instead.
   .page-blog joined this group when the booklet fan was removed. */
.page-sitemap .hero,
.page-contact .hero,
.page-terms .hero,
.page-cookie .hero,
.page-blog .hero { min-height: 0; }

.page-blog .hero { height: auto; }


.page-sitemap .sitemap-group + .sitemap-group { margin-top: 64px; }
.page-sitemap .sitemap-group .section-head { margin-bottom: 24px; }
.page-sitemap .sitemap-group .h2 { font-size: var(--text-2xl); }

.page-sitemap .sitemap-card {
  display: block;
  height: 100%;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid rgba(var(--navy-rgb), .08);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.page-sitemap .sitemap-card:hover,
.page-sitemap .sitemap-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.page-sitemap .sitemap-card h3 {
  margin: 0 0 8px;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--navy);
}
.page-sitemap .sitemap-card p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--body);
}

@media (max-width: 991.98px) {
  .page-sitemap .sitemap-group + .sitemap-group { margin-top: 48px; }
}


.page-faq .faq-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}
.page-faq .faq-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border: 1px solid rgba(var(--navy-rgb), .14);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--navy);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.page-faq .faq-tab:hover { border-color: rgba(var(--navy-rgb), .3); }
.page-faq .faq-tab.is-active {
  background: var(--grad-brand);
  border-color: transparent;
  color: var(--white);
}

.page-faq .faq-tab-count {
  min-width: 26px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: rgba(var(--navy-rgb), .08);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 20px;
  text-align: center;
}
.page-faq .faq-tab.is-active .faq-tab-count {
  background: rgba(var(--white-rgb), .25);
  color: var(--white);
}

.page-faq .faq-blurb {
  color: var(--body);
  font-size: var(--text-lg);
  margin: 0 0 24px;
}

/* Masonry, via CSS columns. Items pack by height rather than sitting in
   fixed rows, so an opening answer grows inside its own column and only
   pushes the items below it in that column — the rest of the page stays put.
   A grid could not do this: with fixed rows an open item either stretches
   its neighbour or has to span the full width, and both make the whole
   layout lurch on every click. `break-inside: avoid` is what makes it safe —
   without it an open answer would split across the column boundary
   mid-sentence. */
.page-faq .accordion {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.page-faq .faq-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 0;
  min-width: 0;
}
.page-faq .faq-item {
  border: 1px solid rgba(var(--navy-rgb), .08);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.page-faq .faq-item:has(.accordion-collapse.show) { box-shadow: var(--shadow-md); }

/* One column on small screens. The column wrappers are dissolved rather than
   stacked: stacking them would read every odd question first, then every
   even one. `display: contents` restores the original order. */
@media (max-width: 767.98px) {
  .page-faq .accordion { display: flex; flex-direction: column; gap: 12px; }
  .page-faq .faq-col { display: contents; }
}
.page-faq .accordion-button {
  padding: 16px 24px;
  background: var(--white);
  color: var(--navy);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  box-shadow: none;
}
.page-faq .accordion-button:not(.collapsed) {
  background: rgba(var(--navy-rgb), .03);
  color: var(--navy);
}
.page-faq .accordion-button:focus { box-shadow: 0 0 0 3px rgba(167, 156, 228, .25); }
.page-faq .accordion-body {
  color: var(--body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.page-faq .accordion-body p { margin: 0 0 12px; }
.page-faq .accordion-body p:last-child { margin-bottom: 0; }
.page-faq .accordion-body ul { margin: 0 0 12px; padding-left: 20px; }
.page-faq .accordion-body li { margin-bottom: 6px; }
.page-faq .accordion-body a { color: var(--navy); font-weight: var(--weight-semibold); }

@media (max-width: 575.98px) {
  /* 11px keeps the tab at the 44px minimum touch target; 10px landed on 43. */
  .page-faq .faq-tab { padding: 11px 16px; font-size: var(--text-sm); }
}


.page-about .story-aside .panel { padding: 32px; }
.page-about .story-aside h3 {
  margin: 0 0 20px;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}
.page-about .story-aside .list-check { margin-bottom: 24px; }
.page-about .story-aside .list-check img.tick { width: 20px; height: 20px; flex: none; }


.store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.store-badges img { width: 148px; height: auto; display: block; }
.store-badges-stack { margin-bottom: 24px; }


.page-contact .contact-panel { text-align: center; padding: 56px 40px; }
.page-contact .contact-label {
  margin: 0 0 8px;
  color: var(--body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
/* The line box at the small end of the clamp is only ~35px tall, short of a
   44px touch target. Padding grows the hit area without moving the text: the
   negative margin pulls the block back to where the text alone would sit. */
.page-contact .contact-email {
  display: inline-block;
  padding: 6px 0;
  margin: -6px 0;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: var(--weight-semibold);
  color: var(--navy);
  text-decoration: none;
  word-break: break-word;
}
.page-contact .contact-email:hover { text-decoration: underline; }
.page-contact .contact-note { margin: 16px 0 0; color: var(--body); font-size: var(--text-base); }

/* Social row under the email panel. Boxicons brand glyphs (see
   includes/social-links) in the same circular chips the error pages use. */
.page-contact .contact-social-label {
  margin: 28px 0 12px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.page-contact .contact-social { display: flex; justify-content: center; gap: 12px; }
.page-contact .contact-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(var(--white-rgb), .7);
  color: var(--navy);
  transition: transform var(--duration-slow) ease, background var(--duration-slow) ease, color var(--duration-slow) ease;
}
.page-contact .contact-social a:hover {
  transform: translateY(-2px);
  background: var(--white);
  color: var(--purple-dark);
}
.page-contact .contact-social i { font-size: 20px; line-height: 1; }

.page-contact .contact-aside { height: 100%; }
.page-contact .contact-aside h2 {
  margin: 0 0 20px;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}
.page-contact .contact-aside img.tick { width: 20px; height: 20px; flex: none; }
.page-contact .contact-aside a { color: var(--navy); font-weight: var(--weight-medium); }


.page-blog .post-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid rgba(var(--navy-rgb), .08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.page-blog .post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.page-blog .post-thumb { display: block; aspect-ratio: 16 / 9; background: rgba(var(--navy-rgb), .05); }
.page-blog .post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-blog .post-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px; }
.page-blog .post-date {
  margin: 0 0 8px;
  color: var(--body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.page-blog .post-title { margin: 0 0 12px; font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: 1.35; }
.page-blog .post-title a { color: var(--ink); text-decoration: none; }
.page-blog .post-title a:hover { text-decoration: underline; }
.page-blog .post-excerpt { margin: 0 0 16px; color: var(--body); font-size: var(--text-sm); line-height: 1.55; }
.page-blog .post-author { margin: auto 0 0; color: var(--body); font-size: var(--text-xs); }
.page-blog .posts-empty { text-align: center; color: var(--body); font-size: var(--text-lg); margin: 0; }

@media (max-width: 767.98px) {
  /* Date and byline are how a reader picks a post, not decoration — 11px
     uppercase is too small to scan on a phone. */
  .page-blog .post-date { font-size: 12.5px; letter-spacing: .02em; }
  .page-blog .post-author { font-size: 13px; }
}


.page-blog-detail .post-breadcrumb { margin: 0 0 var(--space-md); }
.page-blog-detail .post-back-arrow {
  width: 8px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-right: 2px;
}
.page-blog-detail .hero h1 { max-width: 900px; }

.page-blog-detail .post-hero {
  margin: 0 0 var(--space-xl);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 9;
  background: rgba(var(--navy-rgb), .05);
}
.page-blog-detail .post-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-blog-detail .post-aside { margin-bottom: 24px; }
.page-blog-detail .post-aside h2,
.page-blog-detail .post-cta h2 {
  margin: 0 0 16px;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}
.page-blog-detail .post-list { list-style: none; margin: 0; padding: 0; }
.page-blog-detail .post-list li { margin-bottom: 12px; }
.page-blog-detail .post-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--navy);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  text-decoration: none;
}
.page-blog-detail .post-list img {
  width: 72px;
  height: 54px;
  flex: none;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.page-blog-detail .post-list a:hover span { text-decoration: underline; }
.page-blog-detail .post-cta p { color: var(--body); font-size: var(--text-sm); margin: 0 0 20px; }


.page-blog-detail .prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.page-blog-detail .prose iframe { max-width: 100%; border-radius: var(--radius-md); }

/* Termly embed. The iframe cannot size itself cross-origin, so it gets a
   tall fixed frame and scrolls internally — a short frame inside a long page
   reads as broken, so it is deliberately generous. */
.page-policy .policy-embed-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.page-policy .policy-embed-meta p {
  margin: 0;
  color: var(--body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.page-policy .policy-embed-meta a,
.page-policy .policy-fallback a { color: var(--navy); font-weight: var(--weight-semibold); }

.page-policy .policy-frame {
  border: 1px solid rgba(var(--navy-rgb), .12);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.page-policy .policy-frame iframe {
  display: block;
  width: 100%;
  height: 1100px;
  border: 0;
}
.page-policy .policy-fallback {
  margin: 16px 0 0;
  color: var(--body);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.page-policy .policy-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
}
.page-policy .policy-links a { color: var(--navy); font-weight: var(--weight-semibold); font-size: var(--text-base); }

@media (max-width: 767.98px) {
  .page-policy .policy-frame iframe { height: 760px; }

  /* Standalone links, not prose — they carry the cross-navigation between
     the policy pages, so they get a real touch target. */
  .page-policy .policy-links a,
  .page-policy .policy-embed-meta a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}


/* =====================================================================
   eBOOK LANDINGS — /eBook-GCSE-Biology, -Chemistry, -Physics

   One layout, three subjects (includes/ebook-page.blade.php). The page is
   built from shared blocks; what follows is composition only — the cover
   in the hero, and the card treatment borrowed from past-papers.
   ===================================================================== */

/* The media column is a single cover, not a collage, so it is capped and
   centred rather than stacked. `--hero-min` still owns the hero's height. */
.page-ebook .ebook-cover {
  max-width: 360px;
  margin-inline: auto;
}
/* The cover art is a transparent cut-out of the book itself, so it takes no
   radius or shadow — those would draw a rounded box around empty space
   rather than around the book. A drop-shadow filter follows the alpha. */
.page-ebook .ebook-cover img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-filter: drop-shadow(0 18px 34px rgba(var(--navy-rgb), .22));
          filter: drop-shadow(0 18px 34px rgba(var(--navy-rgb), .22));
}

.page-ebook .lose-card {
  height: 100%;
  background: var(--white);
  border: 1px solid rgba(var(--navy-rgb), .06);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  padding: 16px 16px 24px;
  text-align: left;
}
.page-ebook .lose-ico {
  width: 100%;
  aspect-ratio: 1.35 / 1;
  border-radius: 16px;
  margin: 0 0 16px;
  display: grid;
  place-items: center;
}
.page-ebook .lose-ico img {
  width: 88%;
  height: 88%;
  max-width: 178px;
  max-height: 178px;
  object-fit: contain;
  -webkit-filter: brightness(.86) saturate(1.25) contrast(1.05);
          filter: brightness(.86) saturate(1.25) contrast(1.05);
}
.page-ebook .lose-ico-green  { background: linear-gradient(155deg, #ddf6ea 0%, #a5e6d0 100%); }
.page-ebook .lose-ico-teal   { background: linear-gradient(155deg, #d6f3ec 0%, #9ce0d6 100%); }
.page-ebook .lose-ico-blue   { background: linear-gradient(155deg, #dcf0fc 0%, #a6d2f2 100%); }
.page-ebook .lose-ico-purple { background: linear-gradient(155deg, #e6dff9 0%, var(--purple-light) 100%); }
.page-ebook .lose-card h3 { margin: 0 0 12px; font-size: 18px; font-weight: var(--weight-semibold); }
.page-ebook .lose-card p { margin: 0; font-size: var(--text-base); line-height: 1.5; color: var(--body); }

/* The topics panel puts a heading beside its list, so the list drops its
   default bottom margin to stay optically centred against the heading. */
.page-ebook .topics .list-check { margin-bottom: 0; }

/* The app block sits on white rather than in a panel (see the note in
   ebook-page.blade.php), so it needs its own separation from the tinted
   panel above it instead of a panel edge. */
.page-ebook .app-inner { padding-top: 8px; }

/* One phone, on transparent. app-screen-*.webp ship with a flat #fdfdfd
   ground baked in, which shows as a grey rectangle against the white page —
   two levels off, so `mix-blend-mode: multiply` cannot lift it. The source
   was cut out (background flood-filled to alpha, keeping the reflection's
   falloff) and saved as app-screen-cutout.webp; the image needs no radius or
   shadow of its own because it carries its own. */
.page-ebook .app-shots {
  display: flex;
  justify-content: center;
}
.page-ebook .app-shots img {
  width: 100%;
  max-width: 340px;
  height: auto;
  display: block;
}

/* Eight short items read better in two columns than one long run. */
.page-ebook .app-gets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  margin-bottom: 28px;
}

@media (max-width: 991.98px) {
  /* Stacked, the cover no longer needs to fill a half-width column — at full
     width it would tower over the copy above it. */
  .page-ebook .ebook-cover { max-width: 280px; }
  .page-ebook .app-shots { margin-bottom: 8px; }
}
@media (max-width: 575.98px) {
  /* One column: at phone width two columns of ticks wrap every label. */
  .page-ebook .app-gets { grid-template-columns: 1fr; }
}


/* =====================================================================
   THANK YOU  (/thank-you, /thankyou, /thank_you)

   All three thank-you landings share this chrome: the stock .hero + .hero-bg
   block with one centred column of copy and no media column. /thank-you is
   plain paragraphs; /thankyou (eBook) and /thank_you (signup) carry the
   eyebrow / hero-sub / hero-desc / hero-actions / hero-proof set, so the
   rules below centre those and keep their own type off the plain-paragraph
   rule.
   ===================================================================== */

/* .hero itself is deliberately NOT touched here. It carries the fixed
   720px height and the 148px top padding that clears the fixed header, and
   .hero-bg sizes its artwork off that height — override either and the nav
   and the background stop matching the home and videos pages. */

/* The page is one centred message with no media column beside it, so the
   content block drops .hero-content's 560px left-aligned measure and centres
   instead — the same centred layout the page had before the port. */
.page-thankyou .thankyou-card {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.page-thankyou .thankyou-title {
  margin: 0 0 24px;
  font-size: clamp(28px, 3vw, 34px);
  font-weight: var(--weight-semibold);
  line-height: 1.16;
  letter-spacing: var(--tracking-tight);
  color: var(--navy);
}

/* Plain body copy only. The exclusions matter: .thankyou-card p outranks the
   single-class .hero-sub / .hero-desc / .eyebrow rules in components.css, so
   without them the signup and eBook landings would lose the semibold navy
   sub-heading and the teal eyebrow. */
.page-thankyou .thankyou-card p:not(.hero-sub):not(.hero-desc):not(.eyebrow) {
  margin: 0 0 16px;
  color: var(--body);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
}

/* .hero-actions and .hero-proof are flex rows built for the left-aligned
   two-column hero; text-align on the card does not move flex children, so
   they are centred explicitly here. */
.page-thankyou .thankyou-card .hero-actions,
.page-thankyou .thankyou-card .hero-proof {
  justify-content: center;
}

/* Flash messages share the message's measure, so a long error does not run
   the full width of the page. */
.page-thankyou .alert {
  text-align: left;
  margin-bottom: 32px;
}

.page-thankyou .hero-fill {
  height: auto;
  min-height: max(var(--hero-min), 100vh);
  min-height: max(var(--hero-min), 100dvh);
}

.page-thankyou .hero-fill .hero-bg img {
  object-position: top right;
}

.page-thankyou .hero-center {
  display: flex;
  align-items: center;
  padding: calc(var(--header-height) + 32px) 0 32px;
}

.page-thankyou .hero-center > .container {
  width: 100%;
}


/* =====================================================================
   VERIFY EMAIL — /thank-you

   Post-signup "verify your email" screen. Sizes are the designer spec:
   logo 40, icon 120, H1 44 bold, H2 22 semibold, body 16, buttons 56 tall
   and 320 max, small text 14, content 600 max, 60 below. <main> already
   pads --header-height for the fixed header, so the section does not.

   The whole message has to fit one screen with the footer below the fold.
   The section fills the viewport under the header, and every vertical gap
   plus the logo, icon, H1 and button heights are clamp()ed against vh: the
   spec values at ~1100px tall and up, shrinking down to a 1366x657 laptop.
   ===================================================================== */
.page-verify-email .verify-email {
  --ve-logo:     48px;
  --ve-logo-gap: clamp(12px, 3vh, 48px);
  --ve-icon:     clamp(72px, 11vh, 120px);
  --ve-icon-gap: clamp(12px, 2.5vh, 32px);
  --ve-h1-gap:   clamp(6px, 1.4vh, 16px);
  --ve-h2-gap:   clamp(10px, 2vh, 24px);
  --ve-text-gap: clamp(8px, 1.8vh, 24px);
  --ve-help-gap: clamp(14px, 2.6vh, 32px);
  --ve-btn:      clamp(46px, 6vh, 56px);
  --ve-btn-gap:  clamp(10px, 1.6vh, 16px);
  --ve-note-gap: clamp(14px, 2.6vh, 32px);
  --ve-bottom:   clamp(16px, 4vh, 60px);

  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100dvh - var(--header-height));
  padding: clamp(8px, 2.5vh, 48px) var(--space-md) var(--ve-bottom);
  background: var(--white);
}

.page-verify-email .verify-email-inner {
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  text-align: center;
}

.page-verify-email .verify-email-logo {
  display: block;
  width: auto;
  height: var(--ve-logo);
  margin: 0 auto var(--ve-logo-gap);
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .page-verify-email .verify-email { --ve-logo: 40px; }
}

@media (max-width: 1199.98px) {
  .page-verify-email .verify-email { --ve-logo: 36px; }
}

.page-verify-email .verify-email-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ve-icon);
  height: var(--ve-icon);
  margin: 0 auto var(--ve-icon-gap);
  border-radius: 50%;
  background: color-mix(in srgb, var(--teal) 22%, var(--white));
  color: var(--navy-dark);
}

.page-verify-email .verify-email-icon svg {
  width: 100%;
  height: 100%;
}

.page-verify-email .verify-email-icon .verify-email-rays {
  color: var(--teal-dark);
}

.page-verify-email .verify-email-title {
  margin: 0 0 var(--ve-h1-gap);
  font-size: min(var(--text-5xl), 6vh);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--navy-dark);
}

.page-verify-email .verify-email-sub {
  margin: 0 0 var(--ve-h2-gap);
  font-size: 22px;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--navy);
}

.page-verify-email .verify-email-text {
  margin: 0 0 var(--ve-text-gap);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--bs-body-color);
}

.page-verify-email .verify-email-text strong {
  font-weight: var(--weight-semibold);
  color: var(--navy-dark);
  word-break: break-word;
}

.page-verify-email .verify-email-help {
  margin-bottom: var(--ve-help-gap);
}

.page-verify-email .verify-email-status {
  margin: calc(var(--ve-help-gap) / -2) 0 var(--ve-btn-gap);
  font-size: 14px;
  color: var(--success);
}

.page-verify-email .verify-email-status.is-error {
  color: var(--danger);
}

.page-verify-email .verify-email-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ve-btn-gap);
  margin-bottom: var(--ve-note-gap);
}

.page-verify-email .verify-email-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  height: var(--ve-btn);
  padding: 0 var(--space-lg);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease), color var(--duration-base) var(--ease), opacity var(--duration-base) var(--ease);
}

.page-verify-email .verify-email-btn-primary {
  border: 0;
  background: var(--teal-dark);
  color: var(--white);

  &:hover,
  &:focus-visible {
    background: var(--success);
    opacity: .9;
  }

  &:disabled {
    opacity: .6;
    cursor: wait;
  }
}

.page-verify-email .verify-email-btn-outline {
  border: 1.5px solid var(--navy-dark);
  background: var(--white);
  color: var(--navy-dark);

  &:hover,
  &:focus-visible {
    background: var(--navy-dark);
    color: var(--white);
  }
}

.page-verify-email .verify-email-note {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.page-verify-email .alert {
  text-align: left;
  margin-bottom: var(--space-xl);
}

/* Lexend sets the 44px heading ~734px wide, past the 600px column; the design
   keeps it on one line, so from tablet up it may run 80px either side. */
@media (min-width: 768px) {
  .page-verify-email .verify-email-title {
    margin-inline: -80px;
  }
}

@media (max-width: 575.98px) {
  .page-verify-email .verify-email {
    --ve-text-gap: clamp(8px, 1.4vh, 16px);
  }

  .page-verify-email .verify-email-title {
    font-size: 28px;
  }

  .page-verify-email .verify-email-sub {
    font-size: var(--text-md);
  }

  .page-verify-email .verify-email-text {
    font-size: var(--text-base);
    line-height: var(--leading-snug);
  }

  .page-verify-email .verify-email-note {
    font-size: var(--text-sm);
  }
}


/* =====================================================================
   SCIENCE TUITION — /sciencetuition

   The paid-traffic landing. Built from the shared blocks; the page-specific
   rules are the hero's Trustpilot rating and the hidden pricing block.
   ===================================================================== */

/* .trustpilot is centred for the reviews panel it was built for. In this
   hero it sits above a left-aligned H1, so it aligns left and picks up the
   heading's own bottom spacing instead of the panel's 24px. */
.page-science-tuition .hero-trustpilot {
  align-items: flex-start;
  margin-bottom: 20px;
  text-decoration: none;
}
.page-science-tuition .hero-trustpilot:hover .trustpilot-name { text-decoration: underline; }

.page-science-tuition .hero {
  height: auto;
  min-height: var(--hero-min);
}

/* Alternating media rows. `.feature` is a white card with its own shadow —
   beside a media panel that reads as two stacked boxes, so in this layout the
   copy column drops the card chrome and sits directly on the page. */
.page-science-tuition .feature-row + .feature-row { margin-top: clamp(48px, 6vw, 88px); }
.page-science-tuition .feature-plain {
  height: auto;
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}
/* The bullets sit between the body copy and the button, so the copy loses the
   flex-grow that would otherwise push them apart. */
.page-science-tuition .feature-plain p:not(.eyebrow) { flex: 0 0 auto; margin-bottom: var(--space-md); }
.page-science-tuition .feature-plain .list-check { margin-bottom: var(--space-lg); }

.page-science-tuition .feature-media {
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  line-height: 0;
}
/* Stills and clips fill the column. Collage shots must not: they inherit
   .shot-a/b/c from the homepage hero (71.4% / 41.7% / 48%) and a 1.4643
   stack. Cover-sizing them here is what made this collage look bigger
   and differently placed than the banner. */
.page-science-tuition .feature-media:not(.feature-media-stack) img,
.page-science-tuition .feature-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-science-tuition .feature-media-stack {
  overflow: visible;
  border-radius: 0;
  line-height: normal;
}

/* Parents hero collage in the Live Tuition row. Positions match
   .page-parents so the two banners stay identical. The homepage
   collage above uses the shared .shot-a/b/c rules — do not restyle it. */
.page-science-tuition .parents-stack .shot-a {
  top: 50%;
  left: 2%;
  width: 35%;
  z-index: 4;
}
.page-science-tuition .parents-stack .shot-b {
  top: 13%;
  left: 52%;
  width: 30%;
  z-index: 3;
}
.page-science-tuition .parents-stack .shot-c {
  top: 50%;
  left: 40%;
  width: 54%;
  z-index: 2;
}
.page-science-tuition .parents-stack .shot-d {
  top: 0;
  left: 0;
  width: 50%;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  /* The looping clips are decoration; honour a user who asks for stillness. */
  .page-science-tuition .feature-media video { display: none; }
}


/* ---- Science Tuition: shared tuition timetable (website.includes.timetable)
   Same block the Live Lessons page uses, scoped to this page as well. The
   Live Lessons rules above are left untouched so that page cannot shift. */
.page-science-tuition .timetable {  text-align: center; padding-top: var(--section-y-sm); }
.page-science-tuition .timetable h2 { margin-bottom: 30px; }
/* The tinted backdrop wraps ONLY the table card — the heading stays outside
   visible (a full-bleed element's radius never shows). */
.page-science-tuition .timetable-backdrop {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px;
  border-radius: calc(var(--radius-xl) + 14px);

  background: linear-gradient(to right, rgba(143, 220, 207, .55) 0%, rgba(143, 220, 207, .08) 100%), var(--white);
}
.page-science-tuition .timetable-frame {
  border-radius: var(--radius-xl);
  background: linear-gradient(120deg, var(--teal-light), var(--purple));
  box-shadow: var(--shadow-lg);
  /* the table can still scroll on its own if a week has more columns than The
   table scrolls on its own; it never pushes past this frame. */
  overflow-x: auto;
}
.page-science-tuition .timetable-inner {
  background: var(--white);
  border-radius: calc(var(--radius-xl) - 3px);
  padding: 24px;
  text-align: left;
}

.page-science-tuition .timetable table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--text-sm); margin: 0; }
.page-science-tuition .timetable th,
.page-science-tuition .timetable td {
  border: 1px solid var(--line);
  padding: 8px 16px;
  text-align: left;
  vertical-align: top;
  width: 130px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.page-science-tuition .timetable thead th { color: var(--navy); font-weight: var(--weight-bold); background: #faf9fe; }
.page-science-tuition .timetable thead th:first-child { color: var(--purple-dark); }
.page-science-tuition .timetable td.today,
.page-science-tuition .timetable th.today { background: #f6f4fd; }
.page-science-tuition .timetable .subject-box h5 {
  margin: 0 0 4px;
  font-size: 12.5px;
  font-weight: var(--weight-bold);
  color: var(--navy);
  overflow-wrap: break-word;
  word-break: break-word;
}

.page-science-tuition .timetable .subject-box div {
  font-size: 11.5px;
  color: var(--body);
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap !important;
}
.page-science-tuition .timetable-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 8px 16px;
  border-radius: 10px;
  background: #f6f4fd;
  color: var(--navy);
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
}
.page-science-tuition .timetable-download i { font-size: var(--text-md); color: var(--purple-dark); flex: none; }
.page-science-tuition .timetable-download span {
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
  color: var(--purple-dark);
}
.page-science-tuition .timetable-empty { padding: 30px 12px; text-align: center; color: var(--muted); }

@media (max-width: 767.98px) {
  /* 11.5px here was buying narrower columns, but the frame scrolls anyway
     (see below), so the table was shrinking real content to save width it
     did not need to save. --text-sm keeps the day and subject names
     legible and lets the swipe absorb the extra width. */
  .page-science-tuition .timetable table { font-size: var(--text-sm); }
  .page-science-tuition .timetable th,
  .page-science-tuition .timetable td { padding: 8px; width: 116px; }

  /* A five-day week is ~550px wide and cannot shrink to a phone, so the
     frame scrolls. Nothing said so: the table was simply cut off at the
     edge and later columns looked absent rather than off-screen. The
     backdrop and inner padding also cost ~112px of the 390px viewport,
     which is width the table needs more than the frame does. */
  .page-science-tuition .timetable-backdrop { padding: 12px; }
  .page-science-tuition .timetable-inner { padding: 12px; }

  /* Momentum scrolling plus a note, so the gesture is discoverable. */
  .page-science-tuition .timetable-frame {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  /* A block child only ever fills the *visible* width of a scroll container,
     so scrolling right ran the white panel out and exposed the gradient
     behind the table. `min-content` makes it as wide as the table it holds. */
  .page-science-tuition .timetable-inner { min-width: min-content; }

  /* Downloading the timetable is the main action here for anyone who does
     not want to swipe, so it gets a full-width 44px target. */
  .page-science-tuition .timetable-download {
    display: flex;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
  }
  .page-science-tuition .timetable thead th { scroll-snap-align: start; }
  .page-science-tuition .timetable-frame::after {
    content: "Swipe to see the rest of the week →";
    display: block;
    padding: 8px 12px 10px;
    font-size: 12px;
    color: var(--white);
    text-align: center;
  }
}