/* Markus homepage v2 - new design
   Loaded by Views/Home/Index.cshtml, Pricing.cshtml, About.cshtml, FAQ.cshtml */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --blue:        #2563EB;
  --blue-deep:   #1D4ED8;
  --blue-soft:   #EFF6FF;
  --ink:         #0B1220;
  --ink-2:       #1E293B;
  --muted:       #64748B;
  --line:        #E5E7EB;
  --bg:          #FFFFFF;
  --bg-soft:     #F8FAFC;
  --green:       #10B981;
  --pink:        #EC4899;
  --purple:      #9333EA;
  --amber:       #F59E0B;
  --grad-lc:     linear-gradient(130deg, #9333EA 0%, #DB2777 100%);
  --grad-blue:   linear-gradient(160deg, #3B82F6 0%, #1D4ED8 100%);
  --shadow-sm:   0 2px 8px rgba(15,23,42,.06);
  --shadow-md:   0 12px 32px rgba(15,23,42,.10);
  --shadow-lg:   0 30px 70px rgba(15,23,42,.18);
}

html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  overscroll-behavior: none;
}

/* On real phones, drop the phone-frame chrome */
body { background: var(--bg); }
.stage { padding: 0; min-height: auto; background: var(--bg); display: block; }
.phone-frame { width: 100%; height: auto; padding: 0; border-radius: 0; box-shadow: none; background: var(--bg); }
.phone-screen { width: 100%; height: auto; min-height: 100vh; min-height: 100svh; border-radius: 0; background: var(--bg); }

/* APP SHELL */
.app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.scroll {
  flex: 1;
  overflow: visible;
  scroll-behavior: smooth;
}

/* STATUS BAR - hidden on real devices */
.status-bar { display: none; }

/* TOP NAV */
.top-nav {
  position: sticky; top: 0;
  z-index: 39;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(15,23,42,.06);
  padding: 12px 18px;
  display: flex; align-items: center; justify-content: space-between;
}
.logo {
  font-weight: 900; font-size: 22px; letter-spacing: -0.035em;
  color: var(--ink);
  text-decoration: none;
}
.nav-actions { display: flex; align-items: center; gap: 8px; }
.desktop-nav-links { display: none; }
.btn-cta-nav { display: none; }
.platform-accordion { display: none; }
.faq-preview { display: none; }
.pricing-preview { display: none; }
.footer-grid { display: none; }
.btn-signin {
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  background: transparent; border: 1px solid var(--line);
  padding: 7px 12px; border-radius: 100px;
  text-decoration: none;
  display: inline-block;
}
.hamburger {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--ink); color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  border: none;
}
.hamburger span {
  display: block; width: 14px; height: 2px;
  background: #fff; border-radius: 2px;
  position: relative;
}
.hamburger span::before, .hamburger span::after {
  content: ''; position: absolute; left: 0;
  width: 14px; height: 2px; background: #fff; border-radius: 2px;
}
.hamburger span::before { top: -5px; }
.hamburger span::after  { top:  5px; }

/* HERO ENTRANCE ANIMATIONS */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.hero .entrance {
  opacity: 0;
  animation: heroFadeUp .55s cubic-bezier(.33,1,.68,1) both;
}
.hero .entrance.d1 { animation-delay: .05s; }
.hero .entrance.d2 { animation-delay: .15s; }
.hero .entrance.d3 { animation-delay: .25s; }
.hero .entrance.d4 { animation-delay: .35s; }
.hero .entrance.d5 { animation-delay: .45s; }

/* HERO */
.hero {
  position: relative;
  padding: 32px 22px 56px;
  background:
    radial-gradient(circle at 110% -10%, rgba(255,255,255,.22), transparent 50%),
    radial-gradient(circle at -10% 110%, rgba(147,51,234,.35), transparent 55%),
    linear-gradient(165deg, #1E3A8A 0%, #2563EB 55%, #3B82F6 100%);
  overflow: hidden;
  color: #fff;
}
.hero::before {
  content: '';
  position: absolute;
  top: -40%; left: -20%;
  width: 160%; height: 80%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.10), transparent 60%);
  pointer-events: none;
}
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.15);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 11.5px; font-weight: 700;
  padding: 6px 11px;
  border-radius: 100px;
  letter-spacing: .02em;
  margin-bottom: 18px;
  position: relative;
}
.hero .eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 3px rgba(74,222,128,.25);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue-soft);
  color: var(--blue-deep);
  font-size: 11.5px; font-weight: 700;
  padding: 6px 11px;
  border-radius: 100px;
  letter-spacing: .02em;
  margin-bottom: 16px;
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(16,185,129,.18);
}
.hero h1 {
  /* Fluid below 430px so "Teach more." keeps breathing room; caps at the original 64px */
  font-size: clamp(46px, 15vw, 64px);
  line-height: .92;
  font-weight: 900;
  letter-spacing: -0.055em;
  color: #fff;
  margin-bottom: 22px;
  position: relative;
}
.hero h1 .accent {
  position: relative;
  display: inline-block;
  color: #fff;
}
.hero h1 .accent::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 3px;
  background: #7DD3FC;
  border-radius: 2px;
  transform-origin: left center;
  animation: underlineDraw .8s cubic-bezier(.65,0,.35,1) .75s both;
}
@keyframes underlineDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.hero p {
  font-size: 15.5px; line-height: 1.5;
  color: rgba(255,255,255,.85);
  margin-bottom: 26px;
  position: relative;
}
.hero p b { color: #fff; font-weight: 800; }
.hero-stamp {
  display: inline-flex;
  align-items: center; gap: 8px;
  padding: 7px 12px 7px 9px;
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: 28px;
  position: relative;
}
.hero-stamp .stamp-icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  color: var(--blue-deep);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 900;
  letter-spacing: 0;
  flex-shrink: 0;
}
.hero .cta-row { position: relative; gap: 14px; margin-bottom: 0; }
.hero .btn-primary {
  background: #fff;
  color: var(--blue-deep);
  box-shadow: 0 14px 36px rgba(0,0,0,.3);
  padding: 18px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.015em;
  border-radius: 18px;
}
.hero .btn-link {
  background: transparent;
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
  padding: 4px 0;
  display: inline-flex; align-items: center; gap: 5px;
  align-self: center;
  cursor: pointer;
  opacity: .85;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.35);
  text-underline-offset: 4px;
}
.hero .btn-link:hover { opacity: 1; }
.hero .trust-row { border-top-color: rgba(255,255,255,.18); position: relative; }
.hero .avatars span { border-color: rgba(255,255,255,.5); }
.hero .trust-text { color: rgba(255,255,255,.75); }
.hero .trust-text b { color: #fff; }

.cta-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.btn-primary {
  width: 100%;
  padding: 16px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 15px; font-weight: 700;
  letter-spacing: -.01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 10px 24px rgba(11,18,32,.25);
  transition: transform .15s ease;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary:active { transform: scale(.98); }
.btn-secondary {
  width: 100%;
  padding: 15px;
  background: #fff;
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  font-size: 15px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  font-family: inherit;
}
.trust-row {
  display: flex; align-items: center; gap: 10px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.avatars { display: flex; }
.avatars span {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -8px;
  font-size: 11px; font-weight: 700; color: #fff;
  display: grid; place-items: center;
}
.avatars span:first-child { margin-left: 0; }
.avatars span:nth-child(1) { background: linear-gradient(135deg,#3B82F6,#1D4ED8); }
.avatars span:nth-child(2) { background: linear-gradient(135deg,#EC4899,#9333EA); }
.avatars span:nth-child(3) { background: linear-gradient(135deg,#10B981,#059669); }
.avatars span:nth-child(4) { background: linear-gradient(135deg,#F59E0B,#EF4444); }
.trust-text { font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.trust-text b { color: var(--ink); font-weight: 700; }

/* LIVE STATS STRIP */
.live-strip {
  margin: 0 22px;
  transform: translateY(-22px);
  background: var(--ink);
  border-radius: 22px;
  padding: 16px 18px 18px;
  color: #fff;
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.live-strip::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(37,99,235,.35), transparent 70%);
  pointer-events: none;
}
.live-strip-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-bottom: 14px;
  position: relative;
}
.live-strip-head .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ADE80;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,.7); }
  50%      { box-shadow: 0 0 0 5px rgba(74,222,128,0); }
}
.live-strip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  position: relative;
}
.live-stat {
  padding: 0 12px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.live-stat:first-child { padding-left: 0; }
.live-stat:last-child  { padding-right: 0; }
.live-stat + .live-stat { border-left: 1px solid rgba(255,255,255,.1); }
.live-stat .num {
  font-size: 19px; font-weight: 900; letter-spacing: -.025em;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
.live-stat .lbl {
  font-size: 10px;
  color: rgba(255,255,255,.5);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.2;
}

/* COLLEGE LOGO GRID (static, calm) */
.logos-section {
  padding: 36px 22px 28px;
  background: var(--bg);
}
.logos-label {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.logos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 18px;
  align-items: center;
  justify-items: center;
}
.logos-grid img {
  width: 100%;
  max-width: 130px;
  height: 48px;
  object-fit: contain;
  opacity: .55;
  filter: grayscale(20%);
  transition: opacity .2s ease, filter .2s ease;
}
.logos-grid img:hover { opacity: 1; filter: none; }
/* Square-aspect logos get a visual scale-up so they don't read smaller than wide wordmarks */
.logos-grid img[src*="college6"] { transform: scale(1.35); }

/* SECTION */
section.block {
  padding: 36px 22px;
  background: var(--bg);
}
section.block.alt { background: var(--bg-soft); }
.section-eyebrow {
  font-size: 11px; font-weight: 700;
  color: var(--blue);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.section-title {
  font-size: 26px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 10px;
}
.section-sub {
  font-size: 14.5px; line-height: 1.5;
  color: var(--muted);
  margin-bottom: 22px;
}

/* WATCH SECTION */
/* On mobile: show the click-to-YouTube watch-card. Desktop video hidden. */
.watch-video { display: none; }

.watch-card {
  position: relative;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform .15s ease;
  aspect-ratio: 16 / 10;
}
.watch-card:active { transform: scale(.99); }
.watch-thumb {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.watch-card::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.15), rgba(0,0,0,.35) 70%),
    linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 55%);
  pointer-events: none;
  z-index: 1;
}
.watch-play {
  position: absolute;
  top: calc(50% - 18px); left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  background: rgba(255,255,255,.96);
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  z-index: 2;
  transition: transform .2s ease;
}
.watch-card:hover .watch-play { transform: translate(-50%, -50%) scale(1.06); }
.watch-play::before {
  content: '';
  position: absolute; inset: -12px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.18);
  animation: ringPulse 2.2s ease-out infinite;
}
@keyframes ringPulse {
  0%   { transform: scale(.9); opacity: .8; }
  100% { transform: scale(1.4); opacity: 0; }
}
.watch-duration {
  position: absolute;
  top: 14px; right: 14px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 4px 9px 4px 7px;
  border-radius: 100px;
  z-index: 2;
  letter-spacing: .04em;
  text-transform: uppercase;
  display: inline-flex; align-items: center;
}
.watch-overlay {
  position: absolute;
  left: 18px; right: 18px; bottom: 16px;
  z-index: 2;
  display: flex; align-items: center; gap: 10px;
}
.watch-overlay .icon-tag {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  color: #fff;
  flex-shrink: 0;
}
.watch-overlay-text { color: #fff; min-width: 0; }
.watch-overlay-title { font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; }
.watch-overlay-sub   { font-size: 11px; color: rgba(255,255,255,.7); margin-top: 1px; }
.watch-link-inline {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px;
  font-size: 11.5px; font-weight: 800;
  color: var(--blue);
  cursor: pointer;
  background: none; border: none; padding: 0;
}
.watch-link-inline:hover { color: var(--blue-deep); }

/* VIDEO PAGE */
.video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  position: relative;
}
.video-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-loading {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(255,255,255,.5);
  font-size: 12px; font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.video-caption { padding: 18px 22px 6px; }
.video-caption .label {
  font-size: 11px; font-weight: 800;
  color: var(--blue);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.video-caption h3 {
  font-size: 22px; font-weight: 900;
  letter-spacing: -.025em;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 8px;
}
.video-caption p {
  font-size: 13.5px; line-height: 1.5;
  color: var(--muted);
}

/* BENEFITS - Apple-style card scroller */
.benefits-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin: 8px -22px 0;
  padding: 4px 22px 14px;
  scroll-padding: 22px;
}
.benefits-scroll::-webkit-scrollbar { display: none; }

/* Paddle arrows for the scroller — hidden on mobile (swipe is the
   affordance there), right-aligned to the 1200px content column on
   desktop via the .block > * max-width rule. */
.benefits-nav { display: none; }
@media (min-width: 768px) {
  .benefits-nav {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 4px;
  }
  .benefits-arrow {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(15,23,42,.07);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
  }
  .benefits-arrow:hover:not(:disabled) { background: rgba(15,23,42,.14); }
  .benefits-arrow:disabled { color: rgba(15,23,42,.25); cursor: default; }
}

.benefit-card {
  flex: 0 0 268px;
  scroll-snap-align: start;
  border: 0;
  border-radius: 24px;
  padding: 26px 24px 0;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-align: left;
  font: inherit;
  height: 492px;
  background: linear-gradient(165deg, #2563EB 0%, #1E3A8A 100%);
  transition: transform .2s ease;
}
.benefit-card:active { transform: scale(.985); }

.benefit-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.benefit-headline {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.16;
  color: #fff;
  margin-top: 8px;
}

/* Product screenshot fills the lower portion of the card and bleeds off the
   bottom edge (object-fit:cover + clipped overflow) for the Apple "device
   peeking up" look. object-position keeps the meaningful top of each shot. */
.benefit-shot {
  flex: 1;
  min-height: 0;
  margin-top: 18px;
  overflow: hidden;
}
.benefit-shot picture {
  display: block;
  width: 100%;
  height: 100%;
}
.benefit-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 8px 30px rgba(15,23,42,.16);
}
.benefit-shot video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Full-bleed photo card — image fills the whole card, text overlaid on top
   with a dark scrim for legibility (Apple full-photo card style). */
.benefit-card.b-full .benefit-shot {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}
.benefit-card.b-full .benefit-shot img {
  border-radius: 0;
  box-shadow: none;
  object-position: center;
}
.benefit-card.b-full::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(15,23,42,.78) 0%, rgba(15,23,42,.18) 42%, transparent 64%);
  pointer-events: none;
}
.benefit-card.b-full .benefit-eyebrow,
.benefit-card.b-full .benefit-headline {
  position: relative;
  z-index: 2;
}
.benefit-card.b-full .benefit-eyebrow { color: rgba(255,255,255,.8); }

/* Background-image treatment — photo behind, blue scrim, content on top. */
.benefit-card.b-bgimg .benefit-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.benefit-card.b-bgimg .benefit-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 35% center;
}
.benefit-card[data-benefit="fire"] .benefit-bg img {
  object-position: 45% center;
}
.benefit-card.b-bgimg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(15,23,42,.78) 0%, rgba(15,23,42,.18) 42%, transparent 64%);
  pointer-events: none;
}
.benefit-card.b-bgimg > .benefit-eyebrow,
.benefit-card.b-bgimg > .benefit-headline,
.benefit-card.b-bgimg > .benefit-art {
  position: relative;
  z-index: 2;
}

/* Animated graphic cards — used in place of a screenshot on some cards. */
.benefit-art {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hover-replay: while .replaying, all motion is suppressed so removing
   .charged snaps the graphic back to its start state instantly. */
.benefit-art.replaying,
.benefit-art.replaying::before,
.benefit-art.replaying *,
.benefit-art.replaying *::before,
.benefit-art.replaying *::after {
  transition: none !important;
  animation: none !important;
}

/* Placeholder icon treatment (cards whose final visual is still to come). */
.benefit-icon-wrap {
  width: 134px;
  height: 134px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: grid;
  place-items: center;
}
.benefit-icon {
  width: 62px;
  height: 62px;
  color: #fff;
}

/* "Reduce marking" — battery charges once when it scrolls into view
   (JS adds .charged), then rests at full. */
.battery-art::before {
  content: '';
  position: absolute;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110,231,183,.32) 0%, transparent 62%);
  opacity: .16;
  transform: scale(.8);
  transition: opacity 1s ease, transform 1s ease;
}
.battery-art.charged::before {
  opacity: .62;
  transform: scale(1);
}
.battery {
  position: relative;
  display: flex;
  align-items: center;
}
.battery-body {
  position: relative;
  width: 188px;
  height: 92px;
  border: 5px solid #fff;
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}
.battery-cap {
  width: 11px;
  height: 38px;
  margin-left: 5px;
  background: #fff;
  border-radius: 0 6px 6px 0;
}
.battery-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 6%;
  background: linear-gradient(180deg, #6EE7B7 0%, #10B981 100%);
  border-radius: 9px;
}
.battery-art.charged .battery-fill {
  animation: batteryCharge 2.2s cubic-bezier(.4,0,.2,1) forwards;
}
.battery-bolt {
  position: absolute;
  top: 50%; left: 50%;
  width: 38px; height: 38px;
  transform: translate(-50%,-50%) scale(.9);
  color: #fff;
  opacity: .5;
  filter: drop-shadow(0 2px 5px rgba(15,23,42,.3));
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: 1.5s;
}
.battery-art.charged .battery-bolt {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}
@keyframes batteryCharge {
  0%   { width: 6%; }
  100% { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .battery-art.charged .battery-fill { animation: none; width: 100%; }
  .battery-bolt { transition: none; }
  .battery-art::before { transition: none; }
}

/* "Lighting the fire" — a drifting constellation of learner interests with
   the chosen one locked at the centre. */
.constellation-art::before {
  content: '';
  position: absolute;
  top: 47%;
  left: 50%;
  width: 224px;
  height: 224px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236,72,153,.44) 0%, transparent 62%);
  opacity: .1;
  transform: translate(-50%,-50%) scale(.7);
  transition: opacity .8s ease, transform .8s ease;
}
.constellation-art.charged::before {
  opacity: .9;
  transform: translate(-50%,-50%) scale(1);
}
.star {
  position: absolute;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .8s ease;
}
.depth-near { font-size: 15px; font-weight: 800; z-index: 3; }
.depth-mid  { font-size: 12px; z-index: 2; }
.depth-far  { font-size: 10px; z-index: 1; filter: blur(.7px); }
.constellation-art.charged .depth-near { opacity: .97; }
.constellation-art.charged .depth-mid  { opacity: .6; }
.constellation-art.charged .depth-far  { opacity: .32; }
.constellation-art .star:nth-child(3n+1) { transition-delay: .06s; }
.constellation-art .star:nth-child(3n+2) { transition-delay: .2s; }
.constellation-art .star:nth-child(3n)   { transition-delay: .34s; }

.s1  { top: 7%;  left: 15%; animation: driftB 13s ease-in-out -4s  infinite; }
.s2  { top: 13%; left: 46%; animation: driftA 15s ease-in-out -9s  infinite; }
.s3  { top: 21%; left: 80%; animation: driftC 11s ease-in-out -2s  infinite; }
.s4  { top: 27%; left: 7%;  animation: driftA 16s ease-in-out -6s  infinite; }
.s5  { top: 31%; left: 62%; animation: driftB 12s ease-in-out -10s infinite; }
.s6  { top: 36%; left: 25%; animation: driftC 14s ease-in-out -3s  infinite; }
.s7  { top: 43%; left: 75%; animation: driftA 10s ease-in-out -7s  infinite; }
.s8  { top: 55%; left: 9%;  animation: driftB 15s ease-in-out -1s  infinite; }
.s9  { top: 60%; left: 72%; animation: driftC 13s ease-in-out -8s  infinite; }
.s10 { top: 69%; left: 31%; animation: driftA 12s ease-in-out -5s  infinite; }
.s11 { top: 71%; left: 13%; animation: driftB 16s ease-in-out -11s infinite; }
.s12 { top: 79%; left: 48%; animation: driftC 11s ease-in-out -4s  infinite; }
.s13 { top: 87%; left: 20%; animation: driftA 14s ease-in-out -9s  infinite; }
.s14 { top: 89%; left: 64%; animation: driftB 12s ease-in-out -6s  infinite; }

@keyframes driftA {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(6px, -9px); }
  66%      { transform: translate(-4px, -4px); }
}
@keyframes driftB {
  0%, 100% { transform: translate(0, 0); }
  30%      { transform: translate(-7px, 6px); }
  65%      { transform: translate(4px, 11px); }
}
@keyframes driftC {
  0%, 100% { transform: translate(0, 0); }
  40%      { transform: translate(8px, 5px); }
  72%      { transform: translate(-5px, -8px); }
}

.star-pick {
  position: absolute;
  top: 47%;
  left: 50%;
  z-index: 4;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  background: #EC4899;
  border-radius: 100px;
  padding: 10px 21px;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(236,72,153,.5);
  opacity: 0;
  transform: translate(-50%,-50%) scale(.5);
  transition: opacity .5s ease .55s, transform .6s cubic-bezier(.34,1.5,.6,1) .55s;
}
.constellation-art.charged .star-pick {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .star { animation: none; transition: none; }
  .star-pick { transition: none; }
  .constellation-art::before { transition: none; opacity: .5; }
}

