/* =====================================================================
   Cover The Gaps — Public Landing v2 (/) · "Warm Workspace"
   Per ТЗ 05: pain-first hero, live demo peak, honest proof stack.
   Marketing shell: warm paper + ink + brand orange #FF6B35 (actions only).
   Product mini-screens keep the in-app Aurora look (white + indigo) so
   they read as real screenshots, not decoration.
   Fonts: Bricolage Grotesque (display) + Plus Jakarta Sans (text).
   ===================================================================== */

:root {
  --font-text: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Bricolage Grotesque", var(--font-text);

  /* marketing shell */
  --paper:    #faf7f1;
  --paper-2:  #f3eee4;
  --paper-3:  #ece5d7;
  --card:     #fffdf9;
  --line:     #e6dfd2;
  --line-2:   #d8cfbd;
  --ink:      #221f1a;
  --ink-2:    #5c564b;
  --ink-3:    #8d8678;

  --orange:      #ff6b35;
  --orange-deep: #e8501c;
  --orange-soft: #ffe7dc;
  --orange-ghost:#fff3ec;

  /* dark peak block */
  --night:    #1c1915;
  --night-2:  #262219;
  --night-line: rgba(255,255,255,.09);
  --night-text: #f3ede2;
  --night-dim:  #a59c8c;

  /* product (Aurora) accents inside frames */
  --app-bg:      #f4f5f8;
  --app-surface: #ffffff;
  --app-border:  #e6e8ef;
  --app-ink:     #1a2030;
  --app-ink-2:   #5b6577;
  --app-ink-3:   #8b94a6;
  --app-primary: #4f46e5;
  --app-primary-50: #eef0fe;
  --app-green:  #0a8f53;  --app-green-bg: #e6f6ee;
  --app-amber:  #b4690e;  --app-amber-bg: #fbf0dd;
  --app-rose:   #d61f49;  --app-rose-bg:  #fdeaee;
  --app-sky:    #0e7490;  --app-sky-bg:   #e0f2f7;
  --app-violet: #6d28d9;  --app-violet-bg:#efe9fd;

  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px;
  --shadow-sm: 0 1px 2px rgba(45,38,25,.06), 0 1px 1px rgba(45,38,25,.04);
  --shadow:    0 2px 10px rgba(45,38,25,.07), 0 1px 2px rgba(45,38,25,.05);
  --shadow-md: 0 14px 40px -12px rgba(45,38,25,.18), 0 2px 6px rgba(45,38,25,.06);
  --shadow-frame: 0 30px 70px -30px rgba(40,32,18,.35), 0 4px 14px rgba(40,32,18,.08);
  --ease: cubic-bezier(.22,.61,.36,1);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.lp h1, .lp h2, .lp h3, .lp h4 {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
.lp p { margin: 0; text-wrap: pretty; }
.lp a { color: inherit; }
.lp [data-lucide] { width: 18px; height: 18px; stroke-width: 2; flex: none; }
.lp img, .lp svg { vertical-align: middle; }

.wrap { max-width: 1160px; margin-inline: auto; padding-inline: 28px; }
@media (max-width: 640px) { .wrap { padding-inline: 20px; } }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: .08s; }
.reveal.delay-2 { transition-delay: .16s; }
.reveal.delay-3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- atoms ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--orange-deep);
}
.eyebrow--dim { color: var(--ink-3); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 52px; padding: 0 26px; border-radius: 999px;
  font-family: var(--font-text); font-size: 16px; font-weight: 700; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; text-decoration: none; transition: .18s var(--ease);
}
.btn svg { width: 18px; height: 18px; }
.btn--primary {
  background: var(--orange); color: #fff;
  box-shadow: 0 12px 26px -10px rgba(232,80,28,.55);
}
.btn--primary:hover { background: var(--orange-deep); transform: translateY(-1px); box-shadow: 0 16px 30px -10px rgba(232,80,28,.6); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--card); border-color: var(--ink-3); }
.btn--night { background: rgba(255,255,255,.07); color: var(--night-text); border-color: rgba(255,255,255,.2); }
.btn--night:hover { background: rgba(255,255,255,.13); }
.btn--sm { height: 42px; padding: 0 20px; font-size: 14.5px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cta-micro { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-3); font-weight: 600; }
.cta-micro svg { width: 15px; height: 15px; color: var(--app-green); }

.fact-line {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 700; color: var(--ink-2);
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 16px;
}
.fact-line svg { width: 16px; height: 16px; color: var(--orange-deep); }

.s-head { max-width: 720px; margin-bottom: 40px; }
.s-head--center { margin-inline: auto; text-align: center; }
.s-title { font-size: clamp(1.85rem, 3.4vw, 2.7rem); font-weight: 700; margin-top: 14px; }
.s-sub { color: var(--ink-2); font-size: 17.5px; margin-top: 16px; line-height: 1.65; }
.s-head--center .s-sub { margin-inline: auto; max-width: 640px; }

