/* ============================================================
   marketing.css
   ------------------------------------------------------------
   Styles for the public Classly Eli website only.
   Used by _MarketingLayout.cshtml, never by the signed-in app.

   Everything here is China friendly:
   - Nunito is loaded from our own /fonts folder
   - no CDN, no Google fonts, no outside images
   - all icons on these pages are inline SVG
   ============================================================ */

/* ---- Fonts: our own copies, nothing loaded from outside ---- */

/* Nunito carries the body text, the same as the rest of the app */
@font-face { font-family:'Nunito'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/nunito-400.woff2') format('woff2'); }
@font-face { font-family:'Nunito'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/nunito-500.woff2') format('woff2'); }
@font-face { font-family:'Nunito'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/nunito-600.woff2') format('woff2'); }
@font-face { font-family:'Nunito'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/nunito-700.woff2') format('woff2'); }

/* Manrope carries the headings. Tighter and firmer than Nunito, so
   headlines read as confident rather than chatty. */
@font-face { font-family:'Manrope'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/manrope-700.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:800; font-display:swap; src:url('/fonts/manrope-800.woff2') format('woff2'); }

/* Plus Jakarta Sans, the alternative. Warmer and a little rounder.
   To try it, change --cl-font-head below to 'Plus Jakarta Sans'.
   Once you have picked one, delete the two files you are not using. */
@font-face { font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/jakarta-700.woff2') format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:800; font-display:swap; src:url('/fonts/jakarta-800.woff2') format('woff2'); }

/* ---- Highlighted text ----
   The same Classly amber as the app, so selecting text never shows
   the browser's blue. Two rules, because a browser that doesn't know
   one of them would throw away the whole thing. */
::selection {
    background: #FDEBCF;
    color: #1a1a1a;
}
::-moz-selection {
    background: #FDEBCF;
    color: #1a1a1a;
}

/* ============================================================
   1. COLOURS AND SIZES
   ============================================================ */
:root {
  --cl-font:        'Nunito', -apple-system, 'Segoe UI', system-ui, sans-serif;
  /* Headings only. Swap this one line to change every heading on the site. */
  --cl-font-head:   'Manrope', 'Nunito', -apple-system, 'Segoe UI', system-ui, sans-serif;

  /* Brand */
  --cl-amber:       #F5A623;
  --cl-amber-hot:   #E8630A;
  --cl-amber-deep:  #B8740A;
  --cl-amber-soft:  #FEF3DC;
  --cl-amber-mist:  #FFF9EE;

  /* Ink */
  --cl-ink:         #1A1612;
  --cl-ink-soft:    #4A423C;
  --cl-muted:       #6B6460;
  --cl-faint:       #98908A;

  /* Surfaces */
  --cl-cream:       #F5F0EB;
  --cl-cream-deep:  #EFE8E0;
  --cl-white:       #FFFFFF;
  --cl-night:       #17130F;

  /* Support colours, used sparingly */
  --cl-green:       #2B6E46;
  --cl-green-soft:  #E8F7EE;
  --cl-violet:      #5B4B8A;
  --cl-violet-soft: #F0ECFA;
  --cl-blue:        #2C5C8F;
  --cl-blue-soft:   #E9F1FA;

  /* Lines */
  --cl-line:        rgba(26,22,18,0.10);
  --cl-line-med:    rgba(26,22,18,0.18);

  /* Shape */
  --cl-r-lg:        22px;
  --cl-r:           16px;
  --cl-r-sm:        11px;
  --cl-r-pill:      100px;

  /* Depth */
  --cl-shadow-sm:   0 1px 3px rgba(26,22,18,0.05);
  --cl-shadow:      0 4px 20px rgba(26,22,18,0.08), 0 1px 4px rgba(26,22,18,0.04);
  --cl-shadow-lg:   0 18px 50px rgba(26,22,18,0.13), 0 4px 12px rgba(26,22,18,0.06);

  --cl-nav-h:       66px;
}

/* ============================================================
   2. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body.cl-site {
  font-family: var(--cl-font);
  background: var(--cl-cream);
  color: var(--cl-ink);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Links take the colour of whatever they sit in, EXCEPT buttons.
   A button sets its own text colour, and "a { color: inherit }" is
   more specific than ".cl-btn--light", so without this exclusion a
   white button inside a dark panel ends up with white text on white. */
.cl-site a:not(.cl-btn) { color: inherit; }
.cl-site a { text-decoration: none; }
.cl-site img { max-width: 100%; display: block; }
.cl-site button { font-family: inherit; }

/* Skip link for keyboard users */
.cl-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--cl-ink); color: var(--cl-white);
  padding: 10px 18px; border-radius: 0 0 var(--cl-r-sm) 0;
  font-size: 14px; font-weight: 600; z-index: 999;
}
.cl-skip:focus { left: 0; }

/* Shared width */
.cl-wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 40px; }
.cl-wrap--narrow { max-width: 800px; }

/* Section rhythm */
.cl-section { padding: 96px 0; position: relative; }
.cl-section--tight { padding: 64px 0; }
.cl-section--cream { background: var(--cl-cream-deep); }
.cl-section--white { background: var(--cl-white); }
.cl-section--night { background: var(--cl-night); color: var(--cl-white); }

/* ============================================================
   3. TYPE
   ============================================================ */
.cl-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--cl-amber-deep);
  margin-bottom: 16px;
}
.cl-section--night .cl-eyebrow { color: var(--cl-amber); }

/* Everything that reads as a heading uses the heading font.
   Kept in one list so the whole site changes together. */
.cl-h1, .cl-h2, .cl-h3,
.cl-feat h3, .cl-step h3, .cl-tl-title, .cl-next-item h4,
.cl-panel h2, .cl-sent h2, .cl-legal h2, .cl-prose h3,
.cl-win-val, .cl-win-lbl, .cl-stat-val, .cl-chip-val,
.cl-brand-name, .cl-footer-brand span,
.cl-pull, .cl-rv-quote, .cl-founder-copy p,
.cl-signoff-name, .cl-portrait-initial {
  font-family: var(--cl-font-head);
}

.cl-h1 {
  font-size: clamp(38px, 5.4vw, 58px);
  font-weight: 800; line-height: 1.08;
  letter-spacing: -1.6px;
}
.cl-h2 {
  font-size: clamp(29px, 3.5vw, 41px);
  font-weight: 800; line-height: 1.14;
  letter-spacing: -1px;
}
.cl-h3 {
  font-size: 19px; font-weight: 700;
  line-height: 1.3; letter-spacing: -0.3px;
}

/* A phrase inside a heading, lifted in the house orange.
   This is the default way to lift a few words, and it is what
   the hero uses.

   The flat colour comes first so the words are always readable.
   Browsers that can paint a gradient into text then get the
   shine, which is the same gradient the student dashboard uses
   on a student's name, so the site and the app match. */
.cl-hl { color: var(--cl-amber); }

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .cl-hl {
    background-image: linear-gradient(96deg, #E8630A 0%, #F5A623 52%, #F7B955 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* The alternative: a rule under the phrase instead of colour.
   Swap cl-hl for cl-underline on any heading to try it.
   Drawn as a background line so it sits clear of the letters
   rather than cutting through them like the old version did. */
.cl-underline {
  white-space: nowrap;
  padding-bottom: 0.1em;
  background-image: linear-gradient(var(--cl-amber), var(--cl-amber));
  background-repeat: no-repeat;
  background-size: 100% 0.08em;
  background-position: 0 100%;
}

.cl-lead {
  font-size: 17px; color: var(--cl-muted);
  line-height: 1.75; max-width: 560px;
}
.cl-section--night .cl-lead { color: rgba(255,255,255,0.68); }

/* The Classly mark, sitting above a section heading.
   The negative top margin pulls it up out of the section's
   padding so it does not float in the middle of the gap. */
.cl-head-mark {
  width: 76px; height: 76px;
  object-fit: contain;
  margin: -26px auto 18px;
}

.cl-head-block { max-width: 660px; margin-bottom: 52px; }
.cl-head-block--centre { margin-left: auto; margin-right: auto; text-align: center; }
.cl-head-block--centre .cl-lead { margin-left: auto; margin-right: auto; }
.cl-head-block .cl-lead { margin-top: 16px; }

/* ============================================================
   4. BUTTONS AND PILLS
   ============================================================ */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 700;
  padding: 13px 26px;
  border-radius: var(--cl-r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.cl-btn:active { transform: translateY(1px); }

/* The orange button matches the rest of the app. The shade is a
   see-through image over the colour, and the warm shadow sits
   underneath, the same recipe as wwwroot/css/button-depth.css. */
.cl-btn--primary {
  background-color: var(--cl-amber);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(0,0,0,0.07) 100%);
  color: var(--cl-ink);
  box-shadow: 0 4px 12px rgba(230,120,0,0.28), 0 1px 2px rgba(0,0,0,0.05);
}
.cl-btn--primary:hover {
  background-color: #FFB53D; color: var(--cl-ink);
  box-shadow: 0 8px 20px rgba(230,120,0,0.34), 0 1px 2px rgba(0,0,0,0.05);
  transform: translateY(-2px);
}
.cl-btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(230,120,0,0.24);
}
.cl-btn--ghost {
  background: transparent; color: var(--cl-ink);
  border-color: var(--cl-line-med);
}
.cl-btn--ghost:hover { background: rgba(26,22,18,0.05); transform: translateY(-2px); }

.cl-btn--dark {
  background-color: var(--cl-ink);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(0,0,0,0.07) 100%);
  color: var(--cl-white);
  box-shadow: 0 4px 12px rgba(26,22,18,0.22), 0 1px 2px rgba(0,0,0,0.05);
}
.cl-btn--dark:hover { background-color: #2C251E; color: var(--cl-white); transform: translateY(-2px); }

.cl-btn--light { background: var(--cl-white); color: var(--cl-ink); }
.cl-btn--light:hover { background: #FFF6E6; transform: translateY(-2px); }

.cl-btn--lg { font-size: 16px; padding: 16px 32px; }
.cl-btn--sm { font-size: 14px; padding: 9px 18px; }
.cl-btn--block { width: 100%; }

/* Small status pill, for example "Beta programme open".
   Pills say what state something is in, so they get the soft shade
   but no shadow and no lift. Same idea as the rest of the app. */
.cl-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background-color: var(--cl-amber-soft);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.05) 100%);
  border: 1px solid rgba(245,166,35,0.35);
  color: var(--cl-amber-deep);
  font-size: 13px; font-weight: 600;
  padding: 6px 15px; border-radius: var(--cl-r-pill);
}
.cl-badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cl-amber); flex-shrink: 0;
  animation: clPulse 2.2s ease-in-out infinite;
}
@keyframes clPulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.82); }
}

/* Soft amber glow behind hero content */
.cl-glow {
  position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 0;
  filter: blur(70px); opacity: 0.5;
}
.cl-glow--a { width: 460px; height: 460px; background: rgba(245,166,35,0.42); top: -140px; right: -100px; }
.cl-glow--b { width: 380px; height: 380px; background: rgba(232,99,10,0.20);  bottom: -160px; left: -120px; }

/* ============================================================
   5. HEADER
   ============================================================ */
.cl-nav {
  position: sticky; top: 0; z-index: 200;
  height: var(--cl-nav-h);
  background: rgba(245,240,235,0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
/* Line and shadow appear once the page scrolls */
.cl-nav.is-stuck {
  border-bottom-color: var(--cl-line);
  box-shadow: 0 2px 14px rgba(26,22,18,0.05);
}
.cl-nav-inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.cl-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cl-brand img { width: 32px; height: 32px; object-fit: contain; }
.cl-brand-name { font-size: 16px; font-weight: 700; letter-spacing: -0.4px; }

.cl-nav-links { display: flex; align-items: center; gap: 4px; }
.cl-nav-link {
  position: relative;
  font-size: 14.5px; font-weight: 600; color: var(--cl-muted);
  padding: 8px 14px; border-radius: var(--cl-r-sm);
  transition: color 0.18s ease, background 0.18s ease;
}
.cl-nav-link:hover { color: var(--cl-ink); background: rgba(26,22,18,0.045); }
.cl-nav-link.is-active { color: var(--cl-ink); }
/* Small amber dot under the page you are on */
.cl-nav-link.is-active::after {
  content: ''; position: absolute; left: 50%; bottom: 1px;
  width: 5px; height: 5px; margin-left: -2.5px;
  background: var(--cl-amber); border-radius: 50%;
}

.cl-nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cl-nav-signin {
  font-size: 14.5px; font-weight: 600; color: var(--cl-ink);
  padding: 9px 16px; border-radius: var(--cl-r-sm);
  transition: background 0.18s ease;
}
.cl-nav-signin:hover { background: rgba(26,22,18,0.05); }

/* Mobile menu button */
.cl-burger {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--cl-line-med);
  border-radius: var(--cl-r-sm); cursor: pointer;
}
.cl-burger span {
  display: block; width: 17px; height: 1.8px; background: var(--cl-ink);
  border-radius: 2px; position: relative; transition: background 0.22s ease;
}
.cl-burger span::before, .cl-burger span::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 1.8px;
  background: var(--cl-ink); border-radius: 2px; transition: transform 0.22s ease;
}
.cl-burger span::before { top: -6px; }
.cl-burger span::after  { top: 6px; }
.cl-burger.is-open span { background: transparent; }
.cl-burger.is-open span::before { transform: translateY(6px) rotate(45deg); }
.cl-burger.is-open span::after  { transform: translateY(-6px) rotate(-45deg); }

/* The drop down panel on phones */
.cl-mobile-menu {
  display: none;
  position: fixed; top: var(--cl-nav-h); left: 0; right: 0; z-index: 199;
  background: var(--cl-cream);
  border-bottom: 1px solid var(--cl-line);
  padding: 18px 24px 26px;
  box-shadow: 0 12px 30px rgba(26,22,18,0.10);
}
.cl-mobile-menu.is-open { display: block; }
.cl-mobile-menu a {
  display: block; padding: 13px 4px;
  font-size: 16px; font-weight: 600;
  border-bottom: 1px solid var(--cl-line);
}
.cl-mobile-menu a.cl-btn { border-bottom: none; }
.cl-mobile-menu .cl-btn { margin-top: 16px; width: 100%; }

/* ============================================================
   6. FOOTER
   ============================================================ */
/* Light footer. It used to be the same near black as the call to
   action panel above it, which made the bottom of the page read as one
   heavy slab. Now the dark panel is the only dark thing on the page,
   which is what makes it stand out. */
