.tick { color: var(--teal); flex: 0 0 auto; }

.list-check li img.tick,
.list-check li .tick { width: 20px; height: 20px; margin-top: 2px; }
.list-check li b { color: var(--navy); font-weight: var(--weight-semibold); }
.list-check.list-check-sm li { font-size: 14px; line-height: 1.4; margin-bottom: 10px; gap: 9px; }
.list-check.list-check-sm li img.tick { width: 14px; height: 14px; opacity: .85; }


.shot-stack {
  position: relative;
  width: 100%;
  max-width: 620px;

  aspect-ratio: 1.4643;
}
.shot {
  position: absolute;
  display: block;
  width: auto;
  background: var(--white);
  padding: 8px;
  border-radius: 16px;

  box-shadow: var(--shadow-sm);
}

/* Pointer parallax. The offset is written by main.js into custom properties
   rather than onto `transform` directly, so a layer that already has its own
   transform (the scaled live-lessons cards) composes the two instead of
   losing one. Applies to any [data-parallax-layer], not just .shot. */
[data-parallax-layer] {
  --mx: 0px;
  --my: 0px;
  transform: translate3d(var(--mx), var(--my), 0);
  /* Long ease back to centre on leave; main.js shortens it via .is-pointing
     while the pointer is moving so the art tracks it closely. */
  transition: transform 500ms cubic-bezier(.22, .61, .36, 1);
}
[data-parallax].is-pointing [data-parallax-layer] { transition-duration: 110ms; }

/* Depth: the topmost card travels most, the backdrop least, which is what
   separates the layers as the pointer moves. Read by main.js. */
.shot-a { --depth: .55; }
.shot-b { --depth: 1; }
.shot-c { --depth: .8; }
.shot-d { --depth: 1.15; }
.shot-a { top: 5.86%;  left: 12.3%; width: 71.4%; }

.shot-b { top: 52.27%; left: 53.8%; width: 41.7%; }
.shot-c { top: 52.27%; left: 2.9%;  width: 48%; }

.page-videos .shot-stack .shot-c {
	top: 30%;
	left: -18%;
	width: 40%;
}
.page-videos .shot-stack .shot-b {
	top: 58%;
	left: 38%;
	width: 34%;
}
.page-past-papers .shot-stack .shot-a {
	top: -2%;
	left: 3%;
	width: 38%;
}
.page-past-papers .shot-stack .shot-b {
	top: 7%;
	left: 44%;
	width: 40%;
}
.page-past-papers .shot-stack .shot-c {
	top: 68%;
	left: 8%;
	width: 33%;
}

.page-tutors .shot-stack .shot-a {
	top: 12%;
	left: 0%;
	width: 74%;
}
.page-tutors .shot-stack .shot-b {
	top: 64%;
	left: 30%;
	width: 40%;
}

.page-schools .shot-stack .shot-a {
	top: 5%;
	left: -12%;
	width: 62%;
}
.page-schools .shot-stack .shot-b {
	top: 59%;
	left: 4%;
	width: 46%;
}
.page-schools .shot-stack .shot-c {
	top: 5%;
	left: 53%;
	width: 40%;
}

.page-live-lessons .shot-stack .shot-a {
	top: 2%;
	left: -18%;
	width: 48%;
	transform: translate3d(var(--mx), var(--my), 0) scale(.8);
}
.page-live-lessons .shot-stack .shot-b {
	top: -10%;
	left: 18%;
	width: 64%;
}
.page-live-lessons .shot-stack .shot-c {
	top: 43%;
	left: -4%;
	width: 40%;
	transform: translate3d(var(--mx), var(--my), 0) scale(.8);
	height: fit-content;
}
.page-live-lessons .shot-stack .shot-d {
	top: 58%;
	left: 56%;
	width: 38%;
	height: fit-content;
}

