.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-e { --depth: 1.3; }
.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-a {
  top: 5%;
  left: 20%;
  width: 72%;
}
.page-videos .shot-stack .shot-c {
  top: 30%;
  left: 0%;
  width: 40%;
}
.page-videos .shot-stack .shot-b {
  top: 58%;
  left: 70%;
  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: 6%;
  left: 6%;
  width: 84%;
}
.page-tutors .shot-stack .shot-b {
  top: 64%;
  left: 30%;
  width: 40%;
}

.page-schools .shot-stack .shot-a {
  top: 5%;
  left: 0%;
  width: 62%;
}
.page-schools .shot-stack .shot-b {
  top: 59%;
  left: 16%;
  width: 46%;
}
.page-schools .shot-stack .shot-c {
  top: 5%;
  left: 64%;
  width: 40%;
}

.page-live-lessons .shot-stack .shot-a {
  top: -12%;
  left: -10%;
  width: 48%;
  transform: translate3d(var(--mx), var(--my), 0) scale(.8);
}
.page-live-lessons .shot-stack .shot-b {
	top: -16%;
	left: 22%;
	width: 68%;
}
.page-live-lessons .shot-stack .shot-c {
  top: 42%;
  left: -2%;
  width: 36%;
  z-index: 3;
  transform: translate3d(var(--mx), var(--my), 0) scale(.8);
  height: fit-content;
}
.page-live-lessons .shot-stack .shot-d {
  top: 50%;
  left: 58%;
  width: 38%;
  height: fit-content;
}
.page-live-lessons .shot-stack .shot-e {
	top: -21%;
	left: 85%;
	width: 28%;
	z-index: 4;
}
@media (min-width: 992px) and (max-width: 1399.98px) {
  .page-live-lessons .shot-stack .shot-e { left: 76%; }
}

.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%);
  -webkit-filter: saturate(1.15);
          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) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.1) 70%, rgba(166, 238, 210, .3) 100%); }
.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%); }

/* `-hero` is the bare variant: no tint, no padding — the section supplies
   its own artwork. Kept as-is; the trial form brings its own ground (below)
   rather than relying on this. */
.panel-hero {
  background: none;
  padding: 0;
}

/* The rounded mint → lilac band. Same shell on schools/tutors `.dept` and
   every free-trial / signup / enquiry section, so a change to the band is
   one rule. Padding 72/88 and radius 54 are measured off the dept block. */
.dept,
.trial,
.cta,
.join,
.enquiry,
section.signup {
  position: relative;
  margin: var(--space-md);
  padding: 72px 0;
  background: var(--grad-0deg);
  border-radius: var(--radius-band);
  overflow: hidden;

  & > .container {
    position: relative;
    z-index: 2;
  }

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

/* Soft white fade at the top of the dept band so the heading sits on a
   light ground and the pattern shows through below. */
.dept::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(180deg, var(--white) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* White wash from the copy column so the heading stays on a light ground
   and the form frosts over the exposed gradient, matching the design.
   z-index 1 so it sits over the login-bg pattern on the form side. */
.trial::before,
.cta::before,
.join::before,
.enquiry::before,
section.signup::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--white) 40%, var(--white) 46%, transparent 72%);
  pointer-events: none;
  z-index: 1;
}

/* Same SVG as the auth pages. Pinned to the form (right) half so the copy
   column is not patterned; the wash still fades the seam. */
.trial::after,
.cta::after,
.join::after,
.enquiry::after,
section.signup::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 66%;
  background: url("../img/login-bg.svg") center / cover no-repeat;
  opacity: .4;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 991.98px) {
  /* Columns stack, so the wash runs top-to-bottom instead: copy on white,
     form on the gradient. Pattern follows the form to the bottom. */
  .trial::before,
  .cta::before,
  .join::before,
  .enquiry::before,
  section.signup::before {
    background: linear-gradient(180deg, var(--white) 0%, var(--white) 28%, transparent 62%);
  }
  .trial::after,
  .cta::after,
  .join::after,
  .enquiry::after,
  section.signup::after {
    top: 28%;
    width: 100%;
  }
}