.cl-footer {
  background: var(--cl-cream-deep); color: var(--cl-muted);
  border-top: 1px solid var(--cl-line);
  padding: 66px 0 30px;
}
.cl-footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 44px; padding-bottom: 44px;
  border-bottom: 1px solid var(--cl-line);
}
.cl-footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.cl-footer-brand img { width: 30px; height: 30px; object-fit: contain; }
.cl-footer-brand span { font-size: 16px; font-weight: 700; color: var(--cl-ink); }
.cl-footer-blurb { font-size: 14.5px; line-height: 1.7; max-width: 330px; }
.cl-footer-col h4 {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--cl-ink); margin-bottom: 16px;
}
.cl-footer-col a {
  display: block; font-size: 14.5px; padding: 5px 0;
  color: var(--cl-muted); transition: color 0.18s ease;
}
/* The deep amber, not the bright one. Bright amber on a light
   background is too faint to read as a hover. */
.cl-footer-col a:hover { color: var(--cl-amber-deep); }
.cl-footer-base {
  padding-top: 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--cl-faint);
}

/* ============================================================
   7. SHARED CARDS AND ICONS
   ============================================================ */
.cl-card {
  background: var(--cl-white);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-r);
  box-shadow: var(--cl-shadow-sm);
}

/* Little coloured square that holds an icon */
.cl-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-bottom: 18px;
  background: var(--cl-amber-soft); color: var(--cl-amber-deep);
}
.cl-icon--green  { background: var(--cl-green-soft);  color: var(--cl-green); }
.cl-icon--violet { background: var(--cl-violet-soft); color: var(--cl-violet); }
.cl-icon--blue   { background: var(--cl-blue-soft);   color: var(--cl-blue); }

/* ============================================================
   8. RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .cl-nav-links  { display: none; }
  /* OLD: .cl-nav-signin { display: none; }
     Sign in now stays on the bar so tutors and students can reach it */
  .cl-burger     { display: flex; }
  .cl-wrap       { padding: 0 24px; }
  .cl-section    { padding: 72px 0; }
  .cl-footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}
@media (max-width: 560px) {
  .cl-nav-actions .cl-btn { display: none; }
  .cl-footer-grid { grid-template-columns: 1fr; }
  .cl-footer-base { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   9. FADE IN ON SCROLL
   ------------------------------------------------------------
   marketing.js adds .is-in when the block scrolls into view.
   ============================================================ */
[data-cl-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-cl-reveal].is-in { opacity: 1; transform: none; }
/* Stagger a row of cards so they arrive one after another */
[data-cl-reveal="1"] { transition-delay: 0.08s; }
[data-cl-reveal="2"] { transition-delay: 0.16s; }
[data-cl-reveal="3"] { transition-delay: 0.24s; }
[data-cl-reveal="4"] { transition-delay: 0.32s; }

/* ============================================================
   10. REVIEW DECK
   ------------------------------------------------------------
   A stack of cards. The front one is readable, the next two
   peek out behind it. Drag it, or use the arrows and dots.
   ============================================================ */
.cl-rv { position: relative; }

.cl-rv-stage {
  position: relative;
  max-width: 720px;
  height: 340px;
  margin: 0 auto;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.cl-rv-stage.is-dragging { cursor: grabbing; }
/* While a card is being dragged it should follow the finger with no lag */
.cl-rv-stage.is-dragging .cl-rv-card.is-front { transition: none; }

.cl-rv-card {
  position: absolute;
  top: 0; left: 0; right: 0;
  min-height: 340px;
  display: flex; flex-direction: column;
  background: var(--cl-white);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-r-lg);
  padding: 46px 46px 34px;
  box-shadow: var(--cl-shadow-lg);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.22, 0.9, 0.3, 1), opacity 0.45s ease;
}
/* The coloured edge along the top of every card */
.cl-rv-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: var(--cl-amber);
}
.cl-rv-card:nth-child(4n+2)::before { background: var(--cl-amber-hot); }
.cl-rv-card:nth-child(4n+3)::before { background: var(--cl-green); }
.cl-rv-card:nth-child(4n+4)::before { background: var(--cl-violet); }

/* Where each card sits in the stack */
.cl-rv-card.is-front { transform: translateY(0)    scale(1);     opacity: 1; z-index: 4; }
.cl-rv-card.is-next  { transform: translateY(16px) scale(0.955); opacity: 1; z-index: 3; }
.cl-rv-card.is-later { transform: translateY(32px) scale(0.91);  opacity: 1; z-index: 2; }
.cl-rv-card.is-away  { transform: translateY(32px) scale(0.91);  opacity: 0; z-index: 1; pointer-events: none; }
.cl-rv-card:not(.is-front) { box-shadow: var(--cl-shadow); }

/* Big soft quote mark in the corner */
.cl-rv-mark {
  position: absolute; top: 22px; right: 34px;
  font-size: 86px; line-height: 1; font-weight: 700;
  color: var(--cl-amber); opacity: 0.14;
  pointer-events: none;
}
.cl-rv-quote {
  flex: 1;
  /* Sits a little below the top of the card rather than tight against
     the padding, so short and long quotes both look settled */
  padding-top: 18px;
  font-size: clamp(19px, 2.1vw, 24px);
  font-weight: 600; line-height: 1.5;
  letter-spacing: -0.4px;
  color: var(--cl-ink);
}
.cl-rv-author {
  display: flex; align-items: center; gap: 14px;
  padding-top: 22px; margin-top: 22px;
  border-top: 1px solid var(--cl-line);
}
.cl-rv-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cl-amber-soft); color: var(--cl-amber-deep);
  font-size: 15px; font-weight: 700; letter-spacing: 0.4px;
  flex-shrink: 0;
}
.cl-rv-name { font-size: 15.5px; font-weight: 700; }
.cl-rv-role { font-size: 13.5px; color: var(--cl-muted); }

/* Arrows and dots */
.cl-rv-controls {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 34px;
}
.cl-rv-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cl-white); color: var(--cl-ink);
  border: 1px solid var(--cl-line-med);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.16s ease, border-color 0.2s ease;
}
.cl-rv-btn:hover {
  background: var(--cl-amber); border-color: var(--cl-amber);
  transform: translateY(-2px);
}
.cl-rv-dots { display: flex; align-items: center; gap: 9px; }
.cl-rv-dot {
  width: 8px; height: 8px; padding: 0;
  border-radius: 50%; border: none; cursor: pointer;
  background: var(--cl-line-med);
  transition: width 0.28s ease, background 0.28s ease;
}
.cl-rv-dot.is-active { width: 26px; border-radius: 5px; background: var(--cl-amber); }

/* Announces the card change to screen readers without showing on screen */
.cl-rv-status {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ============================================================
   11. HERO
   ============================================================ */
.cl-hero {
  position: relative; overflow: hidden;
  padding: 84px 0 96px;
}
.cl-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.04fr 0.96fr;
  gap: 60px; align-items: center;
}
.cl-hero .cl-h1 { margin: 22px 0 20px; }
.cl-hero-sub { font-size: 18px; color: var(--cl-muted); line-height: 1.72; max-width: 500px; }

/* A shorter page header, for pages where the content should start
   higher up (Founder's story). Two class names so it beats the
   tablet and phone hero spacing further down. */
.cl-hero.cl-hero--tight { padding-top: 48px; padding-bottom: 20px; }
@media (max-width: 560px) {
  .cl-hero.cl-hero--tight { padding-top: 24px; padding-bottom: 12px; }
}
.cl-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin: 32px 0 18px; }
.cl-hero-note { font-size: 13.5px; color: var(--cl-faint); }

/* The three proof points. These sit across the full width under the
   hero rather than squeezed into the left column, so each one has
   room for a proper sentence instead of wrapping into a column. */
.cl-hero-stats {
  display: flex; margin-top: 56px; padding-top: 30px;
  border-top: 1px solid var(--cl-line);
}
.cl-hero-stats .cl-stat { flex: 1; padding-right: 34px; }
.cl-hero-stats .cl-stat + .cl-stat { padding-left: 34px; border-left: 1px solid var(--cl-line); }
.cl-hero-stats .cl-stat-lbl { font-size: 14.5px; line-height: 1.6; margin-top: 6px; }
.cl-stat-val {
  font-size: 25px; font-weight: 700;
  letter-spacing: -0.6px; line-height: 1.2;
}
.cl-stat-lbl { font-size: 13px; color: var(--cl-muted); margin-top: 2px; }

/* ---- The pretend app window on the right ---- */
.cl-mock { position: relative; }
.cl-mock-window {
  background: var(--cl-white);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-r-lg);
  box-shadow: var(--cl-shadow-lg);
  overflow: hidden;
}
/* The title bar along the top of each window, in house orange.
   The shade is the same see-through gradient the buttons use,
   so it sits in the same family rather than being a flat block. */
.cl-mock-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px;
  background-color: var(--cl-amber);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(0,0,0,0.07) 100%);
  border-bottom: 1px solid rgba(26,22,18,0.10);
}
.cl-mock-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(26,22,18,0.22); }
.cl-mock-title {
  margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--cl-ink);
}

/* Every window bar is orange, including the ones in a hero.
   The cream bar looked better on its own up there, but a
   visitor scrolling sees three of the same window and cannot
   see the reason one differs, so it reads as a mistake rather
   than a decision. Consistency wins.

   To go back to a plain bar in heroes only, uncomment this:

   .cl-hero .cl-mock-bar {
     background-color: var(--cl-cream);
     background-image: none;
     border-bottom: 1px solid var(--cl-line);
   }
   .cl-hero .cl-mock-dot { background: var(--cl-line-med); }
   .cl-hero .cl-mock-title { font-weight: 600; color: var(--cl-muted); }
*/
.cl-mock-body { padding: 20px; }
.cl-mock-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid var(--cl-line);
}
.cl-mock-row:last-child { border-bottom: none; }
.cl-mock-tick {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cl-green-soft); color: var(--cl-green); flex-shrink: 0;
}
.cl-mock-lbl { flex: 1; font-size: 14px; font-weight: 600; }
.cl-mock-tag {
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: var(--cl-r-pill);
  background-color: var(--cl-cream); color: var(--cl-muted); white-space: nowrap;
  /* Same soft shade and hairline edge the app pills use */
  background-image: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.05) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.cl-mock-tag--amber { background-color: var(--cl-amber-soft); color: var(--cl-amber-deep); }
.cl-mock-tag--green { background-color: var(--cl-green-soft); color: var(--cl-green); }

/* ---- Student dashboard preview ----------------------------
   What a student sees when they sign in, sitting inside the same
   browser window frame the other mockups use. Built in HTML, so it
   stays sharp and weighs nothing.
   ----------------------------------------------------------- */
.cl-sd {
  background: var(--cl-cream);
  padding: 16px 18px 20px;
  text-align: center;
}

/* The row of section tabs across the top */
/* All six stay on one line. They are a picture of the real tabs
   rather than something to read, so they can afford to be small. */
.cl-sd-tabs {
  display: flex; flex-wrap: nowrap; justify-content: center;
  gap: 4px; margin-bottom: 18px;
}
.cl-sd-tab {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 700;
  color: var(--cl-muted);
  background: var(--cl-white);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-r-pill);
  padding: 5px 8px;
  white-space: nowrap;
}
.cl-sd-tab em {
  font-style: normal; font-size: 9.5px;
  background: var(--cl-cream); color: var(--cl-faint);
  border-radius: var(--cl-r-pill); padding: 1px 5px;
}

/* Eli's face. Same shapes, stroke widths and orange as the character
   on the real student dashboard, scaled down to fit the mockup. */
.cl-sd-mark { display: block; width: 52px; height: 52px; margin: 0 auto 10px; overflow: visible; }
.cl-sd-face  { fill: none; stroke: #ff8c00; stroke-width: 17; stroke-linejoin: round; }
.cl-sd-eye   { fill: none; stroke: #ff8c00; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.cl-sd-mouth { fill: none; stroke: #ff8c00; stroke-width: 12; }
.cl-sd-hi {
  font-family: var(--cl-font-head);
  font-size: 21px; font-weight: 800; letter-spacing: -0.5px;
}
.cl-sd-sub { font-size: 12px; color: var(--cl-muted); margin: 3px 0 15px; }

/* The four things a student can do next */
.cl-sd-btns { display: flex; flex-direction: column; gap: 8px; }
.cl-sd-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--cl-ink);
  background: var(--cl-white);
  border: 1px solid var(--cl-line);
  border-radius: 11px;
  padding: 11px 12px;
}
/* The first one is the one they should tap, so it wears the orange */
/* Matches the real dashboard button, so the preview is honest */
.cl-sd-btn--go {
  background-color: #FFB53D;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(0,0,0,0.07) 100%);
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(230,120,0,0.26);
}
.cl-sd-btn--go em {
  font-style: normal; font-size: 11px;
  background: rgba(255,255,255,0.55); color: var(--cl-ink);
  border-radius: var(--cl-r-pill); padding: 1px 7px;
}

/* ---- Progress report preview ------------------------------
   A cut down version of a real report: the written sections a
   tutor actually shares, rather than a row of scores. The body
   fades out at the bottom to show there is more below.
   ----------------------------------------------------------- */
.cl-report-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; padding: 16px 20px;
  background: var(--cl-cream);
  border-bottom: 1px solid var(--cl-line);
}
.cl-report-name {
  font-family: var(--cl-font-head);
  font-size: 15px; font-weight: 700;
}
.cl-report-meta { font-size: 12px; color: var(--cl-muted); margin-top: 2px; }

/* The three numbers along the top of a report */
.cl-report-stats {
  display: flex; gap: 22px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--cl-line);
}
.cl-report-stat-val { font-size: 17px; font-weight: 700; font-family: var(--cl-font-head); }
.cl-report-stat-lbl { font-size: 11px; color: var(--cl-faint); }