/* "Data & insights" — college grade distribution; bars fill on reveal. */
.cd-chart {
  width: 100%;
  transform: translateY(-26px);
  background: rgba(15,23,42,.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 16px 16px 18px;
  box-shadow: 0 12px 32px rgba(15,23,42,.34);
}
.cd-caption {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(255,255,255,.74);
  margin-bottom: 12px;
}
.cd-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cd-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cd-grade {
  flex: 0 0 21px;
  height: 21px;
  border-radius: 6px;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.cd-bar {
  flex: 1;
  height: 12px;
  border-radius: 100px;
  background: rgba(255,255,255,.16);
  overflow: hidden;
}
.cd-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 100px;
  background: linear-gradient(90deg, rgba(255,255,255,.62), #fff);
  transition: width 1s cubic-bezier(.33,1,.68,1);
  transition-delay: var(--d, 0s);
}
.chart-art.charged .cd-fill { width: var(--w); }
.cd-val {
  flex: 0 0 30px;
  text-align: right;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}

/* Attainment colour bands */
.cd-row.t-pass  .cd-fill  { background: linear-gradient(90deg, #6EE7B7, #10B981); }
.cd-row.t-below .cd-fill  { background: linear-gradient(90deg, #FCD34D, #F59E0B); }
.cd-row.t-u     .cd-fill  { background: linear-gradient(90deg, #FCA5A5, #EF4444); }
.cd-row.t-pass  .cd-grade { background: rgba(16,185,129,.32); }
.cd-row.t-below .cd-grade { background: rgba(245,158,11,.34); }
.cd-row.t-u     .cd-grade { background: rgba(239,68,68,.36); }

@media (prefers-reduced-motion: reduce) {
  .cd-fill { transition: none; }
}

.benefit-plus {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--blue-deep);
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  padding-bottom: 2px;
}

/* PRODUCT CARDS / SWIPE (mobile) */
.swipe {
  margin: 0 -22px;
  padding: 0 22px 6px;
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.swipe::-webkit-scrollbar { display: none; }
.product-card {
  flex: 0 0 78%;
  scroll-snap-align: start;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
}
.product-art {
  height: 130px;
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
}
.product-art.b1 { background: linear-gradient(135deg,#3B82F6,#1D4ED8); }
.product-art.b2 { background: linear-gradient(135deg,#10B981,#059669); }
.product-art.b3 { background: linear-gradient(135deg,#9333EA,#DB2777); }
.product-art.b4 { background: linear-gradient(135deg,#F59E0B,#EF4444); }
.product-art.b5 { background: linear-gradient(135deg,#6366F1,#4338CA); }
.product-art.b6 { background: linear-gradient(135deg,#14B8A6,#0D9488); }
.product-art .glyph {
  font-size: 56px; color: rgba(255,255,255,.95);
  font-weight: 900; letter-spacing: -.05em;
}
.product-art .badge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 100px;
  text-transform: uppercase;
}
.product-body { padding: 14px 16px 16px; }
.product-body h4 {
  font-size: 16px; font-weight: 800; letter-spacing: -.02em;
  color: var(--ink); margin-bottom: 4px;
}
.product-body p {
  font-size: 12.5px; line-height: 1.45;
  color: var(--muted);
}
.product-body .meta {
  margin-top: 10px;
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: var(--blue);
}
.product-card.tappable { cursor: pointer; transition: transform .15s ease, box-shadow .2s ease; }
.product-card.tappable:active { transform: scale(.98); }
.product-card.tappable:hover { box-shadow: var(--shadow-md); }
.tap-hint {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 800;
  color: #fff;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  padding: 4px 8px 4px 9px;
  border-radius: 100px;
  position: absolute;
  top: 12px; right: 12px;
  letter-spacing: .02em;
}

/* Live pulse dot used inside the "Used across the UK" section-eyebrow */
.live-pulse {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10B981;
  margin-right: 6px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  animation: pulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(16,185,129,.6);
}

/* IMPACT */
.impact-card {
  background: var(--ink);
  border-radius: 24px;
  padding: 22px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.impact-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(37,99,235,.5), transparent 70%);
}
.impact-card::after {
  content: '';
  position: absolute;
  bottom: -50px; left: -50px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(147,51,234,.4), transparent 70%);
}
.impact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 14px;
  position: relative; z-index: 1;
}
.impact-item .v { font-size: 28px; font-weight: 900; letter-spacing: -.03em; }
.impact-item .l { font-size: 11.5px; color: rgba(255,255,255,.65); font-weight: 600; margin-top: 2px; }

.proof-divider {
  display: flex; align-items: center;
  gap: 12px;
  margin: 26px 0 14px;
}
.proof-divider::before, .proof-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.proof-divider span {
  font-size: 11px; font-weight: 800;
  color: var(--muted);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* TESTIMONIAL */
.quotes-swipe {
  margin: 0 -22px;
  padding: 0 22px 6px;
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.quotes-swipe::-webkit-scrollbar { display: none; }
.quote-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 20px;
  flex: 0 0 86%;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  min-height: 220px;
}
.quote-card .quote-text { flex: 1; }
.quote-mark {
  font-size: 34px; line-height: .8;
  color: var(--blue);
  font-family: Georgia, serif;
  margin-bottom: 6px;
}
.quote-text {
  font-size: 15px; line-height: 1.45;
  font-weight: 600; color: var(--ink);
  letter-spacing: -.01em;
}
.quote-by {
  margin-top: 14px;
  display: flex; align-items: center; gap: 10px;
}
.quote-by .av {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg,#F59E0B,#EF4444);
  display: grid; place-items: center; color: #fff; font-weight: 900;
}
.quote-by .who { font-size: 12.5px; }
.quote-by .who b { display: block; color: var(--ink); }
.quote-by .who span { color: var(--muted); font-size: 11.5px; }

/* TEAM */
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.team-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  text-align: center;
}
.team-av {
  width: 56px; height: 56px;
  border-radius: 50%;
  margin: 0 auto 10px;
  display: grid; place-items: center;
  color: #fff; font-weight: 900; font-size: 18px;
  letter-spacing: -.04em;
}
.team-card h6 { font-size: 13px; font-weight: 800; color: var(--ink); }
.team-card p { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* PRICING (full page) */
.price-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 22px 20px 20px;
  box-shadow: var(--shadow-md);
}

/* ── Quote modal: requirements step (qualifications + awarding bodies) ── */
.quote-step-lead {
  font-size: 13.5px; line-height: 1.45;
  color: var(--muted);
  margin-bottom: 18px;
}
.quote-steps-indicator {
  display: flex; gap: 6px; justify-content: center;
  margin-bottom: 16px;
}
.quote-steps-indicator .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line);
  transition: background .2s ease, width .2s ease;
}
.quote-steps-indicator .dot.active { background: var(--blue); width: 20px; border-radius: 100px; }
.config-group { margin-bottom: 16px; }
.config-label {
  display: block;
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 9px;
}
.config-label .req { color: var(--pink); }
.chip-row { display: flex; gap: 8px; }
.chip-row-wrap { flex-wrap: wrap; }
.chip-row.shake { animation: chipShake .42s ease; }
@keyframes chipShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}
.chip {
  font-family: inherit;
  font-size: 13.5px; font-weight: 700;
  color: var(--ink-2);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  padding: 9px 16px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.chip:hover { border-color: #cbd5e1; }
.chip.selected {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37,99,235,.22);
}
.qual-bodies { margin-bottom: 16px; }
.qual-bodies select.invalid { border-color: var(--pink); }
.config-confirm {
  display: flex; align-items: center; gap: 11px;
  margin: 4px 0 18px;
  padding: 13px 15px;
  background: rgba(16,185,129,.08);
  border: 1px solid rgba(16,185,129,.2);
  border-radius: 14px;
}
.config-confirm[hidden] { display: none; }
.config-confirm-icon {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: var(--green); color: #fff;
  border-radius: 50%;
}
.config-confirm-title { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.config-confirm-summary { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 1px; }

.price-display {
  text-align: center;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 18px;
}
.price-display .currency {
  font-size: 20px; font-weight: 700;
  color: var(--muted);
  vertical-align: top;
  margin-right: 2px;
  position: relative; top: 12px;
}
.price-amount {
  font-size: clamp(40px, 13vw, 56px); font-weight: 900;
  letter-spacing: -.04em;
  color: var(--ink);
  line-height: 1;
  display: inline-block;
  transition: transform .18s ease;
}
.price-amount.bump { transform: scale(1.06); }
.price-period { font-size: 14px; font-weight: 600; color: var(--muted); margin-top: 6px; }
.price-per {
  margin-top: 12px;
  font-size: 15px; font-weight: 600;
  color: var(--muted);
  letter-spacing: -.01em;
}
.price-per .price-per-rate {
  font-weight: 800;
  color: var(--ink);
}
.price-per .price-per-unit { color: var(--muted); }

.slider-wrap { padding: 4px 6px 10px; }
.learner-entry {
  text-align: center;
  margin-bottom: 18px;
}
.learner-entry-label {
  display: block;
  font-size: 14px; font-weight: 800;
  color: var(--ink);
  letter-spacing: -.01em;
  margin-bottom: 10px;
}
.slider-value {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff;
  padding: 6px 6px;
  border-radius: 100px;
  font-size: 14px; font-weight: 800;
  letter-spacing: -.01em;
  box-shadow: 0 6px 18px rgba(11,18,32,.18);
}
.stepper {
  width: 30px; height: 30px;
  background: rgba(255,255,255,.15);
  border-radius: 50%; border: none;
  color: #fff; font-weight: 900; font-size: 17px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .15s ease;
  flex-shrink: 0;
}
.stepper:hover { background: rgba(255,255,255,.28); }
.stepper:active { background: rgba(255,255,255,.36); }
.slider-value .learner-input {
  width: 96px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 11px;
  color: #fff;
  font-family: inherit;
  font-size: 19px; font-weight: 800;
  letter-spacing: -.02em;
  text-align: center;
  padding: 5px 2px;
  -moz-appearance: textfield;
  transition: background .15s ease, border-color .15s ease;
}
.slider-value .learner-input::-webkit-outer-spin-button,
.slider-value .learner-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.slider-value .learner-input:focus {
  outline: none;
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.6);
}
.slider-value .learner-input::selection { background: rgba(255,255,255,.3); }
.slider-track-wrap {
  position: relative;
  height: 36px;
  display: flex; align-items: center;
  margin-bottom: 8px;
}
.slider-track {
  position: absolute;
  left: 0; right: 0;
  height: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 100px;
  overflow: hidden;
}
.slider-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--grad-blue);
  border-radius: 100px;
  width: 0%;
  transition: width .12s linear;
}
.slider-tier {
  position: absolute;
  top: 50%; transform: translate(-50%, -50%);
  width: 2px; height: 14px;
  background: rgba(15,23,42,.18);
  border-radius: 1px;
  pointer-events: none;
}
.slider-tier.passed { background: rgba(255,255,255,.7); }
.slider-input {
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
  height: 36px;
  margin: 0;
  z-index: 2;
}
.slider-input:focus { outline: none; }
.slider-input::-webkit-slider-runnable-track { height: 36px; background: transparent; }
.slider-input::-moz-range-track { height: 36px; background: transparent; }
.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--blue);
  box-shadow: 0 4px 12px rgba(37,99,235,.35), 0 0 0 6px rgba(37,99,235,.08);
  cursor: grab;
  margin-top: 0;
  transition: transform .12s ease;
}
.slider-input:active::-webkit-slider-thumb { transform: scale(1.12); cursor: grabbing; }
.slider-input::-moz-range-thumb {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--blue);
  box-shadow: 0 4px 12px rgba(37,99,235,.35), 0 0 0 6px rgba(37,99,235,.08);
  cursor: grab;
}
.slider-axis {
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--muted); font-weight: 600;
  padding: 0 2px;
}
.tiers-list {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.tiers-head {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 12px;
}
.tier-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13.5px;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease;
}
.tier-row + .tier-row { margin-top: 2px; }
.tier-row.active {
  background: var(--blue-soft);
  border-color: rgba(37,99,235,.18);
}
.tier-row .tier-band {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink-2); font-weight: 600;
}
.tier-row .tier-band .pip {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line);
  transition: background .2s ease, box-shadow .2s ease;
}
.tier-row.active .tier-band { color: var(--ink); font-weight: 700; }
.tier-row.active .tier-band .pip { background: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
.tier-row .tier-rate {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-weight: 800; color: var(--ink);
}
.tier-row.active .tier-rate { color: var(--blue-deep); }
.tier-row .tier-rate .tier-rate-unit {
  font-weight: 500; color: var(--muted); font-size: 11.5px;
}
.price-foot {
  margin-top: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.price-vat-note {
  margin: 2px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
}

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.faq-item.open {
  box-shadow: var(--shadow-sm);
  border-color: rgba(37,99,235,.25);
}
.faq-q {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 15px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
  line-height: 1.3;
  font-family: inherit;
}
.faq-q-toggle {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: transform .3s cubic-bezier(.33,1,.68,1), background .2s ease, color .2s ease;
  color: var(--ink);
}
.faq-item.open .faq-q-toggle {
  background: var(--blue);
  color: #fff;
  transform: rotate(45deg);
}
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(.33,1,.68,1);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-content { overflow: hidden; min-height: 0; }
.faq-a-inner {
  padding: 0 16px 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.faq-a-inner ul {
  margin-top: 10px;
  padding-left: 0;
  list-style: none;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}
.faq-a-inner li {
  padding: 3px 0 3px 14px;
  position: relative;
  font-weight: 700;
  color: var(--ink);
  font-size: 13px;
}
.faq-a-inner li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue);
}
/* Awarding-body breakdown by qualification */
.faq-awarding {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq-awarding-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.faq-awarding-qual {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blue);
}
.faq-awarding-bodies {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

/* FAQ teaser: extras hidden by default, revealed when .expanded */
.faq-extra { display: none; }
.faq-extra-group { display: none; }
.faq-preview.expanded .faq-extra,
.faq-preview.expanded .faq-extra-group { display: block; }

/* Category groups: subtle label + slightly wider gap between groups */
.faq-group + .faq-group { margin-top: 22px; }
.faq-group-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 0 4px 10px;
}

/* See more / See less toggle — text-link feel, not a primary CTA.
   display: flex (not inline-flex) so margin: auto centres it horizontally. */
.faq-see-more {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px auto 0;
  padding: 10px 18px 10px 20px;
  width: -moz-fit-content;
  width: fit-content;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.faq-see-more:hover {
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: 0 4px 12px rgba(37,99,235,.12);
}
.faq-see-more:active { transform: scale(.97); }
.faq-see-more-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg-soft);
  padding: 2px 8px;
  border-radius: 100px;
  letter-spacing: -.005em;
  transition: background .18s ease, color .18s ease;
}
.faq-see-more:hover .faq-see-more-count {
  background: var(--blue-soft);
  color: var(--blue-deep);
}
.faq-see-more-icon { transition: transform .3s cubic-bezier(.33,1,.68,1); }
.faq-see-more-active .faq-see-more-icon { transform: rotate(180deg); }

/* FINAL CTA */
.final-cta {
  background: var(--grad-blue);
  border-radius: 28px;
  padding: 28px 22px;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 0%, rgba(255,255,255,.18), transparent 50%);
}
.final-cta h3 {
  font-size: 24px; line-height: 1.1; font-weight: 800;
  letter-spacing: -.025em;
  margin-bottom: 8px;
  position: relative;
}
.final-cta p {
  font-size: 13.5px; line-height: 1.5;
  color: rgba(255,255,255,.85);
  margin-bottom: 18px;
  position: relative;
}
.final-cta .btn-primary {
  background: #fff; color: var(--blue-deep);
  box-shadow: 0 10px 24px rgba(0,0,0,.2);
  position: relative;
}
.final-cta .btn-secondary {
  background: rgba(255,255,255,.12);
  color: #fff;
  border-color: rgba(255,255,255,.25);
  backdrop-filter: blur(10px);
  margin-top: 8px;
  position: relative;
}

/* FOOTER */
footer {
  background: #0B1220;
  color: rgba(255,255,255,.6);
  padding: 30px 22px 60px;
  text-align: center;
}
.footer-logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 17px; color: #fff;
  margin-bottom: 14px;
}
.footer-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 16px; margin-bottom: 18px;
}
.footer-links a {
  font-size: 12.5px; color: rgba(255,255,255,.7);
  text-decoration: none; font-weight: 500;
}
footer .legal {
  font-size: 10.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.4);
}
footer .legal b { color: rgba(255,255,255,.7); font-weight: 600; }
/* Links inside the legal blocks (e.g. ICO register entry) — keep them muted,
   matching the surrounding text, with a subtle underline as the affordance. */
footer .legal a,
.footer-legal-block a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap; /* keep "ICO Registered · ZC106423" on one line */
}
footer .legal a:hover,
.footer-legal-block a:hover { color: rgba(255,255,255,.85); }

/* CONTACT/QUOTE MODALS */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(11,18,32,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  z-index: 95;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -44%) scale(.96);
  max-width: 560px;
  width: calc(100% - 32px);
  max-height: 86vh;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(0,0,0,.4);
  z-index: 96;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.33,1,.68,1);
  overflow: hidden;
}
.modal.open {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.modal-header {
  padding: 18px 20px 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.modal-header h3 {
  font-size: 20px; font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}
.modal-close {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--bg-soft);
  border: none;
  display: grid; place-items: center;
  color: var(--ink);
  cursor: pointer;
}
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 20px;
  -webkit-overflow-scrolling: touch;
}
.modal-section-title {
  font-size: 14px; font-weight: 800;
  color: var(--ink);
  margin-bottom: 18px;
  letter-spacing: -.01em;
}
.field {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.field label {
  font-size: 12.5px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}
.field label .req { color: #DC2626; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.field input::placeholder, .field textarea::placeholder {
  color: var(--muted);
  font-weight: 400;
}
.field textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.45;
}
.field select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230B1220' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
.field select:invalid { color: var(--muted); }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.field-row .field { margin-bottom: 14px; }
.quote-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(120deg, rgba(37,99,235,.08), rgba(147,51,234,.06));
  border: 1px solid rgba(37,99,235,.18);
  border-radius: 10px;
  margin-bottom: 18px;
}
.quote-summary-lbl {
  font-size: 11px; font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue-deep);
}
.quote-summary-val {
  font-size: 13.5px; font-weight: 800;
  color: var(--ink);
  letter-spacing: -.01em;
}
.modal-actions {
  display: flex; gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}
.modal-actions .btn-secondary, .modal-actions .btn-primary {
  width: auto;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 12px;
}
.modal-actions .btn-primary {
  background: linear-gradient(120deg, #2563EB 0%, #06B6D4 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(37,99,235,.35);
}
.modal-success {
  padding: 30px 20px;
  text-align: center;
  display: none;
}
.modal-success.show { display: block; }
.modal-success-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg,#10B981,#059669);
  display: grid; place-items: center;
  margin: 0 auto 14px;
  color: #fff;
}
.modal-success h4 {
  font-size: 18px; font-weight: 800;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -.02em;
}
.modal-success p {
  font-size: 13.5px; line-height: 1.5;
  color: var(--muted);
}

/* SLIDE-IN MENU */
.menu-overlay {
  position: fixed; inset: 0;
  background: rgba(11,18,32,.5);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  z-index: 80;
}
.menu-overlay.open { opacity: 1; pointer-events: auto; }
.menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 78%;
  max-width: 360px;
  background: #fff;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.33,1,.68,1);
  z-index: 81;
  padding: 60px 24px 24px;
  display: flex; flex-direction: column;
}
.menu.open { transform: translateX(0); }
.menu-close {
  position: absolute; top: 22px; right: 22px;
  width: 36px; height: 36px;
  background: var(--bg-soft);
  border: none; border-radius: 12px;
  display: grid; place-items: center;
  color: var(--ink); cursor: pointer;
}
.menu-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
  font-size: 18px; font-weight: 700; color: var(--ink);
  text-decoration: none;
  letter-spacing: -.01em;
  border-bottom: 1px solid var(--line);
}
.menu-link span.arrow { color: var(--muted); font-size: 14px; }
.menu-foot { margin-top: auto; padding-top: 24px; }
.menu-foot .btn-primary { background: var(--blue); }

/* PAGE (full-screen slide-in for video & detail pages) */
.page {
  position: fixed;
  inset: 0;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.33,1,.68,1);
  z-index: 90;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.page.open { transform: translateX(0); }
.page-status { display: none; }
.page-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.page-back {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink);
  cursor: pointer;
}
.page-title {
  font-size: 17px; font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  flex: 1;
}
.page-title .sub {
  display: block;
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
  margin-top: 1px;
}
.page-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 24px 22px 140px;
}
.page-scroll::-webkit-scrollbar { display: none; }
/* Pricing page frame — mirror the homepage section.block sizing/rhythm */
.page-scroll.pricing-page { padding: 18px 22px 72px; }
.pricing-intro {
  margin-bottom: 4px;
}
.pricing-intro .section-sub {
  margin-bottom: 18px;
}
.price-faq {
  margin-top: 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.price-faq .faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
}
.price-faq .faq-item h6 {
  font-size: 13.5px; font-weight: 800; color: var(--ink);
  margin-bottom: 4px;
}
.price-faq .faq-item p {
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
}