.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: 180px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pain-icon img {
  height: 128px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  -webkit-filter: saturate(1.4) brightness(.82);
          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; }
}
/* Below ~360px the row above stops fitting: a 116px icon plus the gap and
   padding leaves the copy ~109px, which is narrower than its longest word,
   so the card refused to shrink and pushed the page 21px wide. Back to the
   stacked form, which has no fixed floor. */
@media (max-width: 374.98px) {
  .pain { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pain-icon { height: 92px; }
  .pain-icon img { height: 66px; }
}


.reviews { text-align: center; }
.reviews h2 { margin: 26px 0 6px; }
.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-lg);
  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); }
/* Was #8a8aa0 (~3.2:1 on white) — fails WCAG AA for 13px text. #555580 clears 4.5:1. */
.review-date { color: #555580; 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-wrap { display: flex; align-items: flex-end; margin-top: 22px; }

/* White chat-cloud. `.bubble` is the homepage mascot pair; `.trial-bubble`
   is the same cloud on every form section, lifted above the brain. */
.bubble,
.trial-bubble {
  position: relative;
  display: block;
  background: var(--white);
  border-radius: 56px;
  padding: 16px 24px;
  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: 0px 4px 24px rgba(0, 0, 0, .12);
}
.bubble { margin: 0 0 68px -16px; }
.bubble::after,
.trial-bubble::after {
  content: "";
  position: absolute;
  left: 34px;
  bottom: -10px;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-top: 12px solid var(--white);
  border-right: 20px solid transparent;
  -webkit-filter: drop-shadow(0 4px 5px rgba(var(--navy-rgb), .06));
          filter: drop-shadow(0 4px 5px rgba(var(--navy-rgb), .06));
}
.bubble-wrap img {
  width: 146px;
  height: auto;
  flex: 0 0 auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transform: scaleX(-1);
}


/* Frosted glass sitting ON the dept gradient. Same fill as `.glass` so the
   two blocks that share that ground read as one family. */
.trial-card {
	height: 100%;
  position: relative;
  isolation: isolate;
	padding: clamp(26px, 3.4vw, 40px) clamp(24px, 3.4vw, 40px);
	border-radius: var(--radius-2xl);
	background: var(--grad-glass);
	border: 2px solid var(--white);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* Ground for cards that are not inside a dept band (the science-tuition
   hero). The band already IS this gradient, so the overlay is switched off
   there or it would double up. */
.trial-card::before {
  content: "";
  position: absolute;
  inset: -28px;
  z-index: -1;
  border-radius: var(--radius-band);
  background: var(--grad-dept);
}
.trial .trial-card::before,
.cta .trial-card::before,
.join .trial-card::before,
.enquiry .trial-card::before,
.signup .trial-card::before,
.hero .trial-card::before {
  content: none;
}

.trial-heading {
  margin-bottom: 16px;
  text-align: center;
  color: var(--navy);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}

.trial-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
}
.trial-social a {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--white-rgb), .9);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) ease, box-shadow var(--duration-base) ease;
}
.trial-social a:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.trial-social img { width: 26px; height: 26px; object-fit: contain; }

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

.trial-card .form-select,
.trial-card .form-control {
  height: 52px;
  border: 1px solid rgba(var(--white-rgb), .6);
  border-radius: var(--radius-lg);
  padding: 0 18px;
  font-size: var(--text-base);
  color: var(--navy);
  background-color: rgba(var(--white-rgb), .6);
}
.trial-card textarea.form-control { height: auto; min-height: 96px; padding: 12px 16px; resize: vertical; }
.trial-card .form-control::placeholder { color: var(--muted); 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), .8);
}

.trial-card .btn-soft {
  background: var(--grad-brand);
  color: var(--white);
  box-shadow: var(--shadow-btn);
}
.trial-card .btn-soft:hover {
  color: var(--white);
  box-shadow: var(--shadow-md);
}


.trial-foot p { color: var(--body); font-size: 14px; line-height: 1.4; margin: 0; }
.trial-foot p a {
  color: var(--navy);
  font-weight: var(--weight-bold);
  text-decoration: underline;
}


.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(--teacher-role);
  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 .stat-title { font-size: 12px; font-weight: var(--weight-semibold); margin: 0; padding: 0; color: var(--ink); }