.cl-report-body {
  padding: 18px 20px 0;
  max-height: 300px; overflow: hidden;
  /* Fades the text out at the bottom instead of cutting it off */
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.cl-report-body h4 {
  font-family: var(--cl-font-head);
  font-size: 13.5px; font-weight: 700;
  color: var(--cl-ink);
  margin-bottom: 6px;
}
.cl-report-body h4 + p { margin-bottom: 18px; }
.cl-report-body p {
  font-size: 12.5px; line-height: 1.7;
  color: #8B7355;
}

/* Small cards that float beside the window */
.cl-chip {
  position: absolute;
  background: var(--cl-white);
  border: 1px solid var(--cl-line-med);
  border-radius: var(--cl-r-sm);
  padding: 12px 16px;
  box-shadow: var(--cl-shadow);
  animation: clFloat 5s ease-in-out infinite;
}
.cl-chip--tr { top: -22px; right: -26px; }
/* Sits low and well to the left so it overlaps the corner of the
   window rather than covering a row of text inside it */
.cl-chip--bl { bottom: -34px; left: -56px; animation-delay: 1.6s; }
.cl-chip-lbl {
  font-size: 10px; font-weight: 700; color: var(--cl-muted);
  text-transform: uppercase; letter-spacing: 0.6px;
}
.cl-chip-val { font-size: 21px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.2; }
.cl-chip-sub { font-size: 11.5px; color: var(--cl-faint); }
@keyframes clFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* ---- Dashboard picture in the hero -----------------------
   A small copy of the tutor dashboard. Everything inside is
   sized in em, and the base size follows the column width
   (cqw), so it shrinks evenly like a screenshot. Designed at
   560px wide with a 10px base.
   ----------------------------------------------------------- */
.cl-mock--dash { container-type: inline-size; }

/* Soft orange glow behind the window */
.cl-mock--dash::before {
  content: ''; position: absolute; z-index: 0;
  inset: 10% -8% -6% 4%;
  background: radial-gradient(closest-side, rgba(245,166,35,0.42), rgba(245,166,35,0));
  filter: blur(24px);
  pointer-events: none;
}
.cl-mock--dash .cl-chip { z-index: 2; }

.cl-dash {
  position: relative; z-index: 1;
  font-size: 10px;        /* backup for older browsers */
  font-size: 1.786cqw;    /* 10px when the column is 560px wide */
  background: var(--cl-white);
  border: 1px solid var(--cl-line);
  border-radius: 1.6em;
  box-shadow: var(--cl-shadow-lg);
  overflow: hidden;
  color: var(--cl-ink);
  line-height: 1.35;
  text-align: left;
  user-select: none;
}
.cl-dash svg {
  width: 1.3em; height: 1.3em; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Browser bar with the web address */
.cl-dash-top {
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.9em 1.3em;
  background: var(--cl-cream);
  border-bottom: 1px solid var(--cl-line);
}
.cl-dash-top .cl-mock-dot { width: 0.9em; height: 0.9em; }
.cl-dash-url {
  /* Centred, nudged left to allow for the three dots */
  margin: 0 auto; transform: translateX(-1.5em);
  font-size: 1.05em; font-weight: 600; color: var(--cl-muted);
  background: var(--cl-white);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-r-pill);
  padding: 0.3em 2.4em;
}

.cl-dash-body { display: grid; grid-template-columns: 13em 1fr; }

/* Sidebar */
.cl-dash-side { padding: 1.4em 0.9em; border-right: 1px solid var(--cl-line); }
.cl-dash-brand {
  display: flex; align-items: center; gap: 0.4em;
  font-family: var(--cl-font-head);
  font-size: 1.4em; font-weight: 800; letter-spacing: -0.03em;
  margin: 0 0 0.9em 0.3em;
}
.cl-dash-brand img { width: 1.5em; height: 1.5em; }
.cl-dash-nav {
  display: flex; align-items: center; gap: 0.6em;
  font-size: 1.05em; font-weight: 600; color: var(--cl-ink-soft);
  padding: 0.55em 0.6em; border-radius: 0.7em;
  white-space: nowrap;
}
.cl-dash-nav svg { color: var(--cl-amber); }
.cl-dash-nav.is-on { background: var(--cl-amber-soft); color: var(--cl-amber-deep); }
.cl-dash-side-lbl {
  font-size: 0.8em; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cl-faint);
  margin: 1.4em 0 0.5em 0.7em;
}
.cl-dash-stu {
  display: flex; align-items: center; gap: 0.6em;
  font-size: 1.05em; font-weight: 600;
  padding: 0.35em 0.6em;
}

/* Round letter avatars */
.cl-dash-av {
  width: 1.8em; height: 1.8em; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.85em; font-weight: 700;
  background: var(--cl-amber-soft); color: var(--cl-amber-deep);
}
.cl-dash-av--violet { background: var(--cl-violet-soft); color: var(--cl-violet); }
.cl-dash-av--green  { background: var(--cl-green-soft);  color: var(--cl-green); }

/* Main area */
.cl-dash-main { background: #FAF7F3; padding: 1.8em 1.8em 2em; min-width: 0; }
.cl-dash-hi {
  font-family: var(--cl-font-head);
  font-size: 2.2em; font-weight: 800;
  letter-spacing: -0.04em; line-height: 1.15;
}
.cl-dash-hi span { color: var(--cl-amber); }
.cl-dash-sub { font-size: 1em; color: var(--cl-muted); margin: 0.35em 0 1.5em; }

.cl-dash-row    { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 0.9em; }
.cl-dash-row--2 { grid-template-columns: 1.4fr 1fr; margin-top: 0.9em; }

.cl-dash-card {
  position: relative; overflow: hidden;
  background: var(--cl-white);
  border: 1px solid var(--cl-line);
  border-radius: 1.1em;
  padding: 1.1em;
  box-shadow: 0 0.2em 0.8em rgba(26,22,18,0.05);
}
.cl-dash-icon {
  width: 2.3em; height: 2.3em; border-radius: 0.7em;
  display: flex; align-items: center; justify-content: center;
  background: var(--cl-amber-soft); color: var(--cl-amber-deep);
  margin-bottom: 0.9em;
}
.cl-dash-card-title {
  font-family: var(--cl-font-head);
  font-size: 1.15em; font-weight: 800; letter-spacing: -0.02em;
}
.cl-dash-card-title em {
  font-style: normal; font-size: 0.75em; font-weight: 700;
  background: var(--cl-cream); color: var(--cl-muted);
  border-radius: var(--cl-r-pill);
  padding: 0.1em 0.55em; margin-left: 0.3em;
}
.cl-dash-card-text { font-size: 0.9em; color: var(--cl-muted); margin-top: 0.25em; }

/* The orange "Upload a lesson" card, with a slow shine across it */
.cl-dash-card--go {
  background-image: linear-gradient(145deg, #FFC04D 0%, #F5A623 45%, #EE8A12 100%);
  border-color: transparent; color: var(--cl-white);
  box-shadow: 0 0.6em 1.4em rgba(230,120,0,0.32);
}
.cl-dash-card--go .cl-dash-icon      { background: rgba(255,255,255,0.25); color: var(--cl-white); }
.cl-dash-card--go .cl-dash-card-text { color: rgba(255,255,255,0.9); }
.cl-dash-card--go::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  animation: clShine 4.5s ease-in-out 2s infinite;
}
@keyframes clShine {
  0%        { left: -60%; }
  30%, 100% { left: 130%; }
}

/* Student list with scores */
.cl-dash-list { margin-top: 0.6em; display: flex; flex-direction: column; gap: 0.45em; }
.cl-dash-list div { display: flex; align-items: center; gap: 0.5em; font-size: 0.95em; }
.cl-dash-list b { flex: 1; font-weight: 700; }
.cl-dash-list i {
  font-style: normal; font-size: 0.8em; font-weight: 700;
  background: var(--cl-green-soft); color: var(--cl-green);
  border-radius: var(--cl-r-pill); padding: 0.15em 0.6em;
}
.cl-dash-list i.cl-dash-new { background: var(--cl-amber-soft); color: var(--cl-amber-deep); }

/* Stats card */
.cl-dash-lbl {
  font-size: 0.78em; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cl-faint);
}
.cl-dash-stats { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; }
.cl-dash-big {
  font-family: var(--cl-font-head);
  font-size: 2.6em; font-weight: 800;
  letter-spacing: -0.04em; line-height: 1.1; margin-top: 0.15em;
}
/* "lessons written up" on one line under the big number */
.cl-dash-big-lbl { font-size: 1em; font-weight: 700; color: var(--cl-ink-soft); white-space: nowrap; }

