/* ==========================================================================
   Landing page (index.html). Mobile first, built on the tokens in base.css:
   the platform's glass look, toned down — a slower, dimmer aurora, frosted
   cards, and glow only on the primary button.
   ========================================================================== */

.landing {
  --lp-primary: #047857;
  --lp-primary-hover: #065f46;
  /* deep emerald → teal: keeps white button text at AA contrast */
  --lp-grad: linear-gradient(135deg, #047857 0%, #0f766e 55%, #0e7490 100%);
  --lp-accent: rgb(var(--p-light));
  --lp-tint: rgb(var(--p) / 0.1);
  --lp-tint-border: rgb(var(--p-light) / 0.28);
  --lp-alt: rgb(255 255 255 / 0.018);
  --lp-card: var(--surface);
  --lp-header: rgb(8 10 22 / 0.62);
  --lp-gutter: 16px;
}
:root[data-theme='light'] .landing {
  --lp-accent: #047857;
  --lp-tint: rgb(var(--p) / 0.09);
  --lp-tint-border: rgb(4 120 87 / 0.22);
  --lp-alt: rgb(255 255 255 / 0.35);
  --lp-card: var(--surface);
  --lp-header: rgb(255 255 255 / 0.62);
}

html { scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.landing { overflow-x: clip; }
.landing .container { width: min(1160px, 100% - 2 * var(--lp-gutter)); }

/* Primary: deep gradient with a soft glow. Secondary buttons stay frosted. */
.landing .btn-primary { background: var(--lp-grad); box-shadow: 0 0 0 1px rgb(var(--p-light) / 0.25), 0 8px 24px -10px rgb(var(--p-deep) / 0.7); }
.landing .btn-primary:hover { background: var(--lp-grad); filter: brightness(1.08); box-shadow: 0 0 0 1px rgb(var(--p-light) / 0.4), 0 10px 30px -10px rgb(var(--p-deep) / 0.85); }

/* The aurora, slower and dimmer than inside the app so text stays calm to read. */
.landing .aurora::before, .landing .aurora::after { opacity: 0.32; animation-duration: 48s; }
.landing .aurora i { opacity: 0.16; animation-duration: 60s; }
:root[data-theme='light'] .landing .aurora::before, :root[data-theme='light'] .landing .aurora::after { opacity: 0.3; }

/* Frosted surfaces (same recipe as .glass in base.css). Blur only where it is cheap enough. */
.lp-join, .lp-mock, .lp-tool, .lp-more, .lp-who li, .lp-steps li, .lp-final, .lp-toast {
  background: var(--lp-card);
  border-color: var(--border);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--ov-2);
}
@media (min-width: 768px) {
  .lp-join, .lp-mock, .lp-tool, .lp-more, .lp-who li, .lp-steps li, .lp-final, .lp-toast {
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
  }
}


.lp-skip {
  position: absolute;
  inset-inline-start: 16px;
  top: -60px;
  z-index: 60;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--lp-primary);
  color: #fff;
  font-weight: 700;
}
.lp-skip:focus { top: 12px; color: #fff; }

/* ---------------------------------------------------------------- header */

.lp-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--lp-header);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.lp-header.scrolled, .lp-header.open { border-bottom-color: var(--border); }
.lp-header-inner { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.lp-header .logo { font-size: 20px; }
.lp-nav { display: none; }
.lp-actions { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.lp-actions > * { display: none; }
.lp-actions > .lp-join-link { display: inline-flex; }
.lp-join-link { align-items: center; gap: 6px; font-weight: 700; font-size: 14.5px; color: var(--text-2); padding: 8px 10px; border-radius: 10px; }
.lp-join-link:hover { color: var(--text); background: var(--surface-2); }
.lp-menu-btn { background: transparent; color: var(--text); width: 44px; height: 44px; }
.lp-menu-btn:hover { background: var(--surface-2); }

@media (min-width: 640px) {
  .lp-actions > .btn-primary:not([hidden]) { display: inline-flex; }
}
@media (min-width: 1080px) {
  .lp-nav { display: flex; gap: 2px; margin-inline-start: 24px; }
  .lp-nav a { color: var(--text-2); font-weight: 600; font-size: 14.5px; padding: 8px 12px; border-radius: 10px; }
  .lp-nav a:hover { color: var(--text); background: var(--surface-2); }
  .lp-actions > *:not([hidden]) { display: inline-flex; }
  .lp-menu-btn, .lp-mobile { display: none !important; }
}

.lp-mobile { border-top: 1px solid var(--border); max-height: calc(100vh - 64px); overflow-y: auto; }
.lp-mobile .container { padding: 12px 0 20px; display: grid; gap: 16px; }
.lp-mobile-nav { display: grid; }
.lp-mobile-nav a { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 12px; color: var(--text); font-weight: 700; font-size: 16px; }
.lp-mobile-nav a:hover { background: var(--surface-2); color: var(--text); }
.lp-mobile-actions { display: grid; gap: 10px; }
.lp-mobile-actions .btn { height: 48px; }

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

.lp-hero { padding: 36px 0 56px; }
.lp-hero-grid { display: grid; gap: 40px; }
.lp-eyebrow { display: inline-block; font-size: 13.5px; font-weight: 700; line-height: 1.6; color: var(--lp-accent); padding: 5px 12px; border-radius: 12px; background: var(--lp-tint); border: 1px solid var(--lp-tint-border); }
.lp-hero h1 { font-size: clamp(30px, 5.2vw + 10px, 54px); line-height: 1.3; font-weight: 900; margin: 18px 0 16px; text-wrap: balance; }
.lp-lead { font-size: 17px; line-height: 1.9; color: var(--text-2); max-width: 36rem; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.lp-points { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--text-2); font-size: 14.5px; }
.lp-points li { display: inline-flex; align-items: center; gap: 7px; }
.lp-points .icon { color: var(--lp-accent); }

@media (max-width: 479px) {
  .lp-cta .btn { width: 100%; }
}

.lp-join { margin-top: 28px; padding: 18px; border-radius: 18px; background: var(--lp-card); border: 1px solid var(--border-strong); max-width: 520px; }
.lp-join-title { font-size: 17px; font-weight: 800; margin-bottom: 10px; }
.lp-join-label { display: block; font-size: 14px; font-weight: 700; color: var(--text-2); margin-bottom: 8px; }
.lp-join-row { display: grid; gap: 8px; }
.lp-join-row .input { height: 48px; font-size: 16px; text-align: left; }
.lp-join-row .btn { height: 48px; }
.lp-join-help { margin-top: 10px; font-size: 13.5px; color: var(--text-2); }
.lp-join-error { margin-top: 10px; font-size: 14px; font-weight: 700; color: #fda4af; background: var(--danger-bg); border: 1px solid rgb(244 63 94 / 0.3); border-radius: 10px; padding: 8px 12px; }
:root[data-theme='light'] .lp-join-error { color: #be123c; }
.lp-join .input[aria-invalid='true'] { border-color: var(--danger); }
.lp-join .btn[aria-busy='true'] { pointer-events: none; opacity: 0.85; }
@media (min-width: 420px) {
  .lp-join-row { grid-template-columns: 1fr auto; }
}

/* Product preview (illustration built from the classroom's own pieces). */
.lp-preview { margin: 0; }
.lp-preview figcaption { margin-top: 12px; text-align: center; font-size: 13px; color: var(--text-2); }
.lp-mock { border-radius: 20px; padding: 12px; background: var(--glass-strong); border: 1px solid var(--border-strong); box-shadow: var(--shadow), inset 0 1px 0 var(--ov-2); display: grid; gap: 10px; }
.lp-mock-bar { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 2px 4px; min-width: 0; }
.lp-mock-bar b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #fda4af; background: rgb(244 63 94 / 0.14); border-radius: 99px; padding: 2px 10px; flex-shrink: 0; }
:root[data-theme='light'] .lp-live { color: #be123c; }
.lp-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #f43f5e; }
.lp-mock-time { margin-inline-start: auto; color: var(--text-2); font-size: 12px; }
.lp-mock-body { display: grid; gap: 10px; }
.lp-mock-board { border-radius: 14px; background: #fff; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--border); }
.lp-mock-board svg { width: 100%; height: 100%; }
.lp-mock-side, .lp-mock-poll { border-radius: 14px; background: var(--ov-1); border: 1px solid var(--border); padding: 10px 12px; }
.lp-mock-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-2); margin-bottom: 8px; }
.lp-mock-label .mono { margin-inline-start: auto; color: var(--lp-accent); }
.lp-mock-people { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.lp-mock-people li { display: flex; align-items: center; gap: 7px; }
.lp-mock-people li.hand .icon { color: var(--warning); }
:root[data-theme='light'] .lp-mock-people li.hand .icon { color: #b45309; }
.lp-av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--lp-tint); color: var(--lp-accent); border: 1px solid var(--lp-tint-border); }
.lp-mock-poll b { display: block; font-size: 14px; margin-bottom: 8px; }
.lp-mock-options { display: flex; gap: 6px; }
.lp-mock-options span { flex: 1; text-align: center; padding: 5px 0; border-radius: 9px; border: 1px solid var(--border-strong); font-weight: 700; font-size: 13px; }
.lp-mock-dock { display: flex; justify-content: center; gap: 8px; }
.lp-mock-dock span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ov-2); color: var(--text-2); }
.lp-mock-dock span.on { background: var(--lp-tint); color: var(--lp-accent); box-shadow: inset 0 0 0 1px var(--lp-tint-border); }

@media (min-width: 560px) {
  .lp-mock { grid-template-columns: 1fr 150px; grid-template-areas: 'bar bar' 'board side' 'board poll' 'dock dock'; }
  .lp-mock-bar { grid-area: bar; }
  .lp-mock-body { display: contents; }
  .lp-mock-board { grid-area: board; aspect-ratio: auto; min-height: 220px; }
  .lp-mock-side { grid-area: side; }
  .lp-mock-poll { grid-area: poll; }
  .lp-mock-dock { grid-area: dock; }
  .lp-mock-people { flex-direction: column; }
}
@media (min-width: 1024px) {
  .lp-hero { padding: 64px 0 88px; }
  .lp-hero-grid { grid-template-columns: 1.05fr 0.95fr; grid-template-areas: 'copy preview' 'join preview'; align-items: center; gap: 0 56px; }
  .lp-hero-copy { grid-area: copy; align-self: end; }
  .lp-join { grid-area: join; align-self: start; }
  .lp-preview { grid-area: preview; }
}

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

.lp-section { padding: 64px 0; }
.lp-alt { background: var(--lp-alt); border-block: 1px solid var(--border); }
.lp-head { max-width: 720px; margin: 0 auto 36px; text-align: center; }
.lp-head h2 { font-size: clamp(24px, 2.6vw + 14px, 38px); font-weight: 900; line-height: 1.4; text-wrap: balance; }
.lp-head p { margin-top: 12px; font-size: 16.5px; color: var(--text-2); }
.lp-section h3 { font-size: 17.5px; font-weight: 800; }
.lp-section p { color: var(--text-2); }
.lp-center { display: flex; justify-content: center; margin-top: 36px; }
@media (min-width: 1024px) {
  .lp-section { padding: 96px 0; }
  .lp-head { margin-bottom: 52px; }
}

.lp-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--lp-tint); border: 1px solid var(--lp-tint-border); color: var(--lp-accent); margin-bottom: 14px; }