.role {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 16px;
  border-radius: 32px;
  width: 320px;
  max-width: 100%;
  transition: transform var(--duration-base) ease, box-shadow var(--duration-base) ease;
}
.role:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.role img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex: 0 0 auto;

  box-sizing: content-box;
  padding: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--white-rgb), .95) 0%, rgba(var(--white-rgb), .78) 100%);
  filter: saturate(1.15);
}
.role b {
  display: block;
  color: var(--navy);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.role span { font-size: 12.5px; color: var(--body); }

.role-student { background: linear-gradient(45deg, rgb(162 234 211 / 50%), rgb(162 234 211 / 20%), rgb(162 234 211 / 50%)); }
.role-student img { background: linear-gradient(135deg, #f6fdfa 0%, #eafaf3 100%); }
.role-teacher { background: linear-gradient(45deg, rgb(89 200 226 / 50%), rgb(89 200 226 / 20%), rgb(89 200 226 / 50%)); }
.role-teacher img { background: linear-gradient(135deg, #f8fcff 0%, #ecf7fe 100%); }
.role-parent  { background: linear-gradient(45deg, rgb(153 148 227 / 50%), rgb(153 148 227 / 20%), rgb(153 148 227 / 50%)); }
.role-parent img  { background: linear-gradient(135deg, #fbfaff 0%, #f0edfd 100%); }

/* Between lg and xl the container is 936px — too narrow for three 320px
   pills, which would wrap 2 + 1. Let them share the row instead. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .role { width: auto; flex: 1 1 0; }
}


.trusts { text-align: center; overflow: hidden; }
.trusts h2 { font-weight: var(--weight-light); font-size: clamp(24px, 3vw, 32px); margin: 0 0 48px; }
.trusts-row { width: 100%; overflow: hidden; }

.trusts-row .swiper-wrapper { transition-timing-function: linear !important; align-items: center; }
.trusts-row .swiper-slide {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trusts-row img { display: block; height: 64px; width: auto; max-width: 200px; object-fit: contain; }


.panel { border-radius: var(--radius-2xl); padding: 48px; }
.panel-mint  { background: linear-gradient(90deg, rgba(135, 207, 215, .3) 0%, rgba(135, 207, 215, .1) 20%, rgba(var(--white-rgb), .1) 75%, rgba(135, 207, 215, .3) 100%); }
.panel-green { background: linear-gradient(90deg, rgba(166, 238, 210, .3) 30%, rgba(166, 238, 210, .1) 50%, rgba(166, 238, 210, .3) 80%); }
.panel-lilac { background: linear-gradient(90deg, rgba(154, 146, 227, .2) 0%, rgba(154, 146, 227, .1) 25%, rgba(154, 146, 227, .1) 75%, rgba(154, 146, 227, .2) 100%); }

.panel-hero {
  background: none;
  padding: 0;
}


.pain {
  display: flex;
  gap: 24px;
  align-items: center;
  height: 100%;
  background: var(--white);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  padding: 16px;
  transition: transform var(--duration-slow) ease, box-shadow var(--duration-slow) ease;
}
.pain:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.pain-icon {
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  height: 154px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pain-icon img {
  height: 112px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  filter: saturate(1.4) brightness(.82);
}

.pain-icon-green  { background: linear-gradient(180deg, var(--white) 0%, #93e4cf 100%); }
.pain-icon-teal   { background: linear-gradient(180deg, var(--white) 0%, #90e1db 100%); }
.pain-icon-blue   { background: linear-gradient(180deg, var(--white) 0%, #88d5ef 100%); }
.pain-icon-purple { background: linear-gradient(180deg, var(--white) 0%, #af9ff0 100%); }
.pain h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 4px 0 8px; line-height: 1.3; }
.pain p  { font-size: var(--text-base); color: var(--body); margin: 0; }

/* Two cards share the row from 768px up, which leaves the text beside a
   154px icon only a few words wide. Stack the icon above the copy until
   the card is wide enough to sit them side by side again. */
@media (max-width: 1199.98px) {
  .pain { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pain-icon { height: 96px; }
  .pain-icon img { height: 68px; }
}
@media (max-width: 767.98px) {
  .pain { flex-direction: row; align-items: center; gap: 24px; }
  .pain-icon { height: 116px; }
  .pain-icon img { height: 84px; }
}


.reviews { text-align: center; }
.reviews h2 { margin: 26px 0 6px; }
.reviews-sub {
  color: var(--navy);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  margin: 0 0 40px;
}
.reviews-note {
  max-width: var(--prose-max);
  margin: 44px auto 0;
  color: var(--navy);
  font-size: 17px;
  line-height: 1.6;
}

.trustpilot {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.trustpilot-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  color: #191919;
}
.trustpilot-name i,
.trustpilot-name svg { font-size: 22px; width: 22px; height: 22px; color: #00b67a; }

.stars { display: inline-flex; gap: 3px; }
.stars span {
  width: 26px;
  height: 26px;
  background: #00b67a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 17px;
}
.stars span svg { width: 17px; height: 17px; color: var(--white); }
.stars span.half { background: linear-gradient(90deg, #00b67a 50%, #dcdce6 50%); }

.review {
  height: 100%;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  text-align: left;
}
.review-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.review-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
  color: var(--white);
  font-size: var(--text-base);
  background: var(--navy);
  background-size: cover;
  background-position: center;
}
.review-name { font-weight: var(--weight-bold); color: #1a1a2e; font-size: var(--text-base); }
.review-date { color: #8a8aa0; font-size: var(--text-sm); }
.review .stars { margin-bottom: 12px; }
.review .stars span { width: 22px; height: 22px; font-size: 14px; }
.review .stars span svg { width: 14px; height: 14px; }
.review p { font-style: italic; font-size: 14.5px; color: var(--body); margin: 0; line-height: 1.55; }


.bubble {
	position: relative;
	background: #f7f7f7;
	border-radius: 56px;
	padding: 16px 24px;
	margin: 0 0 68px -16px;
	color: var(--navy);
	font-weight: var(--weight-semibold);
	font-size: var(--text-sm);
	line-height: 1.4;
	max-width: 258px;
	text-align: center;
	box-shadow: var(--shadow-md);
}
.bubble::after {
  content: "";
  position: absolute;
  left: 34px;
  bottom: -10px;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-top: 12px solid #f7f7f7;
  border-right: 20px solid transparent;
  filter: drop-shadow(0 4px 5px rgba(var(--navy-rgb), .06));
}
.bubble-wrap { display: flex; align-items: flex-end; margin-top: 22px; }
.bubble-wrap img {
	width: 146px;
	height: auto;
	flex: 0 0 auto;
	aspect-ratio: 3/2;
	object-fit: cover;
	transform: scaleX(-1);
}


.trial-card {
  background: var(--grad-panel);
  border: 0;
  border-radius: var(--radius-2xl);
  padding: 32px;
  box-shadow: var(--shadow-lg);
}

.trial-card .btn-google {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 0 24px;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: none;
  font-size: var(--text-base);
}

/* Solid white fields on the gradient — generous height and radius so they
   read as distinct panels rather than outlines. */
.trial-card .form-select,
.trial-card .form-control {
	height: 48px;
	border: 0;
	border-radius: var(--radius-md);
	padding: 0 16px;
	font-size: var(--text-base);
	color: var(--navy);
}
.trial-card textarea.form-control { height: auto; min-height: 96px; padding: 12px 16px; resize: vertical; }
.trial-card .form-control::placeholder { color: #98a0c4; font-size: var(--text-base); font-weight: var(--weight-regular); }
.trial-card .form-select:focus,
.trial-card .form-control:focus {
  box-shadow: 0 0 0 3px rgba(var(--white-rgb), .55);
}
/* .btn-soft is a translucent tint of the same gradient — on top of the card
   it disappears. Inside the card it becomes a solid pill instead. */
.trial-card .btn-soft {
  --bs-btn-color: var(--navy);
  --bs-btn-hover-color: var(--navy);
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.trial-card .btn-soft:hover { color: var(--navy); box-shadow: var(--shadow-md); }


.trial-foot p { color: var(--white); font-size: 14px; line-height: 1.4; margin: 0; }
.trial-foot p b { color: var(--white); font-weight: var(--weight-bold); }


.teacher-photo { text-align: center; }
.teacher-photo img {
  width: 320px;
  height: 320px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto;
}
.teacher-body { position: relative; }
.teacher-body h3 { font-size: var(--text-3xl); font-weight: var(--weight-semibold); margin: 0 0 4px; }
.teacher-role {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--teal);
  margin: 0 0 24px;
}
.teacher-body ul { list-style: none; margin: 0; padding: 0; }
.teacher-body li { display: flex; gap: 14px; margin-bottom: 20px; align-items: flex-start; }
.teacher-body li img { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; margin-top: 2px; }
.teacher-body li b { color: var(--navy); font-weight: var(--weight-semibold); }
.teacher-body li span { color: var(--body); font-size: var(--text-base); }
.teacher-arrow { position: absolute; width: 120px; height: auto; z-index: 2; top: -6px; left: -150px; }
.teacher-arrow.purple { left: 450px;right: auto; }


.feature {
  height: 100%;
  background: var(--surface);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
}
.feature .eyebrow { margin-bottom: var(--space-xs); }
.feature h3 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); margin: 0 0 var(--space-md); line-height: var(--leading-snug); }
/* :not(.eyebrow) — a bare `.feature p` outranks .eyebrow-teal and would
   repaint the label in body colour. */
.feature p:not(.eyebrow) { color: var(--body); font-size: var(--text-md); margin: 0 0 var(--space-lg); flex: 1 1 auto; }
.feature .btn { align-self: flex-start; }


.stat-bubble {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px 8px 8px;
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-frame);
}
.stat-bubble img { width: 32px; height: 32px; object-fit: contain; }
.stat-bubble .stat-body { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.stat-bubble h4 { font-size: 12px; font-weight: var(--weight-semibold); margin: 0; padding: 0; }
.stat-bubble p  { font-size: 10px; color: var(--body); margin: 0; padding: 0; }
.stat-bubble-one { top: 10%; left: 0%; --depth: 1; }
/* The lower callout sits nearer the device, so it travels a little less. */
.stat-bubble-two { bottom: 38%; right: 16%; --depth: .7; }


.price-toggle {
  display: inline-flex;
  background: rgba(var(--white-rgb), .55);
  border-radius: 40px;
  margin: 6px auto 46px;
  gap: 4px;
}
.price-toggle button {
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: var(--text-sm);
  padding: 16px 32px;
  border-radius: 40px;
  background: transparent;
  color: var(--navy);
  transition: background var(--duration-base) ease, box-shadow var(--duration-base) ease;
}
.price-toggle button.active { background: var(--white); box-shadow: var(--shadow-sm); }

.price {
  position: relative;
  container-type: inline-size;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(45deg, rgba(var(--white-rgb), .9) 10%, rgba(var(--white-rgb), .2) 25%, rgba(var(--white-rgb), .2) 75%, rgba(var(--white-rgb), .8) 90%);
  border: 3px solid rgba(var(--white-rgb), .7);
  border-radius: 40px;
  padding: 40px 24px 24px;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.price-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--grad-brand);
  color: var(--white);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
  padding: 8px 24px;
  border-radius: 40px;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.price h3 { font-size: var(--text-2xl); font-weight: var(--weight-regular); margin: 0 0 12px; }
.price-desc { color: var(--body); font-size: 14px; min-height: 84px; margin: 0 0 12px; }
.price-amount { margin: 0 0 22px; }
.price-amount b { font-size: 46px; font-weight: var(--weight-light); color: var(--navy); }
.price-amount span { font-size: var(--text-lg); color: var(--body); }

/* The plan CTA is a frosted glass pill rather than the gradient one */
.price-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.price-list li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--body);
  margin-bottom: 8px;
  font-weight: var(--weight-regular);
}
.price-list li img.tick { width: 17px; height: 17px; margin-top: 2px; }
.price-includes {
	font-weight: var(--weight-bold);
	color: var(--navy);
	margin: 12px 0;
	text-align: left;
	padding-left: 27px;
	font-size: var(--text-md);
}
.price-best {
  margin-top: auto;
  padding-top: 24px;
  text-align: center;
  border-top: 1px solid #ffffff66;
}
.price-best b {
  display: block;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  color: var(--navy);
  margin-bottom: 6px;
}
.price-best span { display: block; min-height: 58px; color: var(--body); font-size: var(--text-sm); }


@media (max-width: 1199.98px) {
  .price { padding: 24px; }
  .price-amount b { font-size: 40px; }
}
@media (max-width: 991.98px) {
  .shot-stack { margin: 0 auto; max-width: 560px; }
  .panel { padding: 34px; }
  .price { padding: 34px 26px; }
  .price-desc { min-height: 0; }
  .teacher-arrow { display: none; }
}
@media (max-width: 575.98px) {
  .teacher-photo img { width: 220px; height: 220px; }
  .price { padding: 30px 18px; }
  .price-amount b { font-size: var(--text-4xl); }
  .price-includes { white-space: normal; }
}


.hero {
  position: relative;
  overflow: hidden;
  background: var(--white);
  padding: 148px 0 40px;

  height: var(--hero-min);
}
.hero > .container {
  position: relative;
  z-index: var(--z-base);
}

/* HERO BACKGROUND — the same artwork on every page. hero-bg.webp is anchored
   top-right at 75% width over a white page, then faded back into white on
   its left and bottom edges so the copy always sits on white. Both fades are
   on the wrapper, not the image, so the artwork itself is never re-exported
   per page. */
.hero-bg {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
	z-index: var(--z-base);
}
.hero-bg::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 240px;
  background: linear-gradient(transparent, var(--white) 50%);
	z-index: var(--z-base);
}
.hero-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 420px;
  height: 100%;
  background: linear-gradient(90deg, var(--white) 50%, transparent);
}
.hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: right;
}

@media (max-width: 991.98px) {
  .hero-bg { width: 100%; }
  .hero-bg::after { width: 180px; }
}


.hero-content { max-width: 560px; }

.hero h1 {
  font-weight: var(--weight-semibold);
  font-size: clamp(28px, 3vw, 34px);
  line-height: 1.16;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 24px;
}
.hero-sub {
  font-weight: var(--weight-semibold);
  color: var(--navy);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  margin: 0 0 16px;
	text-wrap-style: pretty;
}
.hero-desc {
  color: var(--body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  margin: 0 0 24px;
	text-wrap-style: pretty;
}


.hero-checks {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero-checks li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--navy);
}
.hero-checks img.tick { width: 20px; height: 20px; flex: none; }


.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}


.hero-proof {
  list-style: none;
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin: 24px 0 0;
  padding: 0;
}
.hero-proof li,
.hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--body);
}
.hero-proof img.tick { width: 16px; height: 16px; flex: none; }

.hero-media { position: relative; }

@media (max-width: 991.98px) {
  /* Stacked: copy sits above the art, so the hero is tall on its own content.
   A desktop floor here would only add dead space below the collage. */
  .hero { min-height: 0; }
  .hero-content { max-width: none; }
  .hero-media { margin-top: 16px; }
}
@media (max-width: 575.98px) {
  .hero h1 { font-size: 28px; }
  .hero-proof { gap: 16px; }
  /* 11px uppercase with wide tracking is the least legible combination there
     is; these are the reassurance points under the hero CTA, so they need to
     be read. The tracking comes down with the size going up. */
  .hero-proof li,
  .hero-proof span { font-size: 13px; letter-spacing: .02em; }
}


.section-head {
  max-width: var(--prose-max);
  margin: 0 auto 48px;
  text-align: center;
}
.section-head .h2 { margin: 0 0 16px; }

.section-head > p,
.section-head > div > p {
  color: var(--body);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  margin: 0;
}
.section-head .eyebrow { margin-bottom: 16px; }
.section-head .btn { margin-top: 24px; }


.trial-title {
	font-weight: var(--weight-semibold);
	font-size: clamp(24px, 3vw, 36px);
	margin: 0 0 16px;
}

.section-head-start {
  max-width: 900px;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.section-head-split {
  max-width: none;
  text-align: left;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.section-head-split > div { max-width: var(--prose-max); }
.section-head-split .btn { margin-top: 0; flex: none; }

@media (max-width: 991.98px) {
  .section-head { margin-bottom: 32px; }
  .section-head-split { flex-direction: column; align-items: flex-start; }
  .section-head-split .btn { margin-top: 8px; }
}


/* PROSE — long-form copy: the story, the policies, the terms. Shared because
   about, terms and cookie all render the same kind of text. */
.prose {
  max-width: var(--prose-max);
  color: var(--body);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
}
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 20px; }
.prose h2 {
  margin: 40px 0 16px;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}
.prose h3 {
  margin: 32px 0 12px;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}
.prose ul,
.prose ol { margin: 0 0 20px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--navy); font-weight: var(--weight-semibold); }
.prose strong,
.prose b { color: var(--navy); font-weight: var(--weight-semibold); }

/* Tables inside prose (the cookie policy carries six) scroll on their own
   rather than pushing the page sideways. */
.prose-table {
  overflow-x: auto;
  margin: 0 0 24px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--navy-rgb), .1);
}
.prose-table table { width: 100%; margin: 0; border-collapse: collapse; }
.prose-table th,
.prose-table td {
  padding: 12px 16px;
  text-align: left;
  font-size: var(--text-sm);
  line-height: 1.5;
  border-bottom: 1px solid rgba(var(--navy-rgb), .08);
  vertical-align: top;
}
.prose-table th {
  background: rgba(var(--navy-rgb), .04);
  color: var(--navy);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.prose-table tr:last-child td { border-bottom: 0; }


.hero-photo {
  margin: 0;
  max-width: 560px;
  margin-left: auto;
}
.hero-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}


.soft-band {
  position: relative;
  --soft-fade: 220px;
}
.soft-band::before,
.soft-band::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--soft-fade);
  pointer-events: none;
  z-index: 0;
}
.soft-band::before {
  top: 0;
  background: linear-gradient(var(--white) 0%, rgba(var(--white-rgb), 0) 100%);
}
.soft-band::after {
  bottom: 0;
  background: linear-gradient(rgba(var(--white-rgb), 0) 0%, var(--white) 100%);
}