.stat-bubble p:not(.stat-title) { 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;

	padding: clamp(26px, 3.4vw, 40px) clamp(24px, 3.4vw, 40px);
	border-radius: var(--radius-2xl);
	background: var(--grad-glass);
	border: 2px solid var(--white);
	box-shadow: var(--shadow-lg);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	
  text-align: center;
}
.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);
}

/* Below xl the hero stacks (or is simply narrow) and its content grows past
   the fixed 720px, which `overflow: hidden` then cut off — 483px of the home
   hero, 501px of live-lessons, and less but still visible amounts on schools,
   tutors, parents and videos. The height has to become a floor here. It stays
   a fixed height at xl and up, where the desktop composition and .hero-bg's
   artwork are both measured off exactly 720px.
   xl rather than lg because 992-1199 is the band where the two-column hero is
   still on but the column is narrow enough to run tall — live-lessons still
   lost 79px there when this stopped at lg. */
@media (max-width: 1199.98px) {
  .hero {
    height: auto;
    min-height: var(--hero-min);
  }
}

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

.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.no-after::after { display: none; }
.hero-bg.no-before::before { display: none; }
.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; }
}

/* Now that the hero grows with its content below xl, .hero-bg is a tall box
   holding a wide, short artwork. `object-fit: contain` centres that artwork
   in the box, so it painted as a band across the middle of the copy with a
   hard edge above and below it. Anchoring the image to the top keeps the
   colour behind the heading — where the desktop composition puts it — and
   leaves the stacked content below it on white. The box itself is left
   alone; only the artwork's position inside it changes. */
@media (max-width: 1199.98px) {
  .hero-bg img { 
    object-position: top right;
    object-fit: none;
  }
}


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

.hero h1 {
  font-weight: var(--weight-regular);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.2;
  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-md);
  color: var(--navy);
}
.hero-checks img.tick { width: 20px; height: 20px; flex: none; }


.hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  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, 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; }

  /* The media column leads on a phone. Source order puts the copy first,
     which is right for reading order and for the markup, but on a narrow
     screen it pushes the artwork (and, on the signup landings, the form
     itself) below a screenful of text. Ordering the flex children rather
     than reordering the markup keeps the DOM order intact for screen
     readers and keyboard users. */
  .hero > .container > .row > *:last-child  { order: -1; }
  .hero-media { margin-top: 0; margin-bottom: 24px; }
}
@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;
  text-wrap-style: balance;
}

.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-regular);
  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 {
	position: relative;
  padding: 70px 0 90px;

  @media (max-width: 991.98px) {
    padding: var(--section-y) 0;
  }
}
.compare-panel {
	width: 100%;
	padding: 24px;
	border-radius: var(--radius-2xl);
	background: var(--grad-glass);
	border: 2px solid var(--white);
	box-shadow: var(--shadow-lg);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.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: 16px;
  font-weight: var(--weight-regular);
  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-regular); 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 {
  color: var(--navy);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin: 0 0 16px;
  text-wrap-style: balance;
}
.trial-cta { margin-bottom: 40px; }


.trial-brain {
  --trial-brain-w: 140px;
  display: flex;
  align-items: flex-start;
  margin-top: var(--space-lg);
}
.trial-brain img {
  width: var(--trial-brain-w);
  height: auto;
  flex: none;
  transform: scaleX(-1);
  margin-top: var(--space-xl);
}


.trial-divider {
  position: relative;
  text-align: center;
  color: var(--body);
  font-size: var(--text-sm);
  margin: 0 0 8px;
}
.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;
	margin-top: -88px;
	margin-bottom: -88px;
	z-index: var(--z-base);
	transform: scale(1.15);
}
.excel-devices > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}


.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: 76%;
	height: auto;
	object-fit: contain;
}
.step-label {
	font-weight: var(--weight-semibold);
	font-size: var(--text-sm);
	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;
}

/* The row is 6-7 steps depending on the page: 7 x 150px plus six arrows needs
   ~1230px, so it does not fit a 936px container at 1024px and did not fit at
   1200px either. Wrapping is therefore allowed at every width and the row is
   centred; the arrows only make sense while the steps sit on one line, so they
   are dropped once the row can wrap. Below lg the circles shrink as well. */
.steps { flex-wrap: wrap; row-gap: 40px; }