.section { padding: 88px 0; }
@media (max-width: 760px) { .section { padding: 64px 0; } }

/* =====================================================================
   1 · NAVBAR
   ===================================================================== */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 80;
  transition: background .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
  border-bottom: 1px solid transparent;
}
.nav.is-solid { background: rgba(250,247,241,.92); backdrop-filter: blur(10px); border-color: var(--line); box-shadow: 0 6px 24px -14px rgba(45,38,25,.25); }
.nav__in { max-width: 1160px; margin-inline: auto; padding-inline: 28px; height: 72px; display: flex; align-items: center; gap: 6px; }
/* Every item keeps its natural width: a squeezed flex item breaks its label
   over two lines and the whole 72px bar goes ragged. If a locale ever needs
   more room than the row has, the links collapse into the burger below. */
.nav__in > * { flex-shrink: 0; white-space: nowrap; }
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; text-decoration: none; color: var(--ink); }
/* The mark is an <img> of the brand SVG: never in a filled or rounded box
   (guidelines.md §6.8). 24 px box, 8 px gap — the navbar lockup. */
.brand__mark { width: 24px; height: 24px; display: block; flex-shrink: 0; }
.nav__links { display: flex; gap: 2px; margin-left: 8px; }
.nav__links > a, .nav-drop > button {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 10px; border-radius: 10px; border: 0; background: none; cursor: pointer;
  font-family: var(--font-text); font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: .15s;
}
.nav__links > a:hover, .nav-drop > button:hover { color: var(--ink); background: rgba(45,38,25,.06); }
.nav-drop { position: relative; }
.nav-drop > button svg { width: 15px; height: 15px; transition: transform .18s; }
.nav-drop.open > button svg { transform: rotate(180deg); }
.nav-drop__menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 250px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); padding: 8px; display: none; z-index: 90;
}
.nav-drop.open .nav-drop__menu { display: block; }
.nav-drop__menu a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; text-decoration: none; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.nav-drop__menu a:hover { background: var(--paper-2); color: var(--ink); }
.nav-drop__menu a svg { width: 17px; height: 17px; color: var(--orange-deep); }
.nav-drop__menu small { display: block; font-weight: 500; color: var(--ink-3); font-size: 12.5px; margin-top: 1px; }
.nav__spacer { flex: 1; }
.nav__login { font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: none; padding: 9px 11px; border-radius: 10px; white-space: nowrap; }
.nav__login:hover { color: var(--ink); background: rgba(45,38,25,.06); }
.nav__in .btn--sm { padding: 0 16px; }
.nav__burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line-2); background: var(--card); border-radius: 11px; place-items: center; cursor: pointer; color: var(--ink); }
@media (max-width: 1140px) {
  /* Narrow top bar: keep "Log in" visible (as a bordered button) next to the
     burger. The nav links and the two large CTA buttons collapse into the
     burger menu; signup also stays reachable via the hero CTA and the bottom
     sticky CTA, so nothing is lost.
     1140px, not a phone width: brand + four links + language + login + two
     CTAs need ~1130px, and below that the row used to squeeze its labels into
     two lines instead of collapsing. */
  .nav__links { display: none; }
  .nav__login { display: inline-flex; align-items: center; border: 1px solid var(--line-2); }
  .nav__in > .btn { display: none; }
  .nav__burger { display: grid; }
}
/* Same collapse, decided by measurement instead of by a width: a locale with
   longer labels (Russian "Для преподавателей", "Вход в систему") needs the
   burger on a screen where English still fits on one line. The landing script
   adds this class whenever the row overflows its container. */
.nav--compact .nav__links { display: none; }
.nav--compact .nav__login { display: inline-flex; align-items: center; border: 1px solid var(--line-2); }
.nav--compact .nav__in > .btn { display: none; }
.nav--compact .nav__burger { display: grid; }

/* The compact bar can now appear on a wide screen (a long locale), so the
   panel stays full-bleed but indents its rows to the same 1160px column
   the brand above it sits in. */
.nav__mobile { display: none; background: var(--card); border-top: 1px solid var(--line); padding: 10px 0 18px; padding-inline: max(20px, calc((100% - 1104px) / 2)); }
.nav__mobile.open { display: block; }
.nav__mobile a { display: block; padding: 13px 6px; font-size: 16px; font-weight: 600; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--paper-2); }

/* sticky mobile CTA */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(250,247,241,.94); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform .3s var(--ease);
  display: none;
}
.sticky-cta.show { transform: none; }
.sticky-cta .btn { width: 100%; }
@media (max-width: 760px) { .sticky-cta { display: block; } }

/* =====================================================================
   2 · HERO
   ===================================================================== */
.hero { padding: 150px 0 80px; position: relative; overflow: clip; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(720px 420px at 82% 8%, rgba(255,107,53,.10), transparent 65%),
    radial-gradient(600px 480px at 6% 90%, rgba(79,70,229,.05), transparent 60%);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 9fr); gap: 56px; align-items: center; position: relative; }