.soft-band > .container { position: relative; z-index: 1; }


.soft-band-top::after { content: none; }
.soft-band-bottom::before { content: none; }


/* COMPARISON TABLE — "us versus the alternatives". One block for every page
   that shows one; the videos treatment is canonical. The table scrolls
   inside its own panel rather than widening the page. */
.compare {
  padding: 70px 0 90px;
  background: linear-gradient(120deg, #bfe8df 0%, #d8ecf1 45%, #cdd2f2 100%);
}
.compare-panel {
  background: linear-gradient(160deg, rgba(var(--white-rgb), .75) 0%, rgba(var(--white-rgb), .5) 100%);
  border: 1px solid rgba(var(--white-rgb), .7);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 24px;
  overflow-x: auto;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.compare-table th,
.compare-table td { padding: 14px 16px; text-align: center; }
.compare-table thead th {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 14px;
  font-weight: var(--weight-bold);
  color: var(--navy);
  padding-top: 32px;
  padding-bottom: 24px;
}
.compare-table th:first-child,
.compare-table td:first-child { text-align: left; width: 30%; }
.compare-feat { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--navy); }
.compare-table th:not(:first-child),
.compare-table td:not(:first-child) { border-left: 1px solid rgba(var(--navy-rgb), .10); }

.compare-table .is-ks { background: rgba(var(--white-rgb), .38); }
.compare-table tbody tr + tr td { border-top: 1px solid rgba(var(--navy-rgb), .06); }
.compare-yes,
.compare-no { display: inline-flex; }
.compare-yes img,
.compare-no img { width: 20px; height: 20px; object-fit: contain; }
.compare-partial { font-size: var(--text-base); color: var(--body); }


.trial-lead {
	font-weight: var(--weight-semibold);
	color: var(--navy);
	font-size: var(--text-lg);
	line-height: var(--leading-snug);
	margin: 0 0 16px;
	text-wrap-style: pretty;
}
.trial-cta { margin-bottom: 40px; }


.trial-brain {
  --trial-brain-w: 140px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.trial-brain img { width: var(--trial-brain-w); height: auto; }
.trial-bubble {
	position: relative;
	background: #f4f5fb;
	border-radius: 20px;
	padding: 16px 24px;
	font-weight: var(--weight-bold);
	font-size: var(--text-md);
	text-align: center;
	color: var(--navy);
	box-shadow: -14px 8px 18px 2px rgb(0 0 0 / 7%);
	max-width: 320px;
}
.trial-bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -12px;
  transform: translateY(-50%);
  border: 12px solid transparent;
  border-right-color: #f4f5fb;
  border-left: 0;
}


.trial-divider {
  position: relative;
  text-align: center;
  color: var(--body);
  font-size: var(--text-sm);
  margin: 0 0 16px;
}
.trial-divider::before,
.trial-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 22px);
  height: 1px;
  background: rgba(var(--navy-rgb), .16);
}
.trial-divider::before { left: 0; }
.trial-divider::after  { right: 0; }


