/* ==========================================================================
   PDGT Hub · Landing page (public "/" route)
   --------------------------------------------------------------------------
   Layout only. Every colour, radius, shadow and easing comes from
   css/tahoe-ds.css so the page themes with the rest of the app for free.

   Two readability zones, because the aurora wallpaper is dark in BOTH themes:

     .lp-hero      sits directly on the wallpaper -> fixed light-on-dark text
                   (the --lp-od-* tokens below, identical light and dark).
     .lp-surface   a translucent --main-bg sheet over the wallpaper, exactly
                   like the app's content area -> normal --t1/--t2/--t3 work.

   The sticky menu bar spans both, so it swaps palettes at .is-scrolled.

   Breakpoints follow the policy at the top of tahoe-ds.css: 768px is the one
   structural break; the rest are component breaks chosen where a specific
   block runs out of room.
   ========================================================================== */

/* tahoe-ds.css pins html to `height: 100dvh; overflow: hidden` below 768px,
   because every other page is a fixed macOS-style window that scrolls its own
   inner pane. Those pages opt back out individually (see the
   `html:has(body.tahoe-login)` rule). The landing page is an ordinary
   scrolling document, so it must opt out too — without this it cannot be
   scrolled at all on a phone. Keyed off the data-page attribute rather than
   :has() or a JS-set class so it still applies with scripting disabled. */
html[data-page="landing"] {
  height: auto;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--a5);
}

.lp {
  /* On-wallpaper palette — deliberately theme-independent. */
  --lp-od-1: rgba(255, 255, 255, 0.96);
  --lp-od-2: rgba(255, 255, 255, 0.74);
  --lp-od-3: rgba(255, 255, 255, 0.54);
  --lp-od-bdr: rgba(255, 255, 255, 0.18);
  --lp-od-bg: rgba(255, 255, 255, 0.08);

  --lp-wrap: 1180px;
  --lp-gut: 20px;
  --lp-bar-h: 58px;

  font-family: var(--font);
  color: var(--t1);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* The landing page is a scrolling document, not a fixed app window — unlike
   .tahoe-app / .tahoe-login, which centre a fixed window and lock scrolling.
   Body keeps the DS's overflow-x: hidden and the document scrolls normally;
   giving body its own overflow-y makes it a scroll container and breaks
   painting of the fixed aurora layer once the page is scrolled. */
body.lp {
  display: block;
  padding: 0;
  margin: 0;
  background: var(--a5);
}

.lp-wrap {
  width: 100%;
  max-width: var(--lp-wrap);
  margin: 0 auto;
  padding: 0 var(--lp-gut);
}

/* Conceal while the auth hint is being re-checked, so a returning student is
   never shown marketing for a frame before the bounce to /home. The DS rule
   at tahoe-ds.css is scoped to .win--login and does not cover this page. */
html.auth-checking .lp-topbar,
html.auth-checking .lp-main,
html.auth-checking .lp-cta-bar { opacity: 0; }

/* ── MENU BAR ─────────────────────────────────────────────────────────── */

.lp-topbar {
  position: sticky;
  top: 0;
  z-index: 900;
  height: var(--lp-bar-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease);
  padding-top: env(safe-area-inset-top);
}

.lp-topbar.is-scrolled {
  background: var(--tb-bg);
  border-bottom-color: var(--tb-bdr);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
}

.lp-topbar-in {
  width: 100%;
  max-width: var(--lp-wrap);
  margin: 0 auto;
  padding: 0 var(--lp-gut);
  display: flex;
  align-items: center;
  gap: 14px;
}

.lp-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
}

.lp-brand img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: block;
}

.lp-brand-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--lp-od-1);
  transition: color var(--dur) var(--ease);
}

.lp-brand-name em { font-style: normal; color: #b9a9ff; }

.lp-topbar.is-scrolled .lp-brand-name { color: var(--t1); }
.lp-topbar.is-scrolled .lp-brand-name em { color: var(--purple); }

.lp-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
}