.hero h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); font-weight: 700; }
.hero h1 em { font-style: normal; color: var(--orange-deep); position: relative; white-space: nowrap; }
.hero h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .14em;
  background: var(--orange-soft); z-index: -1; border-radius: 3px;
}
.hero__lead { font-size: 18.5px; color: var(--ink-2); margin-top: 22px; max-width: 540px; }
.hero__lead strong { color: var(--ink); }
.hero .cta-row { margin-top: 30px; }
.hero__micro { margin-top: 14px; }

/* browser frame (shared) */
.frame { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--r-lg); box-shadow: var(--shadow-frame); overflow: hidden; }
.frame__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--app-border); background: #fafbfd; }
.frame__dots { display: flex; gap: 5px; }
.frame__dots span { width: 9px; height: 9px; border-radius: 50%; background: #dfe2ea; }
.frame__addr { font-size: 12px; color: var(--app-ink-3); background: var(--app-bg); border-radius: 7px; padding: 4px 12px; font-weight: 600; }

/* mini-UI atoms (Aurora look) */
.mu { padding: 16px; background: var(--app-bg); font-size: 13px; color: var(--app-ink); display: grid; gap: 10px; }
.mu * { box-sizing: border-box; }
.mu__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mu__head h5 { margin: 0; font-family: var(--font-text); font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
.mu__head p { font-size: 12px; color: var(--app-ink-2); margin-top: 1px; }
.mu-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; background: var(--app-green-bg); color: var(--app-green); border-radius: 999px; padding: 4px 10px; }
.mu-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mu-card { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 11px; padding: 12px; }
.mu-row { display: flex; align-items: center; gap: 10px; }
.mu-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.mu-ico svg { width: 16px; height: 16px; }
.mu-ico--indigo { background: var(--app-primary-50); color: var(--app-primary); }
.mu-ico--green { background: var(--app-green-bg); color: var(--app-green); }
.mu-ico--amber { background: var(--app-amber-bg); color: var(--app-amber); }
.mu-ico--sky { background: var(--app-sky-bg); color: var(--app-sky); }
.mu-ico--violet { background: var(--app-violet-bg); color: var(--app-violet); }
.mu-title { font-weight: 700; font-size: 12.5px; line-height: 1.3; }
.mu-meta { font-size: 11px; color: var(--app-ink-3); }
.mu-tag { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 3px 9px; margin-left: auto; white-space: nowrap; }
.mu-tag--green { background: var(--app-green-bg); color: var(--app-green); }
.mu-tag--amber { background: var(--app-amber-bg); color: var(--app-amber); }
.mu-tag--indigo { background: var(--app-primary-50); color: var(--app-primary); }
.mu-bar { height: 6px; border-radius: 999px; background: #ecedf3; overflow: hidden; }
.mu-bar i { display: block; height: 100%; border-radius: inherit; background: var(--app-primary); }
.mu-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mu-stat { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 11px; padding: 10px 12px; }
.mu-stat b { display: block; font-size: 17px; letter-spacing: -.02em; }
.mu-stat span { font-size: 11px; color: var(--app-ink-2); font-weight: 600; }

.hero__frame { position: relative; }
.hero__frame .frame { transform: rotate(.6deg); }
.hero__note {
  position: absolute; right: -10px; bottom: -18px; z-index: 2;
  background: var(--ink); color: var(--paper); font-size: 12.5px; font-weight: 700;
  border-radius: 11px; padding: 9px 14px; box-shadow: var(--shadow-md);
  display: flex; gap: 8px; align-items: center; transform: rotate(-1.2deg);
}
.hero__note svg { width: 15px; height: 15px; color: var(--orange); }

@media (max-width: 980px) {
  .hero { padding-top: 120px; }
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .hero__frame .frame { transform: none; }
  .hero__note { right: 6px; }
}

/* =====================================================================
   3 · CHAOS STRIP + time-loss counter
   ===================================================================== */
.chaos { background: var(--paper-2); border-block: 1px solid var(--line); padding: 72px 0; }
.chaos__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: center; }
.chaos h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; }
.chaos p { color: var(--ink-2); margin-top: 16px; }
.chaos__anchor { margin-top: 22px; }

.chaos__visual { display: flex; align-items: center; gap: 18px; justify-content: center; flex-wrap: wrap; }
.chaos__pile { position: relative; width: 250px; height: 218px; flex: none; }
.chaos-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 7px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 10px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-2); padding: 8px 12px;
  box-shadow: var(--shadow-sm); text-decoration: line-through; text-decoration-color: rgba(232,80,28,.55); text-decoration-thickness: 2px;
}
.chaos-chip svg { width: 14px; height: 14px; color: var(--ink-3); }
.chaos__arrow { color: var(--ink-3); flex: none; }
.chaos__arrow svg { width: 34px; height: 34px; }
.chaos__one {
  flex: none; background: var(--card); border: 1px solid var(--line-2); border-radius: 13px;
  box-shadow: var(--shadow-md); padding: 12px 14px; min-width: 200px;
}
.chaos__one .tabbar { display: flex; gap: 5px; margin-bottom: 9px; }
.chaos__one .tabbar span { width: 8px; height: 8px; border-radius: 50%; background: var(--paper-3); }
.chaos__tab { display: flex; align-items: center; gap: 9px; background: var(--orange-ghost); border: 1px solid var(--orange-soft); border-radius: 9px; padding: 9px 12px; font-size: 13px; font-weight: 800; color: var(--ink); }
.chaos__tab img { width: 16px; height: 16px; display: block; }

