/* =========================================================
   HOMEPAGE LANDING  (visitors who are NOT logged in)
   File: homepage/landing/landing.css
   Everything is scoped under .landing so the site's header
   and footer are untouched.
========================================================= */

.landing {
  --ld-bg: #08080b;
  --ld-surface: #101014;
  --ld-line: rgba(255, 255, 255, 0.08);
  --ld-text: #f3f3f5;
  --ld-muted: #8e8e99;
  --ld-faint: #5b5b66;
  --ld-lime: #16a34a;
  --ld-violet: #9486ff;

  background: var(--ld-bg);
  color: var(--ld-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
  padding-bottom: 20px;
}

.landing *,
.landing *::before,
.landing *::after { box-sizing: border-box; }

.landing a { color: inherit; text-decoration: none; }

.ld-wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
/* the sections under the slides (How it works ... Your next great class): as wide as the slide card (.sc) */
.ld-wrap.ld-wide { max-width: 1258px; padding: 0 24px; }
/* the number strip (Verified tutors ... Demos this week): as wide as the slide card too */
.ld-hero .ld-kpis { width: min(1210px, calc(100vw - 48px)); margin-left: calc(50% - min(605px, 50vw - 24px)); }
.ld-ico { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.ld-lime { color: var(--ld-lime); }
.ld-hidden { display: none !important; }

/* ---------- hero ---------- */

.ld-hero { position: relative; text-align: center; padding: 18px 0 30px; overflow: hidden; }
.ld-hero::before { content: ""; position: absolute; left: 50%; top: -220px; width: 620px; height: 620px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(22, 163, 74, 0.14), transparent); pointer-events: none; }
.ld-rings { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); width: 520px; height: 520px; pointer-events: none; opacity: 0.5; }
.ld-rings circle { fill: none; stroke: rgba(255, 255, 255, 0.05); }
.ld-kick { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.2em; color: var(--ld-muted); }
.ld-kick::before, .ld-kick::after { content: ""; width: 26px; height: 1px; background: var(--ld-faint); }
.ld-h1 { position: relative; margin: 22px auto 0; max-width: 13ch; font-family: Sora, Inter, sans-serif; font-weight: 300; font-size: clamp(40px, 8.2vw, 84px); line-height: 1.02; letter-spacing: -0.045em; color: var(--ld-text); }
.ld-h1 em { font-style: normal; font-weight: 700; color: var(--ld-lime); }
.ld-lead { position: relative; margin: 20px auto 0; max-width: none; white-space: nowrap; color: var(--ld-muted); font-size: clamp(15px, 2vw, 17px); }  /* one line (the landing always uses the desktop layout) */
.ld-btns { position: relative; display: flex; justify-content: center; gap: 10px; margin-top: 30px; flex-wrap: wrap; }
.ld-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 14px 22px; font-weight: 600; font-size: 14.5px; transition: transform 0.15s ease; }
.ld-btn:hover { transform: translateY(-2px); }
.ld-btn.ld-p { background: var(--ld-lime); color: #08080b; }
.ld-btn.ld-g { border: 1px solid rgba(255, 255, 255, 0.18); color: var(--ld-text); }

/* KPI strip */
.ld-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 44px; border-top: 1px solid var(--ld-line); border-bottom: 1px solid var(--ld-line); }
.ld-kpi { padding: 22px 10px; text-align: center; }
.ld-kpi:nth-child(odd) { border-right: 1px solid var(--ld-line); }
.ld-kpi:nth-child(-n+2) { border-bottom: 1px solid var(--ld-line); }
.ld-kpi b { display: block; font-family: Sora, Inter, sans-serif; font-weight: 600; font-size: clamp(30px, 5vw, 44px); letter-spacing: -0.04em; line-height: 1; }
.ld-kpi span { display: block; margin-top: 8px; font-size: 12.5px; color: var(--ld-muted); }
.ld-kpi i { font-style: normal; color: var(--ld-lime); font-size: 11.5px; }
.ld-kpi i.ld-down { color: var(--ld-muted); }

/* ticker */
.ld-ticker { margin: 26px auto 0; max-width: 560px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 999px; background: var(--ld-surface); border: 1px solid var(--ld-line); font-size: 13.5px; overflow: hidden; text-align: left; }
.ld-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ld-lime); flex: 0 0 auto; animation: ld-pl 1.8s ease-in-out infinite; }
@keyframes ld-pl { 0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); } 70% { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); } }
.ld-tk { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.35s ease, transform 0.35s ease; }
.ld-tk.ld-out { opacity: 0; transform: translateY(8px); }
.ld-tk b { font-weight: 600; }
.ld-tk em { font-style: normal; color: var(--ld-muted); }

/* ---------- sections ---------- */

.ld-sec { padding: 96px 0 0; }
.ld-sh { display: grid; gap: 10px; margin-bottom: 34px; }
.ld-num { font-family: Sora, Inter, sans-serif; font-size: 13px; color: var(--ld-lime); letter-spacing: 0.14em; }
.ld-num::after { content: ""; display: inline-block; width: 34px; height: 1px; background: var(--ld-lime); vertical-align: middle; margin-left: 10px; opacity: 0.6; }
.ld-h2 { margin: 0; font-family: Sora, Inter, sans-serif; font-weight: 300; font-size: clamp(30px, 5.4vw, 52px); line-height: 1.06; letter-spacing: -0.04em; max-width: 17ch; color: var(--ld-text); }
.ld-h2 em { font-style: normal; font-weight: 700; }
.ld-sh p { margin: 0; color: var(--ld-muted); max-width: 520px; }

/* steps */
.ld-steps { display: grid; gap: 14px; }
.ld-step { padding: 26px 22px; border-radius: 24px; background: var(--ld-surface); border: 1px solid var(--ld-line); }
.ld-n { font-family: Sora, Inter, sans-serif; font-weight: 300; font-size: 48px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35); }
.ld-step b { display: block; margin-top: 18px; font-size: 17px; font-weight: 600; }
.ld-step p { margin: 6px 0 0; color: var(--ld-muted); font-size: 14px; }