.lp-nav a {
  font-size: 13px;
  font-weight: 500;
  color: var(--lp-od-2);
  text-decoration: none;
  padding: 7px 11px;
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.lp-nav a:hover { color: var(--lp-od-1); background: var(--lp-od-bg); }
.lp-topbar.is-scrolled .lp-nav a { color: var(--t2); }
.lp-topbar.is-scrolled .lp-nav a:hover { color: var(--t1); background: var(--sb-hover); }

/* js/i18n.js injects the BM/EN pill into .tb-right — give it one to find so it
   lands in the menu bar instead of falling back to a floating overlay. */
.lp-topbar .tb-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lp-od-bdr);
  background: var(--lp-od-bg);
  color: var(--lp-od-1);
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.lp-icon-btn .material-symbols-rounded { font-size: 18px; }
.lp-icon-btn:hover { background: rgba(255, 255, 255, 0.16); }

.lp-topbar.is-scrolled .lp-icon-btn {
  border-color: var(--field-bdr);
  background: var(--field-bg);
  color: var(--t2);
}
.lp-topbar.is-scrolled .lp-icon-btn:hover { color: var(--t1); }

/* Buttons ---------------------------------------------------------------- */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--dur-fast) var(--spring), box-shadow var(--dur) var(--ease),
              background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.lp-btn .material-symbols-rounded { font-size: 18px; }
.lp-btn:active { transform: scale(0.97); }

.lp-btn--primary {
  background: linear-gradient(135deg, var(--purple), var(--purple-d));
  color: #fff;
  box-shadow: 0 4px 14px rgba(110, 93, 216, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.lp-btn--primary:hover { box-shadow: 0 8px 22px rgba(110, 93, 216, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22); }

/* Ghost button on the wallpaper. */
.lp-btn--ghost {
  background: var(--lp-od-bg);
  border-color: var(--lp-od-bdr);
  color: var(--lp-od-1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lp-btn--ghost:hover { background: rgba(255, 255, 255, 0.16); }

/* Anywhere the button sits on a themed surface rather than on the wallpaper,
   it has to use the theme's own text colour — white-on-glass is invisible
   against the light sheet. */
.lp-topbar.is-scrolled .lp-btn--ghost,
.lp-surface .lp-btn--ghost,
.lp-cta-bar .lp-btn--ghost {
  background: var(--field-bg);
  border-color: var(--field-bdr);
  color: var(--t1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.lp-topbar.is-scrolled .lp-btn--ghost:hover,
.lp-surface .lp-btn--ghost:hover,
.lp-cta-bar .lp-btn--ghost:hover { border-color: var(--purple); }

.lp-btn--sm { height: 34px; padding: 0 14px; font-size: 13px; }
.lp-btn--lg { height: 48px; padding: 0 24px; font-size: 15px; }

/* ── HERO ─────────────────────────────────────────────────────────────── */

.lp-hero {
  position: relative;
  padding: clamp(40px, 7vh, 76px) 0 clamp(56px, 9vh, 104px);
  color: var(--lp-od-1);
}

.lp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--lp-od-bdr);
  background: var(--lp-od-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--lp-od-1);
  margin-bottom: 18px;
}

.lp-eyebrow .material-symbols-rounded { font-size: 15px; color: #b9a9ff; }

.lp-h1 {
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  color: var(--lp-od-1);
  text-wrap: balance;
}

.lp-h1 em {
  font-style: normal;
  background: linear-gradient(120deg, #c3b4ff 0%, #8fd8ff 55%, #7ff0d8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #c3b4ff;
}

.lp-lead {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.62;
  color: var(--lp-od-2);
  margin: 0 0 26px;
  max-width: 56ch;
}

.lp-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.lp-trust {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--lp-od-3);
  margin: 0;
}

.lp-trust .material-symbols-rounded { font-size: 16px; color: #7ff0d8; }

/* ── CONTENT SURFACE ──────────────────────────────────────────────────── */

.lp-surface {
  position: relative;
  background: var(--main-bg);
  backdrop-filter: saturate(140%) blur(30px);
  -webkit-backdrop-filter: saturate(140%) blur(30px);
  border-top: 1px solid var(--card-bdr);
}

.lp-sec { padding: clamp(56px, 8vh, 104px) 0; }
.lp-sec + .lp-sec { border-top: 1px solid var(--card-bdr); }

.lp-sec-head {
  max-width: 62ch;
  margin: 0 auto clamp(32px, 4vh, 52px);
  text-align: center;
}

.lp-sec-title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--t1);
  margin: 0 0 12px;
  text-wrap: balance;
}

.lp-sec-title em { font-style: normal; color: var(--purple); }

.lp-sec-sub {
  font-size: 15px;
  line-height: 1.62;
  color: var(--t2);
  margin: 0;
}

/* ── STAT BAND ────────────────────────────────────────────────────────── */

.lp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--card-bdr);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--card-sh);
  overflow: hidden;
}

.lp-stat {
  padding: 22px 16px;
  text-align: center;
  border-right: 1px solid var(--card-bdr);
}

.lp-stat:last-child { border-right: 0; }

.lp-stat-n {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--purple);
  line-height: 1.1;
}