/* time-loss mini calculator */
.loss {
  margin-top: 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 22px; box-shadow: var(--shadow-sm); max-width: 460px;
}
.loss__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 14px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.loss__row output { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.loss input[type="range"] { width: 100%; accent-color: var(--orange); margin: 2px 0 14px; }
.loss__result { border-top: 1px dashed var(--line-2); padding-top: 14px; font-size: 14.5px; color: var(--ink-2); }
.loss__result b { color: var(--orange-deep); font-size: 19px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

@media (max-width: 980px) {
  .chaos__grid { grid-template-columns: 1fr; gap: 40px; }
  .chaos__visual { justify-content: flex-start; }
  .chaos__arrow { transform: rotate(90deg); width: 100%; text-align: center; }
}

/* =====================================================================
   4 · LIVE DEMO (dark peak)
   ===================================================================== */
.demo { background: var(--night); color: var(--night-text); padding: 100px 0; position: relative; overflow: clip; }
.demo::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(820px 460px at 50% -10%, rgba(255,107,53,.13), transparent 65%);
}
.demo .s-head { position: relative; }
.demo .eyebrow { color: var(--orange); }
.demo .s-title { color: var(--night-text); }
.demo .s-sub { color: var(--night-dim); }

.demo__stage { position: relative; max-width: 880px; margin-inline: auto; }
.demo__machine {
  background: var(--night-2); border: 1px solid var(--night-line); border-radius: var(--r-xl);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.8); overflow: hidden;
}
.demo__input { display: flex; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--night-line); align-items: center; }
.demo__field {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,.3); border: 1px solid var(--night-line); border-radius: 12px;
  padding: 13px 16px; font-size: 15px; min-height: 50px; color: var(--night-text);
}
.demo__field svg { width: 17px; height: 17px; color: var(--orange); }
.demo__caret { display: inline-block; width: 2px; height: 1.15em; background: var(--orange); margin-left: 1px; animation: caret 1s steps(1) infinite; vertical-align: -0.2em; }
@keyframes caret { 50% { opacity: 0; } }
.demo__go { height: 50px; padding: 0 22px; border-radius: 12px; border: 0; background: var(--orange); color: #fff; font-family: var(--font-text); font-weight: 700; font-size: 15px; cursor: pointer; transition: .15s; }
.demo__go:hover { background: var(--orange-deep); }
.demo__goals { display: flex; flex-wrap: wrap; gap: 9px; padding: 16px 20px 4px; }
.demo__goals span { font-size: 12px; color: var(--night-dim); align-self: center; }
.demo-goal {
  border: 1px solid var(--night-line); background: rgba(255,255,255,.04); color: var(--night-text);
  font-family: var(--font-text); font-size: 13px; font-weight: 600; border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: .15s;
}
.demo-goal:hover { border-color: rgba(255,107,53,.5); background: rgba(255,107,53,.1); }
.demo-goal.active { border-color: var(--orange); background: rgba(255,107,53,.16); color: #fff; }

.demo__build { padding: 20px; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); gap: 16px; min-height: 330px; }
.demo__col-label { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--night-dim); margin-bottom: 10px; }
.demo-step {
  display: flex; gap: 11px; align-items: flex-start;
  background: rgba(255,255,255,.04); border: 1px solid var(--night-line); border-radius: 12px;
  padding: 11px 13px; margin-bottom: 9px;
  opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.demo-step.on { opacity: 1; transform: none; }
.demo-step__n { width: 24px; height: 24px; border-radius: 8px; background: rgba(255,107,53,.16); color: var(--orange); display: grid; place-items: center; font-size: 11.5px; font-weight: 800; flex: none; }
.demo-step b { display: block; font-size: 13.5px; font-weight: 700; color: var(--night-text); }
.demo-step span { font-size: 11.5px; color: var(--night-dim); }
.demo-step__badges { margin-left: auto; display: flex; gap: 5px; flex: none; }
.demo-step__badges i { font-style: normal; font-size: 10px; font-weight: 700; border-radius: 6px; padding: 3px 7px; background: rgba(255,255,255,.07); color: var(--night-dim); }

.demo__exercise {
  background: var(--app-surface); color: var(--app-ink); border-radius: 14px; padding: 18px;
  opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease);
  align-self: start;
}
.demo__exercise.on { opacity: 1; transform: none; }
.demo__exercise h6 { margin: 0 0 4px; font-family: var(--font-text); font-size: 14px; font-weight: 800; }
.demo__exercise .mu-meta { margin-bottom: 12px; display: block; }
.demo__sentence { font-size: 14.5px; line-height: 2.1; }
.gap-slot {
  display: inline-block; min-width: 86px; border-bottom: 2px solid var(--app-primary); text-align: center;
  font-weight: 700; color: var(--app-primary); padding: 0 6px;
}
.gap-slot.filled { color: var(--app-green); border-color: var(--app-green); background: var(--app-green-bg); border-radius: 6px 6px 0 0; }
.demo__choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.demo__choices span { border: 1px solid var(--app-border); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 700; color: var(--app-ink-2); background: var(--app-bg); }