/* DEMO PAGES (benefit / LC / SA detail pages) */
.demo-hero {
  padding: 24px 20px 30px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.demo-hero h1 {
  font-size: 24px; line-height: 1.15;
  font-weight: 900; letter-spacing: -.025em;
  margin-bottom: 6px;
}
.demo-hero p {
  font-size: 13.5px; line-height: 1.5;
  color: rgba(255,255,255,.85);
  max-width: 280px; margin: 0 auto;
}
.demo-hero.lc { background: linear-gradient(135deg,#9333EA 0%,#DB2777 100%); }
.demo-hero.sa { background: linear-gradient(135deg,#14B8A6 0%,#0D9488 100%); }
.demo-hero.b-reduce  { background: linear-gradient(135deg,#3B82F6 0%,#1D4ED8 100%); }
.demo-hero.b-instant { background: linear-gradient(135deg,#10B981 0%,#059669 100%); }
.demo-hero.b-fire    { background: linear-gradient(135deg,#F59E0B 0%,#EF4444 100%); }
.demo-hero.b-robust  { background: linear-gradient(135deg,#6366F1 0%,#4338CA 100%); }
.demo-hero.b-insight { background: linear-gradient(135deg,#06B6D4 0%,#0891B2 100%); }
.demo-hero.about     {
  background: linear-gradient(165deg, #1E3A8A 0%, #2563EB 55%, #3B82F6 100%);
  padding: 30px 20px 36px;
}
.demo-hero.about::before {
  content: '';
  position: absolute;
  top: -50%; left: -20%;
  width: 160%; height: 100%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.1), transparent 60%);
  pointer-events: none;
}
.demo-hero.about h1 {
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -.035em;
  max-width: 320px;
  margin: 0 auto 10px;
  position: relative;
}
.demo-hero.about p { position: relative; }

/* Benefit page hero icon (ported from current site's educators carousel visuals) */
.benefit-hero-icon {
  width: 96px; height: 96px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  display: grid; place-items: center;
  color: #fff;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.18);
}
.benefit-hero-icon svg { width: 44px; height: 44px; }
@keyframes lightningPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.benefit-hero-icon.lightning svg { animation: lightningPulse 2s ease-in-out infinite; }
@keyframes firePulse {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50%      { transform: scale(1.05) rotate(2deg); }
}
.benefit-hero-icon.fire svg { animation: firePulse 2.4s ease-in-out infinite; }
@keyframes chartGrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.benefit-hero-icon.chart svg { animation: chartGrow 2.2s ease-in-out infinite; }
@keyframes shieldGlow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.18), 0 0 0 0 rgba(255,255,255,0); }
  50%      { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.18), 0 0 0 8px rgba(255,255,255,.08); }
}
.benefit-hero-icon.shield { animation: shieldGlow 2.6s ease-in-out infinite; }

.story-block { padding: 22px 22px 4px; }
.story-block p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 16px;
}
.story-block p:last-child { margin-bottom: 0; }
.story-block p b { color: var(--ink); font-weight: 800; }

.about-section-head { padding: 22px 22px 10px; }
.about-section-head .lbl {
  font-size: 10.5px; font-weight: 800;
  color: var(--blue);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.about-section-head h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--ink);
  line-height: 1.15;
}
.about-team-wrap { padding: 6px 22px 4px; }
.about-team-wrap .team-grid { margin-top: 0; }
.pedagogy-wrap { padding: 14px 22px 4px; }
.pedagogy-card {
  background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(147,51,234,.06));
  border: 1px solid rgba(37,99,235,.18);
  border-radius: 18px;
  padding: 18px;
}
.pedagogy-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.pedagogy-av {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg,#3B82F6,#1D4ED8);
  display: grid; place-items: center;
  color: #fff;
  font-weight: 900; font-size: 16px;
  letter-spacing: -.04em;
  flex-shrink: 0;
}
.pedagogy-meta b {
  display: block;
  font-size: 14px; font-weight: 800;
  color: var(--ink);
  letter-spacing: -.01em;
}
.pedagogy-meta span { font-size: 12px; color: var(--muted); }
.pedagogy-card .framework-tag {
  display: inline-block;
  font-size: 10.5px; font-weight: 800;
  color: var(--blue-deep);
  background: rgba(37,99,235,.1);
  padding: 4px 9px;
  border-radius: 100px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.pedagogy-card p {
  font-size: 13.5px; line-height: 1.55;
  color: var(--ink-2);
}
.pedagogy-card p + p { margin-top: 10px; }
.pedagogy-card .pedagogy-strap {
  font-weight: 800;
  color: var(--ink);
  font-style: italic;
  letter-spacing: -.005em;
}
.team-photo {
  margin: 6px 22px 14px;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 30%, rgba(37,99,235,.12), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(147,51,234,.10), transparent 55%),
    var(--bg-soft);
  border: 1.5px dashed var(--line);
  display: grid; place-items: center;
  text-align: center;
}
.team-photo-inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  color: var(--muted);
}
.team-photo-inner svg { color: var(--blue); margin-bottom: 4px; }
.team-photo-inner span {
  font-size: 13px; font-weight: 800;
  color: var(--ink);
  letter-spacing: -.01em;
}
.team-photo-inner small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.founder-list {
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 6px 22px 4px;
}
.founder-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.founder-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.founder-av {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid; place-items: center;
  color: #fff; font-weight: 900; font-size: 17px;
  letter-spacing: -.04em;
  flex-shrink: 0;
}
.founder-meta { min-width: 0; flex: 1; }
.founder-meta h6 {
  font-size: 16px; font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.15;
}
.founder-meta span {
  display: block;
  font-size: 12px; color: var(--muted);
  font-weight: 600;
  margin-top: 2px;
}
.founder-credential {
  font-size: 12px; font-weight: 700;
  color: var(--blue-deep);
  background: var(--blue-soft);
  padding: 7px 11px;
  border-radius: 8px;
  margin-bottom: 10px;
  line-height: 1.4;
}
.founder-quote {
  font-size: 13.5px; line-height: 1.5;
  color: var(--ink-2);
  font-style: italic;
}
.demo-stage {
  padding: 20px;
  background: var(--bg-soft);
}
.demo-copy { padding: 22px 22px 8px; }
.demo-copy h3 {
  font-size: 18px; font-weight: 800; letter-spacing: -.02em;
  color: var(--ink); margin-bottom: 6px;
}
.demo-copy p {
  font-size: 13.5px; line-height: 1.55;
  color: var(--muted);
}
.demo-bullets {
  list-style: none;
  padding: 16px 22px 8px;
  display: flex; flex-direction: column; gap: 10px;
}
.demo-bullets li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; line-height: 1.45;
  color: var(--ink-2);
}
.demo-bullets li .check {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  margin-top: 1px;
}
.demo-bullets li .check.lc { background: #9333EA; }
.demo-bullets li .check.sa { background: #0D9488; }
.demo-bullets li .check.b-reduce  { background: #1D4ED8; }
.demo-bullets li .check.b-instant { background: #059669; }
.demo-bullets li .check.b-fire    { background: #DC2626; }
.demo-bullets li .check.b-robust  { background: #4338CA; }
.demo-bullets li .check.b-insight { background: #0891B2; }
.demo-foot {
  padding: 22px;
  display: flex; flex-direction: column; gap: 8px;
}

/* LIVING COLOUR DEMO */
.lc-demo-card {
  background: #fff;
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow-md);
}
.lc-q-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
}
.lc-q-row + .lc-q-row { border-top: 1px solid var(--line); }
.lc-q-num {
  width: 30px; height: 30px;
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--muted);
  font-size: 12px; font-weight: 800;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.lc-q-bar {
  flex: 1;
  height: 10px;
  background: #EEE;
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}
.lc-q-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg,#9333EA,#DB2777);
  border-radius: 100px;
  transition: width 1.4s cubic-bezier(.33,1,.68,1);
}
.lc-q-grade {
  width: 28px;
  text-align: right;
  font-size: 12px; font-weight: 800;
  color: var(--muted);
  transition: color .4s ease;
}
.lc-q-grade.lit { color: var(--ink); }
.lc-mastery {
  margin-top: 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(147,51,234,.08), rgba(219,39,119,.08));
  border-radius: 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.lc-mastery-lbl { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.lc-mastery-val {
  font-size: 22px; font-weight: 900; letter-spacing: -.02em;
  background: linear-gradient(120deg,#9333EA,#DB2777);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.lc-replay {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font-size: 12px; font-weight: 700;
  color: var(--purple);
  background: rgba(147,51,234,.08);
  padding: 7px 12px;
  border-radius: 100px;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

/* SELF ASSESSMENT DEMO */
.sa-paper {
  background: #FFFEF7;
  border-radius: 14px;
  padding: 18px 18px 14px;
  box-shadow: 0 8px 24px rgba(20,184,166,.18), inset 0 0 0 1px rgba(13,148,136,.08);
  position: relative;
  font-family: 'Caveat', cursive;
  color: #1F2937;
  min-height: 220px;
  background-image: repeating-linear-gradient(transparent 0, transparent 26px, rgba(13,148,136,.12) 26px, rgba(13,148,136,.12) 27px);
  background-position: 0 12px;
}
.sa-paper-q {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.sa-line {
  font-size: 18px;
  line-height: 27px;
  position: relative;
  display: block;
}
.sa-line .hl {
  background: rgba(20,184,166,0);
  box-shadow: 0 0 0 0 rgba(20,184,166,0);
  border-radius: 4px;
  padding: 0 2px;
  transition: background .5s ease, box-shadow .5s ease;
}
.sa-line.lit .hl {
  background: rgba(20,184,166,.28);
  box-shadow: 0 0 0 1px rgba(20,184,166,.4);
}
.sa-line.lit2 .hl {
  background: rgba(245,158,11,.28);
  box-shadow: 0 0 0 1px rgba(245,158,11,.4);
}
.sa-margin-note {
  position: absolute;
  right: 8px;
  font-family: 'Caveat', cursive;
  font-size: 14px;
  font-weight: 700;
  color: #0D9488;
  transform: rotate(-3deg) translateX(20px);
  opacity: 0;
  transition: opacity .4s ease, transform .4s ease;
  max-width: 70px;
  line-height: 1.1;
}
.sa-margin-note.amber { color: #B45309; }
.sa-margin-note.show { opacity: 1; transform: rotate(-3deg) translateX(0); }
.sa-result {
  margin-top: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
}
.sa-result.show { opacity: 1; transform: none; }
.sa-grade-pip {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg,#14B8A6,#0D9488);
  display: grid; place-items: center;
  color: #fff;
  font-weight: 900; font-size: 24px;
  letter-spacing: -.04em;
  box-shadow: 0 6px 14px rgba(13,148,136,.4);
  flex-shrink: 0;
}
.sa-result-body { flex: 1; min-width: 0; }
.sa-result-title { font-size: 13px; font-weight: 800; color: var(--ink); }
.sa-aos { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.sa-ao {
  font-size: 10px; font-weight: 800;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(13,148,136,.1);
  color: #0D9488;
}
.sa-ao.partial { background: rgba(245,158,11,.12); color: #B45309; }
.sa-replay {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font-size: 12px; font-weight: 700;
  color: #0D9488;
  background: rgba(20,184,166,.1);
  padding: 7px 12px;
  border-radius: 100px;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

/* PAPER STACK ANIMATION (ported from original site - Mock Exam visual) */
.paper-stack-visualization {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 20px 10px;
  width: 100%;
  height: 100%;
  justify-content: center;
}
.comparison-container {
  width: 100%;
  max-width: 400px;
}
.stack-comparison {
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: flex-end;
}
.stack-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
}
.markus-reduction-display {
  position: absolute;
  top: 180px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 100;
  transition: opacity 0.8s ease;
}
.reduction-percentage {
  font-size: 36px;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  line-height: 1;
}
.reduction-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.stack-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  letter-spacing: -0.01em;
}
.paper-stack-background {
  background: transparent;
  padding: 10px;
  position: relative;
  overflow: visible;
}
.paper-stack-svg { display: block; }
.paper-sheet { transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.markus-sheet { transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); }
@keyframes paperSheetAppear {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.98); }
  70%  { opacity: 1; transform: translateY(0.5px) scale(1.005); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes paperSheetDisappear {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-12px) scale(0.9); }
}

/* SCROLL REVEAL */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   DESKTOP OVERRIDES (>= 768px)
   ============================================================ */
@media (min-width: 768px) {

  /* Top nav: roomier on desktop */
  .top-nav { padding: 14px 40px; }
  .top-nav .logo { font-size: 26px; }
  .nav-actions { gap: 10px; }
  .btn-signin { font-size: 13px; padding: 9px 16px; }
  .hamburger { display: none; }

  /* Content container pattern */
  section.block { padding: 80px 40px; position: relative; }
  section.block > * {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  section.block.alt {
    background:
      radial-gradient(circle at 88% 8%, rgba(37,99,235,.05), transparent 45%),
      radial-gradient(circle at 8% 92%, rgba(147,51,234,.04), transparent 45%),
      var(--bg-soft);
  }
  .section-title { font-size: 44px; max-width: 760px; }
  .section-sub   { font-size: 17px; max-width: 700px; margin-bottom: 36px; }
  .section-eyebrow { font-size: 12.5px; }

  /* HERO */
  .hero {
    padding: 80px 40px 100px;
    text-align: center;
  }
  .hero > * {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero h1 { font-size: 96px; letter-spacing: -.05em; }
  .hero p { font-size: 19px; max-width: 620px; margin-bottom: 36px; }
  .hero .cta-row {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    max-width: none;
  }
  .hero .btn-primary {
    width: auto;
    padding: 18px 36px;
    font-size: 16px;
  }
  .hero .btn-link { align-self: center; }

  /* Live stats hidden on desktop - impact card lower down does the credibility work */
  .live-strip { display: none; }

  /* Watch card hidden on desktop; the inline video below takes over */
  .watch-card { display: none; }

  /* Inline self-hosted video: 30s muted loop, click to play full from the start */
  .watch-video {
    display: block;
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    border-radius: 22px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 16 / 8;
    box-shadow: var(--shadow-md);
    cursor: pointer;
  }
  .watch-video-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .watch-video::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.35) 0%, transparent 40%);
    pointer-events: none;
    transition: opacity .3s ease;
  }
  .watch-video.is-playing::after { opacity: 0; }

  /* Play button only visible when video is paused */
  .watch-video-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 84px; height: 84px;
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    border: none;
    display: grid; place-items: center;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    cursor: pointer;
    z-index: 3;
    transition: transform .2s ease;
  }
  .watch-video-play:hover { transform: translate(-50%, -50%) scale(1.06); }
  .watch-video-play[hidden] { display: none; }

  /* Mute toggle — big, always visible while video is playing.
     z-index 5 keeps it above the hover controls bar (z-index 2) so it stays clickable. */
  .watch-video-mute {
    position: absolute;
    right: 20px; bottom: 20px;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(10px);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.18);
    display: grid; place-items: center;
    cursor: pointer;
    z-index: 5;
    transition: transform .15s ease, background .2s ease, border-color .2s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
  }
  .watch-video-mute:hover {
    background: rgba(0,0,0,.78);
    border-color: rgba(255,255,255,.32);
    transform: scale(1.05);
  }
  .watch-video-mute:active { transform: scale(.96); }
  /* Icon swap: show "muted" icon by default, "unmuted" when sound is on */
  .watch-video-mute .watch-video-mute-off { display: none; }
  .watch-video.is-unmuted .watch-video-mute-on  { display: none; }
  .watch-video.is-unmuted .watch-video-mute-off { display: block; }
  /* Subtle attention-grab on the mute button while muted, so users know it's clickable */
  .watch-video:not(.is-unmuted) .watch-video-mute::after {
    content: '';
    position: absolute; inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.22);
    animation: ringPulse 2.6s ease-out infinite;
  }

  /* Hover controls: progress bar + time display.
     Hidden by default; revealed via .is-active (set by JS on real mousemove only,
     suppressed during page scroll). Sits behind the mute button on the right. */
  .watch-video-controls {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 32px 100px 16px 24px;
    background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 100%);
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .watch-video.is-active .watch-video-controls {
    opacity: 1;
    pointer-events: auto;
  }
  .watch-video-progress {
    position: relative;
    height: 4px;
    background: rgba(255,255,255,.25);
    border-radius: 2px;
    cursor: pointer;
    margin-bottom: 8px;
    transition: height .15s ease;
  }
  .watch-video-progress:hover { height: 6px; }
  .watch-video-progress-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0%;
    background: #fff;
    border-radius: 2px;
    pointer-events: none;
  }
  .watch-video-progress-handle {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
    transform: translate(-50%, -50%);
    left: 0%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
  }
  .watch-video-progress:hover .watch-video-progress-handle { opacity: 1; }
  .watch-video-times {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.92);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
  }
  .watch-video-time-group {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .watch-video-time-sep { opacity: .5; }
  .watch-video-fs {
    background: none;
    border: none;
    color: rgba(255,255,255,.85);
    cursor: pointer;
    padding: 4px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    transition: color .15s ease, background .15s ease;
  }
  .watch-video-fs:hover { color: #fff; background: rgba(255,255,255,.14); }
  /* Icon swap: show "enter" by default, "exit" while in fullscreen */
  .watch-video-fs .watch-video-fs-exit { display: none; }
  .watch-video.is-fullscreen .watch-video-fs-enter { display: none; }
  .watch-video.is-fullscreen .watch-video-fs-exit  { display: block; }

  /* Fullscreen layout: fill the screen, letterbox the video, drop the rounded card chrome */
  .watch-video:fullscreen {
    max-width: none;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    aspect-ratio: auto;
    background: #000;
  }
  .watch-video:fullscreen .watch-video-el { object-fit: contain; }

  /* Logo grid (desktop) */
  .logos-section { padding: 56px 40px 64px; }
  .logos-label { font-size: 12.5px; margin-bottom: 40px; }
  .logos-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 40px 32px;
    max-width: 1100px;
  }
  .logos-grid img { height: 56px; max-width: 160px; }

  /* Why Markus: edge-to-edge horizontal scroller on tablet/desktop.
     Specificity-bumped selector overrides the .block > * max-width:1200px rule.
     padding-left aligns the first card with the title above. */
  section.block .benefits-scroll {
    max-width: none;
    margin-left: -40px;
    margin-right: -40px;
    padding: 4px 0 24px max(40px, calc((100vw - 1200px) / 2));
    gap: 16px;
    scroll-padding-left: max(40px, calc((100vw - 1200px) / 2));
  }
  .benefit-card {
    flex: 0 0 300px;
    height: 552px;
    padding: 32px 30px 0;
    border-radius: 26px;
  }
  .benefit-eyebrow { font-size: 13px; }
  .benefit-headline { font-size: 24px; line-height: 1.14; }
  .benefit-shot { margin-top: 22px; }
  .benefit-plus {
    width: 36px; height: 36px;
    font-size: 22px;
    bottom: 20px; right: 20px;
  }
  /* Tighter section padding + title spacing so the cards fit on most laptops */
  section.block.alt { padding: 56px 40px; }
  section.block.alt .section-sub { margin-bottom: 24px; }

  /* Product cards: hidden on desktop - accordion takes over */
  .swipe { display: none; }

  /* Platform accordion (Apple-style) */
  .platform-accordion {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 32px;
    align-items: center;
    max-width: 1500px;
    background: var(--bg-soft);
    border-radius: 28px;
    padding: 60px 56px;
    overflow: hidden;
  }
  .platform-item {
    border-top: 1px solid rgba(15,23,42,.10);
  }
  .platform-item:last-child {
    border-bottom: 1px solid rgba(15,23,42,.10);
  }
  .platform-q {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 22px 4px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    text-align: left;
    font: inherit;
  }
  .platform-q-text {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
    line-height: 1.15;
  }
  .platform-a-inner p { font-size: 14px; line-height: 1.55; color: var(--ink-2); padding: 0 4px 4px; }
  .platform-meta { font-size: 11.5px; font-weight: 700; color: var(--blue); padding: 10px 4px 22px; letter-spacing: -.005em; }
  .platform-chev {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--bg-soft);
    color: var(--ink);
    flex-shrink: 0;
    transition: transform .3s cubic-bezier(.33,1,.68,1), background .2s ease;
  }
  .platform-chev svg { width: 14px; height: 14px; }
  .platform-item:hover .platform-chev { background: #E2E8F0; }
  .platform-item.open .platform-chev {
    transform: rotate(180deg);
    background: var(--blue);
    color: #fff;
  }
  .platform-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s cubic-bezier(.33,1,.68,1);
  }
  .platform-item.open .platform-a { grid-template-rows: 1fr; }
  .platform-a-inner { overflow: hidden; min-height: 0; }
  .platform-a-inner .watch-link-inline { padding: 0 4px 24px; font-size: 13px; }

  /* Right column visual stage */
  .platform-visual {
    position: relative;
    aspect-ratio: 4 / 3;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    container-type: inline-size;
  }
  .platform-visual-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .platform-visual-item.active {
    opacity: 1;
    pointer-events: auto;
  }
  /* Mock Exam: paper-stack illustration (replaces prototype's paper+phone) */
  .me-illustration {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  /* Impact card */
  .impact-card { padding: 36px 40px; }
  .impact-grid { gap: 28px; }
  .impact-grid.impact-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .impact-item .v { font-size: 40px; }
  .impact-item .l { font-size: 13px; }

  /* Quote cards: 3-up grid */
  .quotes-swipe {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 0;
    padding: 0;
    overflow: visible;
    max-width: 1200px;
  }
  .quote-card {
    flex: none;
    width: 100%;
    padding: 28px;
  }

  /* Section CTAs */
  .block .btn-primary,
  .block .btn-secondary {
    width: auto;
    max-width: 320px;
    padding: 16px 28px;
    font-size: 15px;
  }

  /* FAQ teaser preview (desktop only) */
  .faq-preview {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 880px;
    margin: 0 auto 32px;
  }
  .faq-preview .faq-q { font-size: 16px; padding: 18px 20px; }
  .faq-preview .faq-a-inner { font-size: 14.5px; padding: 0 20px 18px; }

  /* Pricing teaser tier preview (desktop only) */
  .pricing-preview {
    display: block;
    max-width: 980px;
    margin: 0 auto 32px;
  }
  .tier-preview-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .tier-preview {
    background: white;
    border: 1.5px solid var(--line);
    border-radius: 18px;
    padding: 22px 22px 20px;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    position: relative;
    overflow: hidden;
  }
  .tier-preview-band {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .tier-preview-rate {
    font-size: 38px; font-weight: 900;
    letter-spacing: -.03em;
    color: var(--ink);
    line-height: 1;
    margin-top: 2px;
  }
  .tier-preview-rate .cur {
    font-size: 22px; vertical-align: top;
    font-weight: 700; color: var(--muted);
    margin-right: 1px;
    position: relative; top: 4px;
  }
  .tier-preview-rate small {
    font-size: 13px; font-weight: 600;
    color: var(--muted);
    letter-spacing: 0;
    margin-left: 4px;
  }
  .tier-preview-hint {
    font-size: 12px;
    font-weight: 700;
    color: var(--blue);
    letter-spacing: .02em;
    margin-top: 2px;
  }
  .tier-preview.tier-preview-featured {
    border-color: var(--blue);
    box-shadow: 0 8px 24px rgba(37,99,235,.18);
    background:
      radial-gradient(circle at 100% 0%, rgba(37,99,235,.08), transparent 60%),
      white;
  }
  .tier-preview.tier-preview-featured::before {
    content: 'BEST FIT';
    position: absolute;
    top: 14px; right: 14px;
    font-size: 9px; font-weight: 800;
    letter-spacing: .12em;
    color: white;
    background: var(--blue);
    padding: 3px 8px;
    border-radius: 100px;
  }
  .pricing-note {
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--muted);
    text-align: center;
  }

  /* Final CTA */
  .final-cta { padding: 56px 40px; max-width: 1000px; }
  .final-cta h3 { font-size: 36px; }
  .final-cta p { font-size: 16px; max-width: 540px; margin-left: auto; margin-right: auto; }
  .final-cta .btn-primary,
  .final-cta .btn-secondary { margin-left: auto; margin-right: auto; }
  .final-cta .btn-secondary { margin-top: 12px; }

  /* Footer */
  footer { padding: 72px 40px 56px; text-align: left; }
  footer .footer-logo-mobile,
  footer .footer-links { display: none; }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr 1fr; /* 5th col: certification badge, far right */
    gap: 48px;
    max-width: 1200px;
    margin: 0 auto 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .footer-brand { max-width: 300px; }
  .footer-brand .footer-logo { margin-bottom: 14px; font-size: 22px; }
  .footer-tag {
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255,255,255,.55);
    font-weight: 500;
  }
  /* Legal company info moved up into the brand column */
  .footer-legal-block {
    font-size: 11.5px;
    line-height: 1.75;
    color: rgba(255,255,255,.5);
    font-weight: 500;
  }
  .footer-legal-block b {
    color: rgba(255,255,255,.78);
    font-weight: 700;
  }
  /* On desktop, the bottom .legal block is redundant — info now lives in brand col */
  footer > .legal { display: none; }
  .footer-col h6 {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    margin-bottom: 16px;
  }
  .footer-col a {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255,255,255,.78);
    text-decoration: none;
    padding: 4px 0;
    transition: color .12s ease;
  }
  .footer-col a:hover { color: #fff; }
  footer .legal {
    max-width: 1200px;
    margin: 0 auto;
    font-size: 12px;
    text-align: left;
    color: rgba(255,255,255,.45);
  }
  footer .legal b { color: rgba(255,255,255,.7); }

  /* Modal: cap centred */
  .modal { width: calc(100% - 40px); }

  /* Menu: keep right-side drawer */
  .menu { width: 360px; }

  /* Desktop nav inline links */
  .desktop-nav-links {
    display: flex;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    flex: 1;
    justify-content: center;
  }
  .desktop-nav-links a {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2);
    text-decoration: none;
    padding: 8px 4px;
    position: relative;
    letter-spacing: -.005em;
    transition: color .15s ease;
  }
  .desktop-nav-links a:hover { color: var(--ink); }
  .desktop-nav-links a::after {
    content: '';
    position: absolute;
    left: 50%; right: 50%;
    bottom: 2px;
    height: 2px;
    background: var(--blue);
    border-radius: 2px;
    transition: left .2s ease, right .2s ease;
  }
  .desktop-nav-links a:hover::after { left: 4px; right: 4px; }
  .btn-cta-nav {
    display: inline-block;
    background: var(--blue);
    color: #fff;
    border: 1.5px solid var(--blue);
    font-size: 13px;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 100px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37,99,235,.28);
    transition: background .15s ease, transform .12s ease;
    text-decoration: none;
    font-family: inherit;
  }
  .btn-cta-nav:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
  .btn-cta-nav:active { transform: scale(.97); }

  /* Slide-in pages: fade-in overlays on desktop */
  .page {
    transform: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .page.open {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .page-header {
    padding: 16px 40px;
    position: sticky;
    top: 0;
  }
  .page-back { width: 40px; height: 40px; border-radius: 12px; }
  .page-title { font-size: 18px; }
  .page-title .sub { font-size: 12px; }
  .page-scroll {
    padding: 48px 40px 120px;
  }
  .page-scroll > * {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }
  .price-card,
  .price-faq,
  .faq-list,
  .pricing-intro { max-width: 720px; }
  /* Pricing page: match the homepage section.block frame (padding + 1200 width),
     keeping the price card itself a tidy, centred width within that frame. */
  .page-scroll.pricing-page { padding: 32px 40px 90px; }
  .page-scroll.pricing-page > * { max-width: 1200px; }
  .page-scroll.pricing-page .pricing-intro { max-width: 1200px; }
  /* Keep "One price. Everything included." on a single line */
  .page-scroll.pricing-page .pricing-intro .section-title {
    white-space: nowrap;
    max-width: none;
    font-size: clamp(30px, 4.4vw, 44px);
  }
  .page-scroll.pricing-page .price-card,
  .page-scroll.pricing-page .price-faq { max-width: 760px; }
  .impact-card,
  .demo-bullets,
  .demo-foot { max-width: 720px; }
  .demo-hero { padding: 64px 40px 72px; }
  .demo-hero h1 { font-size: 44px; max-width: 720px; margin-inline: auto; }
  .demo-hero p { font-size: 17px; max-width: 600px; margin-inline: auto; }
  .benefit-hero-icon { width: 120px; height: 120px; margin-bottom: 24px; }
  .benefit-hero-icon svg { width: 56px; height: 56px; }
  body:has(.page.open) { overflow: hidden; }
  .tap-hint { display: none; }
  .founder-list {
    max-width: 1100px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    padding: 6px 40px 4px;
  }
  .team-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  .about-team-wrap { padding: 6px 40px 4px; }
  .about-team-wrap .team-grid { max-width: 1100px; margin-inline: auto; }
  .team-photo {
    max-width: 980px;
    margin-inline: auto;
    margin-left: 40px;
    margin-right: 40px;
  }
  .pedagogy-wrap { padding: 14px 40px 4px; }
  .pedagogy-card { max-width: 760px; margin-inline: auto; }
  .story-block { padding: 22px 40px 4px; }
  .story-block > * { max-width: 760px; margin-inline: auto; }
  .about-section-head { padding: 22px 40px 10px; }
  .about-section-head > * { max-width: 760px; margin-inline: auto; }
}

@media (min-width: 1080px) {
  .team-photo { margin-left: auto; margin-right: auto; }
}

/* ============================================================
   FOUNDERS LIGHTBOX - Apple-style scrollable popup
   ============================================================ */
.founders-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease-out;
  /* The overlay itself is the scroll container: the white sheet keeps its
     natural height and runs off the bottom of the screen, so the whole sheet
     scrolls up and down (Apple-style) rather than scrolling within a box. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 24px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.founders-lightbox::-webkit-scrollbar { display: none; }
.founders-lightbox.open {
  opacity: 1;
  pointer-events: auto;
}
.founders-lightbox-scroll {
  position: relative;
  width: 100%;
  max-width: 960px;
  background: #fff;
  border-radius: 26px;
  opacity: 0;
  transition: opacity .25s ease-out;
  padding: 56px 40px 36px;
  /* Auto vertical margins centre short (text-only) sheets in the viewport;
     sheets taller than the screen still start at the top and scroll. */
  margin: auto 0;
}
.founders-lightbox.open .founders-lightbox-scroll {
  opacity: 1;
  transition: opacity .35s ease-out .25s;
}

/* Close button is a body-level element (outside .founders-lightbox, which has
   a backdrop-filter that would otherwise trap position:fixed). It stays pinned
   to the viewport's top-right while the sheet scrolls underneath, tracking the
   centered sheet's right edge on wide screens. */
.founders-lightbox-close,
.benefit-lb-close {
  position: fixed;
  top: 36px;
  right: max(36px, calc(50% - 480px + 16px));
  z-index: 122;
  width: 32px; height: 32px;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  border-radius: 50%;
  background: #1E293B;
  color: #fff;
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: background .2s ease, opacity .3s ease-out;
}
body.founders-open .founders-lightbox-close,
body.benefit-lb-open .benefit-lb-close {
  transition: background .2s ease, opacity .35s ease-out .3s;
}
body.founders-open .founders-lightbox-close,
body.benefit-lb-open .benefit-lb-close {
  opacity: 1;
  pointer-events: auto;
}
.founders-lightbox-close:hover,
.benefit-lb-close:hover { background: #000; }

/* Header */
.fl-header { margin-bottom: 28px; }
.fl-eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.fl-headline {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
  color: var(--ink);
}
.fl-headline-soft { color: var(--ink-2); font-weight: 700; }
.fl-hero-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 640px;
  margin: 18px 0 24px;
}
.fl-hero-section { margin-bottom: 56px; }
.fl-hero-section:last-child { margin-bottom: 0; }

/* Apple-style feature section: eyebrow + headline on white, then soft-bg card with body + image */
.fl-feature { margin-bottom: 48px; }
.fl-feature:last-child { margin-bottom: 0; }
.fl-feature-eyebrow {
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 10px;
}
.fl-feature-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 22px;
}
.fl-card-feature {
  border-radius: 24px;
  padding: 36px 28px;
  margin-bottom: 0;
}
.fl-card.fl-card-feature p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 auto;
  max-width: 560px;
}
.fl-card.fl-card-feature p strong {
  color: var(--ink);
  font-weight: 700;
}
.fl-card-feature .fl-hero-image { margin: 28px 0 0; }
.fl-card-feature .fl-hero-image img { border-radius: 14px; max-width: 560px; }
.fl-hero-image {
  margin: 8px 0 0;
  text-align: center;
}
.fl-hero-image img {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto;
}
.fl-hero-image.is-crop-bottom img {
  aspect-ratio: 5 / 3;
  object-fit: cover;
  object-position: top center;
}
.fl-hero-image.is-ink-black img {
  filter: grayscale(1) contrast(1.8);
}

/* Content cards */
.fl-card {
  background: var(--bg-soft);
  border-radius: 20px;
  padding: 28px 24px;
  margin-bottom: 16px;
  overflow: hidden;
}
.fl-card h3 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.18;
  color: var(--ink);
  margin-bottom: 10px;
}
.fl-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* Story split card */
.fl-card-split { display: flex; flex-direction: column; gap: 20px; }
.fl-card-media {
  border-radius: 14px;
  overflow: hidden;
  background: #E2E8F0;
}
.fl-card-media img { display: block; width: 100%; height: auto; }

/* Founder card */
.fl-founder { display: flex; flex-direction: column; gap: 18px; }
.fl-founder-photo {
  border-radius: 14px;
  overflow: hidden;
  background: #E2E8F0;
  align-self: center;
  width: 100%;
  max-width: 280px;
}
.fl-founder-photo img { display: block; width: 100%; height: auto; }
.fl-founder-role {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.fl-founder-name {
  font-size: 22px !important;
  margin-bottom: 6px !important;
}
.fl-founder-cred {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 12px;
  line-height: 1.45;
}
.fl-founder-quote {
  font-style: italic;
  color: var(--ink-2);
}

/* Closing CTA card */
.fl-card-cta { text-align: center; padding: 36px 24px; }
.fl-cta-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

body.founders-open,
body.benefit-lb-open { overflow: hidden; }

@media (min-width: 768px) {
  .founders-lightbox { padding: 40px; }
  .founders-lightbox-scroll {
    padding: 72px 96px 56px;
  }
  /* Track the top-right corner of the centered max-1080px sheet. */
  .founders-lightbox-close,
  .benefit-lb-close {
    top: 56px;
    right: max(56px, calc(50% - 480px + 24px));
  }
  .fl-header { margin-bottom: 36px; }
  .fl-headline { font-size: 44px; }
  .fl-feature { margin-bottom: 72px; }
  .fl-feature-title { font-size: 48px; line-height: 1.04; margin-bottom: 28px; }
  .fl-card-feature { padding: 64px 80px; }
  .fl-card.fl-card-feature p { font-size: 20px; line-height: 1.55; max-width: 600px; }
  .fl-card-feature .fl-hero-image { margin-top: 48px; }
  .fl-card-feature .fl-hero-image img { max-width: 600px; }
  .fl-card {
    border-radius: 24px;
    padding: 40px;
    margin-bottom: 20px;
  }
  .fl-card h3 { font-size: 26px; }
  .fl-card p { font-size: 16px; }

  /* Story card: text + photo side by side */
  .fl-card-split {
    flex-direction: row;
    align-items: center;
    gap: 36px;
  }
  .fl-card-split .fl-card-text { flex: 1; }
  .fl-card-split .fl-card-media { flex: 0 0 46%; }

  /* Founder cards: photo + text side by side, alternating */
  .fl-founder {
    flex-direction: row;
    align-items: center;
    gap: 36px;
  }
  .fl-founder-reverse { flex-direction: row-reverse; }
  .fl-founder-photo {
    flex: 0 0 280px;
    max-width: 280px;
    align-self: stretch;
    display: flex;
  }
  .fl-founder-photo img { object-fit: cover; height: 100%; }
  .fl-founder-text { flex: 1; }
  .fl-founder-name { font-size: 26px !important; }

  .fl-cta-row {
    flex-direction: row;
    justify-content: center;
  }
  .fl-cta-row .btn-primary,
  .fl-cta-row .btn-secondary { width: auto; }
}

/* ============================================================
   FOUNDERS LIGHTBOX OVERRIDES
   The founders lightbox stacks multiple .fl-feature sections, so titles
   are smaller and content runs wider than in the single-feature benefit
   lightboxes (which keep the bigger defaults).
   ============================================================ */
#foundersLightbox .fl-feature-title { font-size: 22px; margin-bottom: 14px; }
#foundersLightbox .fl-card-feature { padding: 28px 24px; }
#foundersLightbox .fl-card.fl-card-feature p { max-width: none; }
#foundersLightbox .fl-card-feature .fl-hero-image { margin: 0 0 22px; }
#foundersLightbox .fl-card-feature .fl-hero-image img {
  max-width: 100%;
  border-radius: 14px;
}
#foundersLightbox .fl-card.fl-card-feature p + p { margin-top: 16px; }

/* Pull-quote: breaks up prose with a large emphasised line, set apart
   with hairline rules and a touch of the brand blue. */
#foundersLightbox .fl-pull-quote {
  margin: 26px 0;
  padding: 22px 0;
  border-top: 1px solid rgba(15, 23, 42, .12);
  border-bottom: 1px solid rgba(15, 23, 42, .12);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--ink);
  text-align: center;
  max-width: none;
}

@media (min-width: 768px) {
  #foundersLightbox .fl-headline { font-size: 36px; }
  #foundersLightbox .fl-feature-title {
    font-size: 26px;
    line-height: 1.2;
    margin-bottom: 18px;
  }
  #foundersLightbox .fl-card-feature { padding: 40px 44px; }
  #foundersLightbox .fl-card.fl-card-feature p {
    font-size: 17px;
    max-width: none;
  }
  #foundersLightbox .fl-card-feature .fl-hero-image { margin: 0 0 32px; }
  #foundersLightbox .fl-pull-quote {
    font-size: 26px;
    margin: 36px 0;
    padding: 32px 0;
    line-height: 1.25;
  }
}