.excel .h2 { margin-bottom: 10px; }
.excel-lead {
  font-weight: var(--weight-semibold);
  color: var(--navy);
  font-size: var(--text-lg);
  margin: 0 0 16px;
}
.excel-media { position: relative; }
.excel-devices { display: flex; justify-content: center; }
.excel-devices > img { width: 100%; max-width: 640px; height: auto; display: block; }


.features-row { margin-top: 24px; }


.steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  --step-w: 150px;
  --step-circle: 132px;
}
.step { text-align: center; width: var(--step-w); flex: none; }
.step-circle {
  width: var(--step-circle);
  height: var(--step-circle);
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-md);
  display: grid;
  place-items: center;
}
.step-circle img { width: 50%; height: 50%; object-fit: contain; }
.step-label {
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	color: var(--navy);
	text-transform: uppercase;
	text-wrap-style: auto;
	margin: 0 auto;
}
.step-desc { margin: 0; font-size: 14px; line-height: 1.45; color: var(--body); }
.step-arrow {
  flex: none;
  margin-top: calc(var(--step-circle) / 2 - 18px);
  color: var(--navy);
  font-size: 30px;
  line-height: 1;
}

/* Stacked below lg, where a row of circles cannot fit and a right-pointing
   arrow between stacked items points the wrong way. */