.lp-stat-l {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--t3);
  margin-top: 5px;
}

/* ── CARD GRIDS ───────────────────────────────────────────────────────── */

/* Two-up rows stay narrower than the full container so a pair of cards reads
   as a deliberate pair rather than as a three-up row with a hole in it. */
.lp-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 800px; margin: 0 auto; }
.lp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.lp-card {
  background: var(--card);
  border: 1px solid var(--card-bdr);
  border-radius: var(--r-lg);
  box-shadow: var(--card-sh);
  padding: 22px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.lp-card:hover { transform: translateY(-3px); box-shadow: var(--card-sh-h); }

.lp-card-ico {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--purple-l);
  color: var(--purple);
  margin-bottom: 14px;
}

.lp-card-ico .material-symbols-rounded { font-size: 22px; }

.lp-card-t {
  font-size: 15.5px;
  font-weight: 650;
  color: var(--t1);
  margin: 0 0 7px;
  letter-spacing: -0.01em;
}

.lp-card-d { font-size: 13.5px; line-height: 1.6; color: var(--t2); margin: 0; }

/* ── FEATURE BLOCKS ───────────────────────────────────────────────────── */

.lp-feat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.lp-feat + .lp-feat { margin-top: clamp(48px, 7vh, 88px); }

/* The feature blocks are preceded by .lp-sec-head, so the first one is
   :nth-child(2). Target odd children to keep copy on the left first. */
.lp-feat:nth-child(odd) .lp-feat-copy { order: 2; }

.lp-feat-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 12px;
}

.lp-feat-tag .material-symbols-rounded { font-size: 17px; }

.lp-feat-t {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--t1);
  margin: 0 0 12px;
  text-wrap: balance;
}

.lp-feat-d {
  font-size: 15px;
  line-height: 1.66;
  color: var(--t2);
  margin: 0;
  max-width: 52ch;
}

.lp-note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--t3);
  margin: 14px 0 0;
  padding-left: 11px;
  border-left: 2px solid var(--card-bdr);
}

/* ── MAC WINDOW MOCKUPS ───────────────────────────────────────────────── */

.lp-mock {
  border-radius: var(--r-md);
  border: 1px solid var(--win-bdr);
  background: var(--win-bg);
  box-shadow: var(--win-shadow);
  overflow: hidden;
  font-size: 12px;
  color: var(--t1);
}

.lp-mock-tb {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: var(--tb-bg);
  border-bottom: 1px solid var(--tb-bdr);
}

.lp-mock-tls { display: flex; gap: 6px; }
.lp-mock-tls i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.lp-mock-tls i:nth-child(1) { background: var(--tl-r); }
.lp-mock-tls i:nth-child(2) { background: var(--tl-y); }
.lp-mock-tls i:nth-child(3) { background: var(--tl-g); }

.lp-mock-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--t3);
  margin: 0 auto;
  padding-right: 42px;
}

.lp-mock-body { padding: 14px; background: var(--panel2); }

/* Dashboard mock */
.lp-dash { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; }

.lp-dash-rail { display: flex; flex-direction: column; gap: 6px; }

.lp-rail-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--t3);
  padding: 5px 6px;
  border-radius: var(--r-sm);
}