/* Benefits */
.lp-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.lp-benefits h3 { margin-bottom: 6px; }
.lp-benefits p { font-size: 15px; }
@media (min-width: 640px) { .lp-benefits { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; } }
@media (min-width: 1024px) { .lp-benefits { grid-template-columns: repeat(4, 1fr); } }

/* Tools */
.lp-tools { display: grid; gap: 16px; }
.lp-tool { padding: 24px; border-radius: 18px; background: var(--lp-card); border: 1px solid var(--border); }
.lp-tool h3 { margin-bottom: 8px; }
.lp-tool p { font-size: 15px; }
.lp-tool-main { background: linear-gradient(160deg, rgb(var(--p) / 0.14), rgb(var(--a) / 0.06)), var(--lp-card); border-color: var(--lp-tint-border); }
.lp-tool-main h3 { font-size: 21px; }
.lp-tool-main p { font-size: 16px; }
.lp-checks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.lp-checks li { position: relative; padding-inline-start: 22px; font-size: 15px; }
.lp-checks li::before { content: ''; position: absolute; inset-inline-start: 2px; top: 0.68em; width: 9px; height: 9px; border-radius: 50%; background: var(--lp-accent); }
@media (min-width: 720px) {
  .lp-tools { grid-template-columns: repeat(2, 1fr); }
  .lp-tool-main { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .lp-tools { grid-template-columns: repeat(3, 1fr); }
  .lp-tool-main { grid-column: span 2; grid-row: span 2; padding: 32px; }
}

.lp-more { margin-top: 28px; padding: 22px 24px; border-radius: 18px; border: 1px dashed var(--border-strong); }
.lp-more h3 { font-size: 16px; margin-bottom: 14px; }
.lp-more ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px 24px; }
.lp-more li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--text-2); }
.lp-more .icon { color: var(--lp-accent); margin-top: 4px; }
@media (min-width: 640px) { .lp-more ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lp-more ul { grid-template-columns: repeat(3, 1fr); } }