@media (max-width: 991.98px) {
  .steps { flex-wrap: wrap; gap: 30px 6px; }
  .step-arrow { display: none; }
}

/* SUBJECT CARDS — the three Biology / Chemistry / Physics links.
   Unscoped: about and the eBook thank-you page both use them, and the
   design system says the second page to need a block promotes it here
   rather than adding a page-scoped copy. */
/* The whole card is the link, not just the button at the bottom — three
   words of "Get Started" was a small target for a card-sized affordance.
   `display: flex` + `margin-top: auto` on the footer keeps the three cards'
   buttons aligned when the blurbs run to different line counts. */
.subject-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 28px 28px;
  border-radius: var(--radius-xl);
  text-align: center;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease);
}
.subject-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* A white disc lifts the icons off the tinted card: they are flat-colour
   line art drawn for a white background, and sit muddily on the gradient. */
.subject-ico {
  width: 96px;
  height: 96px;
  margin: 0 0 20px;
  border-radius: 50%;
  background: rgba(var(--white-rgb), .82);
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  flex: none;
}
.subject-ico img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  transition: transform var(--duration-base) var(--ease);
}
.subject-card:hover .subject-ico img { transform: scale(1.08); }

.subject-card h3 {
  margin: 0 0 4px;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}
.subject-kicker {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.subject-blurb {
  margin: 0 0 24px;
  color: var(--body);
  font-size: var(--text-base);
  line-height: 1.5;
}

/* Looks like the pill button it replaces, but it is a span: the anchor is
   the card, and nesting a link inside a link is invalid. */
.subject-go {
  margin-top: auto;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--navy);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease);
}
.subject-card:hover .subject-go { box-shadow: var(--shadow-md); }

.subject-card-green  { background: linear-gradient(155deg, #ddf6ea 0%, #a5e6d0 100%); }
.subject-card-teal   { background: linear-gradient(155deg, #d6f3ec 0%, #9ce0d6 100%); }
.subject-card-purple { background: linear-gradient(155deg, #e6dff9 0%, var(--purple-light) 100%); }

@media (prefers-reduced-motion: reduce) {
  .subject-card,
  .subject-card:hover { transform: none; transition: none; }
  .subject-ico img,
  .subject-card:hover .subject-ico img { transform: none; transition: none; }
}