@media (max-width: 1399.98px) {
  .step-arrow { display: none; }
}

@media (max-width: 991.98px) {
  .steps { gap: 30px 6px; --step-w: 132px; --step-circle: 108px; }
}

@media (max-width: 575.98px) {
  .steps { row-gap: 24px; --step-w: 128px; --step-circle: 96px; }
}

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

/* LOSE CARDS — the "why the alternatives fall short" comparison row.
   Unscoped: videos, past-papers, the eBook landings and now home all
   render it, and the design system says the block moves here rather
   than gaining a fourth page-scoped copy. The videos treatment is
   canonical; per-page icon tones stay in main.css. */
.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;
}
.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%);
}
.lose-ico img {
  width: 88%;
  height: 88%;
  max-width: 178px;
  max-height: 178px;
  object-fit: contain;
  -webkit-filter: brightness(.72) contrast(1.35) saturate(1.15);
          filter: brightness(.72) contrast(1.35) saturate(1.15);
}

.lose-ico-ks { background: linear-gradient(165deg, #7fd6c2 0%, var(--purple) 100%); }
.lose-ico-ks img { -webkit-filter: none; filter: none; }
.lose-card h3 { margin: 0 0 12px; font-size: 22px; font-weight: var(--weight-regular); }
.lose-card ul { list-style: none; margin: 0; padding: 0; }
.lose-card li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: var(--weight-regular);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.9;
}
.lose-mark { display: inline-flex; flex: none; }
.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. */
  .lose-card li { font-size: 13px; letter-spacing: .01em; }
}

/* GET CARDS — `.get-card`. Unscoped: videos "What Students Get" and
   past-papers "Questions by Topic" share the coloured glass tile,
   screenshot/mock banner and centred title. Page-specific banner shape
   (16:9 crop vs overflowing mock) stays in main.css. */
.get-card {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: var(--space-md);
  border-radius: var(--radius-xl);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  overflow: hidden;
  transition: box-shadow var(--duration-base) var(--ease);

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, #ffffffd6 30%, #ffffffd6 70%, rgba(255, 255, 255, 0.1) 100%);
    z-index: -1;
    pointer-events: none;
  }
  &:hover { box-shadow: var(--shadow-md); }
}
.get-card-blue   { background: #87CFD7; }
.get-card-mint   { background: var(--tile-mint); }
.get-card-purple { background: var(--tile-purple); }

.get-banner {
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  overflow: hidden;

  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
}
.get-banner-ico i {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 60px;
  color: var(--navy);
  background: rgba(var(--white-rgb), .55);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.get-body {
  padding: var(--space-md) var(--space-xs) var(--space-xs);
  text-align: center;

  & h3 { margin: 0 0 6px; font-size: var(--text-xl); }
  & p {
    margin: 0 auto;
    font-size: var(--text-md);
    color: var(--body);
  }
}

/* THE LEARNING-CYCLE BAND — `.flow.cycle`. Unscoped now that home renders
   it too. The fill is the mint→purple tile palette with a white beam from
   the top-left; the mask fades both ends into the white page so the glass
   petals and cards have colour to sit on without a hard coloured edge. */
.flow.cycle {
  position: relative;
  overflow-x: clip;
  padding: 88px 0 104px;

  @media (max-width: 991.98px) {
    padding: var(--section-y) 0;
  }
}
.flow.cycle::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 50% at 18% 0%, rgba(var(--white-rgb), .55) 0%, transparent 52%),
    var(--grad-0deg);
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 72%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 72%, transparent 100%);
}
.flow.cycle > .container { position: relative; z-index: 1; }
.cycle-cta { margin-top: 48px; }


/* =====================================================================
   THE LEARNING-CYCLE RING — `.cycle-ring`

   Six teardrop petals around a common centre, each carrying an icon disc
   and its step number, with a labelled card sitting outside every petal.
   Built as its own block rather than by extending `.steps`: that linear
   row is shared by five pages (home, videos, tutors, past-papers,
   live-lessons) and must keep behaving as it does.

   Geometry. Each petal is a square rotated 45deg with three corners fully
   rounded and the fourth left sharp — that sharp corner is what points at
   the centre. The petal is placed by rotating it around the ring's centre
   with `transform: rotate() translateY()`, so one --angle per petal is the
   only per-item value.

   Counter-rotation. The icon and the number sit inside a rotated parent,
   so each is wrapped in its own counter-rotation (`rotate(calc(-1 *
   var(--angle)))`) to stand upright. Without it every icon would tilt with
   its petal.
   ===================================================================== */