.lp-rail-item .material-symbols-rounded { font-size: 14px; }
.lp-rail-item.is-on { background: var(--sb-active-bg); color: var(--sb-active-c); font-weight: 650; }

.lp-dash-hi { font-size: 13px; font-weight: 700; color: var(--t1); margin-bottom: 2px; }
.lp-dash-sub { font-size: 10.5px; color: var(--t3); margin-bottom: 10px; }

.lp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }

.lp-kpi {
  background: var(--card);
  border: 1px solid var(--card-bdr);
  border-radius: var(--r-sm);
  padding: 8px 7px;
  text-align: center;
}

.lp-kpi b { display: block; font-size: 14px; font-weight: 700; color: var(--purple); letter-spacing: -0.02em; }
.lp-kpi span { display: block; font-size: 9px; color: var(--t3); margin-top: 2px; }

.lp-bar { height: 5px; border-radius: 999px; background: var(--field-bg); margin-top: 10px; overflow: hidden; }
.lp-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--purple), var(--teal)); }

/* Notes mock */
.lp-note-h { font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.lp-note-m { font-size: 10.5px; color: var(--t3); margin-bottom: 10px; }
.lp-note-p { font-size: 11px; line-height: 1.6; color: var(--t2); margin: 0 0 10px; }

.lp-callout {
  border-radius: var(--r-sm);
  padding: 9px 10px;
  font-size: 10.5px;
  line-height: 1.55;
  border: 1px solid transparent;
}

.lp-callout b { display: block; font-size: 10.5px; margin-bottom: 3px; }
.lp-callout--focus { background: var(--amber-l); border-color: rgba(201, 106, 10, 0.24); color: var(--t2); }
.lp-callout--focus b { color: var(--amber); }
.lp-callout--mnemo { background: var(--teal-l); border-color: rgba(13, 148, 136, 0.24); color: var(--t2); margin-bottom: 9px; }
.lp-callout--mnemo b { color: var(--teal); }

.lp-checks { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.lp-check { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--t2); }
.lp-check .material-symbols-rounded { font-size: 14px; color: var(--teal); }
.lp-check.is-off .material-symbols-rounded { color: var(--t4); }
.lp-check.is-off { color: var(--t3); }

/* Exam mock */
.lp-exam-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

.lp-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--r-full);
  font-size: 9.5px;
  font-weight: 650;
  background: var(--purple-l);
  color: var(--purple);
}

.lp-pill .material-symbols-rounded { font-size: 12px; }
.lp-pill--time { background: var(--rose-l); color: var(--rose); font-variant-numeric: tabular-nums; }

.lp-q { font-size: 11.5px; font-weight: 600; line-height: 1.5; color: var(--t1); margin: 0 0 9px; }

.lp-opts { display: flex; flex-direction: column; gap: 5px; }

.lp-opt {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  border: 1px solid var(--card-bdr);
  background: var(--card);
  font-size: 10.5px;
  color: var(--t2);
}

.lp-opt i {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--field-bdr);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  color: var(--t3);
}

.lp-opt.is-right { border-color: rgba(13, 148, 136, 0.45); background: var(--teal-l); color: var(--t1); font-weight: 600; }
.lp-opt.is-right i { background: var(--teal); border-color: var(--teal); color: #fff; }

.lp-expl {
  margin-top: 9px;
  padding: 8px 9px;
  border-radius: var(--r-sm);
  background: var(--teal-l);
  border: 1px solid rgba(13, 148, 136, 0.22);
  font-size: 10px;
  line-height: 1.55;
  color: var(--t2);
}

.lp-expl b { color: var(--teal); }

/* Flashcard mock */
.lp-flip { perspective: 1000px; }

.lp-flip-in {
  position: relative;
  height: 152px;
  transform-style: preserve-3d;
  transition: transform 0.65s var(--spring);
}

.lp-flip:hover .lp-flip-in,
.lp-flip.is-flipped .lp-flip-in { transform: rotateY(180deg); }

.lp-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--card-bdr);
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 18px;
  text-align: center;
}