/* demand */
.ld-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.ld-chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ld-line); background: transparent; color: var(--ld-muted); font: inherit; font-size: 13px; cursor: pointer; transition: all 0.2s; }
.ld-chip.ld-on { background: var(--ld-text); color: #08080b; border-color: var(--ld-text); }
.ld-demand, .ld-growth { display: grid; gap: 18px; }
.ld-card { padding: 22px; border-radius: 26px; background: var(--ld-surface); border: 1px solid var(--ld-line); }
.ld-chart { position: relative; height: 280px; }
.ld-side { display: grid; gap: 18px; align-content: center; }
.ld-big { font-family: Sora, Inter, sans-serif; font-weight: 600; font-size: clamp(46px, 8vw, 72px); line-height: 1; letter-spacing: -0.05em; }
.ld-side small { display: block; color: var(--ld-muted); font-size: 13px; margin-top: 6px; }
.ld-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; margin-top: 14px; }
.ld-bar i { display: block; height: 100%; width: 0; background: var(--ld-lime); border-radius: 999px; transition: width 1.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ld-legend { display: flex; gap: 18px; font-size: 12.5px; color: var(--ld-muted); margin-bottom: 12px; flex-wrap: wrap; }
.ld-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ld-legend i { width: 10px; height: 10px; border-radius: 50%; display: block; }

/* open tuitions */
.ld-tuitions { display: grid; gap: 12px; }
.ld-tu { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 18px; border-radius: 22px; background: var(--ld-surface); border: 1px solid var(--ld-line); }
.ld-sj { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font-family: Sora, Inter, sans-serif; font-weight: 600; background: rgba(22, 163, 74, 0.1); color: var(--ld-lime); }
.ld-tu b { display: block; font-size: 15px; font-weight: 600; }
.ld-tu > div > span { display: block; font-size: 12.5px; color: var(--ld-muted); margin-top: 2px; }
.ld-tu > .ld-sj { display: grid; place-items: center; margin: 0; font-size: 15px; line-height: 1; }
.ld-tu a { font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); white-space: nowrap; }
.ld-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--ld-lime) !important; font-weight: 600; font-size: 14px; }