.cycle-ring {
	--ring-size: 600px;
	--petal-w: 234px;
	--petal-h: 164px;
	--tip-gap: 22px;

	position: relative;
	width: var(--ring-size);
	height: var(--ring-size);
	margin: 0 auto;
	flex: none;
}

.cycle-petal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--petal-w);
  height: var(--petal-h);
  margin: calc(var(--petal-h) / -2) 0 0 calc(var(--petal-w) / -2);
  transform-origin: 50% 50%;

  /* The designer's petal.svg points RIGHT, and its tip sits at the far right
     edge of the box. Rotating about the box centre would swing that tip in a
     circle of its own; instead the box is pushed LEFT by half its width first
     so the tip lands on the ring's centre, and the rotation then sweeps the
     bulb around it. That is what makes all six tips meet at one point. */
  /* Screen-space parallax is prepended so --mx/--my do not rotate with the
     petal; every petal then drifts as one flower instead of splitting. */
  --mx: 0px;
  --my: 0px;
  --petal-scale: 1;
  --depth: .45;
  transform:
    translate3d(var(--mx), var(--my), 0)
    rotate(var(--angle))
    translateX(calc(var(--petal-w) / -2 - var(--tip-gap)))
    scale(var(--petal-scale));
  transition: transform 500ms cubic-bezier(.22, .61, .36, 1);

  /* Clip-path clips border and box-shadow, so the white ring is a full-size
     clipped ::before and the fill is the same shape inset 2px. */
}
.cycle-petal::before,
.cycle-petal::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  -webkit-clip-path: url(#cyclePetal);
          clip-path: url(#cyclePetal);
}
.cycle-petal::before {
  inset: 0;
  background: var(--white);
}
.cycle-petal::after {
  inset: 2px;
  /* Opaque fill, so no backdrop-filter: there is nothing to see through it,
     and the blur was costing a compositor layer per petal for no effect. */
  background: var(--grad-petal);
}

/* The disc sits toward the petal's rounded (outer) end, the number toward
   its point. Both undo the petal's rotation so they stand upright. */
/* Both sit inside a rotated petal, so each undoes the ring angle to stand
   upright. The bulb is the petal's left end and the tip its right, so the
   disc lives left-of-centre and the number toward the point. */
.cycle-ico,
.cycle-num {
  position: absolute;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%) rotate(calc(-1 * var(--angle)));
}

.cycle-ico {
  left: 10%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  /* Solid white, as in the design. --grad-frost is a mostly-transparent
     frost built for coloured grounds; on the pale petal it disappeared. */
  background: var(--white);
  display: grid;
  place-items: center;
}
.cycle-ico img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  transition: transform var(--duration-base) var(--ease);
}

/* Between the disc and the tip, not out at the point: at right:16% the
   number sat on the petal's centre-facing edge and read as belonging to the
   petal opposite. 34% keeps it inside its own petal, as the design has it. */
.cycle-num {
  right: 14%;
  font-size: 28px;
  font-weight: var(--weight-regular);
  color: var(--navy);
  line-height: 1;
}

/* The six labelled cards. Each is placed against the ring's own box with a
   percentage pair, so they track the ring rather than the section. */
.cycle-card {
  position: absolute;
  width: 250px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;

  --card-y: 0%;
  --lift: 0px;
  --depth: .85;
  --mx: 0px;
  --my: 0px;
  transform: translate3d(var(--mx), var(--my), 0) translateY(var(--card-y)) translateY(var(--lift));
  transition: transform 500ms cubic-bezier(.22, .61, .36, 1), box-shadow var(--duration-base) var(--ease);

  border-radius: var(--radius-xl);
  background: var(--grad-frost);
  border: 1px solid var(--white);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
.cycle-card b {
  font-size: 40px;
  font-weight: var(--weight-regular);
  color: var(--navy);
  line-height: 1;
  flex: none;
}
.cycle-card-label { display: block; }
.cycle-card-label strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--navy);
}
.cycle-card-label span {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  color: var(--body);
}