.lp-flip-face--back { transform: rotateY(180deg); background: var(--purple-l); border-color: rgba(110, 93, 216, 0.3); }
.lp-flip-k { font-size: 9.5px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--t3); }
.lp-flip-v { font-size: 14px; font-weight: 650; line-height: 1.4; color: var(--t1); }
.lp-flip-b { font-size: 11px; line-height: 1.55; color: var(--t2); }
.lp-flip-hint { text-align: center; font-size: 10.5px; color: var(--t3); margin-top: 9px; }

/* Game-mode chips */
.lp-modes { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }

.lp-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--card-bdr);
  background: var(--card);
  font-size: 12.5px;
  font-weight: 550;
  color: var(--t2);
}

.lp-mode i { font-style: normal; font-size: 13px; line-height: 1; }

/* Arcade mock ---------------------------------------------------------------
   The arcade is the one surface that keeps a dark neon look in both themes,
   so this mockup is intentionally fixed-dark instead of token-driven. Its
   colours mirror the per-mode neon values in arcade.html (quick = #A855F7,
   combo = #F97316, XP = #FCD34D). */
.lp-mock--game { border-color: rgba(168, 85, 247, 0.35); background: #16122a; }
.lp-mock--game .lp-mock-tb { background: #1d1836; border-bottom-color: rgba(255, 255, 255, 0.08); }
.lp-mock--game .lp-mock-title { color: rgba(255, 255, 255, 0.62); }
.lp-mock--game .lp-mock-body { background: #16122a; }

.lp-game-hud { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }

.lp-game-bar {
  flex: 1;
  min-width: 40px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.lp-game-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #a855f7;
  box-shadow: 0 0 8px #a855f7;
}

.lp-game-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lp-game-chip .material-symbols-rounded { font-size: 13px; }
.lp-game-chip--combo { background: rgba(249, 115, 22, 0.15); border: 1px solid rgba(249, 115, 22, 0.3); color: #f97316; }
.lp-game-chip--time { background: rgba(234, 179, 8, 0.12); border: 1px solid rgba(234, 179, 8, 0.35); color: #eab308; }
.lp-game-chip--xp { background: rgba(252, 211, 77, 0.1); border: 1px solid rgba(252, 211, 77, 0.25); color: #fcd34d; }

.lp-game-q {
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.94);
  margin: 0 0 11px;
}

.lp-game-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }

.lp-game-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  color: rgba(255, 255, 255, 0.78);
}

.lp-game-opt.is-right {
  border-color: rgba(16, 185, 129, 0.6);
  background: rgba(16, 185, 129, 0.16);
  color: #6ee7b7;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.25);
}

.lp-game-foot {
  margin-top: 11px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  color: #6ee7b7;
}

/* Progress / leaderboard mock */
.lp-ring-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }

.lp-ring {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--purple) 0 62%, var(--field-bg) 62% 100%);
}

.lp-ring span {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--panel2);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--t1);
}

.lp-ring-meta b { display: block; font-size: 12.5px; font-weight: 700; color: var(--t1); }
.lp-ring-meta span { display: block; font-size: 10.5px; color: var(--t3); margin-top: 2px; }

.lp-lb { display: flex; flex-direction: column; gap: 5px; }

.lp-lb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-radius: var(--r-sm);
  background: var(--card);
  border: 1px solid var(--card-bdr);
  font-size: 10.5px;
  color: var(--t2);
}

.lp-lb-row b { color: var(--t1); font-weight: 600; }
.lp-lb-row .lp-lb-xp { margin-left: auto; color: var(--purple); font-weight: 700; font-variant-numeric: tabular-nums; }
.lp-lb-row.is-me { background: var(--purple-l); border-color: rgba(110, 93, 216, 0.3); }

/* ── SUBJECT CARDS ────────────────────────────────────────────────────── */

.lp-subject {
  position: relative;
  background: var(--card);
  border: 1px solid var(--card-bdr);
  border-radius: var(--r-lg);
  box-shadow: var(--card-sh);
  padding: 20px 18px 18px;
  overflow: hidden;
  /* Column layout + margin-top:auto on the meta row keeps the count strips
     aligned across cards even when a longer English title wraps. */
  display: flex;
  flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.lp-subject::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--sj, var(--purple));
}