/* ============================================================
   TEXT-ONLY BENEFIT LIGHTBOXES  (.lb-textonly)
   Shared treatment for lightboxes that are pure copy: no hero
   image, no card chrome. The points read as plain, wide paragraphs
   so the sheet stays short and (on most screens) needs no scroll.
   Applied to all seven Why Markus lightboxes.
   ============================================================ */
.lb-textonly .fl-card.fl-card-feature {
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.lb-textonly .fl-card.fl-card-feature p { max-width: none; margin: 0; }
/* Titles that do wrap should break at a sensible point, not mid-phrase. */
.lb-textonly .fl-feature-title { text-wrap: balance; }
.lb-textonly .fl-feature { margin-bottom: 20px; }
.lb-textonly .fl-feature:last-child { margin-bottom: 0; }
/* Hairline rules restore the rhythm the card chrome used to provide. */
.lb-textonly .fl-feature + .fl-feature {
  border-top: 1px solid rgba(15,23,42,.08);
  padding-top: 20px;
}

@media (min-width: 768px) {
  .lb-textonly .fl-feature-title { font-size: 40px; margin-bottom: 22px; }
  .lb-textonly .fl-feature { margin-bottom: 24px; }
  .lb-textonly .fl-feature:last-child { margin-bottom: 0; }
  .lb-textonly .fl-feature + .fl-feature { padding-top: 24px; }
  .lb-textonly .fl-card.fl-card-feature p {
    font-size: 19px;
    line-height: 1.55;
    max-width: none;
  }
}

/* Founder sign-off strip — small circular avatars + name + role, each
   linking to LinkedIn. Sits above the closing CTA. */
#foundersLightbox .fl-founders-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 12px;
  padding: 24px 8px 32px;
  margin: 16px 0 8px;
  border-top: 1px solid rgba(15, 23, 42, .08);
}
#foundersLightbox .fl-fs-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  padding: 8px 6px;
  border-radius: 12px;
  transition: background .15s ease, transform .15s ease;
}
#foundersLightbox .fl-fs-tile:hover {
  background: var(--bg-soft);
  transform: translateY(-2px);
}
/* Wrapper around the circular photo — anchors the LinkedIn badge.
   (The badge can't live on .fl-fs-photo because that's a <picture>, and
   browsers don't render ::before/::after on <picture> elements.) */
#foundersLightbox .fl-fs-photo-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  margin-bottom: 10px;
}
#foundersLightbox .fl-fs-photo {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: #E2E8F0;
  display: block;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
}
#foundersLightbox .fl-fs-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Some shots (Andy, Michael, Mark) sit a touch high in the circle so the top
   of the head clips. Anchor their crop higher up the source image to show the
   image lower in the frame and reveal the full head. */
#foundersLightbox .fl-fs-photo--lower img { object-position: center 10%; }
/* LinkedIn hover reveal (pointer devices only) — a circular blue wash with the
   LinkedIn glyph fades in over the photo when the tile is hovered/focused, to
   signal the avatar links out to LinkedIn. Hidden by default; on touch devices
   it never shows (see @media hover:none below) — phone is just image + tap.
   This lives on a real <span>, not ::after, because the photo is a <picture>
   and browsers don't render pseudo-elements on <picture> elements. */
#foundersLightbox .fl-fs-badge {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(10, 102, 194, .82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z'/%3E%3C/svg%3E") center / 40% no-repeat;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}
#foundersLightbox .fl-fs-tile:hover .fl-fs-badge,
#foundersLightbox .fl-fs-tile:focus-visible .fl-fs-badge {
  opacity: 1;
}
/* Touch devices: no overlay at all — just the image, which is itself the link. */
@media (hover: none) {
  #foundersLightbox .fl-fs-badge { display: none; }
}
#foundersLightbox .fl-fs-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 2px;
}
#foundersLightbox .fl-fs-role {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.3;
}

@media (min-width: 540px) {
  #foundersLightbox .fl-founders-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 28px 12px 36px;
  }
}
@media (min-width: 768px) {
  #foundersLightbox .fl-fs-photo { width: 76px; height: 76px; }
  #foundersLightbox .fl-fs-name { font-size: 14px; }
  #foundersLightbox .fl-fs-role { font-size: 11.5px; }
}

@media (min-width: 1280px) {
  .hero { padding: 100px 40px 120px; }
  .hero h1 { font-size: 112px; }
  section.block { padding: 100px 40px; }
  .section-title { font-size: 52px; }
}

/* ============================================================
   MEET OUR FOUNDERS - Apple "Take a closer look" pattern
   Big rounded card, text on the left, photo bleeds to right edge
   ============================================================ */
.founders-title { margin-bottom: 24px; }

.founders-card {
  background: var(--bg-soft);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.founders-card-text {
  padding: 28px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.founders-headline {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--ink);
}
.founders-sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.founders-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 100px;
}
.founders-card-photo {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  background: #E2E8F0;
}
.founders-card-photo img,
.founders-card-photo picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .founders-title { font-size: 44px; margin-bottom: 32px; }
  .founders-card {
    flex-direction: row;
    align-items: stretch;
    border-radius: 28px;
    min-height: 420px;
  }
  .founders-card-text {
    flex: 0 0 44%;
    padding: 56px 48px;
    justify-content: center;
    gap: 18px;
  }
  .founders-headline { font-size: 32px; }
  .founders-sub { font-size: 16px; max-width: 420px; }
  .founders-card-photo {
    flex: 1;
    min-height: auto;
  }
}

@media (min-width: 1280px) {
  .founders-title { font-size: 52px; }
  .founders-card-text { padding: 72px 60px; }
  .founders-headline { font-size: 38px; }
}

/* =============================================================
   PLATFORM ILLUSTRATION — laptop + overlapping phone (default
   visual when no product is selected in The Platform accordion)
   ============================================================= */
.platform-illustration {
  position: relative;
  width: 100%;
  max-width: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #0b1220;
  -webkit-font-smoothing: antialiased;
  --line: #e5e7eb;
}
.platform-illustration *,
.platform-illustration *::before,
.platform-illustration *::after { box-sizing: border-box; }