.demo__guard {
  margin: 26px auto 0; max-width: 880px;
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(255,255,255,.05); border: 1px solid var(--night-line); border-radius: var(--r-lg);
  padding: 18px 20px; position: relative;
}
.demo__guard svg { width: 22px; height: 22px; color: var(--orange); flex: none; margin-top: 2px; }
.demo__guard b { color: var(--night-text); }
.demo__guard p { color: var(--night-dim); font-size: 15px; }
.demo__cta { text-align: center; margin-top: 34px; position: relative; }

@media (max-width: 820px) {
  .demo__build { grid-template-columns: 1fr; }
  .demo__input { flex-direction: column; align-items: stretch; }
}

/* =====================================================================
   5 · FEATURE ZIGZAG ×4
   ===================================================================== */
.feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; padding: 56px 0; }
.feat + .feat { border-top: 1px dashed var(--line-2); }
.feat--flip .feat__copy { order: 2; }
.feat h3 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); font-weight: 700; }
.feat__obj { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-3); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; margin-bottom: 16px; }
.feat__obj svg { width: 14px; height: 14px; }
.feat p { color: var(--ink-2); margin-top: 14px; }
.feat .fact-line { margin-top: 20px; }
.feat__shot .frame { box-shadow: var(--shadow-md); }
@media (max-width: 920px) {
  .feat { grid-template-columns: 1fr; gap: 30px; padding: 44px 0; }
  .feat--flip .feat__copy { order: 0; }
}