.lp-subject:hover { transform: translateY(-3px); box-shadow: var(--card-sh-h); }

.lp-subject-code {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-full);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--sj, var(--purple));
  background: color-mix(in srgb, var(--sj, var(--purple)) 12%, transparent);
  margin-bottom: 11px;
}

.lp-subject-t {
  font-size: 15px;
  font-weight: 650;
  color: var(--t1);
  line-height: 1.32;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.lp-subject-en { font-size: 12px; color: var(--t3); margin: 0 0 14px; line-height: 1.45; }

.lp-subject-code { align-self: flex-start; }

.lp-subject-meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 11.5px;
  color: var(--t2);
  padding-top: 12px;
  border-top: 1px solid var(--card-bdr);
}

.lp-subject-meta span { display: inline-flex; align-items: center; gap: 4px; }
.lp-subject-meta .material-symbols-rounded { font-size: 14px; color: var(--t4); }

/* ── BILINGUAL DEMO ───────────────────────────────────────────────────── */

.lp-demo {
  max-width: 620px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--card-bdr);
  border-radius: var(--r-lg);
  box-shadow: var(--card-sh);
  overflow: hidden;
}

.lp-demo-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--card-bdr);
  background: var(--panel2);
}

.lp-demo-head b { font-size: 12px; font-weight: 650; color: var(--t2); }

.lp-demo-switch {
  margin-left: auto;
  display: inline-flex;
  padding: 2px;
  gap: 1px;
  border-radius: var(--r-full);
  background: var(--field-bg);
  border: 1px solid var(--field-bdr);
}

.lp-demo-switch button {
  border: 0;
  background: transparent;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 650;
  color: var(--t3);
  padding: 4px 12px;
  border-radius: var(--r-full);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.lp-demo-switch button[aria-pressed="true"] { background: var(--purple); color: #fff; }

.lp-demo-body { padding: 18px 16px; }
.lp-demo-body .lp-q { font-size: 13px; }
.lp-demo-body .lp-opt { font-size: 12px; padding: 9px 11px; }
.lp-demo-body .lp-expl { font-size: 11.5px; }

/* ── WHY TILES ────────────────────────────────────────────────────────── */

.lp-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 26px; }

.lp-why-item { display: flex; gap: 13px; }

.lp-why-ico {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--purple-l);
  color: var(--purple);
}

.lp-why-ico .material-symbols-rounded { font-size: 19px; }
.lp-why-item b { display: block; font-size: 14px; font-weight: 650; color: var(--t1); margin-bottom: 4px; }
.lp-why-item p { font-size: 13px; line-height: 1.58; color: var(--t2); margin: 0; }

/* ── PRICING ──────────────────────────────────────────────────────────── */

.lp-plan {
  max-width: 460px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid rgba(110, 93, 216, 0.35);
  border-radius: var(--r-xl);
  box-shadow: 0 10px 34px rgba(110, 93, 216, 0.14), var(--card-sh);
  padding: 28px 26px;
  text-align: center;
}

.lp-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 11px;
  border-radius: var(--r-full);
  background: var(--purple-l);
  color: var(--purple);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}

.lp-plan-name { font-size: 15px; font-weight: 650; color: var(--t2); margin: 0 0 6px; }

.lp-plan-price {
  font-size: clamp(2.4rem, 6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--t1);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.lp-plan-once { font-size: 13px; color: var(--t3); margin: 6px 0 20px; }

.lp-plan-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 20px 0 0;
  border-top: 1px solid var(--card-bdr);
  display: grid;
  gap: 9px;
  text-align: left;
}

.lp-plan-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t2);
}

.lp-plan-list .material-symbols-rounded { font-size: 18px; color: var(--teal); flex-shrink: 0; }

.lp-plan .lp-btn { width: 100%; }

.lp-plan-foot {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--t3);
  margin: 14px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
}

.lp-plan-foot .material-symbols-rounded { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.lp-faq { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }

.lp-q-item {
  background: var(--card);
  border: 1px solid var(--card-bdr);
  border-radius: var(--r-lg);
  box-shadow: var(--card-sh);
  overflow: hidden;
}

.lp-q-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--t1);
  -webkit-tap-highlight-color: transparent;
}

