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

/* ============================================================
   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; }
  .cl-nav-signin { display: none; }
  .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; }
.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); }
}

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

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

/* ============================================================
   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; }
  .cl-portrait   { max-width: 300px; }
  .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) {

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

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

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

  /* ---- 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 ---- */
  .cl-nt-tabs { gap: 6px; margin-bottom: 18px; }
  .cl-nt-tab  { font-size: 13px; padding: 7px 13px; }
  .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; }
}