/* Audiences */
.lp-who { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lp-who li { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 16px; border: 1px solid var(--border); }
.lp-who li > .icon { color: var(--lp-accent); margin-top: 4px; }
.lp-who h3 { margin-bottom: 4px; }
.lp-who p { font-size: 15px; }
@media (min-width: 640px) { .lp-who { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lp-who { grid-template-columns: repeat(4, 1fr); } .lp-who li { flex-direction: column; } }

/* Steps */
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: lp-step; }
.lp-steps li { position: relative; padding: 24px; border-radius: 18px; background: var(--lp-card); border: 1px solid var(--border); counter-increment: lp-step; }
.lp-steps li::before { content: counter(lp-step); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 14px; font-weight: 900; font-size: 18px; color: #fff; background: var(--lp-grad); box-shadow: 0 6px 18px -8px rgb(var(--p-deep) / 0.8); }
.lp-steps h3 { margin-bottom: 6px; }
.lp-steps p { font-size: 15px; }
@media (min-width: 860px) { .lp-steps { grid-template-columns: repeat(3, 1fr); } }

/* Control & access */
.lp-control { display: grid; gap: 36px; }
.lp-sub { font-size: 18px; margin-bottom: 16px; }
.lp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lp-list li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); }
.lp-list li:last-child { border-bottom: 0; }
.lp-list li > .icon { color: var(--lp-accent); margin-top: 4px; }
.lp-list b { display: block; font-size: 16px; margin-bottom: 2px; }
.lp-list span { display: block; color: var(--text-2); font-size: 15px; }
@media (min-width: 900px) { .lp-control { grid-template-columns: 1fr 1fr; gap: 56px; } }