.lp-q-item summary::-webkit-details-marker { display: none; }

.lp-q-item summary::after {
  content: "expand_more";
  font-family: "Material Symbols Rounded";
  font-size: 20px;
  color: var(--t3);
  margin-left: auto;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}

.lp-q-item[open] summary::after { transform: rotate(180deg); }
.lp-q-item[open] summary { color: var(--purple); }

.lp-q-item .lp-a {
  padding: 0 18px 17px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--t2);
  margin: 0;
}

.lp-q-item summary:focus-visible { outline: 2px solid var(--purple); outline-offset: -2px; }

/* ── FINAL CTA ────────────────────────────────────────────────────────── */

.lp-final { text-align: center; }

.lp-final .lp-sec-title { margin-bottom: 10px; }

.lp-final-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 26px;
}

/* ── FOOTER ───────────────────────────────────────────────────────────── */

.lp-footer {
  position: relative;
  border-top: 1px solid var(--card-bdr);
  background: var(--panel2);
  padding: 40px 0 calc(32px + env(safe-area-inset-bottom));
}

.lp-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 28px;
  margin-bottom: 28px;
}

.lp-footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lp-footer-brand img { width: 32px; height: 32px; border-radius: 8px; }
.lp-footer-brand b { font-size: 15px; font-weight: 700; color: var(--t1); }
.lp-footer p { font-size: 12.5px; line-height: 1.6; color: var(--t3); margin: 0; }

.lp-footer h4 {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t3);
  margin: 0 0 12px;
}

.lp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

/* Padded rather than bare text: a 15px line box is a poor click target for a
   mouse and an unusable one for a thumb. */
.lp-footer ul a {
  display: inline-block;
  padding: 7px 0;
  font-size: 13px;
  color: var(--t2);
  text-decoration: none;
}

.lp-footer ul a:hover { color: var(--purple); }

.lp-footer-bar {
  border-top: 1px solid var(--card-bdr);
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--t3);
}

/* ── STICKY MOBILE CTA ────────────────────────────────────────────────── */

.lp-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 850;
  display: none;
  gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--tb-bg);
  border-top: 1px solid var(--tb-bdr);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease);
}

.lp-cta-bar.is-on { transform: none; }
.lp-cta-bar .lp-btn { flex: 1; }

/* ── TOUCH TARGETS ────────────────────────────────────────────────────── */
/* Apple HIG / WCAG 2.5.5 want a 44px minimum hit area. Several controls here
   are visually smaller than that on purpose (a 44px-tall menu bar button
   would wreck the density), so the target is grown with an absolutely
   positioned ::after overlay — the same trick as .tap44 in tahoe-ds.css —
   which enlarges the hit area without inflating layout height.

   Gated on any-pointer rather than pointer: an iPad with a Magic Keyboard
   reports `pointer: fine` yet still takes touch, and iPad landscape is
   >=1024px so the width breakpoints would miss it entirely. any-pointer is
   true whenever *some* attached input is coarse, which is the real question. */
@media (any-pointer: coarse) {
  .lp-nav a,
  .lp-icon-btn,
  .lp-brand,
  .lp-demo-switch button,
  .lp-footer ul a,
  .lp-topbar .sh-lang-switch a,
  .lp-topbar .lp-btn--sm { position: relative; }

  .lp-nav a::after,
  .lp-icon-btn::after,
  .lp-brand::after,
  .lp-demo-switch button::after,
  .lp-footer ul a::after,
  .lp-topbar .sh-lang-switch a::after,
  .lp-topbar .lp-btn--sm::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    min-height: 44px;
  }

  /* Spread the footer rows so neighbouring 44px targets cannot overlap. */
  .lp-footer ul { gap: 10px; }

  /* The sticky bar is the primary conversion control on a phone — give it a
     real 48px button rather than an invisible overlay. */
  .lp-cta-bar .lp-btn { height: 48px; }

  /* :hover never fires on touch, so the flashcard must be tapped. */
  .lp-flip { cursor: pointer; }
}

/* ── SCROLL REVEAL ────────────────────────────────────────────────────── */