/* Hover: the petal blooms from the ring centre and the matching card lifts.
   :has() pairs them so hovering either side lights the other. */
.cycle-petal:hover,
.cycle-stage:has(.cycle-card-1:hover) .cycle-petal:nth-child(1),
.cycle-stage:has(.cycle-card-2:hover) .cycle-petal:nth-child(2),
.cycle-stage:has(.cycle-card-3:hover) .cycle-petal:nth-child(3),
.cycle-stage:has(.cycle-card-4:hover) .cycle-petal:nth-child(4),
.cycle-stage:has(.cycle-card-5:hover) .cycle-petal:nth-child(5),
.cycle-stage:has(.cycle-card-6:hover) .cycle-petal:nth-child(6) {
  z-index: 2;
  --petal-scale: 1.05;
}
.cycle-petal:hover .cycle-ico img { transform: scale(1.08); }
.cycle-card:hover,
.cycle-stage:has(.cycle-petal:nth-child(1):hover) .cycle-card-1,
.cycle-stage:has(.cycle-petal:nth-child(2):hover) .cycle-card-2,
.cycle-stage:has(.cycle-petal:nth-child(3):hover) .cycle-card-3,
.cycle-stage:has(.cycle-petal:nth-child(4):hover) .cycle-card-4,
.cycle-stage:has(.cycle-petal:nth-child(5):hover) .cycle-card-5,
.cycle-stage:has(.cycle-petal:nth-child(6):hover) .cycle-card-6 {
  --lift: -4px;
  box-shadow: var(--shadow-md);
}

/* The stage holds the ring plus the cards that overhang it on both sides. */
.cycle-stage {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 0 16px;
  display: flex;
  justify-content: center;
}
.cycle-card-1 { top: 6%;    left: 92px;  --depth: .7; }
.cycle-card-2 { top: 6%;    right: 92px; --depth: .85; }
.cycle-card-3 { top: 50%;   right: 0;    --card-y: -50%; --depth: 1; }
.cycle-card-4 { bottom: 8%; right: 92px; --depth: .9; }
.cycle-card-5 { bottom: 8%; left: 92px;  --depth: .75; }
.cycle-card-6 { top: 50%;   left: 0;     --card-y: -50%; --depth: 1.05; }

/* Below xl the cards no longer clear the ring, so the whole block becomes a
   plain two-column list and the ring is dropped — a 560px ring cannot
   shrink far enough to stay legible, and the cards carry all the content. */
@media (max-width: 1199.98px) {
  .cycle-ring { display: none; }
  .cycle-stage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 720px;
  }
  .cycle-card {
    position: static;
    width: auto;
    transform: translateY(var(--lift));
  }
}
@media (max-width: 575.98px) {
  .cycle-stage { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cycle-petal,
  .cycle-card,
  .cycle-ico img { transition: none; }
  .cycle-petal:hover,
  .cycle-stage:has(.cycle-card-1:hover) .cycle-petal:nth-child(1),
  .cycle-stage:has(.cycle-card-2:hover) .cycle-petal:nth-child(2),
  .cycle-stage:has(.cycle-card-3:hover) .cycle-petal:nth-child(3),
  .cycle-stage:has(.cycle-card-4:hover) .cycle-petal:nth-child(4),
  .cycle-stage:has(.cycle-card-5:hover) .cycle-petal:nth-child(5),
  .cycle-stage:has(.cycle-card-6:hover) .cycle-petal:nth-child(6) { --petal-scale: 1; }
  .cycle-card:hover,
  .cycle-stage:has(.cycle-petal:nth-child(1):hover) .cycle-card-1,
  .cycle-stage:has(.cycle-petal:nth-child(2):hover) .cycle-card-2,
  .cycle-stage:has(.cycle-petal:nth-child(3):hover) .cycle-card-3,
  .cycle-stage:has(.cycle-petal:nth-child(4):hover) .cycle-card-4,
  .cycle-stage:has(.cycle-petal:nth-child(5):hover) .cycle-card-5,
  .cycle-stage:has(.cycle-petal:nth-child(6):hover) .cycle-card-6 { --lift: 0px; }
  .cycle-petal:hover .cycle-ico img { transform: none; }
}