/* FAQ accordion (native details/summary: keyboard and screen-reader friendly) */
.lp-faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--border); }
.lp-faq details { border-bottom: 1px solid var(--border); }
.lp-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 14px 6px;
  font-size: 16.5px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  border-radius: 10px;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: '';
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  /* physical sides on purpose: a down-pointing chevron in either direction */
  border-right: 2px solid var(--lp-accent);
  border-bottom: 2px solid var(--lp-accent);
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform 0.2s var(--ease);
}
.lp-faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.lp-faq summary:hover { color: var(--lp-accent); }
.lp-faq details > div { padding: 0 6px 20px; display: grid; gap: 10px; }
.lp-faq details p { font-size: 15.5px; line-height: 1.9; }
@media (prefers-reduced-motion: reduce) { .lp-faq summary::after { transition: none; } }

/* Final call to action */
.lp-final { text-align: center; padding: 48px 20px; border-radius: 24px; border: 1px solid var(--lp-tint-border); }
.lp-final.lp-final { background: linear-gradient(135deg, rgb(var(--p-deep) / 0.22), rgb(var(--a) / 0.12)), var(--lp-card); }
.lp-final h2 { font-size: clamp(24px, 2.4vw + 14px, 36px); font-weight: 900; }
.lp-final p { margin: 12px auto 26px; max-width: 34rem; font-size: 16.5px; }

/* ---------------------------------------------------------------- footer */

.lp-footer { border-top: 1px solid var(--border); padding: 44px 0 28px; color: var(--text-2); }
.lp-footer-grid { display: grid; gap: 28px; }
.lp-footer-grid p { margin-top: 12px; font-size: 14.5px; max-width: 26rem; }
.lp-footer-title { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 10px; }
.lp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lp-footer ul a { display: inline-flex; align-items: center; min-height: 36px; color: var(--text-2); font-size: 14.5px; }
.lp-footer ul a:hover { color: var(--text); }
.lp-footer .footer-links { display: block; }
.lp-copy { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 13.5px; }
@media (min-width: 768px) { .lp-footer-grid { grid-template-columns: 2fr 1fr 1fr; } }