/* Gated on html.lp-js, set by the head script. Without JavaScript the reveal
   never runs, so the starting opacity: 0 would hide everything below the hero
   permanently — better to simply show the page unanimated. */
html.lp-js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
html.lp-js .reveal.is-in { opacity: 1; transform: none; }

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */

@media (max-width: 1179px) {
  .lp { --lp-wrap: 960px; }
  .lp-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 1023px) {
  .lp-nav { display: none; }
  .lp-why { grid-template-columns: repeat(2, 1fr); }
  .lp-grid-4 { grid-template-columns: repeat(2, 1fr); }

  .lp-hero-grid { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .lp-hero-copy { display: flex; flex-direction: column; align-items: center; }
  .lp-lead { margin-left: auto; margin-right: auto; }
  .lp-hero-cta { justify-content: center; }
  .lp-hero-art { max-width: 620px; margin: 0 auto; width: 100%; }

  /* Stacked: the copy must always come first, whichever side it sat on in the
     two-column layout. Resets every block rather than a parity subset so it
     cannot drift out of step with the base alternation rule again. */
  .lp-feat { grid-template-columns: minmax(0, 1fr); }
  /* Needs the extra class to outrank the :nth-child(odd) base rule, which
     carries pseudo-class specificity. */
  .lp-sec .lp-feat .lp-feat-copy { order: 0; }
  .lp-feat-d { max-width: none; }
}

/* Structural break — see the breakpoint policy in tahoe-ds.css. */
@media (max-width: 767px) {
  .lp { --lp-gut: 16px; --lp-bar-h: 54px; }

  .lp-sec { padding: 44px 0; }
  .lp-hero { padding: 28px 0 48px; }

  .lp-grid-2,
  .lp-grid-3,
  .lp-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .lp-why { grid-template-columns: minmax(0, 1fr); }

  .lp-stats { grid-template-columns: repeat(2, 1fr); }
  .lp-stat:nth-child(2n) { border-right: 0; }
  .lp-stat:nth-child(-n + 2) { border-bottom: 1px solid var(--card-bdr); }

  .lp-hero-cta { flex-direction: column; align-self: stretch; }
  .lp-hero-cta .lp-btn { width: 100%; }
  .lp-trust { justify-content: center; }

  /* Full-fat glass is expensive on mobile GPUs — the DS drops it on the login
     window below 768px for the same reason. */
  .lp-surface { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--main-bg); }
  .lp-btn--ghost { backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* A shrunken desktop layout is unreadable on a phone: collapse the mockups
     to a single column rather than scaling them down. */
  .lp-dash { grid-template-columns: minmax(0, 1fr); }
  .lp-dash-rail { flex-direction: row; flex-wrap: wrap; }
  .lp-kpis { grid-template-columns: repeat(2, 1fr); }
  .lp-mock-body { padding: 12px; }

  .lp-cta-bar { display: flex; }
  .lp-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .lp-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }

  .lp-topbar .lp-btn--ghost { display: none; }
  .lp-plan { padding: 22px 18px; }
}

@media (max-width: 399px) {
  .lp-h1 { font-size: 1.75rem; }
  .lp-stat { padding: 16px 10px; }
  .lp-topbar-in { gap: 8px; }
  .lp-topbar .tb-right { gap: 6px; }
  /* Keep the theme toggle: it is the only way to switch theme from this page,
     and the sticky CTA bar already covers the sign-up action down here. */
  .lp-topbar .lp-btn--sm { padding: 0 11px; }
}

/* ── FALLBACKS & PREFERENCES ──────────────────────────────────────────── */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lp-topbar.is-scrolled,
  .lp-cta-bar { background: var(--panel); }
  .lp-surface { background: var(--panel2); }
  .lp-btn--ghost,
  .lp-eyebrow { background: rgba(255, 255, 255, 0.14); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .lp-flip-in { transition: none; }
  .lp-flip:hover .lp-flip-in { transform: none; }
  .lp-card:hover,
  .lp-subject:hover { transform: none; }
  .lp-cta-bar { transition: none; }
}

@media print {
  .lp-topbar,
  .lp-cta-bar { display: none; }
  .lp-surface { background: none; }
}