/* dual-timezone lesson card */
.mu-tz { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.mu-tz div { background: var(--app-bg); border: 1px solid var(--app-border); border-radius: 9px; padding: 8px 10px; }
.mu-tz b { display: block; font-size: 13px; }
.mu-tz span { font-size: 10.5px; color: var(--app-ink-3); font-weight: 600; }
.mu-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mu-cal span { font-size: 9.5px; font-weight: 700; color: var(--app-ink-3); text-align: center; padding-bottom: 2px; }
.mu-cal i { font-style: normal; aspect-ratio: 1; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; border-radius: 7px; color: var(--app-ink-2); background: var(--app-surface); border: 1px solid var(--app-border); }
.mu-cal i.has { background: var(--app-primary-50); color: var(--app-primary); border-color: transparent; font-weight: 800; }
.mu-cal i.today { background: var(--app-primary); color: #fff; border-color: transparent; font-weight: 800; }

/* homework verdicts */
.mu-answer { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid var(--app-bg); }
.mu-answer:last-child { border-bottom: 0; }
.mu-answer svg { width: 15px; height: 15px; flex: none; }
.mu-answer .ok { color: var(--app-green); }
.mu-answer .no { color: var(--app-rose); }
.mu-answer em { font-style: normal; font-weight: 700; }

/* mastery bars */
.mu-skill { display: grid; grid-template-columns: 92px 1fr 34px; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: var(--app-ink-2); padding: 5px 0; }
.mu-skill output { font-weight: 800; color: var(--app-ink); font-size: 11.5px; text-align: right; }

/* library rows */
.mu-lib { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--app-bg); font-size: 12.5px; }
.mu-lib:last-child { border-bottom: 0; }

/* =====================================================================
   6 · ADAPTIVE LOOP
   ===================================================================== */
.loop-sec { background: var(--paper-2); border-block: 1px solid var(--line); }
.loop { max-width: 860px; margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; counter-reset: loopn; }
.loop__node { text-align: center; padding: 0 14px; position: relative; }
.loop__ico {
  width: 64px; height: 64px; border-radius: 18px; margin-inline: auto;
  background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow);
  display: grid; place-items: center; color: var(--orange-deep); position: relative; z-index: 1;
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.loop__ico svg { width: 26px; height: 26px; }
.loop__node.lit .loop__ico { border-color: var(--orange); box-shadow: 0 10px 26px -10px rgba(232,80,28,.45); transform: translateY(-4px); }
.loop__node b { display: block; margin-top: 14px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.loop__node span { display: block; font-size: 13px; color: var(--ink-2); margin-top: 5px; line-height: 1.45; }
.loop__node::after {
  content: "→"; position: absolute; top: 22px; right: -11px; z-index: 2;
  font-size: 19px; color: var(--ink-3); font-weight: 700;
}
.loop__node:last-child::after { content: "↺"; right: auto; left: 50%; top: auto; bottom: -42px; transform: translateX(-50%); color: var(--orange-deep); }
.loop__caption { text-align: center; margin-top: 76px; font-size: 15px; color: var(--ink-2); font-weight: 600; max-width: 560px; margin-inline: auto; }
@media (max-width: 820px) {
  .loop { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .loop__node:nth-child(2)::after { content: "↓"; right: 50%; top: auto; bottom: -30px; transform: translateX(50%); }
  .loop__node:last-child::after { content: "↺"; bottom: -36px; }
  .loop__caption { margin-top: 64px; }
}

/* =====================================================================
   7 · MARKETPLACE
   ===================================================================== */
.market__grid { display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 9fr); gap: 60px; align-items: start; }
.market__copy p { color: var(--ink-2); margin-top: 16px; }
.market__copy p strong { color: var(--ink); }
.market__kicker { margin-top: 24px; font-weight: 800; color: var(--ink); font-size: 17px; font-family: var(--font-display); }
.fee-table { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.fee-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 20px; border-bottom: 1px solid var(--paper-2); font-size: 15px; }
.fee-row b { font-weight: 700; }
.fee-row span { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.fee-row--us { background: var(--orange-ghost); border-bottom: 0; }
.fee-row--us b { color: var(--orange-deep); }
.fee-row--us span { color: var(--orange-deep); font-weight: 800; }
.fee-note { font-size: 12px; color: var(--ink-3); padding: 10px 20px 14px; background: var(--orange-ghost); }

/* commission calculator */
.fee-calc { margin-top: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--shadow-sm); }
.fee-calc__title { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.fee-calc .loss__row { margin-bottom: 4px; }
.fee-calc input[type="range"] { width: 100%; accent-color: var(--orange); margin: 2px 0 12px; }
.fee-calc__out { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 1px dashed var(--line-2); padding-top: 14px; }
.fee-calc__out div { background: var(--paper-2); border-radius: 11px; padding: 11px 14px; }
.fee-calc__out b { display: block; font-size: 19px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fee-calc__out span { font-size: 12px; color: var(--ink-3); font-weight: 700; }
.fee-calc__out .keep b { color: var(--app-green); }
.fee-calc__out .lose b { color: var(--app-rose); }
@media (max-width: 920px) { .market__grid { grid-template-columns: 1fr; gap: 36px; } }

/* =====================================================================
   8 · WHAT STUDENTS SEE (phone)
   ===================================================================== */
.students__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 10fr); gap: 64px; align-items: center; }
.phone {
  width: 290px; margin-inline: auto; background: #111; border-radius: 38px; padding: 10px;
  box-shadow: var(--shadow-frame);
}
.phone__screen { background: var(--app-bg); border-radius: 30px; overflow: hidden; }
.phone__notch { height: 24px; display: grid; place-items: center; background: var(--app-surface); }
.phone__notch i { width: 78px; height: 17px; background: #111; border-radius: 999px; }
.phone .mu { padding: 14px; }
.mu-streak { display: flex; gap: 8px; }
.mu-streak div { flex: 1; text-align: center; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 11px; padding: 8px 4px; }
.mu-streak b { display: block; font-size: 15px; }
.mu-streak span { font-size: 9.5px; color: var(--app-ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.mu-xp { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--app-ink-2); }
.mu-xp .mu-bar { flex: 1; }
.mu-xp .mu-bar i { background: linear-gradient(90deg, #f59e0b, #ff6b35); }

.students__points { display: grid; gap: 18px; margin-top: 28px; }
.spoint { display: flex; gap: 15px; align-items: flex-start; }
.spoint__ico { width: 42px; height: 42px; border-radius: 13px; background: var(--orange-ghost); border: 1px solid var(--orange-soft); color: var(--orange-deep); display: grid; place-items: center; flex: none; }
.spoint__ico svg { width: 20px; height: 20px; }
.spoint b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.spoint p { color: var(--ink-2); font-size: 15px; margin-top: 3px; }
.students__caption { margin-top: 26px; font-weight: 700; color: var(--ink); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; font-size: 15px; }
@media (max-width: 920px) { .students__grid { grid-template-columns: 1fr; gap: 40px; } }

/* =====================================================================
   9 · STUDENT DOOR
   ===================================================================== */
.sdoor { background: var(--paper-2); border-block: 1px solid var(--line); padding: 72px 0; }
.sdoor__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.sdoor-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.sdoor-card svg { width: 24px; height: 24px; color: var(--orange-deep); }
.sdoor-card b { display: block; font-size: 16.5px; font-weight: 800; margin-top: 14px; letter-spacing: -.01em; }
.sdoor-card p { color: var(--ink-2); font-size: 14.5px; margin-top: 7px; }
.sdoor__cta { margin-top: 28px; }
@media (max-width: 820px) { .sdoor__cards { grid-template-columns: 1fr; } }

/* =====================================================================
   10 · BUILT IN PUBLIC (changelog)
   ===================================================================== */
.ship__grid { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 10fr); gap: 60px; align-items: start; }
.ship__copy p { color: var(--ink-2); margin-top: 16px; }
.changelog { display: grid; gap: 0; border-left: 2px solid var(--line-2); }
.changelog__item { position: relative; padding: 0 0 26px 26px; }
.changelog__item:last-child { padding-bottom: 0; }
.changelog__item::before {
  content: ""; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--orange); border: 3px solid var(--paper);
}
.changelog__date { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.changelog__item b { display: block; font-size: 16px; font-weight: 800; margin-top: 4px; letter-spacing: -.01em; }
.changelog__item p { font-size: 14.5px; color: var(--ink-2); margin-top: 4px; }
@media (max-width: 920px) { .ship__grid { grid-template-columns: 1fr; gap: 36px; } }

/* =====================================================================
   11 · HOW IT WORKS
   ===================================================================== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-sm); position: relative; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-size: 38px; font-weight: 700; color: var(--orange-soft);
  position: absolute; top: 14px; right: 20px; line-height: 1;
}
.step svg { width: 24px; height: 24px; color: var(--orange-deep); }
.step b { display: block; font-size: 17px; font-weight: 800; margin-top: 14px; letter-spacing: -.01em; }
.step p { color: var(--ink-2); font-size: 14.5px; margin-top: 8px; }
.steps-cta { margin-top: 34px; display: flex; justify-content: center; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

/* =====================================================================
   12 · FAQ
   ===================================================================== */
.faq { max-width: 780px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 4px; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 700; letter-spacing: -.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { width: 19px; height: 19px; color: var(--ink-3); transition: transform .25s var(--ease); flex: none; }
.faq-item[open] summary svg { transform: rotate(45deg); color: var(--orange-deep); }
.faq-item div { padding: 0 4px 22px; color: var(--ink-2); font-size: 15.5px; max-width: 660px; }

/* =====================================================================
   13 · FINAL CTA + FOOTER
   ===================================================================== */
.final {
  background: linear-gradient(140deg, #ff7c46 0%, var(--orange) 42%, var(--orange-deep) 100%);
  color: #fff; padding: 110px 0; text-align: center; position: relative; overflow: clip;
}
.final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(640px 320px at 50% 0%, rgba(255,255,255,.16), transparent 65%); pointer-events: none; }
.final h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 700; position: relative; }
.final p { font-size: 18px; opacity: .92; margin: 18px auto 0; max-width: 480px; position: relative; }
.final .btn--paper { background: #fff; color: var(--orange-deep); height: 56px; padding: 0 32px; font-size: 17px; box-shadow: 0 18px 40px -12px rgba(120,40,0,.5); }
.final .btn--paper:hover { transform: translateY(-1px); }
.final__cta { margin-top: 32px; position: relative; }
.final__alt { margin-top: 20px; font-size: 14.5px; position: relative; }
.final__alt a { color: #fff; font-weight: 700; }

.foot { background: var(--night); color: var(--night-dim); padding: 60px 0 40px; font-size: 14px; }
.foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.foot .brand { color: var(--night-text); }
.foot__tag { margin-top: 14px; max-width: 280px; line-height: 1.6; }
.foot h6 { margin: 0 0 14px; font-family: var(--font-text); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--night-text); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot a { color: var(--night-dim); text-decoration: none; }
.foot a:hover { color: var(--night-text); }
.foot__base { border-top: 1px solid var(--night-line); margin-top: 44px; padding-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.foot__lang { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--night-line); border-radius: 999px; padding: 7px 14px; font-weight: 600; cursor: pointer; background: none; color: var(--night-dim); font-family: var(--font-text); font-size: 13px; }
.foot__lang svg { width: 15px; height: 15px; }
@media (max-width: 820px) { .foot__grid { grid-template-columns: 1fr 1fr; } }

/* =====================================================================
   2.5 · PICK YOUR PATH (teacher / student, equal columns)
   ===================================================================== */
.paths { padding: 8px 0 4px; }
.paths__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.path-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 30px 30px 28px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.path-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; }
.path-card--teacher::before { background: var(--orange); }
.path-card--student::before { background: var(--app-primary); }
.path-card__label { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.path-card--teacher .path-card__label { color: var(--orange-deep); }
.path-card--student .path-card__label { color: var(--app-primary); }
.path-card__label svg { width: 16px; height: 16px; }
.path-card h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; margin-top: 12px; }
.path-card > p { color: var(--ink-2); margin-top: 10px; }
.path-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.path-list li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.path-list svg { width: 16px; height: 16px; color: var(--app-green); flex: none; }
.path-card .cta-row { margin-top: 22px; }
@media (max-width: 760px) { .paths__grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Bootstrap coexistence
   This file is loaded globally (after Bootstrap) only on the landing page.
   Bootstrap ships .nav / .btn / a rules that collide with the design's
   same-named classes; these .lp-scoped overrides win on specificity.
   ===================================================================== */
.lp .nav { display: block; }                 /* Bootstrap .nav forces display:flex */
.lp a { text-decoration: none; }             /* Bootstrap underlines links */
.lp .btn { text-transform: none; vertical-align: middle; }
.lp button { font-family: var(--font-text); }
/* the landing owns the viewport */
body:has(.lp) { background: var(--paper); }

/* --- Language switcher in the landing navbar ------------------------------ */
/* Opens the site-wide #languageModal that base.html already renders; these
   pages blank out {% block navbar %}, so they lose its trigger, not the dialog. */
.nav__lang {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 600; color: var(--ink-2);
  background: none; border: 0; cursor: pointer;
  padding: 9px 10px; border-radius: 10px; font-family: inherit;
}
.nav__lang:hover { color: var(--ink); background: rgba(45,38,25,.06); }
.nav__lang svg { width: 17px; height: 17px; }
.nav__lang__name { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  /* the burger menu carries its own entry; keep the bar from crowding */
  .nav__lang .nav__lang__name { display: none; }
  .nav__lang { padding: 9px; }
}
.nav__mobile .nav__lang {
  display: flex; width: 100%; justify-content: flex-start;
  padding: 13px 6px; font-size: 16px; border-radius: 0;
  border-bottom: 1px solid var(--paper-2);
}
.nav__mobile .nav__lang .nav__lang__name { display: inline; max-width: none; }

/* ---- the learner strip over the hero ----------------------------------
   One routing line for the audience this page does not pitch: learners go
   to the level-test funnel. A link styled as a band, not a banner — it must
   never compete with the hero it sits above. But it must be FOUND: a teacher
   points learners here from a YouTube description and they scrolled past the
   first, all-grey version twice. Three attention cues, each small: an emoji
   that nudges every few seconds, the key phrase in a solid pill, and a
   button-shaped call to action. */
.lvl-strip {
  /* The navbar above is fixed and 72px tall, so the flow starts underneath
     it: without this offset the bar sits on top of the strip and the line is
     unreadable. The hero below trims the same amount back off its own top
     padding, so the headline keeps the position it was designed at. */
  margin-top: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--ink, #201d18);
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
  text-decoration: none;
}
/* `.lp a { color: inherit }` outranks a bare `.lvl-strip`, so the line was
   painted in --ink on an --ink band — dark on dark, invisible. The colour has
   to be stated at a specificity that beats it. */
.lp a.lvl-strip { color: #efe9df; }
.lp a.lvl-strip:hover { color: #fff; text-decoration: none; }
.lvl-strip__emoji {
  font-size: 22px; line-height: 1;
  display: inline-block;
  animation: lvl-nudge 4s ease-in-out infinite;
  transform-origin: 50% 60%;
}
/* A quiet nudge, not a bounce: still for 3 s, then a quick tilt-and-settle.
   Two wiggles in a row would read as an ad; one reads as "look here". */
@keyframes lvl-nudge {
  0%, 74%, 100% { transform: none; }
  78% { transform: rotate(-14deg) scale(1.18); }
  82% { transform: rotate(12deg) scale(1.18); }
  86% { transform: rotate(-8deg) scale(1.12); }
  90% { transform: rotate(4deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .lvl-strip__emoji { animation: none; } }
.lvl-strip__text strong {
  /* the phrase a learner is scanning for, as a solid pill: the one bright
     thing in the band, so the eye lands on it before reading anything */
  display: inline-block;
  margin-right: 2px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--orange, #ff5c1c);
  color: var(--ink, #201d18);
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.lvl-strip__cta {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  border: 1.5px solid var(--orange, #ff5c1c);
  border-radius: 999px;
  color: var(--orange, #ff5c1c);
  font-weight: 800;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.lvl-strip:hover .lvl-strip__cta { background: var(--orange, #ff5c1c); color: var(--ink, #201d18); }
.lvl-strip + .hero { padding-top: 78px; }
@media (max-width: 980px) { .lvl-strip + .hero { padding-top: 48px; } }
@media (max-width: 600px) {
  /* On a phone the band is two rows: the emoji with the sentence wrapping
     beside it, then the button centred underneath. The text shrinks to the
     room left by the emoji instead of dropping to its own row and leaving
     the emoji stranded alone on top. */
  .lvl-strip { padding: 12px 16px 14px; gap: 10px 10px; font-size: 14.5px; }
  .lvl-strip__text { flex: 1 1 0; min-width: 0; }
  .lvl-strip__text strong { font-size: 15px; }
  /* flex-basis alone would be clamped by a max-width back onto the text's
     row; a full-width button is the honest phone shape anyway. */
  .lvl-strip__cta { flex: 0 0 100%; justify-content: center; }
}