/* ---------------------------------------------------------------- preview motion
   One 12 s loop: the pen draws y = x², the tangent and point appear, a student
   raises a hand, the right answer is marked, then it starts over. Every rule
   below only animates; without animation (reduced motion) the final state shows. */

.lp-preview { position: relative; }
.lp-mock { animation: lp-float 7s ease-in-out infinite alternate; }
@keyframes lp-float { to { translate: 0 -6px; } }
@media (min-width: 1024px) {
  .lp-preview { perspective: 1600px; }
  .lp-mock { transform: rotateY(5deg) rotateX(2deg); transform-origin: center; }
}

.lp-draw { stroke-dasharray: 1; animation: lp-draw 12s linear infinite; }
@keyframes lp-draw {
  0% { stroke-dashoffset: 1; opacity: 1; }
  13% { stroke-dashoffset: 0; }
  92% { stroke-dashoffset: 0; opacity: 1; }
  97%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.lp-tangent { animation: lp-tangent 12s infinite; }
@keyframes lp-tangent { 0%, 15% { opacity: 0; } 20%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
.lp-lbl { animation: lp-lbl 12s infinite; }
@keyframes lp-lbl { 0%, 21% { opacity: 0; } 25%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
.lp-dot { transform-box: fill-box; transform-origin: center; animation: lp-dot 12s infinite; }
@keyframes lp-dot { 0%, 18% { transform: scale(0); } 21% { transform: scale(1.5); } 23%, 92% { transform: scale(1); } 97%, 100% { transform: scale(0); } }

.lp-toast {
  position: absolute;
  z-index: 2;
  top: 52px;
  inset-inline-start: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 13px;
  background: var(--glass-strong);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  opacity: 0;
  animation: lp-toast 12s infinite;
}
.lp-toast .icon { color: var(--warning); }
:root[data-theme='light'] .lp-toast .icon { color: #b45309; }
@keyframes lp-toast {
  0%, 28% { opacity: 0; transform: translateY(8px); }
  31%, 62% { opacity: 1; transform: none; }
  66%, 100% { opacity: 0; transform: translateY(-4px); }
}
@media (min-width: 1024px) { .lp-toast { top: 64px; inset-inline-start: -22px; } }

.lp-mock-people li { border-radius: 8px; }
.lp-mock-people li.hand { animation: lp-row 12s infinite; }
@keyframes lp-row { 0%, 28% { background: transparent; } 31%, 62% { background: rgb(251 191 36 / 0.14); } 66%, 100% { background: transparent; } }
.lp-mock-people li.hand .icon { transform-origin: 50% 90%; animation: lp-wave 12s infinite; }
@keyframes lp-wave {
  0%, 30% { transform: rotate(0); }
  32% { transform: rotate(-16deg); } 34% { transform: rotate(14deg); } 36% { transform: rotate(-10deg); } 38%, 100% { transform: rotate(0); }
}

.lp-timer { margin-top: 10px; height: 4px; border-radius: 99px; background: var(--ov-2); overflow: hidden; }
.lp-timer i { display: block; height: 100%; width: 0; background: var(--lp-accent); border-radius: inherit; animation: lp-timer 12s linear infinite; }
@keyframes lp-timer { 0%, 36% { width: 100%; } 50% { width: 0; } 100% { width: 0; } }
.lp-correct { position: relative; animation: lp-correct 12s infinite; }
@keyframes lp-correct {
  0%, 50% { background: transparent; border-color: var(--border-strong); color: inherit; }
  53%, 92% { background: var(--lp-tint); border-color: var(--lp-accent); color: var(--lp-accent); }
  97%, 100% { background: transparent; border-color: var(--border-strong); color: inherit; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-mock, .lp-draw, .lp-tangent, .lp-lbl, .lp-dot, .lp-mock-people li.hand, .lp-mock-people li.hand .icon, .lp-timer i { animation: none; }
  .lp-mock { translate: none; }
  .lp-pen { display: none; }
  .lp-toast { animation: none; opacity: 1; }
  .lp-correct { animation: none; background: var(--lp-tint); border-color: var(--lp-accent); color: var(--lp-accent); }
  .lp-timer i { width: 40%; }
}

/* ---------------------------------------------------------------- tool illustrations
   Small drawings of the real screens (decorative, aria-hidden). Light "paper"
   surfaces read the same in both themes. */

.lp-tool { display: flex; flex-direction: column; }
.lp-viz { margin-bottom: 18px; border-radius: 14px; background: var(--ov-1); border: 1px solid var(--border); padding: 14px; font-size: 12.5px; overflow: hidden; }
.lp-viz em { font-style: normal; }
.lp-note { margin-top: 16px; font-size: 13px; color: var(--text-2); text-align: center; }

/* whiteboard + PDF */
.lp-tool-main { gap: 22px; }
.lp-tool-main .lp-viz { margin: 0; display: grid; gap: 10px; }
.lp-vb-tools { display: flex; gap: 6px; }
.lp-vb-tools span, .lp-vb-pages span { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--ov-2); color: var(--text-2); font-weight: 700; }
.lp-vb-tools span.on, .lp-vb-pages span.on { background: var(--lp-primary); color: #fff; }
.lp-vb-page { position: relative; border-radius: 10px; background: #fff; padding: 16px 18px 20px; min-height: 170px; box-shadow: 0 1px 0 rgb(15 23 42 / 0.06); }
.lp-vb-title { color: #0f172a !important; font-weight: 800; font-size: 13.5px; margin-bottom: 12px; }
.lp-vb-line { display: block; height: 7px; border-radius: 4px; background: #e2e8f0; margin-bottom: 10px; }
.lp-vb-hl { background: linear-gradient(#e2e8f0, #e2e8f0) padding-box; box-shadow: 0 0 0 4px rgb(250 204 21 / 0.45); }
.lp-vb-ink { position: absolute; inset-inline: 10px; bottom: 6px; width: calc(100% - 20px); height: 70px; }
.lp-vb-pages { display: flex; align-items: center; gap: 6px; }
.lp-vb-pages em { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); }
@media (min-width: 1024px) {
  .lp-tool-main { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 32px; }
  .lp-vb-page { min-height: 220px; }
}

/* quiz */
.lp-vq { display: grid; gap: 8px; }
.lp-vq b { font-size: 13.5px; margin-bottom: 2px; }
.lp-vq-opt { position: relative; display: flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--border-strong); overflow: hidden; }
.lp-vq-opt > i { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--ov-2); z-index: 0; }
.lp-vq-opt span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.lp-vq-opt.ok { border-color: var(--lp-accent); }
.lp-vq-opt.ok > i { background: var(--lp-tint); }
.lp-vq-opt.ok em { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--lp-primary); color: #fff; }

/* screen share */
.lp-vs { border-radius: 10px; border: 1px solid var(--border-strong); overflow: hidden; }
.lp-vs-bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: var(--ov-2); }
.lp-vs-bar > i { width: 8px; height: 8px; border-radius: 50%; background: var(--ov-4); }
.lp-vs-bar span { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--lp-accent); }
.lp-vs-screen { position: relative; background: linear-gradient(135deg, #0f766e, #0e7490); height: 104px; }
.lp-vs-slide { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #fff; gap: 4px; }
.lp-vs-slide b { font-size: 14px; }
/* the teacher's pen mark around the formula */
.lp-vs-slide span { justify-self: center; font-size: 16px; font-weight: 800; padding: 2px 16px; border: 2.4px solid #fb7185; border-radius: 50%; transform: rotate(-3deg); }

/* attendance */
.lp-va { display: grid; gap: 2px; }
.lp-va-head, .lp-va-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; padding: 6px 8px; border-radius: 8px; }
.lp-va-head { color: var(--text-2); font-weight: 700; font-size: 11.5px; }
.lp-va-row { background: var(--ov-1); }
.lp-va-row span:first-child { font-weight: 700; }
.lp-va em { justify-self: start; margin-top: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; background: var(--lp-tint); color: var(--lp-accent); font-weight: 700; font-size: 11.5px; }

/* recordings */
.lp-vr { display: grid; gap: 10px; }
.lp-vr-video { position: relative; height: 92px; border-radius: 10px; background: linear-gradient(135deg, #1e293b, #0f172a); display: grid; place-items: center; }
.lp-vr-play { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / 0.92); color: #0f172a; }
.lp-vr-video em { position: absolute; top: 8px; inset-inline-end: 8px; padding: 1px 8px; border-radius: 6px; background: rgb(255 255 255 / 0.16); color: #fff; font-weight: 700; font-size: 11px; }
.lp-vr-progress { height: 4px; border-radius: 99px; background: var(--ov-2); }
.lp-vr-progress i { display: block; width: 38%; height: 100%; border-radius: inherit; background: var(--lp-accent); }
.lp-vr-share { display: flex; align-items: center; justify-content: space-between; font-weight: 700; }
.lp-vr-switch { position: relative; width: 34px; height: 20px; border-radius: 99px; background: var(--lp-primary); }
.lp-vr-switch::after { content: ''; position: absolute; top: 2px; inset-inline-end: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }

/* homework */
.lp-vh { display: grid; gap: 8px; }
.lp-vh-title { display: grid; gap: 2px; margin-bottom: 2px; }
.lp-vh-title b { font-size: 13.5px; }
.lp-vh-title span { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); font-size: 11.5px; }
.lp-vh-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; background: var(--ov-1); }
.lp-vh-thumb { width: 30px; height: 30px; border-radius: 7px; background: #fff repeating-linear-gradient(#fff 0 6px, #cbd5e1 6px 7px); border: 1px solid var(--border-strong); }
.lp-vh-row b { margin-inline-start: auto; color: var(--lp-accent); }
.lp-vh-row em { margin-inline-start: auto; color: var(--text-2); font-size: 11.5px; }

/* ---------------------------------------------------------------- phones: say less
   On a small screen the page leads with the product, keeps one line of copy per
   idea, and drops the explanatory paragraphs (desktop keeps them). */

@media (max-width: 639px) {
  .lp-wide { display: none; }
  .lp-hero { padding: 24px 0 40px; }
  .lp-hero-grid { gap: 24px; }
  .lp-eyebrow { font-size: 12.5px; padding: 3px 10px; }
  .lp-hero h1 { font-size: 30px; margin: 12px 0 10px; }
  .lp-lead { font-size: 15.5px; line-height: 1.8; }
  .lp-cta { flex-wrap: nowrap; margin-top: 18px; }
  .lp-cta .btn { width: auto; flex: 1; height: 48px; padding: 0 12px; font-size: 15px; }
  .lp-points { display: none; }

  .lp-join { margin-top: 0; padding: 14px; }
  .lp-join-title { font-size: 16px; margin-bottom: 8px; }
  .lp-join-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lp-join-row { grid-template-columns: 1fr auto; }
  .lp-join-help { font-size: 12.5px; margin-top: 8px; }

  /* the preview: board, the raised-hand toast and the quick question */
  .lp-mock-side { display: none; }
  .lp-mock-poll { padding: 8px 10px; }
  .lp-mock-poll b { font-size: 13px; margin-bottom: 6px; }
  .lp-preview figcaption { font-size: 12px; }

  .lp-section { padding: 44px 0; }
  .lp-head { margin-bottom: 22px; }
  .lp-head p { display: none; }

  .lp-benefits { grid-template-columns: 1fr 1fr; gap: 18px 14px; }
  .lp-benefits p { display: none; }
  .lp-benefits .lp-ic { margin-bottom: 8px; }
  .lp-benefits h3 { font-size: 15.5px; }

  .lp-tool { padding: 18px; }
  .lp-tool p { font-size: 14.5px; }
  .lp-tool-main p, .lp-checks, .lp-more, .lp-note { display: none; }
  .lp-tool-main .lp-tool-text { display: contents; }
  .lp-tool-main { gap: 0; }
  .lp-tool-main .lp-viz { margin-top: 14px; }
  .lp-viz { padding: 12px; margin-bottom: 14px; }

  .lp-who { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lp-who li { flex-direction: column; gap: 8px; padding: 14px; }
  .lp-who p { display: none; }
  .lp-who h3 { font-size: 15px; }

  .lp-steps li { padding: 16px; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; }
  .lp-steps li::before { grid-row: span 2; margin: 0; width: 34px; height: 34px; font-size: 16px; }
  .lp-steps p { font-size: 14px; }

  .lp-control { gap: 24px; }
  .lp-list li { padding: 10px 0; }
  .lp-list span { display: none; }
  .lp-list b { font-size: 15px; margin: 0; }

  .lp-final { padding: 32px 16px; }
  .lp-final p { display: none; }
  .lp-final h2 { margin-bottom: 18px; }
}
/* Below desktop: headline, then the product, then the student box. */
.lp-hero-grid > .lp-preview { order: 1; }
.lp-hero-grid > .lp-join { order: 2; }