/* tutors: avatar, name + verified badge, experience */
.ld-tutors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ld-tt { padding: 22px 14px; border-radius: 24px; background: var(--ld-surface); border: 1px solid var(--ld-line); text-align: center; }
.ld-av { position: relative; width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-family: Sora, Inter, sans-serif; font-weight: 600; font-size: 20px; color: #08080b; }
.ld-name { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 14px; min-width: 0; }
.ld-name b { font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-badge { width: 18px; height: 18px; flex: 0 0 auto; color: #1d9bf0; }
/* the seal follows the tutor's subscription payment colour (blue when they have none) */
.ld-badge[data-tone="paid"]    { color: #16a34a; }
.ld-badge[data-tone="partial"] { color: #ffa15c; }
.ld-badge[data-tone="unpaid"]  { color: #ff6868; }
.ld-exp { display: block; margin-top: 4px; font-size: 13px; color: var(--ld-muted); }

/* CTA */
.ld-cta { margin-top: 100px; padding: 48px 22px; border-radius: 32px; text-align: center; background: var(--ld-lime); color: #08080b; position: relative; overflow: hidden; }
.ld-cta::after { content: ""; position: absolute; right: -80px; top: -80px; width: 240px; height: 240px; border-radius: 50%; border: 1px solid rgba(8, 8, 11, 0.15); box-shadow: 0 0 0 40px rgba(8, 8, 11, 0.03), 0 0 0 80px rgba(8, 8, 11, 0.03); pointer-events: none; }
.ld-cta h3 { position: relative; margin: 0; font-family: Sora, Inter, sans-serif; font-weight: 300; font-size: clamp(30px, 6vw, 56px); line-height: 1.02; letter-spacing: -0.045em; color: #08080b; }
.ld-cta h3 b { font-weight: 700; }
.ld-cta .ld-btns { margin-top: 24px; }
.ld-cta .ld-btn.ld-p { background: #08080b; color: var(--ld-lime); }
.ld-cta .ld-btn.ld-g { border-color: rgba(8, 8, 11, 0.3); color: #08080b; }

/* reveal on scroll */
.ld-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s ease, transform 0.8s ease; }
.ld-reveal.ld-show { opacity: 1; transform: none; }

/* Desktop layout on EVERY screen - it never collapses to the
   phone layout (index.html also sets a 1200px-wide viewport for
   visitors, so phones and tablets show it scaled to fit). */
.ld-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ld-kpi { border-bottom: 0 !important; border-right: 1px solid var(--ld-line); }
.ld-kpi:nth-child(odd) { border-right: 1px solid var(--ld-line); }
.ld-kpi:last-child { border-right: 0; }
.ld-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ld-demand { grid-template-columns: 1.6fr 1fr; }
.ld-growth { grid-template-columns: 1fr 1.6fr; align-items: stretch; }
.ld-tutors { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ld-chart { height: 320px; }
.landing { min-width: 1024px; }

/* No white edges: the page itself had the browser's default 8px
   white margin around it. */
html:has(body[data-page="home"]) { background: #08080b; }
body[data-page="home"] { margin: 0; background: #08080b; }

@media (prefers-reduced-motion: reduce) {
  .landing * { animation: none !important; transition: none !important; }
  .ld-reveal { opacity: 1; transform: none; }
}

/* tutors: place line (city left, PIN right) and the gentle swap while the cards rotate */
.ld-loc { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ld-line); font-size: 12px; color: var(--ld-muted); }
.ld-loc span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-loc span:only-child { margin: 0 auto; }
.ld-tutors { transition: opacity 0.45s ease; }
.ld-tutors.ld-swap { opacity: 0; }

/* verified seal sits on the profile circle; the full name goes under it */
.ld-avw { position: relative; width: 64px; margin: 0 auto; }
.ld-badge.ld-badge-av { position: absolute; right: -6px; bottom: -4px; z-index: 2; width: 24px; height: 24px; filter: drop-shadow(0 0 0 #0f0f13); }
.ld-name b { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }

/* anything too long for its card is cut with "..." */
.ld-tt { min-width: 0; overflow: hidden; }
.ld-name { display: block; }
.ld-name b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-exp { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* "Near you" on an open tuition in the visitor's own / a nearby PIN or city */
.ld-near { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 600; color: var(--ld-lime); background: rgba(22, 163, 74, 0.12); vertical-align: 2px; }

/* ---------- light mode (html[data-theme="light"], js/theme.js) ---------- */
html[data-theme="light"] .landing {
  --ld-bg: #f6f7f9; --ld-surface: #ffffff; --ld-line: rgba(0, 0, 0, 0.08);
  --ld-text: #111418; --ld-muted: #5b6472; --ld-faint: #9aa0a8;
}
html:has(body[data-page="home"])[data-theme="light"], html[data-theme="light"] body[data-page="home"] { background: #f6f7f9; }
html[data-theme="light"] .ld-rings circle { stroke: rgba(0, 0, 0, 0.05); }
html[data-theme="light"] .ld-btn.ld-p { color: #ffffff; }
html[data-theme="light"] .ld-btn.ld-g, html[data-theme="light"] .ld-tu a { border-color: rgba(0, 0, 0, 0.16); }
html[data-theme="light"] .ld-n { -webkit-text-stroke-color: rgba(0, 0, 0, 0.3); }
html[data-theme="light"] .ld-chip.ld-on { color: #ffffff; }
html[data-theme="light"] .ld-bar { background: rgba(0, 0, 0, 0.07); }

/* =========================================================
   THE SHOWCASE UNDER THE BUTTONS (landing.js setupShowcase):
   Special Educators · Shadow Teachers · the WhatsApp / call card, in turn
========================================================= */
.sc { position: relative; width: min(1210px, calc(100vw - 48px)); margin: 0 0 0 calc(50% - min(605px, 50vw - 24px)); text-align: left; }
.sc-tabs { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.sc-tab { position: relative; overflow: hidden; display: inline-flex; align-items: center; padding: 10px 20px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 14px/1.2 Inter, -apple-system, "Segoe UI", sans-serif; color: var(--ld-muted); background: rgba(255, 255, 255, 0.05); transition: color 0.2s ease, background 0.2s ease; }
.sc-tab span { position: relative; z-index: 1; }
.sc-tab i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--a); }
.sc-tab:hover { color: var(--ld-text); }
.sc-tab.is-on { color: var(--ld-text); background: color-mix(in srgb, var(--a) 18%, transparent); }
.sc.is-run .sc-tab.is-on i { animation: scFill var(--d, 7000ms) linear forwards; }
.sc.is-held .sc-tab.is-on i { width: 100%; animation: none; }
@keyframes scFill { from { width: 0; } to { width: 100%; } }

.sc-stage { display: grid; }
.sc-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.99); transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s linear 0.55s; }
.sc-slide.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s; }
.sc-cc .ut-contact-slot, .sc-cc .cc { height: 100%; }

/* the two cards: a picture (a mock card, the way a parent sees it) and the words */
.sc-se, .sc-st {
  --sa: #a78bfa; --sa-dim: rgba(167, 139, 250, 0.16);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: center; padding: 40px 52px; border-radius: 30px;
  background: radial-gradient(70% 90% at 0% 100%, var(--sa-dim), transparent 60%), linear-gradient(135deg, #0f0f12, #15151a);
}
.sc-st { --sa: #38bdf8; --sa-dim: rgba(56, 189, 248, 0.15); }
.sc-art { position: relative; padding: 18px 26px 26px 0; }
.sc-card { position: relative; padding: 22px; border-radius: 22px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.8); }
.sc-card-top { display: flex; align-items: center; gap: 12px; }
.sc-card-top div { display: grid; flex: 1; min-width: 0; }
.sc-card-top b { font-size: 16px; color: var(--ld-text); }
.sc-card-top small { font-size: 12.5px; color: var(--ld-muted); }
.sc-ava { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; font: 700 16px/1 Sora, Inter, sans-serif; color: #0b0b0f;
  background: linear-gradient(135deg, var(--sa), color-mix(in srgb, var(--sa) 55%, #ffffff)); box-shadow: 0 0 0 4px var(--sa-dim); }
.sc-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--sa); background: var(--sa-dim); }
.sc-badge svg, .sc-float svg, .sc-list svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sc-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.sc-facts > div { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); }
.sc-facts svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--sa); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-facts span { display: grid; min-width: 0; }
.sc-facts small { font-size: 11px; color: var(--ld-muted); }
.sc-facts b { font-size: 13px; color: var(--ld-text); }
.sc-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.sc-tags span { padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ld-text); background: rgba(255, 255, 255, 0.06); }
.sc-plan { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--sa-dim); }
.sc-plan small { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sa); }
.sc-plan ul { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.sc-plan li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ld-text); }
.sc-plan li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--sa); box-sizing: border-box; }
.sc-slide.is-on .sc-plan li::before { animation: scTick 0.4s ease forwards; animation-delay: calc(0.9s + var(--k, 0) * 0.7s); }
.sc-plan li:nth-child(2) { --k: 1; } .sc-plan li:nth-child(3) { --k: 2; }
@keyframes scTick { to { background: var(--sa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0f' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; } }

/* the day of a Shadow Teacher: a light runs down the day */
.sc-day { position: relative; display: grid; gap: 4px; margin: 18px 0 0; padding: 0; list-style: none; }
.sc-day::before { content: ""; position: absolute; left: 51px; top: 14px; bottom: 14px; width: 2px; background: rgba(255, 255, 255, 0.08); }
.sc-day li { position: relative; display: grid; grid-template-columns: 40px 1fr auto; gap: 24px; align-items: center; padding: 9px 10px 9px 0; border-radius: 12px; transition: background 0.4s ease; }
.sc-day li::before { content: ""; position: absolute; left: 46px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #1d1d23; border: 2px solid rgba(255, 255, 255, 0.25); box-sizing: border-box; transition: all 0.4s ease; }
.sc-day time { font: 700 13px/1 Sora, Inter, sans-serif; color: var(--ld-muted); text-align: right; }
.sc-day span { display: grid; }
.sc-day b { font-size: 14px; color: var(--ld-text); }
.sc-day small { font-size: 12px; color: var(--ld-muted); }
.sc-day em { font-style: normal; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; color: var(--sa); background: var(--sa-dim); }
.sc-day em.is-home { color: #fbbf24; background: rgba(251, 191, 36, 0.14); }
.sc-day li.is-now { background: rgba(255, 255, 255, 0.04); }
.sc-day li.is-now::before { background: var(--sa); border-color: var(--sa); box-shadow: 0 0 0 5px var(--sa-dim); }
.sc-day li.is-now time { color: var(--ld-text); }

.sc-float { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #0b0b0f;
  background: #ffffff; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6); animation: scFloat 4.5s ease-in-out infinite; }
.sc-float svg { stroke: var(--sa); }
.sc-float.f1 { right: 0; top: -2px; }
.sc-float.f2 { left: -18px; bottom: 4px; animation-delay: -2.2s; }
@keyframes scFloat { 50% { transform: translateY(-6px); } }

.sc-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sa); }
.sc-eyebrow::before, .sc-eyebrow::after { content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.6; }
.sc-text h2 { margin: 12px 0 0; font: 300 38px/1.12 Sora, Inter, -apple-system, "Segoe UI", sans-serif; letter-spacing: -0.035em; color: var(--ld-text); }
.sc-text h2 em { font-style: normal; font-weight: 700; color: var(--sa); }
.sc-list { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.sc-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.45; color: var(--ld-muted); }
.sc-list svg { margin-top: 2px; padding: 3px; width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box; color: var(--sa); background: var(--sa-dim); }
.sc-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.sc-se .ld-btn.ld-p, .sc-st .ld-btn.ld-p { background: var(--sa); color: #0b0b0f; }

@media (prefers-reduced-motion: reduce) {
  .sc-slide, .sc-slide.is-on { transition: none; }
  .sc-float { animation: none; }
  .sc-slide.is-on .sc-plan li::before { animation-duration: 0s; animation-delay: 0s; }
}

/* light mode */
html[data-theme="light"] .sc-tab { background: rgba(0, 0, 0, 0.05); }
html[data-theme="light"] .sc-se, html[data-theme="light"] .sc-st { --sa: #7c3aed; --sa-dim: rgba(124, 58, 237, 0.10);
  background: radial-gradient(70% 90% at 0% 100%, var(--sa-dim), transparent 60%), linear-gradient(135deg, #ffffff, #f1f3f6); }
html[data-theme="light"] .sc-st { --sa: #0284c7; --sa-dim: rgba(2, 132, 199, 0.10); }
html[data-theme="light"] .sc-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.07); box-shadow: 0 30px 60px -30px rgba(15, 23, 42, 0.3); }
html[data-theme="light"] .sc-facts > div { background: #f7f8fa; border-color: rgba(0, 0, 0, 0.06); }
html[data-theme="light"] .sc-tags span { background: rgba(0, 0, 0, 0.05); }
html[data-theme="light"] .sc-day::before { background: rgba(0, 0, 0, 0.08); }
html[data-theme="light"] .sc-day li::before { background: #ffffff; border-color: rgba(0, 0, 0, 0.2); }
html[data-theme="light"] .sc-day li.is-now { background: rgba(0, 0, 0, 0.03); }
html[data-theme="light"] .sc-day em.is-home { color: #b45309; background: rgba(245, 158, 11, 0.14); }
html[data-theme="light"] .sc-se .ld-btn.ld-p, html[data-theme="light"] .sc-st .ld-btn.ld-p { color: #ffffff; }
html[data-theme="light"] .sc-float { box-shadow: 0 14px 30px -14px rgba(15, 23, 42, 0.35); }
html[data-theme="light"] .sc-tab.is-on { color: #111418; background: color-mix(in srgb, var(--a) 22%, #ffffff); }

/* the first slide: the page's own opening - centred, in the middle of the space the cards take */
.sc-home { align-self: center; text-align: center; padding: 10px 0; }

/* the green glow and the rings belong to the home tuition slide: they fade out with it, not left behind the cards */
.ld-hero::before, .ld-rings { transition: opacity 0.55s ease; }
.ld-hero:not(.is-home)::before, .ld-hero:not(.is-home) .ld-rings { opacity: 0; }

/* the tab's line goes once all the way round it while its slide shows */
@property --scp { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.sc-tab i { display: none; }
.sc-tab::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; opacity: 0;
  background: conic-gradient(from 0deg, var(--a) var(--scp), transparent 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.sc-tab.is-on::before { opacity: 1; }
.sc.is-run .sc-tab.is-on::before { animation: scRound var(--d, 20000ms) linear forwards; }
.sc.is-held .sc-tab.is-on::before { --scp: 100%; animation: none; }
@keyframes scRound { from { --scp: 0%; } to { --scp: 100%; } }

/* ---------- 02 · Exam preparation: IIT-JEE, NEET, CUET, CA Foundation ---------- */
.ld-exams { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ld-exam {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 24px 22px 22px; border-radius: 24px; overflow: hidden;
  background: linear-gradient(170deg, color-mix(in srgb, var(--ex) 14%, transparent), transparent 60%), var(--ld-surface);
  box-shadow: inset 0 0 0 1px var(--ld-line); transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ld-exam::after { content: ""; position: absolute; right: -40px; top: -40px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ex) 30%, transparent), transparent 70%); pointer-events: none; }
.ld-exam:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ex) 55%, transparent), 0 24px 50px -30px color-mix(in srgb, var(--ex) 70%, transparent); }
.ld-exam-ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px; border-radius: 14px; background: color-mix(in srgb, var(--ex) 18%, transparent); color: var(--ex); }
.ld-exam-ic svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ld-exam b { font-family: Sora, Inter, sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; color: var(--ld-text); }
.ld-exam small { font-size: 13.5px; color: var(--ex); font-weight: 600; }
.ld-exam-who { margin-top: 2px; font-size: 13px; color: var(--ld-muted); }
.ld-exam-subj { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 18px; }
.ld-exam-subj i { font-style: normal; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ex) 12%, transparent); color: var(--ld-text); }
.ld-exam-go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ex); }
.ld-exam-go .ld-ico { width: 16px; height: 16px; transition: transform 0.2s ease; }
.ld-exam:hover .ld-exam-go .ld-ico { transform: translateX(3px); }
@media (max-width: 900px) { .ld-exams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html[data-theme="light"] .ld-exam { background: linear-gradient(170deg, color-mix(in srgb, var(--ex) 12%, #fff), #fff 60%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 18px 40px -32px rgba(15, 23, 42, 0.4); }
html[data-theme="light"] .ld-exam small, html[data-theme="light"] .ld-exam-go { color: color-mix(in srgb, var(--ex) 70%, #000); }
html[data-theme="light"] .ld-exam-ic { color: color-mix(in srgb, var(--ex) 75%, #000); }

/* each exam's badge: our own seal (a motif in a double ring, the short name under it) - not the exam bodies' logos */
.ld-seal { display: block; width: 74px; height: 74px; margin-bottom: 14px; filter: drop-shadow(0 10px 20px color-mix(in srgb, var(--ex) 35%, transparent)); transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1); }
.ld-exam:hover .ld-seal { transform: rotate(-6deg) scale(1.05); }
.ld-seal svg { width: 100%; height: 100%; overflow: visible; }
.ld-seal .ring { fill: color-mix(in srgb, var(--ex) 16%, var(--ld-surface)); stroke: var(--ex); stroke-width: 2; }
.ld-seal .ring2 { fill: none; stroke: var(--ex); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.55; }
.ld-seal .art { fill: none; stroke: var(--ex); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ld-seal .art .f { fill: var(--ex); stroke: none; }
.ld-seal text { font: 800 8.5px Sora, Inter, sans-serif; letter-spacing: 0.08em; fill: var(--ex); }
html[data-theme="light"] .ld-seal .ring { fill: color-mix(in srgb, var(--ex) 14%, #fff); stroke: color-mix(in srgb, var(--ex) 80%, #000); }
html[data-theme="light"] .ld-seal .art, html[data-theme="light"] .ld-seal .ring2 { stroke: color-mix(in srgb, var(--ex) 80%, #000); }
html[data-theme="light"] .ld-seal .art .f, html[data-theme="light"] .ld-seal text { fill: color-mix(in srgb, var(--ex) 80%, #000); }

/* ---------- the exam slides at the top (IIT-JEE, NEET, CUET, CA Foundation): the Special Educator layout in each exam's colour ---------- */
.sc-ex {
  --sa-dim: color-mix(in srgb, var(--sa) 16%, transparent);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: center; padding: 40px 52px; border-radius: 30px;
  background: radial-gradient(70% 90% at 0% 100%, var(--sa-dim), transparent 60%), linear-gradient(135deg, #0f0f12, #15151a);
}
.sc-ex .ld-btn.ld-p { background: var(--sa); color: #0b0b0f; }
/* the exam's badge in the card's corner (its own logo later: an <img> inside .sc-exlogo) */
.sc-exlogo { width: 58px; height: 58px; flex: none; margin: 0; --ex: var(--sa); }
.sc-exlogo img { width: 100%; height: 100%; object-fit: contain; }
.sc-tabs { flex-wrap: wrap; }
html[data-theme="light"] .sc-ex {
  background: radial-gradient(70% 90% at 0% 100%, var(--sa-dim), transparent 60%), linear-gradient(135deg, #ffffff, #f1f3f6);
}
html[data-theme="light"] .sc-ex .ld-btn.ld-p { color: #ffffff; }
/* light mode: each exam's colour a shade darker so it reads on white */
html[data-theme="light"] .sc-ex[aria-label="IIT-JEE"] { --sa: #2563eb !important; }
html[data-theme="light"] .sc-ex[aria-label="NEET"] { --sa: #db2777 !important; }
html[data-theme="light"] .sc-ex[aria-label="CUET"] { --sa: #c026d3 !important; }
html[data-theme="light"] .sc-ex[aria-label="CA Foundation"] { --sa: #b45309 !important; }

/* ---------- the board slides (CBSE, ICSE / ISC, IB, IGCSE, State Boards): Nursery to 12 ---------- */
/* the five class bands tick one after another */
.sc-ladder li:nth-child(4) { --k: 3; } .sc-ladder li:nth-child(5) { --k: 4; }
.sc-ladder ul { grid-template-columns: 1fr 1fr; column-gap: 14px; }
.sc-ladder li:last-child { grid-column: 1 / -1; }
html[data-theme="light"] .sc-bd[aria-label="CBSE"] { --sa: #c2410c !important; }
html[data-theme="light"] .sc-bd[aria-label="ICSE / ISC"] { --sa: #dc2626 !important; }
html[data-theme="light"] .sc-bd[aria-label="IB"] { --sa: #0d9488 !important; }
html[data-theme="light"] .sc-bd[aria-label="IGCSE"] { --sa: #4f46e5 !important; }
html[data-theme="light"] .sc-bd[aria-label="State Boards"] { --sa: #4d7c0f !important; }
.sc-tabs { gap: 8px; }
.sc-tab { padding: 9px 15px; font-size: 13px; }
/* thirteen tabs on one line */
.sc-tabs { gap: 6px; flex-wrap: nowrap; }
.sc-tab { padding: 8px 11px; font-size: 12.5px; white-space: nowrap; }
/* the twelve tabs: all one size, six to a row */
.sc-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; width: min(960px, 100%); margin: 18px auto 0; }
.sc-tab { justify-content: center; padding: 9px 8px; font-size: 13px; white-space: nowrap; }
/* the slides a little shorter, so the whole first screen - header, slide and tabs - fits a laptop */
.sc-se, .sc-st, .sc-ex { padding: 28px 52px; }
.sc-art { padding: 10px 26px 16px 0; }
.sc-tabs { gap: 6px; margin-top: 14px; }
/* all twelve tabs on one line, still one size */
.sc-tabs { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; width: 100%; }
.sc-tab { padding: 8px 3px; font-size: 10.5px; letter-spacing: -0.005em; }
/* Special Educators and Shadow Teachers get more room; the short names give a little */
.sc-tabs { grid-template-columns: 1.15fr 1.45fr 1.4fr 1fr 1fr 0.85fr 1fr 1.15fr 1fr 1fr 1fr 1.2fr; }
.sc-tab { font-size: 12px; padding: 8px 4px; }
/* Ask on WhatsApp: the WhatsApp mark before the words */
.ld-wa { width: 17px; height: 17px; flex: none; fill: #25d366; stroke: none; }
/* three buttons on one line: Find ... tutor, Ask on WhatsApp, Catalogue */
.sc-btns { gap: 6px; flex-wrap: nowrap; }
.sc-btns .ld-btn { padding: 12px 13px; font-size: 13px; gap: 6px; white-space: nowrap; }
/* the footer (drawn at once from this device's copy) waits below the screen until the home page is in -
   it no longer shows at the top and then jumps down */
#homepage { min-height: 100vh; }

/* =========================================================
   PHONES (index.html gives the landing a phone-wide viewport; the tutor's dashboard stays desktop):
   one column, the slides as text and buttons only, the tabs one sliding row, every section stacked
========================================================= */
@media (max-width: 760px) {
  .landing { min-width: 0; padding-bottom: 8px; }
  .ld-wrap, .ld-wrap.ld-wide { padding: 0 16px; }

  /* hero: the opening and the slides */
  .ld-hero { padding: 6px 0 22px; }
  .ld-hero::before { top: -160px; width: 420px; height: 420px; }
  .ld-rings { top: 20px; width: 360px; height: 360px; }
  .sc { width: 100%; margin: 0; }
  .sc-home { padding: 28px 0 8px; }
  .ld-kick { font-size: 10.5px; gap: 8px; letter-spacing: 0.18em; }
  .ld-kick::before, .ld-kick::after { width: 18px; }
  .ld-h1 { margin-top: 16px; max-width: 11ch; font-size: clamp(36px, 11vw, 46px); line-height: 1.04; }
  .ld-lead { margin-top: 14px; white-space: normal; font-size: 15px; padding: 0 6px; }
  .ld-btns { margin-top: 22px; gap: 8px; }
  .ld-btn { padding: 13px 18px; font-size: 14px; }
  .sc-home .ld-btns .ld-btn { flex: 1 1 0; justify-content: center; max-width: 200px; }

  /* the other slides: the words and the buttons (the picture card is left for bigger screens) */
  .sc-se, .sc-st, .sc-ex { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 24px 18px 22px; border-radius: 24px; }
  .sc-art { display: none; }
  .sc-eyebrow { font-size: 10.5px; letter-spacing: 0.14em; }
  .sc-eyebrow::before, .sc-eyebrow::after { width: 16px; }
  .sc-text h2 { margin-top: 10px; font-size: 26px; line-height: 1.15; }
  .sc-list { gap: 8px; margin-top: 14px; }
  .sc-list li { font-size: 14px; }
  .sc-list svg { width: 18px; height: 18px; }
  .sc-btns { flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .sc-btns .ld-btn { flex: 1 1 auto; justify-content: center; padding: 11px 12px; font-size: 13px; }
  .sc-btns .ld-btn.ld-p { flex-basis: 100%; padding: 13px 14px; font-size: 14px; }

  /* the tabs: one row that slides sideways (the one showing glides to the middle - landing.js) */
  .sc-tabs { display: flex; justify-content: flex-start; grid-template-columns: none; gap: 6px; width: auto; margin: 14px -16px 0; padding: 2px 16px 4px;
    overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
            mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
  .sc-tabs::-webkit-scrollbar { display: none; }
  .sc-tab { flex: none; padding: 9px 14px; font-size: 13px; scroll-snap-align: center; }

  /* the four numbers: two by two */
  .ld-hero .ld-kpis { width: 100%; margin: 26px 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-kpi { padding: 18px 8px; border-right: 0 !important; }
  .ld-kpi:nth-child(odd) { border-right: 1px solid var(--ld-line) !important; }
  .ld-kpi:nth-child(-n+2) { border-bottom: 1px solid var(--ld-line) !important; }
  .ld-kpi b { font-size: 32px; }
  .ld-kpi span { font-size: 12px; }
  .ld-ticker { margin-top: 18px; max-width: 100%; font-size: 13px; }

  /* sections */
  .ld-sec { padding-top: 60px; }
  .ld-sh { margin-bottom: 22px; }
  .ld-h2 { font-size: 30px; }
  .ld-sh p { font-size: 14.5px; }
  .ld-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ld-step { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; padding: 18px; border-radius: 20px; }
  .ld-n { grid-row: span 2; font-size: 40px; }
  .ld-step b { margin-top: 0; font-size: 16px; }
  .ld-step p { margin-top: 2px; font-size: 13.5px; }
  .ld-demand, .ld-growth { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ld-card { padding: 18px; border-radius: 22px; }
  .ld-chart { height: 240px; }
  .ld-big { font-size: 46px; }
  .ld-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 16px; padding: 0 16px; }
  .ld-chips::-webkit-scrollbar { display: none; }
  .ld-chip { flex: none; }
  .ld-tu { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px; border-radius: 18px; }
  .ld-tu a { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
  .ld-sj { width: 42px; height: 42px; border-radius: 14px; }
  .ld-tutors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ld-tt { padding: 18px 10px; border-radius: 20px; }
  .ld-exams { grid-template-columns: minmax(0, 1fr); }

  /* the green card at the end */
  .ld-cta { margin-top: 60px; padding: 34px 18px; border-radius: 26px; }
  .ld-cta h3 { font-size: 30px; }
  .ld-cta .ld-btns .ld-btn { flex: 1 1 0; justify-content: center; }

  .ld-btn:hover, .ld-exam:hover { transform: none; }
}
@media (max-width: 760px) {
  .ld-n { width: 62px; text-align: left; }
}

/* the three promises under the opening buttons: phones only */
.ld-trust { display: none; }

/* =========================================================
   PHONES, PART BY PART - the opening, the numbers, the steps, the figures, the open tuitions, the tutors, the end
========================================================= */
@media (max-width: 760px) {
  /* the opening: less empty space round it, three promises under the buttons */
  .ld-hero { padding-top: 0; }
  .sc-home { padding: 14px 0 0; }
  .ld-h1 { font-size: clamp(38px, 11.4vw, 46px); }
  .ld-trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; margin: 18px 0 0; padding: 0; list-style: none; }
  .ld-trust li { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ld-muted); }
  .ld-trust .ld-ico { width: 15px; height: 15px; padding: 2px; border-radius: 50%; stroke-width: 3; color: var(--ld-lime); background: rgba(22, 163, 74, 0.14); }

  /* the slides' card: a soft edge and its colour on top */
  .sc-se, .sc-st, .sc-ex { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
  .sc-tabs { margin-top: 16px; }

  /* the four numbers: four small tiles, two by two */
  .ld-hero .ld-kpis { gap: 10px; margin-top: 22px; border: 0; }
  .ld-kpi, .ld-kpi:nth-child(odd), .ld-kpi:nth-child(-n+2) { border: 0 !important; }
  .ld-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px 14px 14px; border-radius: 20px; text-align: left;
    background: var(--ld-surface); box-shadow: inset 0 0 0 1px var(--ld-line); }
  .ld-kpi b { font-size: 28px; }
  .ld-kpi span { margin-top: 4px; font-size: 12px; line-height: 1.35; }
  .ld-kpi i { display: block; width: fit-content; margin-top: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(22, 163, 74, 0.12); }
  .ld-kpi i:empty { display: none; }
  .ld-kpi i.ld-down { background: rgba(255, 255, 255, 0.06); }
  .ld-ticker { margin-top: 12px; padding: 11px 14px; font-size: 12.5px; }

  /* sections: a little closer together */
  .ld-sec { padding-top: 52px; }
  .ld-num { font-size: 11.5px; }
  .ld-h2 { font-size: 29px; line-height: 1.1; }

  /* how it works: the three steps as a path - the numbers in rings, a line down between them */
  .ld-steps { position: relative; gap: 0; }
  .ld-steps::before { content: ""; position: absolute; left: 39px; top: 40px; bottom: 40px; width: 1px; background: linear-gradient(var(--ld-lime), rgba(22, 163, 74, 0.1)); opacity: 0.6; }
  .ld-step { position: relative; grid-template-columns: 46px 1fr; column-gap: 14px; padding: 14px 16px; margin-bottom: 10px; }
  .ld-n { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-size: 16px; font-weight: 700; color: var(--ld-lime); -webkit-text-stroke: 0;
    background: var(--ld-bg); box-shadow: inset 0 0 0 1.5px rgba(22, 163, 74, 0.55); text-align: center; }
  .ld-step b { font-size: 15.5px; }
  .ld-step p { font-size: 13px; }

  /* what students need / growth: the two figures side by side */
  .ld-card.ld-side { grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  .ld-big { font-size: 38px; }
  .ld-side small { font-size: 12px; line-height: 1.35; }
  .ld-demand .ld-side > div:last-child .ld-bar { margin-top: 10px; }
  .ld-chart { height: 220px; }
  .ld-chip { padding: 7px 13px; font-size: 12.5px; }

  /* open tuitions: Apply as a small pill on the right of each */
  .ld-tu { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
  .ld-tu a { grid-column: auto; justify-self: end; padding: 8px 13px; font-size: 12.5px; color: var(--ld-lime); border-color: rgba(22, 163, 74, 0.4); }
  .ld-tu b { font-size: 14.5px; line-height: 1.3; }
  .ld-tu > div > span { font-size: 12px; }
  .ld-more { margin-top: 14px; }

  /* tutors */
  .ld-tt { padding: 16px 10px 12px; }
  .ld-name b { font-size: 14.5px; }
  .ld-exp { font-size: 12px; }
  .ld-loc { font-size: 11.5px; }

  /* the end */
  .ld-cta { padding: 32px 18px 26px; }
  .ld-cta h3 { font-size: 29px; }
  .ld-cta .ld-btns { margin-top: 20px; }
  .ld-cta .ld-btn { padding: 13px 12px; font-size: 13.5px; }
  html[data-theme="light"] .sc-se, html[data-theme="light"] .sc-st, html[data-theme="light"] .sc-ex { box-shadow: 0 16px 36px -30px rgba(15, 23, 42, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
  html[data-theme="light"] .ld-kpi i.ld-down { background: rgba(0, 0, 0, 0.05); }
}
@media (max-width: 760px) {
  /* only one figure to show (no growth figure yet): it takes the whole card */
  .ld-card.ld-side:has(> .ld-hidden), .ld-card.ld-side:has(> [hidden]) { grid-template-columns: minmax(0, 1fr); }
  /* open tuitions: more room for the words */
  .ld-tu { gap: 10px; padding: 14px 12px 14px 14px; }
  .ld-sj { width: 40px; height: 40px; border-radius: 13px; font-size: 13.5px !important; }
  .ld-tu > div > span { font-size: 11.5px; line-height: 1.45; }
  .ld-tu a { padding: 7px 11px; font-size: 12px; }
}

/* =========================================================
   PHONES: THE SLIDES UNDER THE HEADER - a card of their own, made for a phone (landing.js mobileCards builds it
   from each slide): the badge with the name and what it is, its pills (home or online and its two highlights),
   the line, up to four subjects, and the buttons - everything in full, nothing cut or sliding.
   The desktop slide's own parts are not shown on a phone; the phone card is not shown on a computer.
   The names of the tabs go - a row of small dots in their place (the one showing a longer pill that fills).
========================================================= */
.scm { display: none; }
@media (max-width: 760px) {
  .sc-slide:not(.sc-home) { display: block !important; padding: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0; overflow: visible; }
  .sc-slide:not(.sc-home)::after { display: none; }
  .sc-slide:not(.sc-home) > :not(.scm) { display: none !important; }
  .scm { --c: var(--sa, #22c55e); position: relative; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; overflow: hidden;
    padding: 20px 18px 18px; border-radius: 26px; text-align: left;
    background: radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--c) 24%, transparent), transparent 58%),
                radial-gradient(90% 60% at 0% 100%, color-mix(in srgb, var(--c) 10%, transparent), transparent 60%),
                linear-gradient(165deg, #131317, #0a0a0c);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 24%, rgba(255, 255, 255, 0.04)); }
  .scm::before { content: ""; position: absolute; right: -64px; top: -64px; width: 180px; height: 180px; border-radius: 50%; pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
    box-shadow: 0 0 0 22px color-mix(in srgb, var(--c) 5%, transparent), 0 0 0 44px color-mix(in srgb, var(--c) 3%, transparent); }
  .scm > * { position: relative; }
  /* a course's phone card (css/course-cards.css) is the whole slide */
  .scm.scm-cm { padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; overflow: visible; }
  .scm.scm-cm::before, .scm.scm-cm::after { display: none !important; }
  .scm.scm-cm > .cm { height: 100%; margin: 0; }

  /* the badge, the name and what it is (wraps, never cut) */
  .scm-head { display: flex; align-items: center; gap: 13px; }
  .scm-mark { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; }
  .scm-mark .sc-exlogo { width: 50px; height: 50px; }
  .scm-mark .sc-ava { width: 46px; height: 46px; font-size: 14px; }
  .scm-name { min-width: 0; }
  .scm-name b { display: block; font: 700 18px/1.2 Sora, Inter, sans-serif; letter-spacing: -0.02em; color: var(--ld-text); }
  .scm-name small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--ld-muted); }

  /* its pills: home or online (or verified), and its two highlights - they wrap */
  .scm-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
  .scm-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.2;
    color: var(--ld-text); background: color-mix(in srgb, var(--c) 12%, rgba(255, 255, 255, 0.03)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 24%, transparent); }
  .scm-pill.is-main { color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: none; }
  .scm-pill svg { width: 13px; height: 13px; flex: none; fill: none; stroke: var(--c); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

  /* the line */
  .scm-line { margin: 16px 0 0; font: 300 21px/1.25 Sora, Inter, sans-serif; letter-spacing: -0.03em; color: var(--ld-text); }
  .scm-line em { font-style: normal; font-weight: 700; color: var(--c); }

  /* up to four subjects */
  .scm-subj { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
  .scm-subj span { padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ld-text); background: rgba(255, 255, 255, 0.06); }

  /* the buttons, at the foot */
  .scm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 18px; }
  .scm-btns .ld-btn { justify-content: center; gap: 6px; padding: 11px 6px; font-size: 13px; white-space: nowrap; }
  .scm-btns .ld-btn.ld-p { grid-column: 1 / -1; padding: 13px 14px; font-size: 14px; color: #0b0b0f; background: var(--c); box-shadow: 0 14px 28px -16px var(--c); }
  .scm-btns .ld-wa, .scm-btns .ld-ico { width: 16px; height: 16px; }

  /* light mode: a white card, each colour a shade darker */
  html[data-theme="light"] .scm { background: radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 58%),
      radial-gradient(90% 60% at 0% 100%, color-mix(in srgb, var(--c) 6%, transparent), transparent 60%), #ffffff;
    box-shadow: 0 18px 40px -30px rgba(15, 23, 42, 0.4), inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, rgba(0, 0, 0, 0.04)); }
  html[data-theme="light"] .scm-pill { color: #111418; background: color-mix(in srgb, var(--c) 7%, #ffffff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent); }
  html[data-theme="light"] .scm-pill.is-main { color: var(--c); background: color-mix(in srgb, var(--c) 12%, #ffffff); box-shadow: none; }
  html[data-theme="light"] .scm-subj span { background: rgba(0, 0, 0, 0.05); color: #111418; }
  html[data-theme="light"] .scm-btns .ld-btn.ld-p { color: #ffffff; }

  /* the tabs: small dots, no names - the one showing a longer pill that fills while it shows */
  .sc-tabs { justify-content: center; gap: 6px; margin: 14px 0 0; padding: 4px 0; overflow: visible; -webkit-mask: none; mask: none; }
  .sc-tab { flex: none; width: 7px; height: 7px; padding: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.2); transition: width 0.35s ease, background 0.35s ease; }
  .sc-tab span, .sc-tab::before { display: none; }
  /* the one showing: a longer pill in its colour (no filling - it does not tell how long it stays) */
  .sc-tab.is-on { width: 22px; background: var(--a); }
  .sc-tab i { display: none !important; }
  html[data-theme="light"] .sc-tab { background: rgba(0, 0, 0, 0.14); }
  html[data-theme="light"] .sc-tab.is-on { background: var(--a); }
}

/* phones: a little room between the header and the first card; the cards follow the finger (swipe, landing.js) */
@media (max-width: 760px) {
  .ld-hero .sc { margin-top: 14px; touch-action: pan-y; }
}

/* =========================================================
   PHONES, BIT BY BIT (computer unchanged): the first card's words in the middle, the four figures in the middle,
   each section heading on one line, the three steps and the open tuitions as round-ended cards (a line that does not
   fit slides along - landing.js LDPhone), the subject's letters in a circle, a lower last card with bolder arrows
   ========================================================= */
@media (max-width: 760px) {
  /* the first card: its words and buttons in the middle of the card, top to bottom */
  .sc-slide.sc-home.is-on { display: flex !important; flex-direction: column; justify-content: center; align-items: center; }
  .sc-home .ld-btns { justify-content: center; width: 100%; }
  .sc-home .ld-btns .ld-btn { white-space: nowrap; }
  .sc-home .ld-trust { width: 100%; }
  .sc-home .ld-trust, .sc-home .ld-checks { justify-content: center; }

  /* the four figures in the middle of their boxes */
  .ld-kpi { align-items: center !important; text-align: center !important; }
  .ld-kpi i { margin-left: auto; margin-right: auto; }

  /* the headings: one line */
  .ld-sec .ld-h2.ld-one { max-width: none; white-space: nowrap; }
  .ld-sec .ld-h2.ld-one br { display: none; }

  /* a line that slides along */
  .ld-run { display: block; overflow: hidden; white-space: nowrap; }
  .ld-run-in { display: inline-flex; gap: 40px; }
  .ld-run.is-moving { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .ld-run.is-moving .ld-run-in { animation: ldRun var(--dur, 10s) linear infinite; }

  /* the three steps: round-ended cards, the words on one line each */
  .ld-step { border-radius: 999px !important; padding: 10px 22px 10px 10px !important; }
  .ld-step p { margin-top: 2px; }

  /* open tuitions: round-ended cards - the subject, then class · board · mode · time (one line), then the place */
  .ld-tu { border-radius: 999px !important; padding: 10px 12px 10px 10px !important; }
  .ld-tu > div { min-width: 0; }
  .ld-tu b { white-space: nowrap; }
  .ld-tu > div > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ld-tu > .ld-sj { width: 46px; height: 46px; border-radius: 50% !important; }

  /* the last card: lower, bolder arrows */
  .ld-cta { padding: 22px 16px 18px !important; }
  .ld-cta h3 { font-size: 26px !important; max-width: 290px; margin: 0 auto !important; }
  .ld-cta .ld-btns { margin-top: 14px !important; }
  .ld-cta .ld-btn { padding: 11px 12px !important; }
  .ld-cta .ld-ico { stroke-width: 3; width: 18px; height: 18px; }
}
@keyframes ldRun { to { transform: translateX(calc(-50% - 20px)); } }

/* phones: the first slide ("The right tutor, right around the corner") a card like the course cards after it - as
   tall as they are, its lines spread evenly from its top to its bottom (no empty band under the header, the buttons
   and ticks low where the other cards have theirs) */
@media (max-width: 760px) {
  .sc-slide.sc-home.is-on { align-self: stretch; margin: 0; justify-content: space-between; box-sizing: border-box; padding: 22px 16px 18px; border-radius: 26px; overflow: hidden;
    background: radial-gradient(120% 70% at 50% 0%, rgba(34, 197, 94, 0.16), transparent 62%), linear-gradient(180deg, #121614, #0b0a0d);
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.22); }
  .sc-home > * { margin-top: 0 !important; margin-bottom: 0 !important; }
  /* the dots close under the cards */
  .sc-tabs { margin-top: 4px; padding-top: 2px; }
  html[data-theme="light"] .sc-slide.sc-home.is-on { background: radial-gradient(120% 70% at 50% 0%, rgba(34, 197, 94, 0.12), transparent 62%), #ffffff;
    box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.25), 0 14px 34px -24px rgba(15, 23, 42, 0.35); }
}