.page-home,
.page-parents,
.page-schools,
.page-tutors,
.page-videos,
.page-past-papers,
.page-live-lessons { overflow-x: hidden; }


.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);
}


.page-home .smarter { padding: 88px 0 104px; }
.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,
  .page-home .excel .excel-devices {
    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 .understand-sub {
  color: var(--navy);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
}


.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 and
   videos, which carried identical copies. `contain` + `center bottom` keeps
   the artwork sitting under the rows rather than filling behind them. */
.page-home .teachers,
.page-videos .teachers { position: relative; overflow: hidden; background: var(--white); }
.page-home .teachers-bg,
.page-videos .teachers-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.page-home .teachers-bg img,
.page-videos .teachers-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.page-home .teachers > .container,
.page-videos .teachers > .container { position: relative; z-index: 1; }
.page-home .teacher,
.page-videos .teacher { margin: 0 auto 50px; width: 80%; }

.page-home .teachers { padding: 60px 0 90px; }


/* 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;
  background: url('../img/price-bg.webp') center / cover no-repeat;
  padding: 80px 0 104px;
}

.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 .accent-teal-text   { color: var(--teal); }
.page-home .accent-purple-text { color: var(--purple); }

@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;
}


.page-parents .gets-media {
  background: linear-gradient(150deg, #e9f7f2 0%, #eef1fb 100%);
  border-radius: var(--radius-xl);
  padding: 32px;
}

.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; }
.page-parents .gets-content .eyebrow { margin-bottom: 12px; }
.page-parents .gets-content 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 { filter: brightness(.78) saturate(1.55) contrast(1.08); }


.page-parents .pain-icon { height: 132px; min-height: 132px; 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 .{ padding-top: 118px; }
  .page-parents .hero-content { padding-bottom: 20px; max-width: 620px; }
  .page-parents .shot-stack { margin-top: 0; }
  .page-parents .gets-media { order: -1; }
}
@media (max-width: 575.98px) {
  .page-parents .hero h1 { font-size: 28px; }
  .page-parents .gets-media { padding: 20px; }
  .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 h1 span { display: block; }

.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; }


.lorem { display: inline-flex; align-items: center; gap: 10px; font-weight: var(--weight-bold); font-size: var(--text-2xl); color: #2b2b3a; opacity: .85; }
.lorem-dots { position: relative; width: 30px; height: 30px; flex: 0 0 auto; }
.lorem-dots i { position: absolute; width: 11px; height: 11px; border-radius: 50%; }
.lorem-dots i:nth-child(1) { background: #ff6a3d; top: 0;    left: 9px; }
.lorem-dots i:nth-child(2) { background: #7a5cff; top: 12px; left: 0; }
.lorem-dots i:nth-child(3) { background: #7a5cff; top: 12px; left: 18px; }
.lorem-dots i:nth-child(4) { background: #ff6a3d; top: 20px; left: 9px; }


.page-schools .free-card {
  padding: 48px 48px;
  border-radius: var(--radius-2xl);
  background: linear-gradient(120deg, #dff3ee 0%, #eaf5f4 48%, #e4eefb 100%);
}
.page-schools .free-media img { width: 100%; height: auto; }
.page-schools .free-card .eyebrow { color: var(--teal); margin: 0 0 12px; }
.page-schools .free-desc {
  margin: 0 0 24px;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--body);
  max-width: 600px;
}
.page-schools .free-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.page-schools .free-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: var(--text-base);
  color: var(--navy);
  font-weight: var(--weight-medium);
}
.page-schools .free-list img.tick { width: 18px; height: 18px; flex: none; margin-top: 2px; }


.page-schools .book-widget {
  max-width: 940px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.page-schools .book-summary { padding: 30px 30px 26px; border-right: 1px solid #eef0f6; height: 100%; }
.page-schools .book-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.page-schools .book-brand img { width: 26px; height: 26px; }
.page-schools .book-brand span { font-weight: var(--weight-bold); font-size: 14px; color: var(--navy); }
.page-schools .book-summary h3 { margin: 0 0 18px; font-size: 22px; font-weight: var(--weight-bold); line-height: 1.25; }
.page-schools .book-meta { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.page-schools .book-meta li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--body);
  font-weight: var(--weight-medium);
}
.page-schools .book-meta i { font-size: var(--text-lg); flex: none; color: var(--muted); line-height: 1.2; }
.page-schools .book-note { margin: 0 0 20px; font-size: var(--text-sm); line-height: 1.55; color: var(--muted); }
.page-schools .book-links { display: flex; gap: 18px; }
.page-schools .book-links a { font-size: var(--text-sm); color: var(--purple); }
.page-schools .book-links a:hover { color: var(--purple); text-decoration: underline; }

.page-schools .book-cal { padding: 26px 30px 24px; }
.page-schools .book-cal h4 { margin: 0 0 18px; font-size: 17px; font-weight: var(--weight-bold); }
.page-schools .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.page-schools .cal-month { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--navy); }
.page-schools .cal-nav {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--body);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
}
.page-schools .cal-nav:hover { background: #f1f2f8; }
.page-schools .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.page-schools .cal-dow { margin-bottom: 8px; }
.page-schools .cal-dow span {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.page-schools .cal-day {
  aspect-ratio: 1 / 1;
  border: 0;
  background: transparent;
  cursor: default;
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: #c2c4d4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.page-schools .cal-day.is-open { color: var(--purple-dark); font-weight: var(--weight-semibold); background: #eef0fc; cursor: pointer; }
.page-schools .cal-day.is-open:hover { background: #e3e5fb; }
.page-schools .cal-day.is-active { background: var(--purple-dark); color: var(--white); font-weight: var(--weight-bold); }
.page-schools .book-tz { margin-top: 20px; }
.page-schools .book-tz-label { display: block; font-size: 14px; font-weight: var(--weight-semibold); color: var(--navy); margin-bottom: 6px; }
.page-schools .book-tz-value { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--body); }
.page-schools .book-tz-value i { font-size: var(--text-md); color: var(--muted); }

/* Times for the selected day, beside the month grid — the step the design
   only ever showed as a calendar. Slots come from Calendly through
   Website\DemoBookingController; picking one opens Calendly's popup on that
   time, since only they can take the booking. Styling follows .cal-day so the
   two halves read as one control. */
.page-schools .cal-body { display: flex; gap: 26px; align-items: flex-start; }
.page-schools .cal-body-main { flex: 1 1 auto; min-width: 0; }
.page-schools .cal-slots {
  flex: 0 0 190px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}
.page-schools .cal-slots-head {
  margin: 0 0 12px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--navy);
}
.page-schools .cal-slots-list { display: grid; gap: 8px; }
.page-schools .cal-slot {
  width: 100%;
  padding: 11px 8px;
  border: 1px solid #d7d9ec;
  border-radius: 8px;
  background: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--purple-dark);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.page-schools .cal-slot:hover { background: #eef0fc; border-color: var(--purple-dark); }
.page-schools .cal-slot-note { margin: 0; font-size: var(--text-sm); color: var(--muted); }

@media (max-width: 991.98px) {
  .page-schools .cal-body { flex-direction: column; gap: 18px; }
  .page-schools .cal-slots { flex: 1 1 auto; width: 100%; max-height: none; }
  .page-schools .cal-slots-list { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}


.page-schools .dept {
  position: relative;
  margin-top: 8px;
  padding: 72px 0 88px;
	margin-inline: 16px;
  background: linear-gradient(170deg, #8adfca 0%, #8fd2da 34%, #a7b6ea 78%, #b0a7e8 100%);
  border-radius: 54px;
  overflow: hidden;
}
.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: linear-gradient(150deg, rgba(var(--white-rgb), .55) 0%, rgba(var(--white-rgb), .28) 100%);
  border: 1px solid rgba(var(--white-rgb), .6);
  border-radius: var(--radius-xl);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}
.page-schools .feat { padding: 36px 40px 40px; height: 100%; }
.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 .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; }


.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: linear-gradient(95deg, #8b7fd6 0%, #7cc7d0 60%, #6fd0c8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

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

  .page-schools .free-card { padding: 34px; }
  .page-schools .free-desc br { display: none; }
  .page-schools .book-widget { max-width: 560px; }
  .page-schools .book-summary { border-right: 0; border-bottom: 1px solid #eef0f6; }
}
@media (max-width: 767.98px) {
  .page-schools .hero-shot { position: static; width: 100% !important; }

  /* The month arrows are the calendar's main control and were 30px square —
     too small to hit reliably. The day cells cannot reach 44px (seven of
     them plus gaps do not fit a phone), so they get the width back from a
     tighter gap and stay a hair under; the arrows have no such constraint. */
  .page-schools .cal-nav { width: 44px; height: 44px; }
  .page-schools .cal-grid { gap: 4px; }

  .page-schools .book-links a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 575.98px) {
  .page-schools .cal-day { font-size: 12px; }
  .page-schools .free-card { padding: 24px 20px; }
}

.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: 32px;
  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: 84px;
  height: 84px;
  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: 50px; height: 50px; 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;
  left: 50%;
  top: 0;
  width: 150%;
  height: 150%;
  transform: translateX(-50%);
  background: radial-gradient(60% 80% at 50% 12%, #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-tutors .flow > .container { position: relative; z-index: 1; }


.page-tutors .dept {
  position: relative;
  margin-top: 8px;
  padding: 72px 0 88px;
	margin-inline: 16px;
  background: linear-gradient(170deg, #8adfca 0%, #8fd2da 34%, #a7b6ea 78%, #b0a7e8 100%);
  border-radius: 54px;
  overflow: hidden;
}
.page-tutors .dept-cta { text-align: center; margin-bottom: 54px; }

.page-tutors .features-card { padding: 40px 44px 44px; 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: 16px;
}
.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 26px; 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 (max-width: 1199.98px) {
}
@media (max-width: 991.98px) {
  .page-tutors .{ padding-top: 114px; }
  .page-tutors .hero-content { max-width: none; margin-top: 0; }
  .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) {
  .page-tutors .hero-shot { position: static; width: 100% !important; }
  /* The stat cards stack in flow here. They live inside .shot-stack, whose
     aspect-ratio would otherwise hold a fixed height and clip them, so the
     stack has to size to its content for this breakpoint. */
  .page-tutors .shot-stack {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .page-tutors .fcard,
  .page-tutors .fcard-quizzes,
  .page-tutors .fcard-homework,
  .page-tutors .fcard-minutes,
  .page-tutors .fcard-questions,
  .page-tutors .fcard-independent { position: static; top: auto; bottom: auto; left: auto; }
  .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; }
}


.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; }


.page-videos .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-videos .lose-ico {
  width: 100%;
  aspect-ratio: 1.35 / 1;
  border-radius: 16px;
  margin: 0 0 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(165deg, #eafaf5 0%, #b9e9dd 100%);
}
.page-videos .lose-ico img {
  width: 88%;
  height: 88%;
  max-width: 178px;
  max-height: 178px;
  object-fit: contain;
  filter: brightness(.72) contrast(1.35) saturate(1.15);
}

.page-videos .lose-ico-ks { background: linear-gradient(165deg, #7fd6c2 0%, var(--purple) 100%); }
.page-videos .lose-ico-ks img { filter: none; }
.page-videos .lose-card h3 { margin: 0 0 12px; font-size: 18px; font-weight: var(--weight-semibold); }
.page-videos .lose-card ul { list-style: none; margin: 0; padding: 0; }
.page-videos .lose-card li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: var(--weight-bold);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.9;
}
.page-videos .lose-mark { display: inline-flex; flex: none; }
.page-videos .lose-mark img { width: 13px; height: 13px; object-fit: contain; }

@media (max-width: 767.98px) {
  /* The cards stack below md, so each has the full column to itself — the
     11.5px uppercase that keeps three cards level on desktop only costs
     legibility here. */
  .page-videos .lose-card li { font-size: 13px; letter-spacing: .01em; }
}


.page-videos .flow.cycle { position: relative; overflow-x: clip; padding: 88px 0 104px; }
.page-videos .flow.cycle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 150%;
  height: 150%;
  transform: translateX(-50%);
  background: radial-gradient(60% 80% at 50% 12%, #cdeee0 0%, #dfe6f6 34%, #e2ddf6 60%, rgba(234,246,249,0) 82%);
  border-radius: 0 0 50% 50%;
  z-index: 0;
  pointer-events: none;
}
.page-videos .flow.cycle > .container { position: relative; z-index: 1; }
.page-videos .cycle-cta { margin-top: 48px; }

.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 .get-card {
  height: 100%;
  background: var(--white);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.page-videos .get-banner { aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; }
.page-videos .get-banner img { width: 100%; height: 100%; object-fit: cover; }

.page-videos .get-banner-shot { padding: 16px; }
.page-videos .get-banner-shot img {
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.page-videos .get-banner-ico { display: grid; place-items: center; }
.page-videos .get-banner-ico i { font-size: 60px; color: var(--white); }
.page-videos .get-banner-green  { background: linear-gradient(155deg, #a5e6d0, #6fc9a9); }
.page-videos .get-banner-teal   { background: linear-gradient(155deg, #9ce0d6, #5cb9c4); }
.page-videos .get-banner-purple { background: linear-gradient(155deg, var(--purple-light), var(--purple)); }
.page-videos .get-banner-light  { background: linear-gradient(155deg, #f2f4fc, #e6eaf8); }
.page-videos .get-body { padding: 18px 22px 24px; }
.page-videos .get-body h3 { margin: 0 0 6px; font-size: 17px; font-weight: var(--weight-bold); }
.page-videos .get-body p { margin: 0; font-size: 13.5px; color: var(--body); line-height: 1.45; }


@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 .hero-media { min-height: 560px; margin-top: 20px; }
  .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 .hero-media { display: none; }
  .page-videos .teacher-photo { margin: 0 auto; }
  .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; }
}


.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;

  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;
  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; }


.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-media { display: none; }
  .page-past-papers .hero-content { margin-top: 0; }
}


.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 h4 { 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 .teachers {  text-align: center; }
.page-live-lessons .teacher { display: flex; align-items: flex-start; gap: 18px; text-align: left; }
.page-live-lessons .teacher-photo {
	width: 134px;
	height: 134px;
	border-radius: 50%;
}
.page-live-lessons .teacher-photo img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.page-live-lessons .teacher h3 { font-size: 17px; font-weight: var(--weight-semibold); margin: 0 0 2px; }
.page-live-lessons .teacher-role {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--purple-dark);
  margin: 0 0 16px;
}
.page-live-lessons .teacher ul { list-style: none; margin: 0; padding: 0; }
.page-live-lessons .teacher li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--body);
  margin-bottom: 7px;
}
.page-live-lessons .teacher li img.tick { width: 14px; height: 14px; flex: none; }


.page-live-lessons .what {  text-align: center; }
.page-live-lessons .what-card {
  height: 100%;
  border-radius: var(--radius-lg);
  padding: 16px;
  text-align: left;
  background: linear-gradient(160deg, #eaf8f2 0%, #eeecfb 100%);
}
.page-live-lessons .what-card-purple { background: linear-gradient(160deg, #f1eefc 0%, #e7f4f0 100%); }
.page-live-lessons .what-card-teal   { background: linear-gradient(160deg, #e9f7f1 0%, #eef4fb 100%); }
.page-live-lessons .what-thumb {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
  background: var(--white);
  min-height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-live-lessons .what-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-live-lessons .what-card h3 { font-size: var(--text-md); font-weight: var(--weight-semibold); margin: 0 8px 6px; }
.page-live-lessons .what-card p { font-size: var(--text-sm); color: var(--body); margin: 0 8px 10px; }


.page-live-lessons .thumb-mock { width: 100%; padding: 14px; }
.page-live-lessons .thumb-bar { height: 8px; border-radius: 4px; background: #ece9f9; margin-bottom: 8px; }
.page-live-lessons .thumb-bar-sm { width: 55%; }
.page-live-lessons .thumb-bar-md { width: 80%; }
.page-live-lessons .thumb-chip {
  display: inline-block;
  font-size: 9px;
  font-weight: var(--weight-bold);
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--grad-brand);
  color: var(--white);
  margin-bottom: 10px;
}
.page-live-lessons .thumb-box { height: 60px; border-radius: var(--radius-sm); background: #f4f2fd; margin-top: 8px; }
.page-live-lessons .thumb-photo { width: 100%; height: 132px; object-fit: cover; display: block; }


.page-live-lessons .timetable {  text-align: center; }
.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 .card-live { width: 100%; right: 0; }
  .page-live-lessons .card-upcoming { width: 190px; }
  .page-live-lessons .together-card { flex-direction: column; text-align: center; }
  .page-live-lessons .together-list { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  .page-live-lessons .timetable table { font-size: 11.5px; }
  .page-live-lessons .timetable th,
  .page-live-lessons .timetable td { padding: 8px; width: 110px; }

  /* 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-sitemap .hero,
.page-contact .hero,
.page-terms .hero,
.page-cookie .hero,
.page-blog .hero { min-height: 0; }


.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); }

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

@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; }


.page-app .app-phones {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.page-app .app-phone {
  width: 30%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
}
.page-app .app-phone-1,
.page-app .app-phone-3 { width: 27%; opacity: .92; }
.page-app .app-phone-1 { transform: translateX(14%) rotate(-5deg); }
.page-app .app-phone-2 { position: relative; z-index: var(--z-base); }
.page-app .app-phone-3 { transform: translateX(-14%) rotate(5deg); }

.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-app .app-feature-list img.tick { width: 20px; height: 20px; flex: none; }
.page-app .app-covers-list { margin-bottom: 0; }
.page-app .app-covers-list img.tick { width: 20px; height: 20px; flex: none; }
.page-app .app-covers .h2 { margin-bottom: 24px; }
.page-app .app-cta { text-align: center; }
.page-app .app-cta p { color: var(--body); font-size: var(--text-base); margin: 0 0 16px; }


.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); }

.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 16px; }
.page-blog-detail .post-breadcrumb a { color: var(--body); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; }
.page-blog-detail .post-breadcrumb a:hover { color: var(--navy); }
.page-blog-detail .hero h1 { max-width: 900px; }

.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;
  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;
  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 — post-signup confirmation)
   ===================================================================== */

/* .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);
}

.page-thankyou .thankyou-card p {
  margin: 0 0 16px;
  color: var(--body);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
}

/* 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;
}


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

   The paid-traffic landing. Built from the shared blocks; the only
   page-specific rule is the hero's Trustpilot rating.
   ===================================================================== */

/* .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; }

/* 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 {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  line-height: 0;
}
.page-science-tuition .feature-media img,
.page-science-tuition .feature-media video {
  width: 100%;
  height: auto;
  display: block;
}

@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; }
}