/* Laptop */
.platform-illustration .di-laptop { width: 100%; position: relative; }
.platform-illustration .di-laptop-lid {
  background: #111118;
  border-radius: 14px 14px 0 0;
  padding: 18px 16px 10px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.06);
  position: relative;
}
.platform-illustration .di-laptop-lid::before {
  content: ''; position: absolute;
  top: 8px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.13);
}
.platform-illustration .di-laptop-screen {
  aspect-ratio: 16 / 10;
  background: #eef2f9;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.platform-illustration .di-laptop-base {
  width: 104%;
  margin-left: -2%;
  height: 14px;
  background: linear-gradient(180deg, #18181f 0%, #0e0e14 100%);
  border-radius: 0 0 14px 14px;
  position: relative;
}
.platform-illustration .di-laptop-base::after {
  content: ''; position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 16%; height: 4px;
  background: #0a0a0e;
  border-radius: 0 0 6px 6px;
}

/* Laptop app shell */
.platform-illustration .di-app { display: flex; width: 100%; height: 100%; }
.platform-illustration .di-sidebar {
  width: 30px;
  background: #1d3d7a;
  display: flex; flex-direction: column;
  align-items: center;
  padding: 8px 0 6px;
  gap: 9px;
  flex-shrink: 0;
}
.platform-illustration .di-sb-burger {
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.10);
  border-radius: 3px;
}
.platform-illustration .di-sb-burger svg { width: 9px; height: 7px; }
.platform-illustration .di-sb-stack {
  display: flex; flex-direction: column;
  gap: 10px;
  flex: 1;
  align-items: center;
  margin-top: 6px;
}
.platform-illustration .di-sb-icon {
  width: 11px; height: 11px;
  border-radius: 2px;
  background: rgba(255,255,255,.45);
  position: relative;
}
.platform-illustration .di-sb-icon.active { background: #fff; }
.platform-illustration .di-sb-icon.active::before {
  content: ''; position: absolute;
  left: -10px; top: -1px; bottom: -1px;
  width: 2.5px;
  background: #60a5fa;
  border-radius: 2px;
}
.platform-illustration .di-sb-avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #2563EB;
  color: #fff;
  font-size: 7px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: -.02em;
}
.platform-illustration .di-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* My Classes view */
.platform-illustration .mc-main {
  background: #f6f8fc;
  padding: 14px 17px 14px;
  gap: 11px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.platform-illustration .mc-page-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.platform-illustration .mc-page-title {
  font-size: 17px; font-weight: 900;
  color: #2563EB;
  letter-spacing: -.025em;
}
.platform-illustration .mc-create-btn {
  background: #2563EB; color: #fff;
  border-radius: 99px;
  padding: 5px 12px;
  font-size: 9px; font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(37,99,235,.25);
}
.platform-illustration .mc-toolbar {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.platform-illustration .mc-filters { display: flex; gap: 4px; flex-shrink: 0; }
.platform-illustration .mc-filter {
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-size: 8.5px; font-weight: 500;
  color: #555;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.platform-illustration .mc-filter.active {
  background: #2563EB;
  border-color: #2563EB;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 1px 6px rgba(37,99,235,.3);
}
.platform-illustration .mc-search {
  flex: 1; min-width: 0;
  background: #fff;
  border: 1px solid #e2e5ea;
  border-radius: 99px;
  padding: 5px 10px;
  display: flex; align-items: center; gap: 5px;
  font-size: 8.5px;
  color: #94a3b8;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.platform-illustration .mc-search svg { width: 9px; height: 9px; flex-shrink: 0; }
.platform-illustration .mc-count {
  font-size: 8.5px; color: #64748b; font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  padding-left: 3px;
}
.platform-illustration .mc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 135px;
  gap: 9px;
  overflow: hidden;
  align-content: start;
}
.platform-illustration .mc-card {
  background: #fff;
  border: 1px solid #eef1f5;
  border-radius: 9px;
  padding: 14px 14px 11px;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.platform-illustration .mc-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 7px;
}
.platform-illustration .mc-card-title-block { flex: 1; min-width: 0; }
.platform-illustration .mc-card-title {
  font-size: 11px; font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
  letter-spacing: -.015em;
}
.platform-illustration .mc-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 8.5px; font-weight: 700;
  align-self: flex-start;
  margin-top: 7px;
}
.platform-illustration .mc-tag-en { background: #dbeafe; color: #1d4ed8; }
.platform-illustration .mc-tag-ma { background: #ccfbf1; color: #0f766e; }
.platform-illustration .mc-card-spacer { flex: 1; }
.platform-illustration .mc-card-divider { height: 1px; background: #eef1f5; margin: 0 0 9px; }
.platform-illustration .mc-card-foot { display: flex; align-items: center; gap: 8px; }
.platform-illustration .mc-meta {
  display: flex; align-items: center; gap: 4px;
  font-size: 9px;
  color: #94a3b8;
  font-weight: 500;
}
.platform-illustration .mc-meta-status { margin-left: auto; }
.platform-illustration .mc-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.platform-illustration .mc-dot.s-active { background: #22c55e; }
.platform-illustration .mc-dot.s-quiet  { background: #f59e0b; }
.platform-illustration .mc-dot.s-idle   { background: #cbd5e1; }
.platform-illustration .mc-card-add {
  border: 1.5px dashed #cbd5e1;
  background: rgba(255,255,255,.6);
  box-shadow: none;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  color: #94a3b8;
  font-size: 9px; font-weight: 600;
}
.platform-illustration .mc-card-add svg { width: 13px; height: 13px; }

/* Phone, overlapping bottom-right of laptop */
.platform-illustration .lcphone {
  position: absolute;
  left: 5%;
  top: 15%;
  bottom: auto;
  height: 50%;
  aspect-ratio: 11 / 24;
  background: #2c2c33;
  border-radius: 32px;
  padding: 7px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.05);
  z-index: 2;
}
.platform-illustration .lcphone::before,
.platform-illustration .lcphone::after { display: none; }
.platform-illustration .lcphone-screen {
  background: #fff;
  border-radius: 26px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.platform-illustration .lcphone-status {
  height: 22px;
  background: #2563EB;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
  flex-shrink: 0;
}
.platform-illustration .lcphone-time { font-size: 9px; font-weight: 700; color: #fff; }
.platform-illustration .lcphone-icons { display: flex; align-items: center; gap: 3px; }
.platform-illustration .lcphone-icons svg { width: 11px; height: 7px; }
.platform-illustration .lcphone-icons svg.lcphone-icon-wifi { width: 10px; }
.platform-illustration .lcphone-icons svg:last-child { width: 14px; }
.platform-illustration .lcphone-header {
  background: #2563EB;
  padding: 5px 12px 9px;
  display: flex; flex-direction: column;
  gap: 7px;
  flex-shrink: 0;
}
.platform-illustration .lcphone-header-row { display: flex; align-items: center; justify-content: space-between; }
.platform-illustration .lcphone-logo { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.platform-illustration .lcphone-burger { display: flex; flex-direction: column; gap: 2.5px; }
.platform-illustration .lcphone-burger span { display: block; width: 12px; height: 1.4px; background: #fff; border-radius: 1px; }
.platform-illustration .lcphone-subject {
  display: flex;
  background: rgba(255,255,255,.15);
  border-radius: 100px;
  padding: 2px;
}
.platform-illustration .lcphone-subj-btn {
  flex: 1;
  padding: 4px;
  border-radius: 100px;
  font-size: 8px; font-weight: 700;
  color: rgba(255,255,255,.6);
  border: none;
  background: transparent;
  font-family: inherit;
}
.platform-illustration .lcphone-subj-btn.active { background: #fff; color: #111; }
.platform-illustration .lcphone-body {
  flex: 1;
  background: #fff;
  padding: 9px 10px 7px;
  display: flex; flex-direction: column;
  gap: 7px;
  overflow: hidden;
}
.platform-illustration .lcphone-section-title { font-size: 9px; font-weight: 800; color: #111; }
.platform-illustration .lcphone-progress {
  background: #2563EB;
  border-radius: 13px;
  padding: 9px 10px 8px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.platform-illustration .lcphone-progress-ring {
  position: absolute;
  right: -6px; bottom: -12px;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 13px solid rgba(255,255,255,.08);
}
.platform-illustration .lcphone-working {
  font-size: 6px; font-weight: 700;
  color: rgba(255,255,255,.6);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.platform-illustration .lcphone-grade {
  font-size: 28px; font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -.04em;
  margin: 3px 0 2px;
}
.platform-illustration .lcphone-grade-avg {
  font-size: 8px; font-weight: 500;
  color: rgba(255,255,255,.78);
  margin-bottom: 5px;
}
.platform-illustration .lcphone-grade-meta {
  font-size: 6.5px; font-weight: 500;
  color: rgba(255,255,255,.5);
  margin-bottom: 7px;
}
.platform-illustration .lcphone-insights {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff;
  color: #2563EB;
  font-size: 8px; font-weight: 700;
  padding: 4px 9px;
  border-radius: 100px;
}
.platform-illustration .lcphone-insights svg { width: 7px; height: 7px; }
.platform-illustration .lcphone-lc-card {
  background: linear-gradient(130deg, #9333ea 0%, #db2777 100%);
  border-radius: 11px;
  padding: 8px 10px;
  display: flex; align-items: center; gap: 7px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.6), 0 6px 14px rgba(147,51,234,.35);
  flex-shrink: 0;
}
.platform-illustration .lcphone-lc-icon {
  width: 24px; height: 24px;
  background: rgba(255,255,255,.2);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.platform-illustration .lcphone-lc-icon svg { width: 13px; height: 13px; }
.platform-illustration .lcphone-lc-text { flex: 1; min-width: 0; }
.platform-illustration .lcphone-lc-title { font-size: 9px; font-weight: 700; color: #fff; }
.platform-illustration .lcphone-lc-desc {
  font-size: 7px; font-weight: 500;
  color: rgba(255,255,255,.85);
  line-height: 1.35;
  margin-top: 2px;
}
.platform-illustration .lcphone-lc-arrow {
  width: 18px; height: 18px;
  background: rgba(255,255,255,.22);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.platform-illustration .lcphone-lc-arrow svg { width: 8px; height: 8px; }
.platform-illustration .lcphone-rec {
  background: #f8f8fb;
  border-radius: 9px;
  padding: 6px 9px;
  display: flex; align-items: center; gap: 7px;
  flex-shrink: 0;
}
.platform-illustration .lcphone-rec-icon {
  width: 20px; height: 20px;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.platform-illustration .lcphone-rec-icon svg { width: 10px; height: 10px; }
.platform-illustration .lcphone-rec-text { flex: 1; min-width: 0; }
.platform-illustration .lcphone-rec-title { font-size: 8.5px; font-weight: 700; color: #111; }
.platform-illustration .lcphone-rec-sub { font-size: 6.5px; color: #999; margin-top: 1px; }
.platform-illustration .lcphone-rec-action {
  width: 18px; height: 18px;
  background: #7c3aed;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.platform-illustration .lcphone-rec-action svg { width: 8px; height: 8px; }
.platform-illustration .lcphone-more {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 8.5px; font-weight: 700; color: #9333ea;
  padding: 2px 2px 0;
}
.platform-illustration .lcphone-more svg { width: 9px; height: 9px; }
.platform-illustration .lcphone-dock {
  height: 34px;
  background: #fff;
  border-top: 1px solid #efefef;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 13px 4px;
  flex-shrink: 0;
}
.platform-illustration .lcphone-dock svg { width: 13px; height: 13px; color: #cfd1d6; }
.platform-illustration .lcphone-dock svg.active { color: #111; }

/* The composition is designed at a fixed 1000px width — its inner padding,
   font sizes and card heights are pixel-fixed. To fit any panel size while
   keeping every proportion identical to the source mockup, render the
   composition at its natural 1000px size and use transform: scale() to
   shrink it to fit. */
.platform-visual-item[data-platform="default"] {
  padding: 0;
  overflow: visible;
}
/* DEFAULT + IA composition: the laptop and phone live in separate
   positioning containers (.comp-laptop and .comp-phone) so we can place
   each device independently inside the panel. The laptop sits on the
   right and bleeds ~30% off the right edge (Apple "device family" look);
   the phone sits on the left, fully visible, in front of the laptop. */
.platform-visual-item[data-platform="default"],
.platform-visual-item[data-platform="ia"],
.platform-visual-item[data-platform="di"] {
  justify-content: stretch;
  align-items: stretch;
  padding: 0;
}
.platform-visual-item[data-platform="default"] .platform-illustration,
.platform-visual-item[data-platform="ia"] .platform-illustration,
.platform-visual-item[data-platform="di"] .platform-illustration {
  position: relative;
  width: 100%;
  height: 100%;
  flex-shrink: 1;
  transform: none;
}

/* Laptop container: positioned right + cropped off right edge.
   left: 22% leaves room for the phone on the left.
   width: 110% makes the laptop extend ~32% past the panel's right edge
   (= 22% start + 110% width - 100% panel = 32% bleed).
   top: 8% gives breathing room above the laptop. */
.platform-illustration .comp-laptop {
  position: absolute;
  left: 22%;
  top: 3%;
  width: 110%;
  z-index: 1;
}
.platform-illustration .comp-laptop .di-laptop {
  width: 100%;
}

/* Phone container: positioned left, fully visible, in front of laptop.
   left: 5% (inset from panel left).
   bottom: 4% (small margin from panel bottom).
   height: 80% makes the phone substantial but smaller than the laptop. */
.platform-illustration .comp-phone {
  position: absolute;
  left: 5%;
  bottom: -8%;
  height: 80%;
  aspect-ratio: 11 / 24;
  z-index: 2;
  transition: transform .55s cubic-bezier(.5, 0, .2, 1);
}
/* Phone fills its wrapper — override the earlier absolute positioning */
.platform-illustration .comp-phone .lcphone {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

/* Phone slides out to the left when leaving default */
.platform-visual-item[data-platform="default"]:not(.active) .comp-phone {
  transform: translateX(-100%);
}

/* =============================================================
   INITIAL ASSESSMENT ILLUSTRATION
   Animated frame sequence that loops through:
   Begin → Countdown → Q1 → Adaptive Up → Q2 → Adaptive Down
   ============================================================= */
/* IA fills the laptop screen completely so the laptop frame from the
   default visual visually "transitions" into the IA app (same laptop,
   screen content swaps) */
.di-laptop-screen .ia-screen {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0b1428 0%, #060c1c 100%);
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  color: #fff;
}
/* Soft orbs in the background like the IA screens */
.ia-screen-glow {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(96,165,250,.10) 0, transparent 40%),
    radial-gradient(circle at 75% 70%, rgba(147,197,253,.08) 0, transparent 38%),
    radial-gradient(circle at 50% 20%, rgba(59,130,246,.06) 0, transparent 30%);
  pointer-events: none;
}
.ia-screen-cog {
  position: absolute;
  top: 14px; left: 16px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  display: grid; place-items: center;
  color: rgba(255,255,255,.55);
  z-index: 3;
}
.ia-screen-cog svg { width: 12px; height: 12px; }
.ia-screen-brand {
  position: absolute;
  bottom: 14px; right: 18px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(255,255,255,.18);
  z-index: 3;
}

/* All frames stack absolutely and fade in/out via keyframe animations.
   Total loop length: 22s. Each frame has its own keyframes that hold
   it visible for a window of the cycle. */
.ia-frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 38px 48px;
  text-align: center;
  opacity: 0;
  z-index: 1;
}

/* Frame 1: Welcome */
.ia-playing .ia-frame-begin { animation: ia-show-begin 18s infinite; }
.ia-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.ia-welcome {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1;
  color: #fff;
  margin-bottom: 22px;
}
.ia-instr {
  font-size: 13px;
  color: rgba(255,255,255,.65);
  line-height: 1.55;
  margin: 0 0 6px;
}
.ia-instr-soft { color: rgba(255,255,255,.45); margin-bottom: 22px; }
.ia-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #0b1428;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  cursor: default;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.ia-start-btn svg { width: 12px; height: 12px; }

/* Frame 2: Countdown */
.ia-playing .ia-frame-countdown { animation: ia-show-countdown 18s infinite; }
.ia-count-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.ia-count-stack {
  position: relative;
  width: 110px;
  height: 110px;
}
.ia-count-digit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 86px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  color: #fff;
  opacity: 0;
}
.ia-playing .ia-count-d3 { animation: ia-count-3 18s infinite; }
.ia-playing .ia-count-d2 { animation: ia-count-2 18s infinite; }
.ia-playing .ia-count-d1 { animation: ia-count-1 18s infinite; }

/* Question shared styling */
.ia-q-meta {
  position: absolute;
  top: 14px;
  right: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.ia-q-num {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,.55);
}
.ia-q-bar {
  width: 70px;
  height: 3px;
  background: rgba(255,255,255,.12);
  border-radius: 3px;
  overflow: hidden;
}
.ia-q-fill {
  display: block;
  height: 100%;
  background: #fff;
  border-radius: 3px;
}
.ia-q-text {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  margin: 0 0 22px;
  letter-spacing: -.01em;
}

/* Frame 3: Question 1 */
.ia-playing .ia-frame-q1 { animation: ia-show-q1 18s infinite; }
.ia-q-mock-site {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}
.ia-q-mock-nav {
  background: #2563EB;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  color: #fff;
  font-size: 11px;
}
.ia-q-mock-logo { font-weight: 800; }
.ia-q-mock-spacer { flex: 1; }
.ia-q-mock-link { color: rgba(255,255,255,.85); font-weight: 500; }
.ia-q-mock-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 50%;
}
.ia-q-mock-icon svg { width: 14px; height: 14px; }
.ia-q-mock-pick { position: relative; }
.ia-q-mock-pick::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid #fff;
  border-radius: 50%;
  opacity: 0;
}
.ia-playing .ia-q-mock-pick::after { animation: ia-q1-highlight 18s infinite; }
.ia-q-mock-cursor {
  position: absolute;
  top: 24px; right: 24px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(37,99,235,.55);
  box-shadow: 0 0 0 6px rgba(37,99,235,.18);
  opacity: 0;
}
.ia-playing .ia-q-mock-cursor { animation: ia-q1-cursor 18s infinite; }

/* Frame 4: Adaptive Up / Frame 6: Adaptive Down */
.ia-playing .ia-frame-up { animation: ia-show-up 18s infinite; }
.ia-playing .ia-frame-down { animation: ia-show-down 18s infinite; }
.ia-playing .ia-frame-results { animation: ia-show-results 18s infinite; }

/* Frame 7: Results overview — English level + Maths level */
.ia-results-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  margin-bottom: 22px;
}
.ia-results-grid {
  display: flex;
  align-items: center;
  gap: 36px;
  width: 100%;
  max-width: 520px;
}
.ia-result-card {
  flex: 1;
  text-align: center;
  min-width: 0;
}
.ia-result-subject {
  font-size: 13px;
  font-weight: 700;
  color: #93c5fd;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.ia-result-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .18em;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ia-result-level {
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  color: #fff;
  margin-bottom: 8px;
}
.ia-result-meta {
  font-size: 11px;
  color: rgba(255,255,255,.6);
}
.ia-results-divider {
  width: 1px;
  align-self: stretch;
  min-height: 110px;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.18) 30%, rgba(255,255,255,.18) 70%, transparent 100%);
}
.ia-adapt-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin-bottom: 14px;
  color: #fff;
}
.ia-adapt-icon-up   { background: linear-gradient(180deg, #22c55e 0%, #15803d 100%); box-shadow: 0 0 0 8px rgba(34,197,94,.12); }
.ia-adapt-icon-down { background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%); box-shadow: 0 0 0 8px rgba(245,158,11,.12); }
.ia-adapt-icon svg { width: 30px; height: 30px; }
.ia-adapt-label {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 18px;
}
.ia-adapt-bar {
  display: flex;
  gap: 6px;
}
.ia-adapt-step {
  width: 34px;
  height: 7px;
  border-radius: 4px;
  background: rgba(255,255,255,.10);
}
.ia-adapt-step.ia-active { background: #fff; }

/* Frame 5: Question 2 — free writing review */
.ia-playing .ia-frame-q2 { animation: ia-show-q2 18s infinite; }
.ia-q-review {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: 10px;
  padding: 14px 16px;
  color: #0b1428;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  text-align: left;
}
.ia-q-review-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ia-q-review-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #e2e8f0;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  color: #475569;
}
.ia-q-review-name { font-size: 12px; font-weight: 700; color: #0f172a; }
.ia-q-review-stars { font-size: 11px; color: #f59e0b; letter-spacing: .04em; }
.ia-q-review-text {
  border-top: 1px solid #f1f5f9;
  padding-top: 10px;
  font-size: 11.5px;
  color: #475569;
  line-height: 1.5;
  min-height: 60px;
}
.ia-q-review-typed::before { content: ''; }
.ia-playing .ia-q-review-typed::before { animation: ia-q2-typing 18s infinite; }
.ia-q-review-cursor {
  display: inline-block;
  width: 1.5px;
  height: 12px;
  background: #2563EB;
  vertical-align: middle;
  margin-left: 1px;
}
.ia-playing .ia-q-review-cursor { animation: ia-q2-blink 1s infinite, ia-q2-cursor-show 18s infinite; }

/* ===== Animation keyframes =====
   22s loop. Each frame has its own keyframe that shows it during
   a specific window. Frame windows:
     0-15%   Begin
     17-30%  Countdown
     32-46%  Q1
     48-55%  Adaptive Up
     57-78%  Q2
     80-92%  Adaptive Down
     94-100% (fade out before loop)
*/
/* 18s loop, frame windows:
   0-15%   Begin
   17-32%  Countdown
   34-43%  Q1
   45-50%  Adaptive Up
   52-68%  Q2
   70-77%  Adaptive Down
   79-96%  Results
   98-100% (buffer before loop)
*/
@keyframes ia-show-begin {
  0%, 15% { opacity: 1; }
  17%, 100% { opacity: 0; }
}
@keyframes ia-show-countdown {
  0%, 16% { opacity: 0; }
  18%, 32% { opacity: 1; }
  34%, 100% { opacity: 0; }
}
@keyframes ia-show-q1 {
  0%, 33% { opacity: 0; }
  35%, 43% { opacity: 1; }
  45%, 100% { opacity: 0; }
}
@keyframes ia-show-up {
  0%, 44% { opacity: 0; }
  46%, 50% { opacity: 1; }
  52%, 100% { opacity: 0; }
}
@keyframes ia-show-q2 {
  0%, 51% { opacity: 0; }
  53%, 68% { opacity: 1; }
  70%, 100% { opacity: 0; }
}
@keyframes ia-show-down {
  0%, 69% { opacity: 0; }
  71%, 77% { opacity: 1; }
  79%, 100% { opacity: 0; }
}
@keyframes ia-show-results {
  0%, 78% { opacity: 0; }
  80%, 96% { opacity: 1; }
  98%, 100% { opacity: 0; }
}

/* Countdown digits: visible during 17-32% phase, each digit ~0.9s @ 18s */
@keyframes ia-count-3 {
  0%, 17% { opacity: 0; transform: scale(.7); }
  19%, 22% { opacity: 1; transform: scale(1); }
  24%, 100% { opacity: 0; transform: scale(1.2); }
}
@keyframes ia-count-2 {
  0%, 22.5% { opacity: 0; transform: scale(.7); }
  24%, 27% { opacity: 1; transform: scale(1); }
  29%, 100% { opacity: 0; transform: scale(1.2); }
}
@keyframes ia-count-1 {
  0%, 27.5% { opacity: 0; transform: scale(.7); }
  29%, 32% { opacity: 1; transform: scale(1); }
  34%, 100% { opacity: 0; transform: scale(1.2); }
}

/* Q1 cursor: moves to the magnifier (Q1 visible 34-43%) */
@keyframes ia-q1-cursor {
  0%, 34% { opacity: 0; transform: translate(-180px, 12px); }
  36% { opacity: 1; transform: translate(-180px, 12px); }
  39%, 43% { opacity: 1; transform: translate(0, 0); }
  45%, 100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes ia-q1-highlight {
  0%, 39% { opacity: 0; }
  40%, 43% { opacity: 1; }
  45%, 100% { opacity: 0; }
}

/* Q2 typing: simulates typing through the review (Q2 visible 52-68%) */
@keyframes ia-q2-typing {
  0%, 51% { content: ''; }
  53% { content: 'The'; }
  55% { content: 'The hotel'; }
  57% { content: 'The hotel was'; }
  59% { content: 'The hotel was lovely'; }
  61% { content: 'The hotel was lovely. Staff'; }
  63% { content: 'The hotel was lovely. Staff were'; }
  65% { content: 'The hotel was lovely. Staff were brilliant'; }
  67%, 68% { content: 'The hotel was lovely. Staff were brilliant.'; }
}
@keyframes ia-q2-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
@keyframes ia-q2-cursor-show {
  0%, 51% { visibility: hidden; }
  52%, 68% { visibility: visible; }
  69%, 100% { visibility: hidden; }
}

/* Reduced motion: stop the cycle, just show the welcome frame */
@media (prefers-reduced-motion: reduce) {
  .ia-frame-begin { opacity: 1; animation: none; }
  .ia-frame-countdown,
  .ia-frame-q1,
  .ia-frame-up,
  .ia-frame-q2,
  .ia-frame-down,
  .ia-frame-results { opacity: 0; animation: none; }
  .ia-count-digit,
  .ia-q-mock-cursor,
  .ia-q-mock-pick::after,
  .ia-q-review-typed::before,
  .ia-q-review-cursor { animation: none; }
}

/* =============================================================
   MOCK EXAM ILLUSTRATION — papers fanned + phone showing grade
   Static composition. Papers sit in the right portion of the panel
   (echoing the laptop placement in default). Phone sits front-left,
   showing the marked grade result on a Markus-blue background.
   ============================================================= */
.platform-visual-item[data-platform="me"] {
  justify-content: stretch;
  align-items: stretch;
  padding: 0;
}
.platform-visual-item[data-platform="me"] .platform-illustration {
  position: relative;
  width: 100%;
  height: 100%;
  flex-shrink: 1;
  transform: none;
}

/* Papers positioned on the left of the panel. Front paper is upright
   and dominates the left half. Back paper peeks above + to the right
   of it with a slight rotation. */
.me-papers {
  position: absolute;
  left: 18%;
  top: 0;
  bottom: 0;
  width: 78%;
  z-index: 1;
}
.me-paper {
  position: absolute;
  display: block;
}
.me-paper img {
  display: block;
  height: 100%;
  width: auto;
  border-radius: 4px;
}
.me-paper-front {
  top: -4%;
  left: 0;
  height: 108%;
  z-index: 2;
  filter: drop-shadow(0 2px 8px rgba(15, 23, 42, .12));
}
/* Back paper sits mostly BEHIND the front paper, upright (no rotation).
   Only the top edge and right side peek out due to position offset. */
.me-paper-back {
  top: -7%;
  left: 8%;
  height: 108%;
  z-index: 1;
  filter: drop-shadow(0 2px 6px rgba(15, 23, 42, .08));
}

/* Phone in front, on the right, overlapping the front paper's right side.
   Phone is the tallest object — extends slightly below the panel bottom.
   container-type: inline-size makes cqi units inside reference phone width,
   so text/spacing scales proportionally with the phone at any viewport. */
.me-phone-wrap {
  position: absolute;
  right: 10%;
  bottom: -8%;
  height: 78%;
  aspect-ratio: 1 / 2;
  z-index: 3;
  container-type: inline-size;
}
.me-phone {
  background: #2c2c33;
  border-radius: 32px;
  padding: 7px;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.05);
}
.me-phone-screen {
  background: #2563EB;
  border-radius: 26px;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  color: #fff;
  font-family: 'Inter', sans-serif;
}
/* Dot pattern: scattered organically across the screen (not a grid).
   Each dot is its own radial-gradient at a specific position, with
   slight variation in opacity and size to feel hand-placed.
   Slow drift animation gives the dots a subtle "floating" feel. */
.me-grade-dots {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 14% 16%, rgba(255,255,255,.24) 1.8px, transparent 2.2px),
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.20) 1.6px, transparent 2px),
    radial-gradient(circle at 30% 38%, rgba(255,255,255,.18) 1.5px, transparent 2px),
    radial-gradient(circle at 88% 48%, rgba(255,255,255,.22) 1.7px, transparent 2.1px),
    radial-gradient(circle at 12% 58%, rgba(255,255,255,.18) 1.5px, transparent 2px),
    radial-gradient(circle at 60% 65%, rgba(255,255,255,.16) 1.4px, transparent 1.9px),
    radial-gradient(circle at 25% 78%, rgba(255,255,255,.22) 1.7px, transparent 2.1px),
    radial-gradient(circle at 80% 82%, rgba(255,255,255,.18) 1.5px, transparent 2px),
    radial-gradient(circle at 48% 90%, rgba(255,255,255,.16) 1.4px, transparent 1.9px),
    radial-gradient(circle at 92% 92%, rgba(255,255,255,.14) 1.3px, transparent 1.8px);
  pointer-events: none;
  animation: me-dots-float 9s ease-in-out infinite;
}
@keyframes me-dots-float {
  0%,  100% { transform: translate(0, 0); }
  25%       { transform: translate(2%, -1.5%); }
  50%       { transform: translate(-1%, 1.5%); }
  75%       { transform: translate(1.5%, 1%); }
}
@media (prefers-reduced-motion: reduce) {
  .me-grade-dots { animation: none; }
}
.me-grade-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 0 24px;
  text-align: center;
}
.me-grade-label {
  font-size: 5cqi;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  margin-bottom: 9cqi;
}
.me-grade-number {
  font-size: 34cqi;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.05em;
  color: #fff;
  margin-bottom: 12cqi;
}
.me-grade-marks {
  font-size: 6.5cqi;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.005em;
}
.me-grade-cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8cqi;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5cqi;
  font-size: 4.6cqi;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.me-grade-cta svg {
  width: 6cqi;
  height: 6cqi;
}

/* =============================================================
   STARTING POINT ILLUSTRATION
   Phone in front (Mock Exam phone frame, Markus-blue screen) shows
   the welcome lightbox; laptop behind (default-composition shell)
   shows the results breakdown. cqi units track each device's width.
   ============================================================= */
.platform-visual-item[data-platform="sp"] {
  justify-content: stretch;
  align-items: stretch;
  padding: 0;
}
.platform-visual-item[data-platform="sp"] .platform-illustration {
  position: relative;
  width: 100%;
  height: 100%;
  flex-shrink: 1;
  transform: none;
}

/* Phone: the lcphone shell (status bar, Markus header, dock) inside the
   shared .comp-phone slot, showing the topic-picker screen. Sizing is px
   to match the lcphone's fixed-scale internals. Layering follows the app
   convention: blue header → soft grey body → white cards. */
.platform-illustration .sp-body { background: #f7f8fb; }
.platform-illustration .sp-hello { padding: 3px 1px 1px; }
.platform-illustration .sp-hello-eyebrow {
  font-size: 7px;
  font-weight: 600;
  color: #6b7686;
}
.platform-illustration .sp-hello-title {
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin: 1px 0 3px;
}
.platform-illustration .sp-hello-sub {
  font-size: 7.5px;
  font-weight: 500;
  color: #64748b;
  line-height: 1.45;
}
/* Topic grid: white cards with tinted icon chips; one card shows the
   selected state (blue ring + check badge) so the screen reads as a
   product mid-use rather than an empty template. */
.platform-illustration .sp-topics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.platform-illustration .sp-topic {
  position: relative;
  aspect-ratio: 1.08;
  background: #fff;
  border: 1px solid #e8ecf3;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 8.5px;
  font-weight: 700;
  color: #0f172a;
}
.platform-illustration .sp-topic-selected {
  border: 1.5px solid #2563EB;
  box-shadow: 0 0 0 2.5px rgba(37,99,235,.12), 0 1px 2px rgba(15,23,42,.04);
}
.platform-illustration .sp-topic-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2563EB;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.platform-illustration .sp-topic-check svg { width: 7px; height: 7px; }
.platform-illustration .sp-topic-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.platform-illustration .sp-topic-icon svg { width: 16px; height: 16px; }
.platform-illustration .sp-topic-icon-music { background: #f3e8ff; color: #9333ea; }
.platform-illustration .sp-topic-icon-film  { background: #dbeafe; color: #2563eb; }
.platform-illustration .sp-topic-icon-sport { background: #d1fae5; color: #059669; }
.platform-illustration .sp-topic-icon-game  { background: #fef3c7; color: #d97706; }

/* Laptop screen: light app shell (same tokens as the DI dashboard) */
.sp-lap {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background: #fff;
  font-family: 'Inter', sans-serif;
  color: #0f172a;
  container-type: inline-size;
}
.sp-lap-topbar {
  background: #2563EB;
  padding: 1.2cqi 2.2cqi;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.sp-lap-brand {
  font-size: 2.4cqi; font-weight: 800;
  color: #fff; letter-spacing: -.02em;
}
.sp-lap-burger {
  display: flex; flex-direction: column;
  gap: .4cqi;
}
.sp-lap-burger span {
  display: block;
  width: 2.4cqi; height: .3cqi;
  background: #fff;
  border-radius: .1cqi;
}
.sp-lap-main {
  flex: 1;
  padding: 2.4cqi 14cqi 0;
  background: #f8fafc;
  overflow: hidden;
  min-width: 0;
}
.sp-lap-eyebrow {
  font-size: 1.7cqi;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #64748b;
  text-align: center;
  margin-bottom: 1.6cqi;
}
.sp-overall { text-align: center; margin-bottom: 2.4cqi; }
.sp-overall-label {
  font-size: 1.7cqi;
  font-weight: 600;
  color: #64748b;
}
.sp-overall-grade {
  font-size: 8.5cqi;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  color: #0f172a;
  margin-top: .5cqi;
}
.sp-skills {
  max-width: 52cqi;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5cqi;
}
.sp-skill { display: flex; align-items: center; gap: 2cqi; }
/* Name column sized to the longest label (Ratio & Proportion) */
.sp-skill-name {
  width: 19cqi;
  flex-shrink: 0;
  font-size: 1.9cqi;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}
.sp-skill-bar {
  flex: 1;
  height: 1.3cqi;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.sp-skill-fill {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 999px;
  background: #2563EB;
}
.sp-skill-grade {
  width: 3.4cqi; height: 3.4cqi;
  flex-shrink: 0;
  border-radius: .9cqi;
  display: grid; place-items: center;
  font-size: 1.9cqi;
  font-weight: 800;
}
/* Same grade-chip palette as the DI dashboard */
.sp-g-low  { background: #fee2e2; color: #b91c1c; }
.sp-g-mid  { background: #fef3c7; color: #92400e; }
.sp-g-high { background: #d1fae5; color: #065f46; }

/* =============================================================
   SELF ASSESSMENT ILLUSTRATION
   Ported from markus.tech live site: papers cycle through every
   2.5s (handled by JS), single phone with camera viewfinder hovers
   in front with a gentle float animation.
   ============================================================= */
.platform-visual-item[data-platform="sa"] {
  justify-content: stretch;
  align-items: stretch;
  padding: 0;
}
.platform-visual-item[data-platform="sa"] .platform-illustration {
  position: relative;
  width: 100%;
  height: 100%;
  flex-shrink: 1;
  transform: none;
}

.self-assessment-display {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2%;
}

/* Paper slideshow — stacked, fade between via JS-toggled .active class */
.sa-pack {
  position: absolute;
  width: 62%;
  max-width: 560px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .18);
  opacity: 0;
  transition: opacity .5s ease;
}
.sa-pack.sa-slide.active { opacity: 1; }

/* Camera phone — positioned over the QR code area of the paper. The QR
   sits lower-left on the SA papers, so the phone offsets from centre. */
.sa-camera-phone {
  position: absolute;
  left: 33%;
  top: 68%;
  width: 30%;
  max-width: 280px;
  aspect-ratio: 1 / 2;
  border: 8px solid #2c2c33;
  border-radius: 30px;
  background: transparent;
  box-shadow: 0 25px 60px rgba(0, 0, 0, .35);
  z-index: 10;
  /* The centring translate + base rotation must live here, not only in the
     float keyframes — otherwise the phone loses its anchor whenever the
     animation is off (e.g. prefers-reduced-motion). */
  transform: translate(-50%, -50%) rotate(-5deg);
  animation: sa-camera-float 4s ease-in-out infinite;
}
.sa-camera-screen {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .15);
  border-radius: 22px;
  overflow: hidden;
  position: relative;
}

/* Viewfinder L-shaped corner brackets */
.sa-camera-corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255, 255, 255, .9);
}
.sa-camera-corner.top-left {
  top: 22px; left: 14px;
  border-right: none;
  border-bottom: none;
  border-radius: 4px 0 0 0;
}
.sa-camera-corner.top-right {
  top: 22px; right: 14px;
  border-left: none;
  border-bottom: none;
  border-radius: 0 4px 0 0;
}
.sa-camera-corner.bottom-left {
  bottom: 60px; left: 14px;
  border-right: none;
  border-top: none;
  border-radius: 0 0 0 4px;
}
.sa-camera-corner.bottom-right {
  bottom: 60px; right: 14px;
  border-left: none;
  border-top: none;
  border-radius: 0 0 4px 0;
}

/* Shutter button at bottom centre */
.sa-camera-shutter {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
}

/* Gentle float — composes with the -5deg base rotation + centring offset.
   Translate first (-50%, -50%) centres, then rotate, then float Y. */
@keyframes sa-camera-float {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(-5deg) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) rotate(-5deg) translateY(-10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sa-camera-phone { animation: none; }
  .sa-pack { transition: none; }
}

/* =============================================================
   LIVING COLOUR ILLUSTRATION
   Single phone that cycles through 5 frames of the Living Colour
   flow: question list → topic chooser → source picker → loading →
   built question. Animations only run when .lc-playing is set
   (added by JS when the LC accordion item is opened).
   ============================================================= */
.platform-visual-item[data-platform="lc"] {
  justify-content: center;
  align-items: center;
  padding: 0;
}
.platform-visual-item[data-platform="lc"] .platform-illustration {
  position: relative;
  width: 100%;
  height: 100%;
  flex-shrink: 1;
  transform: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Phone + laptop shown TOGETHER as a device-family composition. The laptop
   is centered and fully visible (loading screen); the phone sits in front,
   bottom-left, overlapping the laptop's lower-left corner. Both static. */
.lc-phone-wrap {
  position: absolute;
  left: 3%;
  bottom: -8%;
  height: 78%;
  aspect-ratio: 11 / 24;
  z-index: 2;
  container-type: inline-size;
}

/* LAPTOP wrap — centered, fully visible behind the phone. */
.platform-visual-item[data-platform="lc"] .lc-laptop-wrap {
  position: absolute;
  left: 8%;
  top: 2%;
  width: 92%;
  z-index: 1;
}
.platform-visual-item[data-platform="lc"] .lc-laptop-wrap .di-laptop {
  width: 100%;
}
/* Match DI's thinner bezels + base so the laptop reads as the same shell. */
.platform-visual-item[data-platform="lc"] .lc-laptop-wrap .di-laptop-lid {
  padding: 9px 8px 6px;
  border-radius: 10px 10px 0 0;
}
.platform-visual-item[data-platform="lc"] .lc-laptop-wrap .di-laptop-base {
  height: 9px;
}
/* Container query on the laptop screen so the share UI scales with the
   laptop width (cqi units = % of inline size). */
.platform-visual-item[data-platform="lc"] .lc-laptop-wrap .di-laptop-screen {
  container-type: inline-size;
  background: #2C58E5;
}

/* ============================================================
   CLASS LIVING COLOUR — "Share with Class" laptop screen
   All units are cqi (= % of inline size) so the UI scales with the
   laptop. Layout: header → main grid (QR | OR | code) → avatar row →
   joined count → Start Assessment → footer caption.
   ============================================================ */
/* Loading state — purple→pink gradient, markus logo, spinner. Shown for
   ~3s when the user opens Organisation view, then fades out as the Share
   screen fades in (toggled by .lc-org-ready on the platform-visual-item). */
.lcorg-loading {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #9333EA 0%, #DB2777 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4cqi;
  z-index: 2;
  opacity: 1;
  transition: opacity .35s ease;
  font-family: 'Inter', sans-serif;
}
.lcorg-brand {
  font-size: 6cqi;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: -.5cqi;
}
.lcorg-brand-eyebrow {
  font-size: 1.4cqi;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 2cqi;
}
.lcorg-spinner {
  width: 5cqi;
  height: 5cqi;
  border: .35cqi solid rgba(255, 255, 255, .18);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lcorg-spin 1s linear infinite;
  margin-bottom: 1.4cqi;
}
@keyframes lcorg-spin { to { transform: rotate(360deg); } }
.lcorg-loading-title {
  font-size: 2cqi;
  font-weight: 700;
  letter-spacing: -.01em;
}
.lcorg-loading-meta {
  font-size: 1.3cqi;
  color: rgba(255, 255, 255, .72);
}

/* Laptop shows ONLY the loading screen now — the Share/Evaluate content is
   no longer rendered, so no cross-fade is needed. */

/* Evaluate page — what the teacher sees after question generation. Stacks
   a white top bar, a blue banner, then content cards (Share with Class,
   Context, Source Text, Question). Sits absolutely in the laptop screen
   so the loading state can overlay it. */
.lcorg-share {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #F8FAFC;
  font-family: 'Inter', sans-serif;
  color: #0B1220;
  transition: opacity .35s ease;
  overflow: hidden;
}

/* Top bar */
.lcorg-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6cqi 2.4cqi;
  background: #fff;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.lcorg-back {
  display: inline-flex;
  align-items: center;
  gap: .8cqi;
  font-size: 1.4cqi;
  font-weight: 600;
  color: #1E293B;
}
.lcorg-back svg { width: 1.6cqi; height: 1.6cqi; }
.lcorg-tags {
  display: inline-flex;
  align-items: center;
  gap: .8cqi;
}
.lcorg-tag {
  font-size: 1cqi;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .5cqi 1cqi;
  border-radius: 100px;
}
.lcorg-tag-lc { background: #EDE9FE; color: #6D28D9; }
.lcorg-tag-ready { background: #D1FAE5; color: #047857; }

/* Blue banner — the page header strip */
.lcorg-banner {
  background: #2563EB;
  color: #fff;
  padding: 2cqi 2.4cqi 2.2cqi;
}
.lcorg-banner-title {
  font-size: 3.2cqi;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
}
.lcorg-banner-meta {
  font-size: 1.25cqi;
  color: rgba(255, 255, 255, .82);
  margin-top: .4cqi;
}

/* Body holds the stacked cards */
.lcorg-body {
  flex: 1;
  overflow: hidden;
  padding: 1.4cqi 2.4cqi 2cqi;
  display: flex;
  flex-direction: column;
  gap: 1.2cqi;
}

/* Share with Class call-out card */
.lcorg-share-card {
  background: #2563EB;
  color: #fff;
  border-radius: 1.4cqi;
  padding: 1.4cqi 1.6cqi;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.4cqi;
  box-shadow: 0 .8cqi 1.6cqi rgba(37, 99, 235, .12);
}
.lcorg-share-icon {
  width: 3.6cqi;
  height: 3.6cqi;
  border-radius: .8cqi;
  background: rgba(255, 255, 255, .18);
  display: grid;
  place-items: center;
}
.lcorg-share-icon svg { width: 1.8cqi; height: 1.8cqi; }
.lcorg-share-title {
  font-size: 1.8cqi;
  font-weight: 800;
  letter-spacing: -.01em;
}
.lcorg-share-sub {
  font-size: 1.25cqi;
  color: rgba(255, 255, 255, .82);
  margin-top: .3cqi;
}
.lcorg-share-btn {
  background: #fff;
  color: #2563EB;
  border: none;
  padding: 1cqi 1.8cqi;
  border-radius: 1cqi;
  font-size: 1.4cqi;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 .4cqi 1cqi rgba(15, 23, 42, .12);
}

/* Generic content card */
.lcorg-card {
  border-radius: 1.2cqi;
  padding: 1.4cqi 1.6cqi;
}
.lcorg-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .9cqi;
}
.lcorg-card-label {
  font-size: 1.05cqi;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.lcorg-card-label-light { color: rgba(255, 255, 255, .82); }
.lcorg-card-expand {
  width: 2.4cqi;
  height: 2.4cqi;
  border-radius: .6cqi;
  background: rgba(15, 23, 42, .06);
  display: grid;
  place-items: center;
  color: #475569;
}
.lcorg-card-expand svg { width: 1.2cqi; height: 1.2cqi; }
.lcorg-card-question .lcorg-card-expand {
  background: rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .9);
}

/* Context (light purple) */
.lcorg-card-context {
  background: #F4F0FF;
  border: 1px solid #E9E2FB;
}
.lcorg-card-context .lcorg-card-label { color: #6D28D9; }
.lcorg-card-context p {
  margin: 0;
  font-size: 1.3cqi;
  line-height: 1.45;
  color: #1E293B;
}

/* Source text (light green) */
.lcorg-card-source {
  background: #EAF7EE;
  border: 1px solid #D6EFDD;
}
.lcorg-card-source .lcorg-card-label { color: #047857; }
.lcorg-source-title {
  font-size: 1.4cqi;
  font-weight: 700;
  color: #065F46;
  margin-bottom: .8cqi;
}
.lcorg-source-lines {
  display: flex;
  flex-direction: column;
  gap: .55cqi;
}
.lcorg-source-line {
  display: grid;
  grid-template-columns: 1.6cqi 1fr;
  gap: .8cqi;
  align-items: baseline;
  font-size: 1.3cqi;
  line-height: 1.4;
  color: #1E293B;
  font-style: italic;
}
.lcorg-source-num {
  color: #6EE7B7;
  font-style: normal;
  font-weight: 700;
  text-align: right;
}

/* Question (blue) */
.lcorg-card-question {
  background: #2563EB;
  color: #fff;
}
.lcorg-marks-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 1.1cqi;
  font-weight: 700;
  padding: .4cqi .9cqi;
  border-radius: 100px;
  margin-bottom: .8cqi;
}
.lcorg-question-text {
  margin: 0 0 .9cqi;
  font-size: 1.5cqi;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}
.lcorg-response {
  font-size: 1.25cqi;
  line-height: 1.5;
  color: rgba(255, 255, 255, .9);
}
.lcorg-response-bullet {
  display: grid;
  grid-template-columns: 1.2cqi 1fr;
  gap: .4cqi;
  margin-top: .2cqi;
}

/* Phone is STATIC — only the first frame (question list) shows, and the
   frame-cycling animation is disabled even if .lc-playing is set. */
.platform-visual-item[data-platform="lc"] .lc-frame { animation: none !important; }
.platform-visual-item[data-platform="lc"] .lc-frame-list { opacity: 1 !important; }
.platform-visual-item[data-platform="lc"] .lc-frame:not(.lc-frame-list) { opacity: 0 !important; }

.lc-phone {
  width: 100%;
  height: 100%;
  background: #2c2c33;
  border-radius: 14% / 7%;
  padding: 3.5%;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .22);
}
.lc-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 11% / 5.5%;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  color: #0f172a;
}

/* All frames are absolutely stacked. JS toggles .lc-playing on the
   screen to start animations. */
.lc-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- Frame 1: question list ---------- */
.lc-list-header {
  background: linear-gradient(180deg, #7c3aed 0%, #c026d3 100%);
  padding: 9cqi 6cqi 5cqi;
  color: #fff;
}
.lc-list-top { display: flex; justify-content: space-between; align-items: center; }
.lc-list-title { font-size: 6.5cqi; font-weight: 800; letter-spacing: -.02em; }
.lc-list-burger { display: flex; flex-direction: column; gap: 1cqi; }
.lc-list-burger span { display: block; width: 5cqi; height: .7cqi; background: #fff; border-radius: .5cqi; }
.lc-list-sub { font-size: 3.4cqi; opacity: .85; margin-top: 1.2cqi; }
.lc-list-toggle {
  display: flex;
  margin-top: 3.5cqi;
  background: rgba(255,255,255,.18);
  border-radius: 100px;
  padding: .9cqi;
}
.lc-toggle-btn {
  flex: 1; padding: 1.6cqi 0;
  font-size: 3.4cqi; font-weight: 700;
  color: rgba(255,255,255,.7);
  background: transparent; border: 0; border-radius: 100px;
  font-family: inherit;
}
.lc-toggle-btn.active { background: #fff; color: #111; }
.lc-list-body {
  flex: 1;
  padding: 4cqi 4cqi 3cqi;
  background: #f8fafc;
  display: flex; flex-direction: column; gap: 2cqi;
  overflow: hidden;
}
/* Bottom nav dock — same five icons as the other phone illustrations,
   sized in cqi so it scales with the LC phone. */
.lc-list-dock {
  flex-shrink: 0;
  height: 16cqi;
  background: #fff;
  border-top: 1px solid #efefef;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 5cqi 2cqi;
}
.lc-list-dock svg { width: 7cqi; height: 7cqi; color: #cfd1d6; }
.lc-list-dock svg.active { color: #111; }
.lc-paper-label {
  font-size: 2.8cqi; font-weight: 600;
  color: #94a3b8;
  letter-spacing: .12em;
  margin-top: 1cqi;
}
.lc-q-row {
  background: #fff;
  border-radius: 3.5cqi;
  padding: 3cqi 4cqi;
  display: flex; align-items: center; gap: 3cqi;
  box-shadow: 0 1px 0 rgba(15,23,42,.04);
}
.lc-q-row-highlight {
  box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 0 0 1.5px rgba(124,58,237,.25);
}
.lc-q-tag {
  width: 9cqi; height: 9cqi;
  border-radius: 2.5cqi;
  display: grid; place-items: center;
  font-size: 3.2cqi; font-weight: 800;
  flex-shrink: 0;
}
.lc-q-tag-green  { background: #d1fae5; color: #065f46; }
.lc-q-tag-yellow { background: #fef3c7; color: #92400e; }
.lc-q-tag-red    { background: #fee2e2; color: #991b1b; }
.lc-q-text { flex: 1; min-width: 0; }
.lc-q-title { font-size: 3.6cqi; font-weight: 700; color: #0f172a; }
.lc-q-meta { font-size: 2.9cqi; color: #64748b; margin-top: .4cqi; }
.lc-q-score { display: flex; align-items: baseline; gap: .4cqi; font-size: 3.4cqi; color: #64748b; }
.lc-q-score b { font-size: 5.5cqi; font-weight: 800; }
.lc-score-green  { color: #16a34a; }
.lc-score-yellow { color: #d97706; }
.lc-score-red    { color: #dc2626; }

/* ---------- Frames 2 & 3: chat / topic chooser ---------- */
.lc-chat-header {
  background: linear-gradient(180deg, #7c3aed 0%, #c026d3 100%);
  color: #fff;
  padding: 9cqi 6cqi 5cqi;
  display: flex; align-items: flex-start; gap: 2.5cqi;
}
.lc-chat-back { font-size: 5cqi; line-height: 1; padding-top: 1.4cqi; }
.lc-chat-title { font-size: 5.5cqi; font-weight: 800; letter-spacing: -.02em; }
.lc-chat-sub { font-size: 3.2cqi; opacity: .85; margin-top: .6cqi; }
.lc-chat-body {
  flex: 1;
  background: #f8fafc;
  padding: 4cqi 4cqi 3cqi;
  display: flex; flex-direction: column; gap: 2cqi;
  overflow: hidden;
}
.lc-chat-bubble { display: flex; align-items: flex-start; gap: 2cqi; }
.lc-chat-bubble-faded { opacity: .55; }
.lc-chat-avatar {
  width: 7cqi; height: 7cqi;
  border-radius: 50%;
  background: #c026d3;
  color: #fff;
  display: grid; place-items: center;
  font-size: 3.2cqi; font-weight: 700;
  flex-shrink: 0;
}
.lc-chat-msg {
  background: #fff;
  border-radius: 3cqi;
  padding: 2.5cqi 3cqi;
  font-size: 3.5cqi;
  color: #0f172a;
  line-height: 1.4;
}
.lc-chat-user {
  align-self: flex-end;
  background: linear-gradient(180deg, #9333ea 0%, #c026d3 100%);
  color: #fff;
  border-radius: 3cqi;
  padding: 2.5cqi 3cqi;
  font-size: 3.5cqi;
  font-weight: 600;
  max-width: 75%;
}
.lc-chat-label {
  font-size: 2.6cqi; font-weight: 600;
  color: #94a3b8; letter-spacing: .14em;
  margin-top: 1cqi;
}
.lc-chat-pill {
  background: #fff;
  border-radius: 3cqi;
  padding: 2.5cqi 3.5cqi;
  font-size: 3.4cqi; font-weight: 500;
  color: #0f172a;
  display: flex; align-items: center; gap: 2cqi;
}
.lc-chat-pill-purple { color: #7c3aed; font-weight: 600; }
.lc-chat-pill-cta {
  border: 1.5px solid #7c3aed;
  color: #7c3aed;
  background: transparent;
  font-weight: 600;
}
.lc-chat-pill-dashed {
  border: 1.5px dashed #c4b5fd;
  background: transparent;
  color: #7c3aed;
  font-weight: 600;
}
.lc-pill-icon { color: #94a3b8; font-size: 3.5cqi; }
.lc-pill-arrow { margin-left: auto; color: #94a3b8; }

/* ---------- Frame 4: loading ---------- */
.lc-frame-loading {
  background: linear-gradient(180deg, #7c3aed 0%, #c026d3 60%, #db2777 100%);
  color: #fff;
}
.lc-load-center {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
  padding: 0 6cqi;
}
.lc-load-brand {
  font-size: 6.5cqi; font-weight: 800;
  margin-bottom: 1cqi;
}
.lc-load-eyebrow {
  font-size: 2.8cqi; font-weight: 600;
  letter-spacing: .26em;
  opacity: .85;
  margin-bottom: 7cqi;
}
.lc-load-spinner {
  width: 11cqi; height: 11cqi;
  border-radius: 50%;
  border: 1.6cqi solid rgba(255,255,255,.3);
  border-top-color: #fff;
  margin-bottom: 6cqi;
}
.lc-load-title { font-size: 4cqi; font-weight: 700; margin-bottom: 2.4cqi; }
.lc-load-meta { font-size: 3.4cqi; opacity: .75; line-height: 1.45; }

/* ---------- Frame 5: built exam question ---------- */
.lc-q-header {
  background: #0f172a;
  color: #fff;
  padding: 9cqi 6cqi 5cqi;
  display: flex; align-items: flex-start; gap: 2.5cqi;
}
.lc-q-header-title { font-size: 5.5cqi; font-weight: 800; letter-spacing: -.02em; }
.lc-q-header-sub { font-size: 3cqi; opacity: .7; margin-top: .6cqi; }
.lc-q-body {
  flex: 1;
  background: #f8fafc;
  padding: 4cqi 4cqi 0;
  display: flex; flex-direction: column; gap: 3cqi;
  overflow: hidden;
}
.lc-source-card, .lc-question-card {
  background: #fff;
  border-radius: 3cqi;
  padding: 3.5cqi 4cqi;
  position: relative;
}
.lc-question-card {
  border-left: 1cqi solid #7c3aed;
  border-radius: 0 3cqi 3cqi 0;
  padding-left: 4.5cqi;
}
.lc-source-label, .lc-question-label {
  font-size: 2.6cqi; font-weight: 700;
  letter-spacing: .18em;
  color: #7c3aed;
  margin-bottom: 2cqi;
}
.lc-source-title { font-size: 3.4cqi; font-weight: 700; color: #0f172a; margin-bottom: 2cqi; }
.lc-source-line {
  font-size: 3.1cqi; font-style: italic;
  color: #475569;
  line-height: 1.45;
  margin-bottom: 1.2cqi;
}
.lc-question-marks {
  display: inline-block;
  font-size: 2.8cqi; font-weight: 700;
  color: #7c3aed;
  background: #ede9fe;
  border-radius: 2cqi;
  padding: 1cqi 2.2cqi;
  margin-bottom: 2.2cqi;
}
.lc-question-text { font-size: 3.8cqi; font-weight: 700; color: #0f172a; line-height: 1.4; }
.lc-upload-btn {
  margin: 3cqi 4cqi 5cqi;
  background: linear-gradient(180deg, #7c3aed 0%, #c026d3 100%);
  color: #fff;
  border-radius: 3cqi;
  padding: 3cqi 4cqi;
  display: flex; align-items: center; gap: 3cqi;
  box-shadow: 0 6px 14px rgba(124,58,237,.30);
}
.lc-upload-icon { font-size: 5cqi; }
.lc-upload-title { font-size: 4cqi; font-weight: 800; }
.lc-upload-sub { font-size: 3cqi; opacity: .8; margin-top: .4cqi; }

/* ===== Student-facing question view (LC phone, Learner side) =====
   Layout: scrolled source-text card → ANSWER THIS gradient card →
   Tips dropdown → green Upload My Answer CTA. */
.lcstu-body {
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 5cqi 4cqi 4cqi;
  gap: 3.5cqi;
  font-family: 'Inter', sans-serif;
  color: #0B1220;
  overflow: hidden;
}

/* Source card — light lavender bg with purple outline */
.lcstu-source {
  background: #FAF7FF;
  border: 1.5px solid #C4B5FD;
  border-radius: 4cqi;
  padding: 3cqi 3.5cqi 2.5cqi;
}
.lcstu-source-lines {
  display: flex;
  flex-direction: column;
  gap: 1.6cqi;
}
.lcstu-source-line {
  display: grid;
  grid-template-columns: 3cqi 1fr;
  gap: 2cqi;
  font-size: 3.2cqi;
  line-height: 1.35;
  font-style: italic;
  color: #1E293B;
}
.lcstu-num {
  color: #94A3B8;
  font-weight: 700;
  font-style: normal;
  text-align: right;
}
.lcstu-scroll-cue {
  margin-top: 2.4cqi;
  background: #F3EEFE;
  border-radius: 2cqi;
  padding: 1.6cqi;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.4cqi;
  width: 100%;
  font-size: 2.8cqi;
  font-weight: 600;
  color: #7C3AED;
}
.lcstu-scroll-cue svg { width: 3cqi; height: 3cqi; }

/* ANSWER THIS card — purple→pink gradient */
.lcstu-answer {
  background: linear-gradient(135deg, #9333EA 0%, #DB2777 100%);
  color: #fff;
  border-radius: 4cqi;
  padding: 3.4cqi 3.4cqi 3.6cqi;
}
.lcstu-answer-badge {
  display: inline-flex;
  align-items: center;
  gap: 1.2cqi;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  padding: 1cqi 2cqi;
  border-radius: 100px;
  font-size: 2.4cqi;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 2.4cqi;
}
.lcstu-answer-badge svg { width: 3cqi; height: 3cqi; }
.lcstu-answer-text {
  margin: 0 0 2cqi;
  font-size: 3.6cqi;
  font-weight: 700;
  line-height: 1.3;
}
.lcstu-answer-instr {
  margin: 0 0 .8cqi;
  font-size: 3cqi;
  color: rgba(255, 255, 255, .92);
}
.lcstu-bullet {
  display: grid;
  grid-template-columns: 3cqi 1fr;
  gap: 1.4cqi;
  margin-top: .4cqi;
  font-size: 3cqi;
  line-height: 1.4;
  color: rgba(255, 255, 255, .96);
}
.lcstu-marker {
  color: #fff;
  font-size: 2.4cqi;
}

/* Tips dropdown */
.lcstu-tips {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 2.5cqi;
  padding: 2.4cqi 3cqi;
  display: flex;
  align-items: center;
  gap: 2cqi;
}
.lcstu-tips-icon {
  display: grid;
  place-items: center;
  width: 4cqi;
  height: 4cqi;
  color: #64748B;
}
.lcstu-tips-icon svg { width: 100%; height: 100%; }
.lcstu-tips-label {
  flex: 1;
  font-size: 3cqi;
  font-weight: 600;
  color: #0B1220;
}
.lcstu-tips-chev { width: 3cqi; height: 3cqi; color: #64748B; }

/* Upload My Answer — green CTA */
.lcstu-upload {
  background: linear-gradient(180deg, #5BB97B 0%, #43946A 100%);
  color: #fff;
  border: none;
  border-radius: 3.5cqi;
  padding: 4cqi 3cqi;
  font-size: 4cqi;
  font-weight: 700;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2cqi;
  cursor: pointer;
  box-shadow: 0 2cqi 4cqi rgba(67, 148, 106, .35);
  margin-top: auto;
}
.lcstu-upload svg { width: 4cqi; height: 4cqi; }

/* ===== Animation: cycle through frames when .lc-playing is set ===== */
.lc-playing .lc-frame-list     { animation: lc-show-list     18s infinite; }
.lc-playing .lc-frame-topic    { animation: lc-show-topic    18s infinite; }
.lc-playing .lc-frame-source   { animation: lc-show-source   18s infinite; }
.lc-playing .lc-frame-loading  { animation: lc-show-loading  18s infinite; }
.lc-playing .lc-frame-question { animation: lc-show-question 18s infinite; }
.lc-playing .lc-load-spinner   { animation: lc-spin 1s linear infinite; }

/* Frame windows in the 18s loop:
   0-18%   list           (3.2s)
   20-38%  topic chooser  (3.2s)
   40-55%  source pick    (2.7s)
   57-72%  loading        (2.7s)
   74-95%  built question (3.8s)
   95-100% fade out before loop
*/
@keyframes lc-show-list {
  0%, 17%   { opacity: 1; }
  20%, 100% { opacity: 0; }
}
@keyframes lc-show-topic {
  0%, 19%   { opacity: 0; }
  22%, 38%  { opacity: 1; }
  41%, 100% { opacity: 0; }
}
@keyframes lc-show-source {
  0%, 39%   { opacity: 0; }
  42%, 55%  { opacity: 1; }
  58%, 100% { opacity: 0; }
}
@keyframes lc-show-loading {
  0%, 56%   { opacity: 0; }
  59%, 72%  { opacity: 1; }
  75%, 100% { opacity: 0; }
}
@keyframes lc-show-question {
  0%, 73%   { opacity: 0; }
  76%, 95%  { opacity: 1; }
  98%, 100% { opacity: 0; }
}
@keyframes lc-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .lc-frame-list { opacity: 1; animation: none; }
  .lc-frame-topic,
  .lc-frame-source,
  .lc-frame-loading,
  .lc-frame-question { opacity: 0; animation: none; }
  .lc-load-spinner { animation: none; }
}

/* =============================================================
   DATA & INSIGHTS ILLUSTRATION
   Same laptop + phone composition as default, but the phone shows
   the Insights dashboard. Laptop screen is a temporary placeholder
   until the real design is provided.
   ============================================================= */

/* Class Overview dashboard (laptop screen) — uses container queries so
   internal sizes scale with the laptop screen width at any viewport */
.dins-lap {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background: #fff;
  font-family: 'Inter', sans-serif;
  color: #0f172a;
  container-type: inline-size;
}
.dins-lap-topbar {
  background: #2563EB;
  padding: 1.2cqi 2.2cqi;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.dins-lap-brand {
  font-size: 2.4cqi; font-weight: 800;
  color: #fff; letter-spacing: -.02em;
}
.dins-lap-burger {
  display: flex; flex-direction: column;
  gap: .4cqi;
}
.dins-lap-burger span {
  display: block;
  width: 2.4cqi; height: .3cqi;
  background: #fff;
  border-radius: .1cqi;
}
.dins-lap-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.dins-lap-sidebar {
  width: 3.5cqi;
  background: #1d3d7a;
  display: flex; flex-direction: column;
  align-items: center;
  padding: 1.2cqi 0 1cqi;
  gap: 1.2cqi;
  flex-shrink: 0;
}
.dins-lap-sb-icon {
  width: 1.6cqi; height: 1.6cqi;
  border-radius: .3cqi;
  background: rgba(255,255,255,.4);
  display: block;
}
.dins-lap-sb-icon-active { background: #fff; }
.dins-lap-sb-spacer { flex: 1; }
.dins-lap-sb-avatar {
  width: 2.4cqi; height: 2.4cqi;
  border-radius: 50%;
  background: #2563EB;
  color: #fff;
  font-size: .9cqi;
  font-weight: 800;
  display: grid; place-items: center;
  letter-spacing: -.02em;
}
.dins-lap-main {
  flex: 1;
  padding: 1.8cqi 2.2cqi 0;
  background: #f8fafc;
  overflow: hidden;
  min-width: 0;
}
.dins-lap-page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5cqi;
  margin-bottom: 1.5cqi;
}
.dins-lap-page-title {
  font-size: 2.2cqi; font-weight: 800;
  color: #0f172a; letter-spacing: -.02em;
}
.dins-lap-filters {
  display: flex; align-items: center; gap: .8cqi;
}
.dins-lap-icon-btn {
  width: 3.2cqi; height: 3cqi;
  display: grid; place-items: center;
  border: 1px solid #e2e8f0;
  border-radius: .8cqi;
  color: #475569;
}
.dins-lap-icon-btn svg { width: 1.6cqi; height: 1.6cqi; }
.dins-lap-pill {
  display: inline-flex; align-items: center; gap: .6cqi;
  border: 1px solid #e2e8f0;
  border-radius: .8cqi;
  padding: .6cqi 1.2cqi;
  font-size: 1.2cqi; font-weight: 500;
  color: #475569;
  background: #fff;
  white-space: nowrap;
}
.dins-lap-chev { color: #94a3b8; font-size: .9cqi; }

/* Table */
.dins-lap-table {
  background: #fff;
  border-radius: 1cqi;
  overflow: hidden;
  border: 1px solid #eef1f5;
}
.dins-lap-thead, .dins-lap-tr {
  display: grid;
  grid-template-columns: 1.6fr .6fr .6fr .8fr 1.05fr 1.05fr .55fr .8fr;
  align-items: center;
}
.dins-lap-thead {
  background: #2563EB;
  color: #fff;
}
.dins-lap-th {
  padding: 1.4cqi 1.4cqi;
  font-size: 1.25cqi; font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
}
.dins-lap-th-student { padding-left: 1.8cqi; }
.dins-lap-th-group {
  grid-column: 2 / 4;
  padding: .8cqi 1.4cqi .4cqi;
  text-align: center;
}
.dins-lap-th-group-label {
  display: block;
  font-size: 1.25cqi; font-weight: 700;
  color: #fff;
  margin-bottom: .4cqi;
}
.dins-lap-th-group-divider {
  height: 1px;
  background: rgba(255,255,255,.45);
  margin-bottom: .4cqi;
}
.dins-lap-th-group-sub {
  display: flex; justify-content: space-around;
  font-size: 1.05cqi; font-weight: 600;
  color: rgba(255,255,255,.85);
}

.dins-lap-tr {
  background: #fff;
  border-top: 1px solid #f1f5f9;
}
.dins-lap-tr-avg {
  background: #f8fafc;
}
.dins-lap-tr-avg .dins-lap-cell {
  font-weight: 700;
  color: #475569;
}
.dins-lap-cell {
  padding: 1.1cqi 1.4cqi;
  font-size: 1.15cqi;
  color: #475569;
  text-align: center;
}
.dins-lap-cell-name {
  text-align: left;
  font-weight: 700;
  color: #0f172a;
  padding-left: 1.8cqi;
}

/* Score badges (QoE / SPA) */
.dins-lap-sp {
  display: inline-grid;
  place-items: center;
  width: 2.6cqi; height: 2.6cqi;
  border-radius: .5cqi;
  font-size: 1.15cqi; font-weight: 800;
}
.dins-lap-sp-low  { background: #fee2e2; color: #b91c1c; }
.dins-lap-sp-mid  { background: #fef3c7; color: #92400e; }
.dins-lap-sp-high { background: #d1fae5; color: #065f46; }

/* Value Added */
.dins-lap-va { font-weight: 800; font-size: 1.2cqi; }
.dins-lap-va-pos { color: #16a34a; }
.dins-lap-va-zero { color: #64748b; font-weight: 500; }
.dins-lap-va-neg { color: #dc2626; }

/* Strength / To Improve pill tags */
.dins-lap-tag {
  display: inline-block;
  padding: .4cqi 1cqi;
  border-radius: .5cqi;
  font-size: 1.1cqi; font-weight: 500;
  white-space: nowrap;
}
.dins-lap-tag-purple { background: #ede9fe; color: #5b21b6; }
.dins-lap-tag-amber  { background: #fef3c7; color: #92400e; }
.dins-lap-tag-orange { background: #ffedd5; color: #9a3412; }

/* CWG colored boxes (predicted grade) */
.dins-lap-cwg {
  display: inline-grid;
  place-items: center;
  width: 2.8cqi; height: 2.8cqi;
  border-radius: .5cqi;
  font-size: 1.3cqi; font-weight: 800;
  color: #fff;
}
.dins-lap-cwg-green  { background: #16a34a; }
.dins-lap-cwg-orange { background: #ea580c; }
.dins-lap-cwg-red    { background: #dc2626; }

/* DI phone — uses the same .lcphone shell as the default visual, so
   bezel/status bar/dock styling are inherited. Only the inner content
   between status bar and dock is replaced. */

/* Use container queries so all DI internal content scales with the phone
   width — keeps proportions correct at any phone size. */
.dins-phone .lcphone-screen { container-type: inline-size; }

/* DI view toggle: pill control that sits just below whichever device is
   currently visible. In organisation (laptop) mode it tucks up close to
   the laptop base; in student (phone) mode it slides down so the gap to
   the phone bottom matches. Smooth transition between the two states. */
.dins-view-toggle {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: inline-flex;
  background: rgba(15, 23, 42, .08);
  border-radius: 100px;
  padding: 3px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: bottom .55s cubic-bezier(.5, 0, .2, 1);
}
.platform-visual-item[data-platform="di"].dins-student .dins-view-toggle {
  bottom: -42px;
}
.dins-view-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px;
  border: 0;
  background: transparent;
  border-radius: 100px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.dins-view-btn:hover { color: #0f172a; }
.dins-view-btn svg { width: 13px; height: 13px; }
.dins-view-btn-active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12), 0 0 0 1px rgba(15, 23, 42, .04);
}

/* Organisation view (default): laptop visible, phone hidden.
   The phone fades out FIRST, then the laptop fades in. The phone's
   position/size properties are ALSO delayed so its snap back to the
   side position happens only AFTER it's fully invisible — without this
   the phone flashes briefly at its side position next to the laptop. */
.platform-visual-item[data-platform="di"] .comp-phone {
  left: 5%;
  height: 82%;
  bottom: -4%;
  transform: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease,
              left 0s linear .25s,
              bottom 0s linear .25s,
              height 0s linear .25s,
              transform 0s linear .25s;
}
.platform-visual-item[data-platform="di"] .comp-laptop {
  opacity: 1;
  pointer-events: auto;
  transition: opacity .25s ease .25s;
}

/* Student view: laptop hidden, phone centred and bigger. Position
   properties snap immediately so the phone is already in place before
   its opacity starts fading in. */
.platform-visual-item[data-platform="di"].dins-student .comp-laptop {
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.platform-visual-item[data-platform="di"].dins-student .comp-phone {
  opacity: 1;
  pointer-events: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  /* Match Living Colour phone: same height + aspect ratio so users
     switching between LC and DI student views see the same phone. */
  height: 92%;
  aspect-ratio: 1 / 2;
  bottom: 4%;
  transition: opacity .25s ease .25s,
              left 0s linear,
              bottom 0s linear,
              height 0s linear,
              transform 0s linear;
}

/* DI laptop fits fully within the panel — no right-edge bleed, so the
   entire Class Overview dashboard is visible. Bigger size and thinner
   bezels than the default visual. top: 0 — toggle now lives at the bottom. */
.platform-visual-item[data-platform="di"] .comp-laptop {
  left: 4%;
  width: 92%;
  top: 0;
}
.platform-visual-item[data-platform="di"] .di-laptop-lid {
  padding: 9px 8px 6px;
  border-radius: 10px 10px 0 0;
}
.platform-visual-item[data-platform="di"] .di-laptop-base {
  height: 9px;
}

/* Starting Point laptop — match the Living Colour / DI thinner bezels. */
.platform-visual-item[data-platform="sp"] .di-laptop-lid {
  padding: 9px 8px 6px;
  border-radius: 10px 10px 0 0;
}
.platform-visual-item[data-platform="sp"] .di-laptop-base {
  height: 9px;
}

/* Starting Point phone — match the Living Colour phone bezel (percentage
   based, so the dark frame + corner radius read identically in both). */
.platform-visual-item[data-platform="sp"] .lcphone {
  padding: 3.5%;
  border-radius: 14% / 7%;
}
.platform-visual-item[data-platform="sp"] .lcphone-screen {
  border-radius: 11% / 5.5%;
}

/* Header section (blue, like the default phone) */
.dins-header {
  background: #2563EB;
  padding: 2cqi 5cqi 4cqi;
  display: flex; flex-direction: column;
  gap: 2.5cqi;
  flex-shrink: 0;
}
.dins-header-row {
  display: flex; align-items: center; justify-content: space-between;
}
.dins-header-title {
  font-size: 6cqi; font-weight: 800;
  color: #fff; letter-spacing: -.02em;
}

/* Body */
.dins-body {
  flex: 1;
  background: #f1f5f9;
  padding: 3cqi 3.5cqi 2.5cqi;
  display: flex; flex-direction: column;
  gap: 2.5cqi;
  overflow: hidden;
}
.dins-section-title {
  font-size: 3cqi;
  font-weight: 700;
  letter-spacing: .14em;
  color: #94a3b8;
  margin-top: .5cqi;
}

/* Progress over time — 4 mini cards */
.dins-term-row {
  display: flex;
  gap: 2cqi;
}
.dins-term {
  flex: 1;
  background: #fff;
  border-radius: 2.5cqi;
  padding: 2.5cqi 1.5cqi;
  text-align: center;
  border: 1px solid #e2e8f0;
}
.dins-term-label {
  font-size: 2.8cqi;
  font-weight: 700;
  letter-spacing: .10em;
  color: #94a3b8;
  margin-bottom: 1cqi;
}
.dins-term-val {
  font-size: 6.5cqi;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}
.dins-term-active {
  background: #2563EB;
  border-color: #2563EB;
}
.dins-term-active .dins-term-label { color: rgba(255,255,255,.8); }
.dins-term-active .dins-term-val { color: #fff; }
.dins-term-muted {
  background: transparent;
  border: 1px dashed #cbd5e1;
}
.dins-term-muted .dins-term-label { color: #cbd5e1; }
.dins-term-muted .dins-term-val { color: #cbd5e1; }

/* Start here highlighted card */
.dins-start-card {
  background: #fff;
  border-left: 1cqi solid #f59e0b;
  border-radius: 0 2.5cqi 2.5cqi 0;
  padding: 2.5cqi 3.5cqi;
  display: flex; align-items: center; gap: 2.5cqi;
}
.dins-start-body { flex: 1; min-width: 0; }
.dins-start-title { font-size: 4cqi; font-weight: 800; color: #0f172a; line-height: 1.25; }
.dins-start-meta { font-size: 3cqi; color: #64748b; margin-top: 1cqi; }
.dins-start-score {
  font-size: 5cqi;
  font-weight: 800;
  color: #f59e0b;
  flex-shrink: 0;
}

/* Skills breakdown card with progress bars */
.dins-skills-card {
  background: #fff;
  border-radius: 2.5cqi;
  padding: 4cqi 4.5cqi 3.5cqi;
  border: 1px solid #eef1f5;
}
.dins-skills-axis {
  display: flex;
  justify-content: flex-end;
  gap: 9.5cqi;
  font-size: 3.3cqi;
  color: #94a3b8;
  font-weight: 600;
  margin: 0 0 2cqi 28cqi;
}
.dins-skill {
  display: grid;
  grid-template-columns: 28cqi 1fr 18cqi;
  align-items: center;
  gap: 2.5cqi;
  padding: 1.2cqi 0;
}
.dins-skill-name {
  font-size: 3.6cqi;
  font-weight: 500;
  color: #475569;
  line-height: 1.15;
}
.dins-skill-strong { font-weight: 800; color: #0f172a; font-size: 4cqi; }
.dins-skill-bar {
  position: relative;
  height: 2.4cqi;
  background: #e2e8f0;
  border-radius: 1.2cqi;
  overflow: hidden;
}
.dins-skill-bar::before,
.dins-skill-bar::after {
  /* G4, G6 tick marks (G9 is at 100% so the bar ends there) */
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(15,23,42,.18);
}
.dins-skill-bar::before { left: 44%; }
.dins-skill-bar::after { left: 67%; }
.dins-skill-fill {
  display: block;
  height: 100%;
  border-radius: 1.2cqi;
}
.dins-skill-fill-blue  { background: #2563EB; }
.dins-skill-fill-green { background: #22c55e; }
.dins-skill-fill-red   { background: #ef4444; }
.dins-skill-fill-amber { background: #f59e0b; }
.dins-skill-pct {
  font-size: 3.8cqi;
  font-weight: 700;
  color: #475569;
  text-align: right;
  display: flex; align-items: center; justify-content: flex-end; gap: .6cqi;
}
.dins-pct-blue { color: #2563EB; font-weight: 800; }
.dins-chev { color: #cbd5e1; font-size: 4.2cqi; }

/* Exam countdown card */
.dins-exam-card {
  background: #fff;
  border-radius: 2.5cqi;
  padding: 3cqi 3.5cqi;
  border: 1px solid #eef1f5;
}
.dins-exam-head {
  display: flex; align-items: center; gap: 2.5cqi;
  margin-bottom: 2cqi;
}
.dins-exam-zero {
  font-size: 10cqi;
  font-weight: 900;
  color: #ef4444;
  line-height: 1;
  letter-spacing: -.04em;
}
.dins-exam-label {
  font-size: 4cqi;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}
.dins-exam-row {
  font-size: 3.3cqi;
  color: #475569;
  margin-top: 1cqi;
}
.dins-exam-row b { color: #0f172a; font-weight: 700; }
.dins-exam-divider {
  height: 1px;
  background: #eef1f5;
  margin: 2.5cqi 0 2cqi;
}
.dins-exam-note {
  font-size: 3.2cqi;
  color: #475569;
  line-height: 1.45;
}
.dins-exam-note b { color: #0f172a; font-weight: 700; }
.dins-disclaimer {
  font-size: 2.8cqi;
  color: #94a3b8;
  line-height: 1.5;
  font-style: italic;
  text-align: center;
  padding: 0 1.5cqi;
}





/* ============================================================
   MOBILE OPTIMISATION PASS — phone-only overrides.
   Desktop (≥768px) is the design source of truth; nothing here
   may change rendering at or above that width.
   ============================================================ */
/* Logo marquee is phone-only; hidden by default, enabled below 768px */
.logos-marquee { display: none; }

@media (max-width: 767px) {
  /* Tall hero: content anchors to the top (stamp ~44px below the nav),
     the live strip straddles the blue/white boundary, and the start of
     the watch section peeks above the fold as the scroll cue. */
  .hero {
    min-height: calc(100vh - 300px);
    min-height: calc(100svh - 300px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 44px;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Phone gutter: 24px of breathing room between text and screen edge,
     consistent across every section. Full-bleed scrollers compensate. */
  section.block { padding-left: 24px; padding-right: 24px; }
  .benefits-scroll { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; scroll-padding: 24px; }
  .swipe, .quotes-swipe { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
  footer { padding-left: 24px; padding-right: 24px; }
  /* Flex items stretch full-width by default — keep the pill shrink-to-fit */
  .hero-stamp { align-self: flex-start; }
  .hero h1 { font-size: clamp(44px, 16.5vw, 68px); }
  /* Three-line headline on phones: Mark less. / Teach / more. */
  .hero h1 .hero-w1, .hero h1 .hero-w2 { display: block; }
  .hero p { font-size: 17px; }

  /* Secondary hero CTA — opens the mock-marking video slide-in */
  .hero-watch-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    align-self: center;
    margin-top: 2px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(255,255,255,.45);
  }
  .hero-watch-link:active { opacity: .8; }

  /* Live strip sits half on the blue, half on the white; a touch taller
     than the desktop-era card so the stats get breathing room */
  .live-strip {
    transform: translateY(-52px);
    margin-bottom: -30px;
    padding: 22px 14px 26px;
  }
  .live-strip-head { margin-bottom: 16px; }
  /* Three stats must share ~316px: fluid number size, tighter column padding */
  .live-stat { padding: 0 8px; }
  .live-stat .num { font-size: clamp(15px, 4.6vw, 19px); }

  /* iOS Safari zooms the page when focusing inputs under 16px */
  .field input, .field textarea, .field select { font-size: 16px; }

  /* Pricing calculator: thumb-sized controls */
  .stepper { width: 42px; height: 42px; font-size: 19px; }
  .slider-value { gap: 10px; }
  .slider-track-wrap { height: 44px; }
  .slider-input { height: 44px; }
  .slider-input::-webkit-slider-runnable-track { height: 44px; }
  .slider-input::-moz-range-track { height: 44px; }
  .slider-input::-webkit-slider-thumb { width: 36px; height: 36px; }
  .slider-input::-moz-range-thumb { width: 36px; height: 36px; }

  /* Press feedback for touch — hover lifts never fire on phones */
  .quote-card:active, .product-card:active, .benefit-card:active { transform: scale(.985); }

  /* Slide-in menu: respect notch / home-indicator zones */
  .menu { padding-bottom: max(24px, env(safe-area-inset-bottom)); padding-right: max(24px, env(safe-area-inset-right)); }

  /* FAQ teaser: was desktop-only (display:none base). Phones now show the
     group label + top three questions; the See-more button links to
     /Home/FAQ instead of expanding (handled in JS). */
  .faq-preview { display: block; }
  /* Top three only (children: label + items, so cap at the 4th child) */
  .faq-preview .faq-group:first-child .faq-item:nth-child(n+5) { display: none; }
  .faq-see-more-icon { display: none; }

  /* Watch section: phones use the same inline self-hosted player as
     desktop (leaner 720p encode, lazily attached). YouTube card retires. */
  .watch-card-mobile { display: none; }
  .watch-video {
    display: block;
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 16 / 9;
    box-shadow: var(--shadow-md);
    cursor: pointer;
  }
  .watch-video-el { width: 100%; height: 100%; object-fit: cover; display: block; }
  .watch-video::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.35) 0%, transparent 40%);
    pointer-events: none;
  }
  .watch-video-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    border: none;
    display: grid; place-items: center;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    z-index: 3;
  }
  .watch-video-play[hidden] { display: none; }
  .watch-video-mute {
    position: absolute;
    right: 12px; bottom: 12px;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(0,0,0,.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.18);
    display: grid; place-items: center;
    z-index: 5;
  }
  .watch-video-mute svg { width: 20px; height: 20px; }
  .watch-video-mute .watch-video-mute-off { display: none; }
  .watch-video.is-unmuted .watch-video-mute-on  { display: none; }
  .watch-video.is-unmuted .watch-video-mute-off { display: block; }
  .watch-video-controls {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 26px 70px 12px 14px;
    background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 100%);
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .watch-video.is-active .watch-video-controls { opacity: 1; pointer-events: auto; }
  .watch-video-progress {
    position: relative;
    height: 5px;
    background: rgba(255,255,255,.25);
    border-radius: 3px;
    margin-bottom: 7px;
  }
  .watch-video-progress-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: #fff; border-radius: 3px; width: 0;
  }
  .watch-video-progress-handle { display: none; }
  .watch-video-times {
    display: flex; align-items: center; justify-content: space-between;
    color: rgba(255,255,255,.85);
    font-size: 11px; font-weight: 600;
  }
  .watch-video-time-group { display: flex; gap: 4px; }
  .watch-video-fs {
    background: transparent; border: none;
    color: rgba(255,255,255,.85);
    display: grid; place-items: center;
    padding: 4px;
  }
  .watch-video-fs .watch-video-fs-exit { display: none; }
  .watch-video.is-fullscreen .watch-video-fs-enter { display: none; }
  .watch-video.is-fullscreen .watch-video-fs-exit  { display: block; }

  /* Why Markus benefit lightboxes: the base px metrics are tuned for a
     430px (iPhone Pro Max) screen. Express them as vw capped at those
     values — at 430px+ this renders identically; on narrower phones the
     whole sheet scales down in proportion instead of over-wrapping. */
  .benefit-lb { padding: min(24px, 5.6vw); }
  .benefit-lb .founders-lightbox-scroll { padding: min(56px, 13vw) min(40px, 9.3vw) min(36px, 8.4vw); }
  .benefit-lb .fl-feature-eyebrow { font-size: min(14px, 3.3vw); }
  .benefit-lb .fl-feature-title { font-size: min(32px, 7.45vw); margin-bottom: min(22px, 5.1vw); }
  .benefit-lb .fl-card-feature { padding: min(36px, 8.4vw) min(28px, 6.5vw); border-radius: min(24px, 5.6vw); }
  .benefit-lb .fl-card.fl-card-feature p { font-size: min(17px, 3.95vw); }
  .benefit-lb.lb-textonly .fl-feature { margin-bottom: min(20px, 4.65vw); }
  .benefit-lb.lb-textonly .fl-feature + .fl-feature { padding-top: min(20px, 4.65vw); }

  /* College logos: the 3-up grid becomes a two-row marquee. Rows drift
     in opposite directions; each row holds its logo set twice so a
     -50% translate loops seamlessly. */
  .logos-grid { display: none; }
  .logos-marquee {
    display: block;
    overflow: hidden;
    margin: 0 -24px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .logos-row {
    display: flex;
    width: max-content;
    animation: logosDrift 38s linear infinite;
  }
  .logos-row-reverse { animation-direction: reverse; }
  .logos-row + .logos-row { margin-top: 28px; }
  .logos-set {
    display: flex;
    align-items: center;
    gap: 36px;
    padding-right: 36px;
  }
  .logos-set img {
    height: 38px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    opacity: .55;
    filter: grayscale(20%);
  }
  .logos-marquee img[src*="college6"] { transform: scale(1.35); }
  @keyframes logosDrift {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
}

/* Reduced-motion users get the static grid back instead of a frozen
   half-cut marquee row. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .logos-marquee { display: none; }
  .logos-grid { display: grid; }
}

@media (max-width: 479px) {
  /* Quote modal: stack first/last name instead of two 140px columns */
  .field-row { grid-template-columns: 1fr; gap: 0; }

  /* Qualification chips wrap instead of overflowing the narrow modal */
  .chip-row { flex-wrap: wrap; }

  /* College logos: desktop-ish gaps read as gaps in a 3-up grid this narrow */
  .logos-grid { gap: 20px 14px; }

  /* Next-card peek so the quotes scroller reads as swipeable */
  .quote-card { flex: 0 0 82%; }

  /* Footer links: more vertical separation between wrapped tap targets */
  .footer-links { gap: 12px 18px; }
}

/* Desktop keeps its single CTA; the watch link and live strip are
   phone-only additions (.live-strip is already hidden at ≥768px above) */
@media (min-width: 768px) {
  .hero-watch-link { display: none; }
}