/* Little bar chart. The bars grow up when the picture appears. */
.cl-dash-chart { display: flex; align-items: flex-end; gap: 0.4em; height: 4.6em; flex-shrink: 0; }
.cl-dash-chart i {
  display: block; width: 1.05em; height: var(--h);
  border-radius: 0.35em 0.35em 0.15em 0.15em;
  background: var(--cl-amber-soft);
  transform-origin: bottom;
}
.cl-dash-chart i:last-child { background: linear-gradient(180deg, #FFC04D, #EE8A12); }
.cl-mock.is-in .cl-dash-chart i { animation: clGrow 0.8s cubic-bezier(0.22, 0.9, 0.3, 1) both; }
.cl-mock.is-in .cl-dash-chart i:nth-child(1) { animation-delay: 0.30s; }
.cl-mock.is-in .cl-dash-chart i:nth-child(2) { animation-delay: 0.37s; }
.cl-mock.is-in .cl-dash-chart i:nth-child(3) { animation-delay: 0.44s; }
.cl-mock.is-in .cl-dash-chart i:nth-child(4) { animation-delay: 0.51s; }
.cl-mock.is-in .cl-dash-chart i:nth-child(5) { animation-delay: 0.58s; }
.cl-mock.is-in .cl-dash-chart i:nth-child(6) { animation-delay: 0.65s; }
.cl-mock.is-in .cl-dash-chart i:nth-child(7) { animation-delay: 0.72s; }
@keyframes clGrow {
  from { transform: scaleY(0); }
  to   { transform: none; }
}

/* Teaching tip, orange with two soft circles like the real card */
.cl-dash-tip {
  background-image: linear-gradient(135deg, #E8630A 0%, #F5A623 100%);
  border-color: transparent; color: var(--cl-white);
}
.cl-dash-tip .cl-dash-lbl { color: rgba(255,255,255,0.82); }
.cl-dash-tip p {
  position: relative;
  font-family: var(--cl-font-head);
  font-size: 1.05em; font-weight: 700; line-height: 1.4;
  margin-top: 0.5em;
}
.cl-dash-tip::before,
.cl-dash-tip::after {
  content: ''; position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.12);
}
.cl-dash-tip::before { width: 7em; height: 7em; top: -2.5em; right: -2em; }
.cl-dash-tip::after  { width: 5em; height: 5em; bottom: -2.5em; right: 2em; }

/* "Notes ready" message. Sits off the bottom edge like the
   floating cards, and slides in once after the picture appears. */
.cl-dash-toast {
  position: absolute; right: 22px; bottom: -20px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700;
  background: var(--cl-ink); color: var(--cl-white);
  padding: 8px 15px 8px 8px;
  border-radius: var(--cl-r-pill);
  box-shadow: 0 10px 26px rgba(26,22,18,0.28);
  opacity: 0;
}
.cl-dash-toast span {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #3FA476; color: var(--cl-white);
}
.cl-dash-toast svg {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 3.2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Runs once whatever holds it has faded in (the hero picture,
   or the whole Lesson Review block further down) */
.is-in .cl-dash-toast { animation: clToast 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) 1.6s both; }
/* The same message on the left instead */
.cl-dash-toast--left { right: auto; left: 26px; }
@keyframes clToast {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Slight 3D tilt on desktop. Straightens when you hover over it. */
@media (min-width: 981px) {
  .cl-dash {
    transform: perspective(1600px) rotateY(-10deg) rotateX(5deg);
    transition: transform 0.7s cubic-bezier(0.22, 0.9, 0.3, 1);
  }
  .cl-mock--dash:hover .cl-dash { transform: none; }
}

/* ---- Lesson page picture (Lesson Review block) ------------
   Uses the dashboard frame above (cl-dash, cl-dash-top), so it
   shrinks and tilts the same way. Sized in em from a 10px base.
   ----------------------------------------------------------- */
/* On tablets the words and picture stack, so keep it a sensible size */
@media (max-width: 980px) {
  .cl-mock.cl-mock--lp { max-width: 520px; margin: 0 auto; }
}

.cl-lp-body { background: #FAF8F5; padding: 1.4em 1.6em 1.7em; }

/* Student strip across the top */
.cl-lp-student {
  display: flex; align-items: center; gap: 0.8em;
  background: var(--cl-white);
  border: 1px solid #F3D9A8; border-radius: 1em;
  padding: 0.75em 1em;
}
.cl-lp-av {
  width: 2.4em; height: 2.4em; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background-image: linear-gradient(145deg, #FFC04D 0%, #EE8A12 100%);
  color: var(--cl-white); font-size: 1.1em; font-weight: 800;
}
.cl-lp-name { font-family: var(--cl-font-head); font-size: 1.2em; font-weight: 800; }
.cl-lp-name span {
  font-family: var(--cl-font); font-size: 0.65em; font-weight: 700;
  color: var(--cl-muted);
  border: 1px solid var(--cl-line-med); border-radius: 0.4em;
  padding: 0.1em 0.5em; margin-left: 0.35em; vertical-align: 0.15em;
}
.cl-lp-tabs { display: flex; gap: 0.3em; margin-left: auto; }
.cl-lp-tabs span {
  display: flex; align-items: center; gap: 0.35em;
  font-size: 0.85em; font-weight: 700; color: var(--cl-faint);
  padding: 0.4em 0.7em; border-radius: 0.6em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.cl-lp-tabs span.is-on { background: var(--cl-amber-soft); color: var(--cl-amber-deep); border-color: #F3D9A8; }
.cl-lp-tabs svg { width: 1.1em; height: 1.1em; }

/* Lesson title with the short orange line under it */
.cl-lp-title {
  margin-top: 1.1em; text-align: center;
  font-family: var(--cl-font-head);
  font-size: 2.1em; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15;
}
.cl-lp-title::after {
  content: ''; display: block;
  width: 1.1em; height: 0.1em; border-radius: 1em;
  background: var(--cl-amber);
  margin: 0.3em auto 0;
}
.cl-lp-date { text-align: center; font-size: 0.9em; color: var(--cl-muted); margin-top: 0.5em; }

/* The three buttons */
.cl-lp-btns { display: flex; justify-content: center; gap: 0.6em; margin: 1.1em 0 1.3em; }
.cl-lp-btn {
  display: flex; align-items: center; gap: 0.45em;
  font-size: 0.9em; font-weight: 700; color: var(--cl-white);
  padding: 0.6em 1.1em; border-radius: var(--cl-r-pill);
  background-image: linear-gradient(180deg, #F7B447 0%, #EE9A1C 100%);
  box-shadow: 0 0.35em 0.9em rgba(230,120,0,0.28);
  white-space: nowrap;
}
.cl-lp-btn--indigo {
  background-image: linear-gradient(180deg, #8C95D6 0%, #6873B8 100%);
  box-shadow: 0 0.35em 0.9em rgba(90,100,180,0.28);
}
.cl-lp-btn svg { width: 1.15em; height: 1.15em; }

/* Coloured panels */
.cl-lp-panel {
  margin-top: 1em;
  background: var(--cl-white);
  border: 1px solid; border-radius: 1.1em;
  overflow: hidden;
  box-shadow: 0 0.3em 1em rgba(26,22,18,0.05);
}
.cl-lp-head {
  display: flex; align-items: center; justify-content: center; gap: 0.6em;
  padding: 0.75em;
  font-family: var(--cl-font-head); font-size: 1.2em; font-weight: 800;
  color: var(--cl-white);
}
.cl-lp-headicon {
  width: 1.8em; height: 1.8em; border-radius: 0.5em;
  display: flex; align-items: center; justify-content: center;
  background: var(--cl-white);
}
.cl-lp-headicon svg { width: 1em; height: 1em; }
.cl-lp-head em {
  font-style: normal; font-size: 0.7em; font-weight: 700;
  background: rgba(255,255,255,0.3);
  border-radius: var(--cl-r-pill); padding: 0.1em 0.6em;
}
.cl-lp-panel--vocab { border-color: #F6E1C0; }
.cl-lp-panel--vocab .cl-lp-head     { background-image: linear-gradient(180deg, #F7B447 0%, #EE9A1C 100%); }
.cl-lp-panel--vocab .cl-lp-headicon { color: #B8740A; }
.cl-lp-panel--pron  { border-color: #CBE6EC; }
.cl-lp-panel--pron  .cl-lp-head     { background-image: linear-gradient(180deg, #5DB5C5 0%, #3F9FB1 100%); }
.cl-lp-panel--pron  .cl-lp-headicon { color: #1F7C8C; }

/* Vocabulary table */
.cl-lp-thead,
.cl-lp-row {
  display: grid; grid-template-columns: 9.5em 1fr 1.15fr;
  gap: 1em; align-items: center;
  padding: 0 1.2em;
}
/* The heading row is measured at the same size as the rows below
   (0.9em), so its columns line up with theirs. The smaller text
   goes on the words themselves. */
.cl-lp-thead {
  font-size: 0.9em;
  padding-top: 0.55em; padding-bottom: 0.55em;
  border-bottom: 1px solid #F6E1C0;
}
.cl-lp-thead span {
  font-size: 0.78em; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #D2A45A;
}
.cl-lp-row {
  padding-top: 0.7em; padding-bottom: 0.7em;
  font-size: 0.9em; color: var(--cl-muted);
}
.cl-lp-row + .cl-lp-row { border-top: 1px solid #F6E1C0; }
.cl-lp-row:nth-of-type(odd) { background: #FDFAF4; }
.cl-lp-row b { display: flex; align-items: center; gap: 0.5em; font-weight: 700; color: var(--cl-ink); }
.cl-lp-say {
  width: 1.7em; height: 1.7em; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #E4F4F7; color: #2FA4B8;
}
.cl-lp-say svg { width: 0.95em; height: 0.95em; }
.cl-lp-eg { color: var(--cl-green); }

/* The rows appear one after another, as if Eli is filling them in.
   The rows are the 3rd, 4th and 5th boxes in the panel, after the
   coloured strip and the column names. */
.is-in .cl-lp-row { animation: clRowIn 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) both; }
.is-in .cl-lp-row:nth-of-type(3) { animation-delay: 0.4s; }
.is-in .cl-lp-row:nth-of-type(4) { animation-delay: 0.7s; }
.is-in .cl-lp-row:nth-of-type(5) { animation-delay: 1.0s; }
@keyframes clRowIn {
  from { opacity: 0; transform: translateX(-1em); }
  to   { opacity: 1; transform: none; }
}

/* Pronunciation cards */
.cl-lp-pron { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8em; padding: 1em 1.2em 1.2em; }
.cl-lp-pron > div {
  text-align: center;
  border: 1px solid #CBE6EC; border-radius: 0.9em;
  padding: 0.9em 0.5em 1em;
}
.cl-lp-pron b      { display: block; font-size: 1.05em; font-weight: 700; }
.cl-lp-pron small  { display: block; font-size: 0.75em; color: var(--cl-faint); margin: 0.25em 0 0.3em; }
.cl-lp-pron strong { display: block; font-size: 1em; font-weight: 800; color: #1F7C8C; letter-spacing: 0.02em; }

/* Speaker button with a soft ring that pulses out from it */
.cl-lp-play {
  position: relative;
  width: 2.4em; height: 2.4em; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #2FA4B8; color: var(--cl-white);
  margin: 0.6em auto 0;
}
.cl-lp-play svg { width: 1.1em; height: 1.1em; }
.cl-lp-play::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #2FA4B8;
  animation: clRing 2.4s ease-out infinite;
}
.cl-lp-pron > div:nth-child(2) .cl-lp-play::after { animation-delay: 0.8s; }
.cl-lp-pron > div:nth-child(3) .cl-lp-play::after { animation-delay: 1.6s; }
@keyframes clRing {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* "Things to fix" and "Tutor's notes" bars */
.cl-lp-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8em; margin-top: 1em; }
.cl-lp-bar {
  display: flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.75em; border-radius: 0.9em;
  font-family: var(--cl-font-head); font-size: 1em; font-weight: 800;
  color: var(--cl-white);
}
.cl-lp-bar i {
  width: 1.8em; height: 1.8em; border-radius: 0.5em;
  display: flex; align-items: center; justify-content: center;
  background: var(--cl-white);
}
.cl-lp-bar i svg { width: 1em; height: 1em; }
.cl-lp-bar em {
  font-style: normal; font-size: 0.8em;
  background: rgba(255,255,255,0.3);
  border-radius: var(--cl-r-pill); padding: 0.05em 0.55em;
}
.cl-lp-bar--fix   { background-image: linear-gradient(180deg, #DA8B74 0%, #C46B52 100%); }
.cl-lp-bar--fix i { color: #C46B52; }
.cl-lp-bar--tutor   { background-image: linear-gradient(180deg, #65B389 0%, #479A6D 100%); }
.cl-lp-bar--tutor i { color: #479A6D; }

/* "Eli found 21 words" floating pill, top right */
.cl-lp-found {
  position: absolute; top: -18px; right: -18px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  background: var(--cl-white);
  border: 1px solid var(--cl-line-med);
  border-radius: var(--cl-r-pill);
  padding: 8px 16px 8px 8px;
  font-size: 13.5px; font-weight: 700;
  box-shadow: var(--cl-shadow);
  animation: clFloat 5s ease-in-out infinite;
}
.cl-lp-found span {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background-image: linear-gradient(145deg, #FFC04D 0%, #EE8A12 100%);
  color: var(--cl-white);
}
.cl-lp-found svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }

/* The same pill along the bottom, sliding in once */
.cl-lp-found--bottom { top: auto; right: auto; bottom: -20px; left: 26px; opacity: 0; animation: none; }
.is-in .cl-lp-found--bottom { animation: clToast 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) 1.6s both; }

/* No 3D tilt on the lesson page picture, it sits flat.
   The hero dashboard keeps its tilt. */
.cl-mock--lp .cl-dash,
.cl-mock--lp:hover .cl-dash { transform: none; }

/* The pill in the top left corner instead */
.cl-lp-found--tl { right: auto; left: -18px; }

/* ---- Progress report picture ------------------------------
   A cut down copy of the real report page. Uses the same frame
   as the pictures above and also carries cl-mock--lp, so it sits
   flat and keeps a sensible size on tablets. Sized in em.
   ----------------------------------------------------------- */
.cl-pr-body { background: #FAF8F5; padding: 1.6em 1.6em 1.7em; }

.cl-pr-title {
  font-family: var(--cl-font-head);
  font-size: 1.9em; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.15;
}
.cl-pr-sub { font-size: 0.95em; color: var(--cl-muted); margin-top: 0.3em; }

/* "Generated by Eli" badge and the For student / For parent switch */
.cl-pr-badges { display: flex; align-items: center; gap: 0.6em; margin: 0.9em 0 1.2em; }
.cl-pr-eli {
  display: flex; align-items: center; gap: 0.4em;
  font-size: 0.85em; font-weight: 700; color: var(--cl-amber-deep);
  background: var(--cl-amber-soft);
  border: 1px solid #F3D9A8; border-radius: var(--cl-r-pill);
  padding: 0.35em 0.9em 0.35em 0.6em;
}
.cl-pr-eli svg { width: 1.1em; height: 1.1em; fill: currentColor; stroke: none; }
.cl-pr-toggle {
  display: flex; gap: 0.2em; padding: 0.2em;
  background: var(--cl-cream-deep); border-radius: var(--cl-r-pill);
  font-size: 0.85em; font-weight: 700; color: var(--cl-muted);
}
.cl-pr-toggle span { padding: 0.3em 0.9em; border-radius: var(--cl-r-pill); }
.cl-pr-toggle .is-on {
  background: var(--cl-white); color: var(--cl-ink);
  box-shadow: 0 0.15em 0.4em rgba(26,22,18,0.10);
}

.cl-pr-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 1em; align-items: start; }
.cl-pr-side { display: flex; flex-direction: column; gap: 1em; }
.cl-pr-card {
  background: var(--cl-white);
  border: 1px solid var(--cl-line); border-radius: 1.1em;
  padding: 1.1em 1.2em;
  box-shadow: 0 0.3em 1em rgba(26,22,18,0.05);
}
.cl-pr-lbl {
  font-size: 0.72em; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cl-faint);
  margin-bottom: 0.9em;
}

/* The written report, fading out at the bottom to show there is more */
.cl-pr-draft {
  max-height: 27em; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
.cl-pr-draft h4 {
  font-family: var(--cl-font-head);
  font-size: 1.05em; font-weight: 800;
  margin-bottom: 0.35em;
}
.cl-pr-draft p { font-size: 0.88em; line-height: 1.65; color: #8B7355; margin-bottom: 1em; }

/* Score rows with a bar that fills up when the picture appears */
.cl-pr-stat {
  display: grid; grid-template-columns: 1fr auto;
  gap: 0.3em 0.6em; align-items: baseline;
  margin-bottom: 0.8em;
}
.cl-pr-stat span { font-size: 0.85em; color: var(--cl-muted); }
.cl-pr-stat b {
  font-family: var(--cl-font-head);
  font-size: 1.15em; font-weight: 800; color: var(--cl-amber-hot);
}
.cl-pr-stat i {
  grid-column: 1 / -1; display: block;
  height: 0.5em; border-radius: 1em;
  background: var(--cl-cream-deep); overflow: hidden;
}
.cl-pr-stat em {
  display: block; height: 100%; width: var(--w);
  border-radius: inherit;
  background: linear-gradient(90deg, #FFC04D, #EE8A12);
  transform-origin: left;
}
/* The score rows are the 2nd to 4th boxes in the card, after the label */
.is-in .cl-pr-stat em { animation: clFill 1.1s cubic-bezier(0.22, 0.9, 0.3, 1) both; }
.is-in .cl-pr-stat:nth-of-type(2) em { animation-delay: 0.30s; }
.is-in .cl-pr-stat:nth-of-type(3) em { animation-delay: 0.45s; }
.is-in .cl-pr-stat:nth-of-type(4) em { animation-delay: 0.60s; }
@keyframes clFill {
  from { transform: scaleX(0); }
  to   { transform: none; }
}

/* Words still to practise */
.cl-pr-pills { display: flex; flex-wrap: wrap; gap: 0.35em; margin-top: 0.3em; }
.cl-pr-pills span {
  font-size: 0.8em; font-weight: 700; color: var(--cl-amber-deep);
  background: var(--cl-amber-soft);
  border-radius: var(--cl-r-pill); padding: 0.25em 0.7em;
}

/* Publish card */
.cl-pr-note { font-size: 0.85em; color: var(--cl-muted); line-height: 1.5; margin-bottom: 0.8em; }
.cl-pr-btn {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 1em; font-weight: 800; color: var(--cl-white);
  padding: 0.75em; border-radius: var(--cl-r-pill);
  background-image: linear-gradient(180deg, #F7B447 0%, #EE9A1C 100%);
  box-shadow: 0 0.4em 1em rgba(230,120,0,0.30);
}
/* The same slow shine as the dashboard's "Upload a lesson" card */
.cl-pr-btn::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  animation: clShine 4.5s ease-in-out 2.5s infinite;
}

/* ============================================================
   12. FEATURE CARDS
   ============================================================ */
.cl-grid { display: grid; gap: 22px; }
.cl-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cl-grid--2 { grid-template-columns: repeat(2, 1fr); }

.cl-feat {
  background: var(--cl-white);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-r);
  padding: 30px 28px;
  box-shadow: var(--cl-shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.cl-feat:hover {
  transform: translateY(-4px);
  box-shadow: var(--cl-shadow);
  border-color: rgba(245,166,35,0.45);
}
/* The icon sits centred at the top of the card, the words stay left */
.cl-feat .cl-icon { margin-left: auto; margin-right: auto; }

/* ---- One colour per card ----------------------------------
   Each card takes a single modifier that colours its icon and
   its border together, so the two can never fall out of step.
   The border is a soft tint of the icon colour, and deepens to
   the full colour on hover.
   ----------------------------------------------------------- */
.cl-feat--amber  { border-color: #F6E1C0; }
.cl-feat--amber  .cl-icon { background: #FDF3E2; color: #B8740A; }
.cl-feat--amber:hover  { border-color: #F5A623; }

.cl-feat--green  { border-color: #C8E6D3; }
.cl-feat--green  .cl-icon { background: #E8F7EE; color: #2B6E46; }
.cl-feat--green:hover  { border-color: #4C9A6A; }

.cl-feat--violet { border-color: #E3D7F3; }
.cl-feat--violet .cl-icon { background: #F2ECFB; color: #5B4B8A; }
.cl-feat--violet:hover { border-color: #8A63C0; }

.cl-feat--blue   { border-color: #CFE0F0; }
.cl-feat--blue   .cl-icon { background: #E9F1FA; color: #2C5C8F; }
.cl-feat--blue:hover   { border-color: #5B8FC7; }

.cl-feat--teal   { border-color: #CBE6EC; }
.cl-feat--teal   .cl-icon { background: #E4F4F7; color: #1F7C8C; }
.cl-feat--teal:hover   { border-color: #2FA4B8; }

.cl-feat--rose   { border-color: #F3D3DE; }
.cl-feat--rose   .cl-icon { background: #FBEDF3; color: #A83E68; }
.cl-feat--rose:hover   { border-color: #D4749B; }
.cl-feat h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 9px; }
.cl-feat p  { font-size: 14.5px; color: var(--cl-muted); line-height: 1.7; }

/* ---- Feature rows -----------------------------------------
   The lighter alternative to the boxed cards above: no border,
   no background, icon on the left with the words beside it.

   Without a card to hold it, the icon has to carry the item,
   so the tile is bigger here and the colour lives on the tile
   rather than on a faint border nobody could see.
   ----------------------------------------------------------- */
/* Centred under the heading, then nudged right a little.
   The nudge is an optical fix: the left column's text runs the
   full width of its column while the right column's is ragged,
   so the block reads as sitting left of centre even when it is
   measured dead centre. The shift is a transform so it changes
   nothing about the layout, and it is removed once the grid
   stacks into one column. */
.cl-featrow-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 46px 56px;
  max-width: 980px;
  margin: 0 auto;
  transform: translateX(30px);
}
.cl-featrow { display: flex; align-items: flex-start; gap: 20px; }

/* App icon tiles.
   Each row sets three values below: two gradient stops and the shadow
   colour as raw numbers, so one rule here can build the gradient, the
   coloured drop shadow and the highlight for all six. */
.cl-featrow .cl-icon {
  width: 56px; height: 56px;
  border-radius: 15px;
  margin: 0; flex-shrink: 0;
  color: var(--cl-white);
  background-image: linear-gradient(145deg, var(--tile-lit) 0%, var(--tile-deep) 100%);
  /* A coloured shadow underneath, and a hairline of light along the
     top edge so the tile looks lit from above rather than printed on */
  box-shadow:
    0 6px 14px rgba(var(--tile-rgb), 0.34),
    0 1px 2px rgba(26, 22, 18, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cl-featrow .cl-icon svg { stroke-width: 2.1; }

/* Lifts and tips very slightly, like picking a tile up off the page */
.cl-featrow:hover .cl-icon {
  transform: translateY(-4px) rotate(-3deg);
  box-shadow:
    0 12px 22px rgba(var(--tile-rgb), 0.44),
    0 2px 4px rgba(26, 22, 18, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
/* Bigger tile wants a bigger glyph, set here so the markup
   does not need touching */
.cl-featrow .cl-icon svg { width: 26px; height: 26px; }

.cl-featrow h3 {
  font-size: 19px; font-weight: 700;
  letter-spacing: -0.3px; margin-bottom: 7px;
}
.cl-featrow p {
  font-size: 15px; color: var(--cl-muted); line-height: 1.7;
}

/* The six tiles. Lit stop, deep stop, and the shadow colour as raw
   numbers so it can be used inside rgba() above. */
.cl-featrow--amber  { --tile-lit: #FFC65F; --tile-deep: #F0980E; --tile-rgb: 240,152,14; }
.cl-featrow--green  { --tile-lit: #55C592; --tile-deep: #23845A; --tile-rgb: 35,132,90; }
.cl-featrow--violet { --tile-lit: #AC85E2; --tile-deep: #7549BE; --tile-rgb: 117,73,190; }
.cl-featrow--blue   { --tile-lit: #6FA0E4; --tile-deep: #3667AF; --tile-rgb: 54,103,175; }
.cl-featrow--teal   { --tile-lit: #52C8DB; --tile-deep: #17869C; --tile-rgb: 23,134,156; }
.cl-featrow--rose   { --tile-lit: #E48CB0; --tile-deep: #BD4E78; --tile-rgb: 189,78,120; }

@media (max-width: 860px) {
  /* One column, so the optical nudge is not needed and would
     just push the text off centre */
  .cl-featrow-grid { grid-template-columns: 1fr; gap: 34px; transform: none; }
}
@media (max-width: 480px) {
  .cl-featrow .cl-icon { width: 48px; height: 48px; border-radius: 13px; }
  .cl-featrow .cl-icon svg { width: 22px; height: 22px; }
}

/* ---- Why Classly: a list you tap to open ------------------
   Built on the browser's own details and summary, so it opens
   and closes with no JavaScript. The icon colours come from the
   cl-featrow--amber (and so on) classes just above.
   ----------------------------------------------------------- */
/* Phones only. Desktop shows the two column rows instead,
   the switch is in the phones section at the end of this file. */
.cl-why-phone { display: none; }

.cl-why-pill {
  display: inline-block;
  font-size: 13.5px; font-weight: 700; color: var(--cl-ink);
  background: var(--cl-white);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-r-pill);
  padding: 7px 16px; margin-bottom: 18px;
  box-shadow: 0 4px 14px rgba(26,22,18,0.07);
}

.cl-acc {
  max-width: 720px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px;
}
.cl-acc-item {
  background: var(--cl-cream);
  border: 1px solid transparent;
  border-radius: var(--cl-r);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* The open one lifts onto white */
.cl-acc-item[open] {
  background: var(--cl-white);
  border-color: var(--cl-line);
  box-shadow: var(--cl-shadow);
}

.cl-acc-item summary {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  cursor: pointer; list-style: none;
}
/* Hide the browser's own little triangle */
.cl-acc-item summary::-webkit-details-marker { display: none; }
.cl-acc-item summary:focus-visible {
  outline: 2px solid var(--cl-amber); outline-offset: 2px;
  border-radius: var(--cl-r);
}

.cl-acc-icon {
  width: 38px; height: 38px; border-radius: 11px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--cl-white);
  background-image: linear-gradient(145deg, var(--tile-lit) 0%, var(--tile-deep) 100%);
  box-shadow: 0 4px 10px rgba(var(--tile-rgb), 0.30), inset 0 1px 0 rgba(255,255,255,0.45);
}
.cl-acc-icon svg { width: 19px; height: 19px; }

.cl-acc-title {
  flex: 1;
  font-family: var(--cl-font-head);
  font-size: 17px; font-weight: 700; letter-spacing: -0.3px;
}
.cl-acc-arrow { flex-shrink: 0; color: var(--cl-muted); transition: transform 0.25s ease; }
.cl-acc-item[open] .cl-acc-arrow { transform: rotate(90deg); }

/* Lines up under the title, not the icon */
.cl-acc-item p {
  padding: 0 22px 18px 70px;
  font-size: 15px; color: var(--cl-muted); line-height: 1.7;
}
.cl-acc-item[open] p { animation: clFadeIn 0.3s ease; }

/* A wide feature block with words on one side and a picture on the other */
.cl-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: center;
}
.cl-split + .cl-split { margin-top: 88px; }
.cl-split--flip .cl-split-copy { order: 2; }
.cl-split--flip .cl-split-art  { order: 1; }
.cl-split-copy .cl-h2 { font-size: clamp(26px, 2.8vw, 33px); margin-bottom: 16px; }
.cl-split-copy p { font-size: 16px; color: var(--cl-muted); line-height: 1.75; }

/* Tick list */
.cl-ticks { list-style: none; margin-top: 22px; }
.cl-ticks li {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 7px 0; font-size: 15px; font-weight: 500;
}
.cl-ticks svg { flex-shrink: 0; margin-top: 3px; color: var(--cl-amber-deep); }

/* ============================================================
   12b. NOTE PANELS
   ------------------------------------------------------------
   A preview of what a tutor's finished notes look like:
   vocabulary, phrases, pronunciation and picture cards.

   These are built in HTML rather than being screenshots, so
   they stay sharp at any size, weigh almost nothing and can
   never go out of date with the real product.

   The colours are lifted straight from lesson-review.css so
   the preview matches what a tutor actually receives.
   ============================================================ */
.cl-nt { max-width: 940px; margin: 0 auto; }

/* ---- Tabs ---- */
.cl-nt-tabs {
  display: flex; justify-content: center;
  gap: 8px; flex-wrap: wrap;
  margin-bottom: 26px;
}
.cl-nt-tab {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 700;
  color: var(--cl-muted);
  background: var(--cl-white);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-r-pill);
  padding: 9px 20px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.16s ease;
}
.cl-nt-tab:hover { color: var(--cl-ink); transform: translateY(-1px); }
.cl-nt-tab.is-active {
  color: var(--cl-ink);
  border-color: currentColor;
  background: var(--cl-amber-mist);
}
/* Each tab carries the colour of the panel it opens */
.cl-nt-tab[data-panel="vocab"].is-active  { color: #A26E17; background: #FDF3E2; border-color: #F5A623; }
.cl-nt-tab[data-panel="phrases"].is-active{ color: #6B45A5; background: #F2ECFB; border-color: #8A63C0; }
.cl-nt-tab[data-panel="grammar"].is-active{ color: #3A5A96; background: #EAF2FC; border-color: #4A6FB5; }
.cl-nt-tab[data-panel="pron"].is-active   { color: #1F7C8C; background: #E4F4F7; border-color: #2FA4B8; }
.cl-nt-tab[data-panel="pics"].is-active   { color: #A26E17; background: #FDF3E2; border-color: #F5A623; }

/* ---- Panels ---- */
.cl-nt-panel { display: none; }
/* A real swipe: the old panel slides out to the left while the new one
   comes in from the right. The one on its way out is taken out of the
   flow so the two overlap instead of stacking, which is what the stage
   wrapper is for. body already hides sideways overflow, so neither can
   make the page scroll sideways. */
.cl-nt-stage { position: relative; }

.cl-nt-panel.is-active {
  display: block;
  animation: clSwipeIn 0.75s cubic-bezier(0.33, 0, 0.2, 1);
}
.cl-nt-panel.is-leaving {
  display: block;
  position: absolute; top: 0; left: 0; right: 0;
  pointer-events: none;
  animation: clSwipeOut 0.75s cubic-bezier(0.33, 0, 0.2, 1) forwards;
}
@keyframes clSwipeIn {
  from { opacity: 0; transform: translateX(90px); }
  to   { opacity: 1; transform: none; }
}
@keyframes clSwipeOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateX(-90px); }
}

.cl-nt-card {
  background: var(--cl-white);
  border: 1px solid;
  border-radius: var(--cl-r);
  overflow: hidden;
  box-shadow: var(--cl-shadow);
}
.cl-nt--vocab   .cl-nt-card { border-color: #F6E1C0; }
.cl-nt--phrases .cl-nt-card { border-color: #E3D7F3; }
.cl-nt--grammar .cl-nt-card { border-color: #CFE0F0; }
.cl-nt--pron    .cl-nt-card { border-color: #CBE6EC; }
.cl-nt--pics    .cl-nt-card { border-color: #F6E1C0; }

/* The coloured strip along the top of each panel.

   Solid colour, matching the window bars elsewhere on the page,
   with the same see-through gradient shade over it. The app uses
   a pale wash for these instead, because there five panels stack
   down one page and five solid bands read as heavy. Here the
   panels are tabbed, so only one is ever on screen. */
.cl-nt-head {
  display: flex; align-items: center; justify-content: center;
  gap: 11px; padding: 15px 20px;
  border-bottom: 1px solid rgba(26,22,18,0.10);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(0,0,0,0.07) 100%);
  font-size: 17px; font-weight: 700;
  font-family: var(--cl-font-head);
  color: var(--cl-white);
}
.cl-nt--vocab   .cl-nt-head { background-color: #F5A623; }
.cl-nt--phrases .cl-nt-head { background-color: #8A63C0; }
.cl-nt--grammar .cl-nt-head { background-color: #4A6FB5; }
.cl-nt--pron    .cl-nt-head { background-color: #2FA4B8; }
.cl-nt--pics    .cl-nt-head { background-color: #F5A623; }

/* The icon tile and the count sit on the colour, so they go white */
.cl-nt--vocab   .cl-nt-headicon { color: #B8740A; }
.cl-nt--phrases .cl-nt-headicon { color: #7F52BC; }
.cl-nt--grammar .cl-nt-headicon { color: #3A5A96; }
.cl-nt--pron    .cl-nt-headicon { color: #1F7C8C; }
.cl-nt--pics    .cl-nt-headicon { color: #B8740A; }

.cl-nt--vocab   .cl-nt-count,
.cl-nt--pics    .cl-nt-count { color: #8A5E10; }
.cl-nt--phrases .cl-nt-count { color: #6B45A5; }
.cl-nt--grammar .cl-nt-count { color: #3A5A96; }
.cl-nt--pron    .cl-nt-count { color: #1F7C8C; }

.cl-nt-headicon {
  width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cl-white); flex-shrink: 0;
}
.cl-nt-count {
  min-width: 24px; height: 24px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cl-white); border-radius: var(--cl-r-pill);
  font-size: 13px; font-weight: 700;
}

/* ---- The table inside vocabulary and phrases ---- */
.cl-nt-scroll { overflow-x: auto; }
.cl-nt-table { width: 100%; min-width: 620px; border-collapse: collapse; }
.cl-nt-table th {
  text-align: left; padding: 12px 20px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  border-bottom: 1px solid;
}
.cl-nt--vocab   .cl-nt-table th { color: #D2A45A; border-bottom-color: #F6E1C0; }
.cl-nt--phrases .cl-nt-table th { color: #A98CD3; border-bottom-color: #E3D7F3; }
.cl-nt--grammar .cl-nt-table th { color: #8FB3DA; border-bottom-color: #CFE0F0; }

.cl-nt-table td {
  padding: 14px 20px; font-size: 14.5px;
  vertical-align: top; border-top: 1px solid;
}
.cl-nt--vocab   .cl-nt-table td { border-top-color: #F6E1C0; }
.cl-nt--phrases .cl-nt-table td { border-top-color: #E3D7F3; }
.cl-nt--grammar .cl-nt-table td { border-top-color: #CFE0F0; }
/* Banded rows, the same as the real notes page */
.cl-nt--vocab   .cl-nt-table tbody tr:nth-child(even) { background: #FDFAF4; }
.cl-nt--phrases .cl-nt-table tbody tr:nth-child(even) { background: #FBF9FE; }
.cl-nt--grammar .cl-nt-table tbody tr:nth-child(even) { background: #F8FAFD; }

.cl-nt-word { font-weight: 700; color: var(--cl-ink); white-space: nowrap; }
.cl-nt-mean { color: var(--cl-muted); }
.cl-nt-eg   { color: var(--cl-green); }

/* The little speaker button beside a word */
.cl-nt-say {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 9px; vertical-align: -5px; flex-shrink: 0;
}
.cl-nt--vocab .cl-nt-say { background: #E4F4F7; color: #2FA4B8; }

/* ---- Pronunciation cards ---- */
.cl-nt-pron-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; padding: 26px 24px;
}
.cl-nt-pron-card {
  border: 1px solid #CBE6EC; border-radius: var(--cl-r);
  padding: 22px 16px; text-align: center;
}
.cl-nt-pron-word { font-size: 17px; font-weight: 700; }
.cl-nt-pron-lbl  { font-size: 13px; color: var(--cl-faint); margin: 6px 0 8px; }
.cl-nt-pron-say  { font-size: 17px; font-weight: 700; color: #1F7C8C; letter-spacing: 0.3px; }
.cl-nt-pron-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #2FA4B8; color: var(--cl-white);
  margin-top: 16px;
}

/* ---- Picture cards ---- */
.cl-nt-pics-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; padding: 24px;
}
.cl-nt-pic {
  border: 1px solid #F6E1C0; border-radius: var(--cl-r);
  overflow: hidden; background: var(--cl-white);
  display: flex; flex-direction: column;
}
.cl-nt-pic-img {
  background: #FFFBF3; padding: 12px;
  display: flex; align-items: center; justify-content: center;
}
.cl-nt-pic-img img { width: 100%; height: auto; }
.cl-nt-pic-body { padding: 12px 14px 16px; border-top: 1px solid #F6E1C0; }
.cl-nt-pic-word {
  font-size: 15px; font-weight: 700; text-align: center;
  margin-bottom: 8px;
}
.cl-nt-pic-mean { font-size: 13px; color: var(--cl-muted); line-height: 1.55; margin-bottom: 8px; }
.cl-nt-pic-eg   { font-size: 13px; color: var(--cl-green); line-height: 1.55; }

/* A quiet line under the panel explaining what you are looking at */
.cl-nt-note {
  text-align: center; margin-top: 20px;
  font-size: 14px; color: var(--cl-faint);
}

@media (max-width: 980px) {
  .cl-nt-pics-grid { grid-template-columns: repeat(2, 1fr); }
  .cl-nt-pron-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cl-nt-tab { font-size: 13.5px; padding: 8px 15px; }
  .cl-nt-pics-grid, .cl-nt-pron-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   12c. THE STUDENT SHOWCASE
   ------------------------------------------------------------
   The For Students page reuses the tabbed note panels above,
   with six panels of its own. Only the two colours that are not
   already defined need adding, the rest borrow the vocabulary,
   phrases, grammar and pronunciation sets.
   ============================================================ */
.cl-nt-tab[data-panel="notes"].is-active     { color: #A26E17; background: #FDF3E2; border-color: #F5A623; }
.cl-nt-tab[data-panel="hw"].is-active        { color: #A33F65; background: #FAECF1; border-color: #C2557E; }
.cl-nt-tab[data-panel="games"].is-active     { color: #2B6E46; background: #E8F7EE; border-color: #3FA476; }
.cl-nt-tab[data-panel="review"].is-active    { color: #6B45A5; background: #F2ECFB; border-color: #8A63C0; }
.cl-nt-tab[data-panel="progress"].is-active  { color: #1F7C8C; background: #E4F4F7; border-color: #2FA4B8; }
.cl-nt-tab[data-panel="community"].is-active { color: #3A5A96; background: #EAF2FC; border-color: #4A6FB5; }

.cl-nt--hw    .cl-nt-card { border-color: #EFD3DE; }
.cl-nt--hw    .cl-nt-head { background-color: #C2557E; }
.cl-nt--hw    .cl-nt-headicon { color: #A33F65; }
.cl-nt--hw    .cl-nt-count    { color: #A33F65; }

.cl-nt--games .cl-nt-card { border-color: #C8E6D3; }
.cl-nt--games .cl-nt-head { background-color: #3FA476; }
.cl-nt--games .cl-nt-headicon { color: #2B6E46; }
.cl-nt--games .cl-nt-count    { color: #2B6E46; }

/* ---- Fill in the blanks ---- */
.cl-fb { display: grid; grid-template-columns: 1fr 190px; gap: 20px; padding: 22px 24px; }
.cl-fb-rows { display: flex; flex-direction: column; gap: 10px; }
.cl-fb-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  border: 1px solid var(--cl-line); border-radius: 11px;
  padding: 12px 14px; font-size: 14.5px; color: var(--cl-ink);
}
/* The gap the student types into */
.cl-fb-gap {
  display: inline-block; min-width: 92px; height: 26px;
  border: 1px solid #EFD3DE; border-radius: 7px; background: #FDF7F9;
}
.cl-fb-side {
  align-self: start;
  border: 1px solid var(--cl-line); border-radius: 12px;
  padding: 14px; background: var(--cl-cream);
}
.cl-fb-side-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--cl-faint); margin-bottom: 10px;
}
.cl-fb-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-fb-pill {
  font-size: 12.5px; font-weight: 700; color: var(--cl-amber-deep);
  border: 1px solid var(--cl-amber); border-radius: var(--cl-r-pill);
  padding: 3px 11px; background: var(--cl-white);
}

/* ---- Picture question ---- */
.cl-pq { padding: 22px 24px 26px; text-align: center; }
.cl-pq-ask { font-size: 14px; color: var(--cl-muted); margin-bottom: 10px; }
.cl-pq-img { width: 150px; height: auto; margin: 0 auto 18px; }
.cl-pq-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 520px; margin: 0 auto; }
.cl-pq-opt {
  font-size: 15px; font-weight: 700; color: var(--cl-ink);
  border: 1px solid var(--cl-amber); border-radius: 11px;
  padding: 13px 12px; background: var(--cl-white);
}
.cl-pq-opt--right { border-color: #3FA476; background: #EFF9F3; color: #256B49; }
.cl-pq-said { margin-top: 14px; font-size: 14px; font-weight: 700; color: #2B6E46; }

/* ---- Review Centre ---- */
.cl-rc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 20px 22px 0; }
.cl-rc-tile {
  border: 1px solid var(--cl-line); border-radius: 12px;
  padding: 14px 16px; background: var(--cl-white);
}
.cl-rc-num { font-family: var(--cl-font-head); font-size: 24px; font-weight: 800; line-height: 1.1; }
.cl-rc-num--todo  { color: var(--cl-amber-deep); }
.cl-rc-num--test  { color: #4A6FB5; }
.cl-rc-num--done  { color: #2B6E46; }
.cl-rc-lbl { font-size: 12.5px; color: var(--cl-muted); margin-top: 2px; }

.cl-rc-subjects {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 18px 22px 12px;
}
.cl-rc-subject {
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--cl-muted);
  background: var(--cl-cream); border-radius: var(--cl-r-pill);
  padding: 5px 11px;
}
.cl-rc-subject.is-on { background: #F2ECFB; color: #6B45A5; }
.cl-rc-subject em {
  font-style: normal; background: var(--cl-white);
  border-radius: var(--cl-r-pill); padding: 0 5px; margin-left: 4px;
}

.cl-rc-word {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 22px; font-size: 14.5px; font-weight: 700;
  border-top: 1px solid var(--cl-line);
}
.cl-rc-word span { font-size: 12.5px; font-weight: 600; color: var(--cl-faint); }

/* ---- Scores ---- */
.cl-sc-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 18px 22px 12px;
}
.cl-sc-title { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #1F7C8C; }
.cl-sc-avg { font-size: 12.5px; color: var(--cl-muted); }
.cl-sc-avg strong {
  background: #E4F4F7; color: #1F7C8C;
  border-radius: var(--cl-r-pill); padding: 2px 9px; margin-right: 6px;
}
/* Eli's written summary */
.cl-sc-coach {
  margin: 0 22px 14px; padding: 14px 16px;
  background: var(--cl-amber-mist); border: 1px solid rgba(245,166,35,0.3);
  border-radius: 12px;
}
.cl-sc-coach-who {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--cl-amber-deep); margin-bottom: 7px;
}
.cl-sc-coach p { font-size: 13px; line-height: 1.7; color: var(--cl-ink-soft); }

.cl-sc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 22px; border-top: 1px solid var(--cl-line);
}
.cl-sc-face {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #E8F7EE; color: #2B6E46;
}
.cl-sc-face--ok { background: var(--cl-amber-soft); color: var(--cl-amber-deep); }
.cl-sc-name { flex: 1; font-size: 14px; font-weight: 700; }
.cl-sc-date { font-size: 12px; color: var(--cl-faint); font-weight: 400; display: block; }
.cl-sc-pct {
  font-size: 12.5px; font-weight: 700;
  background: #E8F7EE; color: #2B6E46;
  border-radius: var(--cl-r-pill); padding: 3px 10px;
}
.cl-sc-pct--ok { background: var(--cl-amber-soft); color: var(--cl-amber-deep); }

/* ---- Community ---- */
.cl-cm { padding: 22px 24px 24px; }
.cl-cm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
/* The two challenges take a colour each, so the panel is not one
   flat wash of amber */
.cl-cm-card { border: 1px solid; border-radius: 14px; padding: 18px 18px 20px; }
.cl-cm-card--speak  { background: var(--cl-amber-mist); border-color: rgba(245,166,35,0.4); }
.cl-cm-card--listen { background: #EFF9FB;             border-color: rgba(47,164,184,0.35); }

.cl-cm-icon {
  width: 34px; height: 34px; border-radius: 10px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cl-white); color: var(--cl-amber-deep);
}
.cl-cm-icon--listen { color: #1F7C8C; }

.cl-cm-card h4 { font-family: var(--cl-font-head); font-size: 16px; font-weight: 800; margin-bottom: 5px; }
.cl-cm-card p  { font-size: 13px; color: var(--cl-muted); line-height: 1.6; }

/* A little reward tag, so the point of it is obvious at a glance */
.cl-cm-pts {
  display: inline-block; margin-top: 10px;
  font-size: 11.5px; font-weight: 700;
  border-radius: var(--cl-r-pill); padding: 3px 10px;
  background: var(--cl-white); color: var(--cl-amber-deep);
}
.cl-cm-card--listen .cl-cm-pts { color: #1F7C8C; }

/* ---- Leaderboard ----
   Warm and celebratory rather than the espresso it used to be, and
   showing three real places instead of just naming itself. */
.cl-cm-board {
  border-radius: 14px; padding: 16px 18px;
  background-color: var(--cl-amber);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(0,0,0,0.07) 100%);
  color: var(--cl-ink);
}
.cl-cm-board-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cl-cm-board-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--cl-white); color: var(--cl-amber-deep);
}
.cl-cm-board h4 { font-family: var(--cl-font-head); font-size: 16px; font-weight: 800; }
.cl-cm-board p  { font-size: 12.5px; color: rgba(26,22,18,0.62); }

.cl-cm-ranks { list-style: none; display: flex; flex-direction: column; gap: 7px; padding: 0; margin: 0; }
.cl-cm-rank {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.72);
  border-radius: 12px; padding: 9px 14px;
  font-size: 13.5px; font-weight: 700;
  box-shadow: 0 1px 2px rgba(120,70,0,0.08);
  transition: transform .15s ease;
}
.cl-cm-rank:hover { transform: translateX(3px); }
/* First place sits on solid white and lifts off the board */
.cl-cm-rank--1 { background: var(--cl-white); box-shadow: 0 4px 12px rgba(150,90,0,0.18); }

/* Medals. A fixed size that never stretches, with a shine and a
   thin inner ring so they read as gold, silver and bronze. */
.cl-cm-pos {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 900; color: var(--cl-white);
  text-shadow: 0 1px 1px rgba(0,0,0,0.22);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55), 0 2px 5px rgba(0,0,0,0.18);
  background: var(--cl-faint);
}
.cl-cm-pos--1 { background: linear-gradient(145deg, #FFD95A 0%, #E8A316 100%); }
.cl-cm-pos--2 { background: linear-gradient(145deg, #E6E3DE 0%, #A29A91 100%); }
.cl-cm-pos--3 { background: linear-gradient(145deg, #E8B07F 0%, #B06D38 100%); }

/* Name on top, points bar underneath. Only this part stretches. */
.cl-cm-who  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cl-cm-name { display: flex; align-items: center; gap: 6px; }
.cl-cm-crown { color: #E8A316; flex-shrink: 0; }

/* How close each person is to the leader */
.cl-cm-bar {
  display: block; height: 5px; border-radius: 999px;
  background: rgba(160,100,0,0.14); overflow: hidden;
}
.cl-cm-bar i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #F5A623, #E07B0C);
}

/* Points in a small pill so they read as a score */
.cl-cm-rank em {
  flex-shrink: 0; font-style: normal;
  font-size: 12px; font-weight: 800; color: var(--cl-amber-deep);
  background: var(--cl-amber-mist);
  border-radius: var(--cl-r-pill); padding: 3px 10px;
}

@media (prefers-reduced-motion: reduce) {
  .cl-cm-rank { transition: none; }
  .cl-cm-rank:hover { transform: none; }
}

@media (max-width: 700px) {
  .cl-fb { grid-template-columns: 1fr; }
  .cl-pq-opts, .cl-cm-grid, .cl-rc-tiles { grid-template-columns: 1fr; }
}

/* ============================================================
   13. NUMBERED STEPS
   ============================================================ */
.cl-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cl-step { position: relative; padding-top: 6px; text-align: center; }
.cl-step-num {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  /* House orange, the same shade the buttons carry */
  background-color: var(--cl-amber);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(0,0,0,0.07) 100%);
  color: var(--cl-ink);
  font-size: 15px; font-weight: 700;
  margin: 0 auto 18px;
}
.cl-step h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.cl-step p  { font-size: 14.5px; color: var(--cl-muted); line-height: 1.7; }
/* Dotted line joining the steps. The circles are centred now, so the
   line runs from the edge of one circle across to the next, which
   means reaching past this step's own box on both sides. */
.cl-step:not(:last-child)::after {
  content: '';
  position: absolute; top: 19px;
  left: calc(50% + 28px);
  right: calc(-50% - 8px);
  border-top: 2px dashed var(--cl-line-med);
}

/* ============================================================
   13b. WHAT TUTORS ARE REPORTING
   ------------------------------------------------------------
   Big numbers in white cards that count up as they scroll into
   view (marketing.js). Phones only for now: it takes the place
   of the Lesson Review and Progress report blocks there. The
   switch is in the phones section at the end of this file.
   ============================================================ */
.cl-results { display: none; }
.cl-results-grid { display: grid; gap: 14px; }

.cl-result {
  background: var(--cl-white);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-r-lg);
  padding: 24px 22px 22px;
  box-shadow: var(--cl-shadow);
}
.cl-result-val {
  font-family: var(--cl-font-head);
  font-size: 50px; font-weight: 800; line-height: 1;
  letter-spacing: -1.6px;
  color: var(--cl-amber-hot);
}
/* Same orange shine as "Eli does the rest." in the hero */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .cl-result-val {
    background-image: linear-gradient(96deg, #E8630A 0%, #F5A623 70%, #F7B955 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
/* Keeps each digit the same width, so nothing jumps while counting */
.cl-result-val span { font-variant-numeric: tabular-nums; }
/* Small "Up to" line sitting just above a number */
.cl-result-pre {
  font-family: var(--cl-font-head);
  font-size: 12px; font-weight: 800;
  letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--cl-muted);
  margin-bottom: 4px;
}

.cl-result-lbl {
  margin-top: 12px;
  font-family: var(--cl-font-head);
  font-size: 13px; font-weight: 800;
  letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--cl-amber-hot);
}
.cl-result p {
  margin-top: 8px;
  font-size: 14.5px; color: var(--cl-muted); line-height: 1.6;
}

/* ============================================================
   14. STAT BAND AND CLOSING CALL TO ACTION
   ============================================================ */
.cl-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 30px; text-align: center;
}
.cl-band .cl-stat-val { font-size: 36px; color: var(--cl-amber); }
.cl-band .cl-stat-lbl { font-size: 14px; color: rgba(255,255,255,0.6); }
/* Same band, but holding short phrases instead of numbers */
.cl-band--words .cl-stat-val { font-size: 20px; color: var(--cl-amber); margin-bottom: 6px; }
.cl-band--words .cl-stat-lbl { line-height: 1.65; }

/* Espresso rather than the near black the footer uses. The two used to
   be the same colour, so the bottom of the page read as one heavy slab
   with a gap in it. Warmer and a shade lighter makes them read as two
   layers instead. */
.cl-cta {
  position: relative; overflow: hidden;
  background: #2A2018; color: var(--cl-white);
  border-radius: var(--cl-r-lg);
  padding: 70px 56px;
  text-align: center;
}
.cl-cta .cl-h2 { color: var(--cl-white); margin-bottom: 16px; }
.cl-cta p { color: rgba(255,255,255,0.68); font-size: 17px; max-width: 520px; margin: 0 auto 32px; }
.cl-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* Named with .cl-cta in front so it beats ".cl-cta p" above, whose
   margin shorthand was resetting this note's top margin to zero and
   leaving it jammed against the buttons */
.cl-cta .cl-cta-note {
  margin: 22px 0 0;
  font-size: 13.5px; color: rgba(255,255,255,0.45);
}
.cl-cta-note a { color: var(--cl-amber); text-decoration: underline; }

/* ============================================================
   15. RESPONSIVE FOR THE BLOCKS ABOVE
   ============================================================ */
@media (max-width: 980px) {
  .cl-hero { padding: 56px 0 72px; }
  .cl-hero-grid { grid-template-columns: 1fr; gap: 52px; }
  .cl-mock { max-width: 460px; }
  .cl-chip--tr { right: -10px; }
  .cl-chip--bl { left: -10px; bottom: -30px; }

  .cl-grid--3 { grid-template-columns: repeat(2, 1fr); }

  .cl-split { grid-template-columns: 1fr; gap: 30px; }
  .cl-split + .cl-split { margin-top: 60px; }
  .cl-split--flip .cl-split-copy { order: 1; }
  .cl-split--flip .cl-split-art  { order: 2; }

  .cl-steps { grid-template-columns: 1fr; gap: 30px; }
  .cl-step:not(:last-child)::after { display: none; }

  .cl-band { grid-template-columns: repeat(2, 1fr); gap: 34px; }

  /* Backup only: marketing.js sizes the cards to the longest review */
  /* .cl-rv-stage { height: 400px; } */
  /* .cl-rv-card { min-height: 400px; padding: 38px 30px 28px; } */
  .cl-rv-stage { height: 360px; }
  .cl-rv-card { min-height: 360px; padding: 38px 30px 28px; }
}
@media (max-width: 560px) {
  .cl-hero-stats { flex-wrap: wrap; gap: 18px; }
  .cl-hero-stats .cl-stat { flex: 0 0 100%; padding: 0; }
  .cl-hero-stats .cl-stat + .cl-stat { padding-left: 0; border-left: none; }

  .cl-grid--3, .cl-grid--2 { grid-template-columns: 1fr; }
  .cl-band { grid-template-columns: 1fr; }

  .cl-cta { padding: 48px 26px; }
  /* Backup only: marketing.js sizes the cards to the longest review */
  /* .cl-rv-stage { height: 440px; } */
  /* .cl-rv-card { min-height: 440px; } */
  .cl-rv-stage { height: 380px; }
  .cl-rv-card { min-height: 380px; }
  .cl-rv-mark { display: none; }
}

/* ============================================================
   15b. TRUST STRIP
   ------------------------------------------------------------
   A thin line of credibility under the hero.
   ============================================================ */
.cl-trust {
  border-top: 1px solid var(--cl-line);
  border-bottom: 1px solid var(--cl-line);
  background: var(--cl-amber-mist);
  padding: 20px 0;
}
.cl-trust-row {
  display: flex; align-items: center; justify-content: center;
  gap: 14px 34px; flex-wrap: wrap;
  font-size: 14.5px; font-weight: 600; color: var(--cl-ink-soft);
}
.cl-trust-item { display: flex; align-items: center; gap: 9px; }
.cl-trust-item svg { color: var(--cl-amber-deep); flex-shrink: 0; }

/* ============================================================
   15d. SUPPORTED BY
   ------------------------------------------------------------
   Programmes and organisations backing Classly. Deliberately
   quiet: no cards, no logos, no shouting. This is company
   credibility and is kept well away from the product proof
   in the trust strip above.
   ============================================================ */
.cl-supported {
  border-top: 1px solid var(--cl-line);
  padding-top: 40px;
}
.cl-supported-lbl {
  display: block; text-align: center;
  font-size: 12px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--cl-faint);
  margin-bottom: 30px;
}
/* Three equal columns rather than a centred flex row. With flex the
   items size to their own text, so the middle one only lands under
   the "Supported by" label by luck. Equal columns guarantee it. */
.cl-supported-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 30px 40px;
  align-items: start;
  max-width: 900px; margin: 0 auto;
}
.cl-supported-item { text-align: center; }

/* Partner logo above each name. Height is fixed and width is free,
   so logos of different shapes still line up along one baseline. */
.cl-supported-logo {
  height: 40px; width: auto; max-width: 150px;
  object-fit: contain;
  margin: 0 auto 14px;
}
.cl-supported-name {
  font-family: var(--cl-font-head);
  font-size: 15.5px; font-weight: 700;
  color: var(--cl-ink-soft);
  margin-bottom: 4px;
}
.cl-supported-sub {
  font-size: 13.5px; line-height: 1.6;
  color: var(--cl-faint);
}

@media (max-width: 700px) {
  .cl-supported-row { grid-template-columns: 1fr; gap: 30px; }
}

/* ============================================================
   15c. FOUNDER STRIP
   ------------------------------------------------------------
   Small photo, one line, and a way through to the story.
   ============================================================ */
.cl-founder {
  display: flex; align-items: center; gap: 30px;
  background: var(--cl-white);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-r-lg);
  padding: 32px 36px;
  box-shadow: var(--cl-shadow-sm);
}
.cl-founder-photo {
  width: 108px; height: 108px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  background: var(--cl-amber-soft);
  box-shadow: 0 0 0 4px var(--cl-amber-soft);
}
.cl-founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.cl-founder-copy p {
  font-size: 18px; font-weight: 600; line-height: 1.55;
  letter-spacing: -0.3px; margin-bottom: 12px;
}
.cl-founder-who { font-size: 14px; color: var(--cl-muted); }
.cl-founder-who strong { color: var(--cl-ink); font-weight: 700; }
.cl-founder-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; font-size: 14.5px; font-weight: 700;
  color: var(--cl-amber-deep);
}
.cl-founder-link:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .cl-founder { flex-direction: column; text-align: center; gap: 20px; padding: 28px 24px; }
  .cl-founder-copy p { font-size: 16.5px; }
}

/* ============================================================
   16. MY STORY
   ============================================================ */
.cl-story-grid {
  display: grid; grid-template-columns: 320px 1fr;
  gap: 56px; align-items: start;
}

/* The picture, or the placeholder standing in for it */
.cl-portrait {
  position: relative;
  border-radius: var(--cl-r-lg);
  overflow: hidden;
  background: var(--cl-amber-soft);
  border: 1px solid var(--cl-line);
  box-shadow: var(--cl-shadow);
  aspect-ratio: 4 / 5;
}
.cl-portrait img { width: 100%; height: 100%; object-fit: cover; }
/* Shown until a real photo is dropped in */
.cl-portrait-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  color: var(--cl-amber-deep); text-align: center; padding: 24px;
}
.cl-portrait-initial {
  width: 88px; height: 88px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cl-amber); color: var(--cl-white);
  font-size: 34px; font-weight: 700;
}
.cl-portrait-hint { font-size: 13px; font-weight: 600; opacity: 0.75; }

/* Facts beside the picture */
.cl-facts { margin-top: 22px; }
.cl-fact {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--cl-line);
  font-size: 14.5px;
}
.cl-fact:last-child { border-bottom: none; }
.cl-fact dt { color: var(--cl-muted); }
.cl-fact dd { font-weight: 700; text-align: right; }

/* Long reading text */
.cl-prose p {
  font-size: 17px; line-height: 1.8; color: var(--cl-ink-soft);
  margin-bottom: 20px;
}
.cl-prose p:last-child { margin-bottom: 0; }
.cl-prose h3 { font-size: 22px; font-weight: 700; margin: 38px 0 14px; letter-spacing: -0.5px; }

/* A line worth pulling out */
.cl-pull {
  border-left: 4px solid var(--cl-amber);
  background: var(--cl-amber-mist);
  border-radius: 0 var(--cl-r) var(--cl-r) 0;
  padding: 26px 30px;
  margin: 34px 0;
  font-size: 20px; font-weight: 700; line-height: 1.5;
  letter-spacing: -0.4px;
}

/* Signed off at the end of the story */
.cl-signoff {
  display: flex; align-items: center; gap: 14px;
  margin-top: 40px; padding-top: 26px;
  border-top: 1px solid var(--cl-line);
}
.cl-signoff-name { font-size: 16px; font-weight: 700; }
.cl-signoff-role { font-size: 14px; color: var(--cl-muted); }

/* Blocks waiting for the real words. Obvious on purpose. */
.cl-placeholder {
  border: 1.5px dashed rgba(245,166,35,0.65);
  background: var(--cl-amber-mist);
  border-radius: var(--cl-r);
  padding: 22px 24px;
  color: var(--cl-amber-deep);
  font-size: 15.5px; line-height: 1.75;
}
.cl-placeholder strong { display: block; margin-bottom: 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }

/* ============================================================
   17. OUR JOURNEY
   ============================================================ */
.cl-tl { position: relative; padding-left: 30px; }
/* The line running down the side */
.cl-tl::before {
  content: '';
  position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 2px; background: var(--cl-line-med);
}
.cl-tl-item { position: relative; padding-bottom: 42px; }
.cl-tl-item:last-child { padding-bottom: 0; }
.cl-tl-dot {
  position: absolute; left: -30px; top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--cl-amber);
  border: 3px solid var(--cl-cream);
  box-shadow: 0 0 0 2px var(--cl-amber);
}
.cl-section--white .cl-tl-dot { border-color: var(--cl-white); }
/* The newest entry gets a gentle pulse */
.cl-tl-item--now .cl-tl-dot { animation: clPulse 2.4s ease-in-out infinite; }
.cl-tl-date {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--cl-amber-deep);
  margin-bottom: 5px;
}
.cl-tl-title { font-size: 19px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 7px; }
.cl-tl-text  { font-size: 15px; color: var(--cl-muted); line-height: 1.72; max-width: 620px; }

/* Achievement tiles */
.cl-wins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cl-win {
  background: var(--cl-white);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-r);
  padding: 26px 24px;
  box-shadow: var(--cl-shadow-sm);
}
.cl-win-val {
  font-size: 32px; font-weight: 700; letter-spacing: -1px;
  color: var(--cl-amber-hot); line-height: 1.1;
}
.cl-win-lbl { font-size: 15px; font-weight: 700; margin-top: 8px; }
.cl-win-sub { font-size: 13.5px; color: var(--cl-muted); margin-top: 4px; line-height: 1.6; }

/* What is coming next */
.cl-next { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cl-next-item {
  display: flex; align-items: flex-start; gap: 13px;
  background: var(--cl-white);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-r-sm);
  padding: 17px 20px;
}
.cl-next-item svg { flex-shrink: 0; margin-top: 3px; color: var(--cl-amber-deep); }
.cl-next-item h4 { font-size: 15.5px; font-weight: 700; margin-bottom: 3px; }
.cl-next-item p  { font-size: 13.5px; color: var(--cl-muted); line-height: 1.6; }

/* ============================================================
   18. BOOK A DEMO
   ============================================================ */
.cl-demo-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: start;
}
.cl-panel {
  background: var(--cl-white);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-r-lg);
  padding: 34px 32px;
  box-shadow: var(--cl-shadow);
}
.cl-panel h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.6px; margin-bottom: 8px; }
.cl-panel p.cl-panel-sub { font-size: 15px; color: var(--cl-muted); margin-bottom: 26px; line-height: 1.7; }

.cl-field { margin-bottom: 18px; }
.cl-field label {
  display: block; font-size: 14px; font-weight: 700;
  margin-bottom: 7px;
}
.cl-field input, .cl-field select, .cl-field textarea {
  width: 100%;
  font-family: var(--cl-font); font-size: 15px;
  color: var(--cl-ink); background: var(--cl-cream);
  border: 1px solid transparent; border-radius: var(--cl-r-sm);
  padding: 12px 14px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.cl-field textarea { min-height: 96px; resize: vertical; }
.cl-field input:focus, .cl-field select:focus, .cl-field textarea:focus {
  outline: none; background: var(--cl-white); border-color: var(--cl-amber);
}
.cl-field input.is-invalid, .cl-field select.is-invalid {
  border-color: #C2410C; background: #FEF2F2;
}
.cl-field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cl-field-error { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: #C2410C; }
.cl-field-hint  { display: block; margin-top: 6px; font-size: 13px; color: var(--cl-faint); }

/* The thank you state after the form is sent */
.cl-sent { text-align: center; padding: 20px 0; }
.cl-sent-tick {
  width: 62px; height: 62px; border-radius: 50%;
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cl-green-soft); color: var(--cl-green);
}
.cl-sent h2 { margin-bottom: 10px; }
.cl-sent p  { font-size: 15.5px; color: var(--cl-muted); line-height: 1.7; margin-bottom: 24px; }

/* ============================================================
   18b. LEGAL PAGES
   ------------------------------------------------------------
   Privacy and Terms. Long text, easy to read, nothing clever.
   These styles replace the copy of them that used to sit
   inline in both views.
   ============================================================ */
.cl-legal {
  max-width: 780px; margin: 0 auto;
  background: var(--cl-white);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-r-lg);
  box-shadow: var(--cl-shadow-sm);
  padding: 48px 52px 54px;
}
.cl-legal h2 {
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.3px;
  margin: 38px 0 12px;
  color: var(--cl-ink);
}
.cl-legal h2:first-of-type { margin-top: 0; }
.cl-legal p, .cl-legal li {
  font-size: 15.5px; line-height: 1.8; color: var(--cl-ink-soft);
}
.cl-legal p { margin-bottom: 14px; }
.cl-legal ul { padding-left: 22px; margin: 10px 0 16px; }
.cl-legal li { margin-bottom: 7px; }
.cl-legal strong { color: var(--cl-ink); font-weight: 700; }
.cl-legal a { color: var(--cl-amber-deep); font-weight: 600; text-decoration: underline; }
.cl-legal a:hover { color: var(--cl-amber-hot); }
.cl-legal-divider {
  border: none; border-top: 1px solid var(--cl-line);
  margin: 34px 0;
}
/* The "last updated" line under the title */
.cl-legal-meta {
  font-size: 14px; color: var(--cl-faint);
  margin-top: 12px;
}

@media (max-width: 700px) {
  .cl-legal { padding: 32px 24px 36px; border-radius: var(--cl-r); }
}

/* ============================================================
   19. RESPONSIVE FOR THE PAGES ABOVE
   ============================================================ */
@media (max-width: 980px) {
  .cl-story-grid { grid-template-columns: 1fr; gap: 34px; }
  /* Centred once the photo sits above the story */
  .cl-portrait   { max-width: 300px; margin: 0 auto; }
  .cl-wins       { grid-template-columns: 1fr 1fr; }
  .cl-next       { grid-template-columns: 1fr; }
  .cl-demo-grid  { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 560px) {
  .cl-wins    { grid-template-columns: 1fr; }
  .cl-field-2 { grid-template-columns: 1fr; }
  .cl-panel   { padding: 26px 22px; }
  .cl-pull    { font-size: 18px; padding: 20px 22px; }
}

/* Respect a visitor's reduced motion setting */
@media (prefers-reduced-motion: reduce) {
  .cl-site *, .cl-site *::before, .cl-site *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================================
   20. PHONES
   ------------------------------------------------------------
   Makes the public pages tidier and less bulky on phones.
   Kept together here so desktop is never touched. This is the
   last block in the file, so it wins over the rules above.
   ============================================================ */
@media (max-width: 560px) {

  /* ---- Header: a floating white pill that stays on screen ---- */
  /* The bar itself goes see-through, so the page shows in the gap */
  .cl-nav,
  .cl-nav.is-stuck {
    height: auto;
    padding: 10px 12px 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
  }
  .cl-nav .cl-nav-inner {
    height: 56px; gap: 10px;
    padding: 0 8px 0 16px;
    background: var(--cl-white);
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-pill);
    box-shadow: 0 4px 16px rgba(26,22,18,0.07);
    transition: box-shadow 0.25s ease;
  }
  /* A little more shadow once the page moves under it */
  .cl-nav.is-stuck .cl-nav-inner { box-shadow: 0 8px 24px rgba(26,22,18,0.12); }

  .cl-brand img     { width: 28px; height: 28px; }
  .cl-brand-name    { font-size: 15px; }
  .cl-nav-actions   { gap: 2px; }
  /* Book a demo comes back on phones, inside the pill */
  .cl-nav-actions .cl-btn {
    display: inline-flex;
    font-size: 13px; padding: 8px 13px;
    border-radius: var(--cl-r-pill);
  }
  /* Sign in sits after Book a demo, as a pill the exact same size:
     same text size, weight, padding, rounding and a see-through
     1px border (the button has one too), with a soft grey fill */
  .cl-nav-signin {
    display: inline-flex; align-items: center;
    font-size: 13px; font-weight: 700;
    padding: 8px 13px;
    border: 1px solid transparent;
    border-radius: var(--cl-r-pill);
    background: rgba(26,22,18,0.06);
    white-space: nowrap;
  }
  .cl-burger { border: none; border-radius: 50%; }

  /* The menu drops down as a matching card under the pill */
  .cl-mobile-menu {
    top: 74px; left: 12px; right: 12px;
    background: var(--cl-white);
    border: 1px solid var(--cl-line);
    border-radius: 20px;
    padding: 8px 20px 18px;
    box-shadow: 0 12px 30px rgba(26,22,18,0.12);
  }

  /* ---- Less space, smaller headings ---- */
  .cl-wrap           { padding: 0 20px; }
  .cl-section        { padding: 56px 0; }
  .cl-section--tight { padding: 44px 0; }
  .cl-h1   { font-size: 34px; letter-spacing: -1.2px; }
  .cl-h2   { font-size: 26px; letter-spacing: -0.7px; }
  .cl-lead { font-size: 15.5px; line-height: 1.7; }
  .cl-head-block { margin-bottom: 34px; }
  .cl-head-mark  { width: 56px; height: 56px; margin: -12px auto 14px; }

  /* ---- Hero ---- */
  .cl-hero       { padding: 40px 0 56px; }
  .cl-hero-grid  { gap: 44px; }
  .cl-hero .cl-h1 { margin: 18px 0 14px; }
  .cl-hero-sub   { font-size: 16px; line-height: 1.65; }
  .cl-hero-btns  { gap: 10px; margin: 26px 0 14px; }
  .cl-hero-note  { font-size: 13px; }

  /* Two buttons share one row. On a very narrow phone they stack again. */
  .cl-hero-btns .cl-btn,
  .cl-cta-btns .cl-btn {
    flex: 1 1 130px;
    font-size: 14.5px; padding: 13px 12px;
  }

  /* Smaller app window and floating cards, so the cards stop
     covering the window's title bar */
  .cl-mock-body { padding: 12px 14px; }
  .cl-mock-row  { padding: 10px 2px; }
  .cl-mock-lbl  { font-size: 13.5px; }
  .cl-chip      { padding: 8px 12px; }
  .cl-chip-lbl  { font-size: 9px; }
  .cl-chip-val  { font-size: 17px; }
  .cl-chip-sub  { font-size: 10.5px; }
  .cl-chip--tr  { top: -34px; right: -6px; }
  /* Smaller "Notes ready" message under the dashboard picture */
  .cl-dash-toast      { font-size: 11px; right: 10px; bottom: -16px; padding: 6px 12px 6px 6px; }
  .cl-dash-toast span { width: 18px; height: 18px; }

  /* ---- The three stats: number on the left, sentence beside it ---- */
  .cl-hero-stats { flex-direction: column; flex-wrap: nowrap; gap: 0; margin-top: 44px; padding-top: 0; }
  .cl-hero-stats .cl-stat,
  .cl-hero-stats .cl-stat + .cl-stat {
    flex: none;
    display: grid; grid-template-columns: 100px 1fr;
    column-gap: 14px; align-items: baseline;
    padding: 14px 0;
    border-left: none;
  }
  .cl-hero-stats .cl-stat + .cl-stat { border-top: 1px solid var(--cl-line); }
  .cl-hero-stats .cl-stat-val { font-size: 19px; }
  .cl-hero-stats .cl-stat-lbl { font-size: 13.5px; margin-top: 0; }

  /* ---- Trust strip: three small columns, icon on top ---- */
  .cl-trust { padding: 16px 0; }
  .cl-trust-row {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px; align-items: start;
    font-size: 12px; line-height: 1.4; text-align: center;
  }
  .cl-trust-item { flex-direction: column; gap: 6px; }

  /* ---- Why Classly list ---- */
  /* Phones swap the two column rows for the tap-to-open list */
  .cl-why-phone    { display: block; }
  .cl-why-desktop  { display: none; }
  .cl-acc          { gap: 10px; }
  .cl-acc-item summary { padding: 12px 14px; gap: 12px; }
  .cl-acc-icon     { width: 34px; height: 34px; border-radius: 10px; }
  .cl-acc-icon svg { width: 17px; height: 17px; }
  .cl-acc-title    { font-size: 15.5px; }
  .cl-acc-item p   { padding: 0 16px 16px 60px; font-size: 14.5px; line-height: 1.6; }

  /* ---- What Eli does (old rows, kept in case we switch back) ---- */
  .cl-featrow-grid { gap: 28px; }
  .cl-featrow h3   { font-size: 17px; margin-bottom: 4px; }
  .cl-featrow p    { font-size: 14.5px; line-height: 1.6; }

  /* ---- What tutors are reporting ----
     Phones swap the Lesson Review and Progress report blocks
     for the counting-up stat cards */
  .cl-results { display: block; }
  .cl-looks   { display: none; }
  .cl-result-val { font-size: 46px; }

  /* ---- Words and picture blocks ---- */
  .cl-split + .cl-split { margin-top: 48px; }
  .cl-split-copy p { font-size: 15px; }
  .cl-ticks li     { font-size: 14.5px; padding: 5px 0; }

  /* ---- Note panels ---- */
  /* Tabs instead of pills: one line of plain text that scrolls
     sideways, with a coloured line under the open one */
  .cl-nt-tabs {
    position: relative;
    flex-wrap: nowrap; justify-content: flex-start;
    gap: 24px;
    margin: 0 -20px 18px; padding: 0 0 0 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    box-shadow: inset 0 -1px 0 var(--cl-line);
  }
  .cl-nt-tabs::-webkit-scrollbar { display: none; }
  /* Space after the last tab. Safari ignores right padding here. */
  .cl-nt-tabs::after { content: ''; flex: 0 0 1px; }

  /* Soft fade on whichever side has more tabs to swipe to.
     marketing.js adds can-left and can-right as the row scrolls. */
  .cl-nt-tabs.can-right {
    -webkit-mask-image: linear-gradient(to right, #000 86%, transparent 100%);
    mask-image: linear-gradient(to right, #000 86%, transparent 100%);
  }
  .cl-nt-tabs.can-left {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%);
    mask-image: linear-gradient(to right, transparent 0%, #000 14%);
  }
  .cl-nt-tabs.can-left.can-right {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  }

  /* The scrolling row clips anything drawn outside a tab, which
     was cutting the focus box off. Draw it inside instead. */
  .cl-nt-tab:focus { outline: none; }
  .cl-nt-tab:focus-visible {
    outline: 2px solid currentColor; outline-offset: -2px;
    border-radius: 6px;
  }
  .cl-nt-tab {
    flex-shrink: 0;
    background: none; border: none; border-radius: 0;
    padding: 10px 0 12px;
    font-size: 14.5px; white-space: nowrap;
  }
  .cl-nt-tab:hover { transform: none; }
  /* The line takes the panel's colour, set by the rules further up */
  .cl-nt-tab[data-panel].is-active {
    background: none; border: none;
    box-shadow: inset 0 -3px 0 currentColor;
  }

  /* No sideways swipe on phones. The old panel goes straight
     away and the new one fades in, so the two never overlap. */
  .cl-nt-panel.is-leaving { display: none; }
  .cl-nt-panel.is-active  { animation: clFadeIn 0.35s ease; }
  .cl-nt-head { padding: 12px 16px; font-size: 15.5px; }
  .cl-nt-note { font-size: 13px; margin-top: 14px; }
  /* Tables squeeze to fit the screen, so the Example column
     shows without scrolling sideways */
  .cl-nt-table { min-width: 0; table-layout: fixed; }
  .cl-nt-table th:nth-child(1) { width: 28%; }
  .cl-nt-table th { padding: 9px 8px; font-size: 9.5px; letter-spacing: 0.5px; }
  .cl-nt-table td { padding: 10px 8px; font-size: 12px; line-height: 1.45; }
  .cl-nt-table th:first-child,
  .cl-nt-table td:first-child { padding-left: 12px; }
  .cl-nt-table th:last-child,
  .cl-nt-table td:last-child  { padding-right: 12px; }
  .cl-nt-word { white-space: normal; }

  /* Pronunciation: three small cards in a row */
  .cl-nt-pron-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 12px; }
  .cl-nt-pron-card { padding: 14px 6px; border-radius: 12px; }
  .cl-nt-pron-word { font-size: 13.5px; }
  .cl-nt-pron-lbl  { font-size: 10.5px; margin: 3px 0 4px; }
  .cl-nt-pron-say  { font-size: 12.5px; letter-spacing: 0; line-height: 1.4; }
  .cl-nt-pron-btn  { width: 30px; height: 30px; margin-top: 10px; }
  .cl-nt-pron-btn svg { width: 14px; height: 14px; }

  /* Pictures: three in a row, like pronunciation.
     The fourth is hidden on phones so the row stays even. */
  .cl-nt-pics-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 12px; }
  .cl-nt-pic:nth-child(n+4) { display: none; }
  .cl-nt-pic       { border-radius: 12px; }
  .cl-nt-pic-img   { padding: 6px; }
  .cl-nt-pic-body  { padding: 8px 7px 10px; }
  .cl-nt-pic-word  { font-size: 12.5px; margin-bottom: 4px; }
  .cl-nt-pic-mean,
  .cl-nt-pic-eg    { font-size: 11px; line-height: 1.45; }
  .cl-nt-pic-mean  { margin-bottom: 4px; }

  /* ---- How it works ---- */
  .cl-steps    { gap: 26px; }
  .cl-step-num { margin-bottom: 12px; }
  .cl-step h3  { font-size: 17px; margin-bottom: 4px; }
  .cl-step p   { font-size: 14px; }

  /* ---- Founder ---- */
  .cl-founder        { padding: 24px 20px; gap: 16px; }
  .cl-founder-photo  { width: 88px; height: 88px; }
  .cl-founder-copy p { font-size: 15.5px; }

  /* ---- Reviews ---- */
  .cl-rv-card  { padding: 32px 22px 24px; }
  .cl-rv-quote { font-size: 18px; }

  /* ---- Supported by: one row each, logo on the left in a white tile ---- */
  .cl-supported     { padding-top: 30px; }
  .cl-supported-lbl { margin-bottom: 14px; }
  .cl-supported-row { grid-template-columns: 1fr; gap: 0; max-width: 440px; }
  .cl-supported-item {
    display: grid; grid-template-columns: 104px 1fr;
    column-gap: 14px; align-items: center;
    text-align: left;
    padding: 14px 0;
    border-top: 1px solid var(--cl-line);
  }
  .cl-supported-item:first-child { border-top: none; }
  .cl-supported-logo {
    grid-row: span 2;
    width: 104px; height: 52px; max-width: none;
    margin: 0; padding: 8px 10px;
    background: var(--cl-white);
    border: 1px solid var(--cl-line); border-radius: 10px;
  }
  .cl-supported-name { align-self: end; font-size: 14.5px; margin-bottom: 2px; }
  .cl-supported-sub  { align-self: start; font-size: 12.5px; line-height: 1.45; }

  /* ---- Closing call to action ---- */
  .cl-cta   { padding: 40px 20px; }
  .cl-cta p { font-size: 15px; margin-bottom: 24px; }
}

/* Used by the phone note panels above */
@keyframes clFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Very narrow phones (the smallest iPhones). There is not room for
   Sign in in the pill, so it hides here. It is still in the menu. */
@media (max-width: 360px) {
  .cl-nav-signin { display: none; }
}