/* ==================================================================================================
   Landing page + marketing layout. Owner: schedule/landing agent.
   Linked only from templates/layouts/marketing.html. Markup: templates/core/landing.html.
   Behaviour (reveal fallback, tilt, nav state, live Bishkek clock): static/js/landing.js.

   Tokens only; every decorative animation sits inside `prefers-reduced-motion: no-preference`.
   The hero mockup (.lp-window) is sized in container-query units (cqw): it scales like an image,
   and .lp-board is its own container so the choreography (cards, cursor, confetti) is expressed
   in board-relative units — see "Hero board choreography" below (one 12 s loop).
   ================================================================================================== */

/* -- Page canvas & marketing chrome --------------------------------------------------------------- */
.mkt-body {
  --lp-canvas: light-dark(var(--surface), var(--bg));
  --lp-tint: light-dark(var(--bg), var(--surface-sunken));
  --lp-tile: light-dark(var(--bg), var(--surface));
  --lp-art: light-dark(var(--surface), var(--surface-2));
  --lp-brand: linear-gradient(120deg, var(--c-blue), var(--c-indigo) 52%, var(--c-purple));
  --lp-max: 1120px;
  --lp-gutter: 20px;
  background: var(--lp-canvas);
}
@media (min-width: 768px) {
  .mkt-body {
    --lp-gutter: 32px;
  }
}

.mkt-body .mkt-nav {
  border-bottom-color: transparent;
  background: color-mix(in srgb, var(--lp-canvas) 72%, transparent);
  transition:
    border-color var(--dur-2) ease,
    background-color var(--dur-2) ease;
}
.mkt-body .mkt-nav.is-scrolled {
  border-bottom-color: var(--glass-line);
  background: var(--glass-bg);
}
.mkt-body .mkt-nav__inner {
  gap: var(--space-4);
  max-width: calc(var(--lp-max) + 2 * var(--lp-gutter));
  height: 56px;
  padding-inline: max(var(--lp-gutter), var(--safe-left)) max(var(--lp-gutter), var(--safe-right));
}
.mkt-brand {
  flex-shrink: 0;
  gap: 9px;
  font-size: var(--fs-xl);
}
.mkt-brand .brand__mark {
  width: 28px;
  height: 28px;
}
.mkt-nav__sections {
  display: none;
  gap: 2px;
}
.mkt-nav__sections a {
  padding: 6px 12px;
  border-radius: var(--radius-full);
  color: var(--text-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  transition:
    color var(--dur-1) ease,
    background-color var(--dur-1) ease;
}
.mkt-nav__sections a:hover {
  background: var(--fill-1);
  color: var(--text);
}
.mkt-nav__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.mkt-nav__actions .btn {
  border-radius: var(--radius-full);
}
.mkt-nav__cta {
  padding-inline: 14px;
}
@media (min-width: 960px) {
  .mkt-nav__sections {
    display: flex;
  }
}

.mkt-body .mkt-footer {
  border-top: 1px solid var(--line);
  background: var(--lp-canvas);
}
.mkt-body .mkt-footer__inner {
  display: grid;
  gap: var(--space-6);
  max-width: calc(var(--lp-max) + 2 * var(--lp-gutter));
  padding: var(--space-10) max(var(--lp-gutter), var(--safe-right)) calc(var(--space-10) + var(--safe-bottom)) max(var(--lp-gutter), var(--safe-left));
}
.mkt-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mkt-footer__brand .brand__mark {
  width: 24px;
  height: 24px;
}
.mkt-footer__tagline {
  color: var(--text-2);
}
.mkt-body .mkt-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-content: start;
}
.mkt-body .mkt-footer__links a {
  color: var(--text-2);
}
.mkt-body .mkt-footer__links a:hover {
  color: var(--text);
}
.mkt-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  color: var(--text-3);
}
@media (min-width: 768px) {
  .mkt-body .mkt-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
  .mkt-footer__meta {
    grid-column: 1 / -1;
  }
}

/* -- Page shell ---------------------------------------------------------------------------------- */
.lp {
  overflow-x: clip;
  color: var(--text);
}
.lp-container {
  width: 100%;
  max-width: calc(var(--lp-max) + 2 * var(--lp-gutter));
  margin-inline: auto;
  padding-inline: max(var(--lp-gutter), var(--safe-left)) max(var(--lp-gutter), var(--safe-right));
}
.lp-section {
  padding-block: clamp(72px, 6vw + 40px, 136px);
}
.lp-section--tint {
  background: var(--lp-tint);
}
.lp-section--tint .lp-tile,
.lp-section--tint .lp-panel {
  background: var(--surface);
}
.lp-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 820px;
  margin: 0 auto clamp(40px, 4vw + 16px, 72px);
  text-align: center;
}
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent-ink);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
}
.lp-eyebrow[data-color] {
  color: var(--tone-ink);
}
.lp-title {
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 1.25rem + 3.4vw, 3.75rem);
  font-weight: var(--fw-bold);
  line-height: 1.04;
  letter-spacing: -0.038em;
  text-wrap: balance;
}
.lp-title--sm {
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem);
}
.lp-title__muted {
  color: var(--text-3);
}
.lp-lead {
  max-width: 640px;
  color: var(--text-2);
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
  line-height: 1.5;
  letter-spacing: -0.008em;
  text-wrap: pretty;
}
.lp-btn {
  gap: 8px;
  height: 48px;
  padding-inline: 24px;
  border-radius: var(--radius-full);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
}
.lp-btn .icon {
  transition: transform var(--dur-2) var(--ease-out);
}
.lp-btn:hover .icon {
  transform: translateX(3px);
}

/* -- Hero ---------------------------------------------------------------------------------------- */
.lp-hero {
  position: relative;
  isolation: isolate;
  padding-top: clamp(48px, 5vw + 24px, 104px);
  padding-bottom: clamp(56px, 6vw + 24px, 120px);
}
.lp-hero__glow {
  position: absolute;
  z-index: -1;
  top: -120px;
  left: 50%;
  width: min(1400px, 160vw);
  height: 1100px;
  background:
    radial-gradient(38% 34% at 50% 58%, color-mix(in srgb, var(--c-indigo) 20%, transparent), transparent 70%),
    radial-gradient(30% 30% at 24% 46%, color-mix(in srgb, var(--c-blue) 12%, transparent), transparent 70%),
    radial-gradient(30% 30% at 78% 48%, color-mix(in srgb, var(--c-purple) 11%, transparent), transparent 70%);
  transform: translateX(-50%);
  pointer-events: none;
}
.lp-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.lp-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  min-height: 34px;
  padding: 6px 12px 6px 12px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--lp-canvas) 60%, transparent);
  box-shadow:
    0 0 0 1px var(--line),
    var(--shadow-xs);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  transition: color var(--dur-1) ease;
}
.lp-pill:hover {
  color: var(--text);
}
.lp-pill__dot {
  position: relative;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--lp-brand);
}
.lp-hero__title {
  max-width: 13ch;
  padding-bottom: 0.06em;
  background: linear-gradient(135deg, var(--text) 38%, color-mix(in srgb, var(--c-indigo) 88%, var(--text)) 68%, var(--c-purple) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 1.1rem + 8.4vw, 8rem);
  font-weight: var(--fw-bold);
  line-height: 0.96;
  letter-spacing: -0.052em;
  text-wrap: balance;
}
.lp-hero__lead {
  max-width: 660px;
  color: var(--text-2);
  font-size: clamp(1.125rem, 0.98rem + 0.62vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}
.lp-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
}
.lp-hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 4px 0 0;
  padding: 0;
  color: var(--text-2);
  font-size: var(--fs-md);
  list-style: none;
}
.lp-hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.lp-hero__facts .icon {
  color: var(--accent);
}

/* Stage + window chrome */
.lp-stage {
  position: relative;
  max-width: 1200px;
  margin: clamp(48px, 5vw + 20px, 88px) auto 0;
  padding-inline: max(var(--lp-gutter), var(--safe-left)) max(var(--lp-gutter), var(--safe-right));
  perspective: 2000px;
}
.lp-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% 6% -6%;
  border-radius: 48px;
  background: var(--lp-brand);
  opacity: 0.14;
  filter: blur(64px);
}
.lp-stage__tilt {
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
}
.lp-window {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  margin: 0;
  container-type: inline-size;
  overflow: hidden;
  border-radius: clamp(12px, 1.6vw, 22px);
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--card-ring),
    0 2px 6px light-dark(rgb(0 0 0 / 0.04), rgb(0 0 0 / 0.5)),
    0 30px 80px -24px light-dark(rgb(30 30 80 / 0.28), rgb(0 0 0 / 0.75));
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 700ms var(--ease-out);
  will-change: transform;
}
.lp-window__bar {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  height: 4cqw;
  padding: 0 1.4cqw;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.lp-window__dots {
  display: flex;
  flex: 1 1 0;
  gap: 0.75cqw;
}
.lp-window__dots i {
  width: 1.05cqw;
  height: 1.05cqw;
  border-radius: 50%;
  background: var(--c-red);
}
.lp-window__dots i:nth-child(2) {
  background: var(--c-yellow);
}
.lp-window__dots i:nth-child(3) {
  background: var(--c-green);
}
.lp-window__url {
  display: inline-flex;
  align-items: center;
  gap: 0.6cqw;
  height: 2.5cqw;
  padding: 0 2.4cqw;
  border-radius: var(--radius-full);
  background: var(--fill-1);
  color: var(--text-2);
  font-size: 1.15cqw;
  font-weight: var(--fw-medium);
}
.lp-window__url .icon {
  width: 1cqw;
  height: 1cqw;
}
.lp-window__spacer {
  flex: 1 1 0;
}
.lp-app {
  display: grid;
  grid-template-columns: 15.5cqw minmax(0, 1fr);
  height: 47cqw;
}
.lp-app svg.icon {
  width: 1.15cqw;
  height: 1.15cqw;
}
.lp-app__side {
  display: flex;
  flex-direction: column;
  gap: 0.55cqw;
  padding: 1.5cqw 1.1cqw;
  border-right: 1px solid var(--line);
  background: var(--bg-sidebar);
}
.lp-app__ws,
.lp-app__nav,
.lp-app__proj {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  height: 2.5cqw;
  padding: 0 0.7cqw;
  border-radius: 0.6cqw;
}
.lp-app__ws {
  margin-bottom: 0.9cqw;
  padding: 0;
}
.lp-app__ws img {
  width: 2.3cqw;
  height: 2.3cqw;
}
.lp-app__ws b,
.lp-app__nav b,
.lp-app__proj b {
  height: 0.7cqw;
  border-radius: var(--radius-full);
  background: var(--fill-3);
}
.lp-app__ws b {
  width: 6cqw;
  height: 0.9cqw;
  background: color-mix(in srgb, var(--text) 32%, transparent);
}
.lp-app__nav b {
  width: 6.2cqw;
}
.lp-app__nav:nth-child(3) b {
  width: 5cqw;
}
.lp-app__nav i {
  display: grid;
  place-items: center;
  color: var(--text-2);
}
.lp-app__nav.is-active {
  background: var(--fill-2);
}
.lp-app__nav.is-active i {
  color: var(--accent);
}
.lp-app__nav em {
  width: 0.9cqw;
  height: 0.9cqw;
  margin-left: auto;
  border-radius: 50%;
  background: var(--c-red);
}
.lp-app__label {
  width: 4.5cqw;
  height: 0.6cqw;
  margin: 1.6cqw 0.7cqw 0.6cqw;
  border-radius: var(--radius-full);
  background: var(--fill-2);
}
.lp-app__proj i {
  width: 1.3cqw;
  height: 1.3cqw;
  border-radius: 0.35cqw;
  background: var(--tone-solid);
}
.lp-app__proj b {
  width: 7.2cqw;
}
.lp-app__proj:nth-child(even) b {
  width: 5.6cqw;
}
.lp-app__proj.is-active {
  background: var(--fill-1);
}
.lp-app__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.7cqw 2.2cqw 0;
  background: var(--bg);
}
.lp-app__head {
  display: flex;
  align-items: center;
  gap: 1cqw;
  height: 3cqw;
}
.lp-app__tile {
  display: grid;
  place-items: center;
  width: 2.6cqw;
  height: 2.6cqw;
  border-radius: 0.7cqw;
  background: var(--tone-solid);
  color: var(--tone-on);
}
.lp-app__title {
  font-family: var(--font-display);
  font-size: 1.7cqw;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.lp-app__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5cqw;
  height: 2cqw;
  padding: 0 0.9cqw;
  border-radius: var(--radius-full);
  background: var(--tone-soft);
  color: var(--tone-ink);
  font-size: 1cqw;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.lp-app__status i {
  width: 0.7cqw;
  height: 0.7cqw;
  border-radius: 50%;
  background: var(--tone);
}
.lp-app__people {
  display: flex;
  margin-left: auto;
}
.lp-app__people i {
  width: 2.3cqw;
  height: 2.3cqw;
  border-radius: 50%;
  background: var(--tone-solid);
  box-shadow: 0 0 0 0.25cqw var(--bg);
}
.lp-app__people i + i {
  margin-left: -0.6cqw;
}
.lp-app__tabs {
  display: flex;
  gap: 2cqw;
  margin-top: 1.2cqw;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  font-size: 1.12cqw;
  font-weight: var(--fw-medium);
}
.lp-app__tabs span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5cqw;
  padding-bottom: 0.9cqw;
}
.lp-app__tabs svg.icon {
  width: 1cqw;
  height: 1cqw;
}
.lp-app__tabs .is-active {
  color: var(--text);
}
.lp-app__tabs .is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
}

/* Board (its own container: everything below is in board-relative cqw) */
.lp-board {
  position: relative;
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  column-gap: 2%;
  margin-top: 1.5cqw;
  container-type: inline-size;
}
.lp-col {
  height: 120%;
  padding: 1.5cqw;
  border-radius: 1.4cqw;
  background: light-dark(var(--surface-sunken), color-mix(in srgb, var(--surface) 72%, var(--bg)));
}
.lp-col__head {
  display: flex;
  align-items: center;
  gap: 1cqw;
  height: 4cqw;
  padding: 0 0.4cqw 0.8cqw;
  color: var(--text);
  font-size: 1.55cqw;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.lp-col__head i {
  width: 1.2cqw;
  height: 1.2cqw;
  border-radius: 50%;
  background: var(--tone);
}
.lp-col__head em {
  color: var(--text-3);
  font-style: normal;
  font-weight: var(--fw-medium);
}
.lp-count--todo::before {
  content: "3";
}
.lp-count--doing::before {
  content: "2";
}
.lp-count--done::before {
  content: "1";
}
.lp-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.9cqw;
  height: 10.5cqw;
  padding: 1.4cqw 1.6cqw;
  border-radius: 1.2cqw;
  background: light-dark(var(--surface), var(--surface-2));
  box-shadow:
    0 0 0 1px var(--card-ring),
    0 0.2cqw 0.6cqw light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.4));
}
.lp-card + .lp-card {
  margin-top: 1.5cqw;
}
.lp-card--a {
  z-index: 3;
}
.lp-card--b {
  z-index: 2;
}
.lp-card__tag {
  width: 5cqw;
  height: 0.8cqw;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--tone);
}
.lp-card__title {
  overflow: hidden;
  font-size: 1.62cqw;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-card__meta {
  display: flex;
  align-items: center;
  gap: 1cqw;
  margin-top: auto;
  color: var(--text-3);
  font-size: 1.2cqw;
  font-weight: var(--fw-medium);
}
.lp-check {
  position: relative;
  width: 2.2cqw;
  height: 2.2cqw;
  flex-shrink: 0;
  border: 0.22cqw solid var(--line-strong);
  border-radius: 50%;
}
.lp-check::after {
  content: "";
  position: absolute;
  inset: -0.22cqw;
  border-radius: 50%;
  background: var(--text-on-accent);
  -webkit-mask: var(--check-mask) center / 62% no-repeat;
  mask: var(--check-mask) center / 62% no-repeat;
  transform: scale(0);
}
.lp-check.is-checked {
  border-color: var(--c-green);
  background: var(--c-green);
}
.lp-check.is-checked::after {
  transform: none;
}
.lp-card__prio {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.25cqw;
  height: 1.4cqw;
  color: var(--text-3);
}
.lp-card__prio i {
  width: 0.38cqw;
  border-radius: 0.2cqw;
  background: currentColor;
}
.lp-card__prio i:nth-child(1) {
  height: 40%;
}
.lp-card__prio i:nth-child(2) {
  height: 70%;
}
.lp-card__prio i:nth-child(3) {
  height: 100%;
}
.lp-card__prio.is-high {
  color: var(--c-orange);
}
.lp-av {
  width: 2.4cqw;
  height: 2.4cqw;
  margin-left: auto;
  border-radius: 50%;
  background: var(--tone-solid);
}
.lp-card.is-done .lp-card__title {
  color: var(--text-2);
}
.lp-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 2.8cqw;
  height: 2.8cqw;
  fill: var(--text);
  stroke: var(--surface);
  stroke-width: 1.4;
  filter: drop-shadow(0 0.25cqw 0.4cqw rgb(0 0 0 / 0.25));
  opacity: 0;
  pointer-events: none;
  transform: translate(80cqw, 40cqw);
}
.lp-burst {
  position: absolute;
  top: 25.5cqw;
  left: 38.2cqw;
  z-index: 4;
  width: 0;
  height: 0;
  pointer-events: none;
}
.lp-burst i {
  position: absolute;
  top: -0.5cqw;
  left: -0.3cqw;
  width: 0.7cqw;
  height: 1.2cqw;
  border-radius: 0.2cqw;
  background: var(--tone);
  opacity: 0;
}

/* Hero board choreography (12 s loop; board-relative units: column pitch 34cqw, row pitch 12cqw)
   A: To do → In progress · C, D close the gap · B, E make room · B checked (confetti) → Done. */
@media (prefers-reduced-motion: no-preference) {
  .lp-window {
    --lp-loop: 12s;
  }
  .lp-window [class*="lp-card--"],
  .lp-cursor,
  .lp-burst i,
  .lp-check--b,
  .lp-check--b::after,
  .lp-card--b .lp-card__title {
    animation-duration: var(--lp-loop);
    animation-timing-function: var(--ease-in-out);
    animation-iteration-count: infinite;
    animation-delay: 1.4s;
    animation-fill-mode: both;
  }
  .lp-card--a {
    animation-name: lp-card-a;
  }
  .lp-card--b {
    animation-name: lp-card-b;
  }
  .lp-card--c,
  .lp-card--d {
    animation-name: lp-close-gap;
  }
  .lp-card--e {
    animation-name: lp-card-e;
  }
  .lp-card--f {
    animation-name: lp-card-f;
  }
  .lp-cursor {
    animation-name: lp-cursor;
  }
  .lp-check--b {
    animation-name: lp-check;
  }
  .lp-check--b::after {
    animation-name: lp-check-mark;
    animation-timing-function: var(--ease-spring);
  }
  .lp-card--b .lp-card__title {
    animation-name: lp-done-title;
  }
  .lp-count::before {
    animation: var(--lp-loop) linear 1.4s infinite both;
  }
  .lp-count--todo::before {
    animation-name: lp-count-todo;
  }
  .lp-count--doing::before {
    animation-name: lp-count-doing;
  }
  .lp-count--done::before {
    animation-name: lp-count-done;
  }
  @keyframes lp-count-todo {
    0%, 36% { content: "3"; }
    37%, 95% { content: "2"; }
    96%, 100% { content: "3"; }
  }
  @keyframes lp-count-doing {
    0%, 36% { content: "2"; }
    37%, 70% { content: "3"; }
    71%, 100% { content: "2"; }
  }
  @keyframes lp-count-done {
    0%, 70% { content: "1"; }
    71%, 95% { content: "2"; }
    96%, 100% { content: "1"; }
  }
  .lp-burst i {
    animation-name: lp-confetti;
    animation-timing-function: var(--ease-out);
  }
  .lp-burst i:nth-child(1) { --dx: -7cqw; --dy: -8cqw; --rot: -160deg; }
  .lp-burst i:nth-child(2) { --dx: 5cqw; --dy: -9.5cqw; --rot: 120deg; }
  .lp-burst i:nth-child(3) { --dx: 9cqw; --dy: -4cqw; --rot: 200deg; }
  .lp-burst i:nth-child(4) { --dx: -9cqw; --dy: -2.5cqw; --rot: -90deg; }
  .lp-burst i:nth-child(5) { --dx: -3cqw; --dy: -11cqw; --rot: 260deg; }
  .lp-burst i:nth-child(6) { --dx: 2cqw; --dy: -6cqw; --rot: -220deg; }
  .lp-burst i:nth-child(7) { --dx: 7.5cqw; --dy: -8cqw; --rot: 80deg; }
  .lp-burst i:nth-child(8) { --dx: -5.5cqw; --dy: -5.5cqw; --rot: 150deg; }
  .lp-window.is-paused *,
  .lp-window.is-paused *::after {
    animation-play-state: paused;
  }
}
@keyframes lp-card-a {
  0%, 17% { transform: none; box-shadow: 0 0 0 1px var(--card-ring); }
  20% { transform: translate(0, -0.6cqw) rotate(-2.4deg) scale(1.04); box-shadow: 0 0 0 1px var(--card-ring), 0 2cqw 4cqw light-dark(rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.6)); }
  35% { transform: translate(34cqw, -0.6cqw) rotate(-1deg) scale(1.04); box-shadow: 0 0 0 1px var(--card-ring), 0 2cqw 4cqw light-dark(rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.6)); }
  39%, 91% { transform: translate(34cqw, 0); box-shadow: 0 0 0 1px var(--card-ring); opacity: 1; }
  95% { transform: translate(34cqw, 0); opacity: 0; }
  96% { transform: none; opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes lp-close-gap {
  0%, 22% { transform: none; opacity: 1; }
  34%, 91% { transform: translateY(-12cqw); opacity: 1; }
  95% { transform: translateY(-12cqw); opacity: 0; }
  96% { transform: none; opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes lp-card-b {
  0%, 22% { transform: none; opacity: 1; }
  34%, 54% { transform: translateY(12cqw); box-shadow: 0 0 0 1px var(--card-ring); }
  57% { transform: translate(0, 11.4cqw) rotate(-2.4deg) scale(1.04); box-shadow: 0 0 0 1px var(--card-ring), 0 2cqw 4cqw light-dark(rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.6)); }
  70% { transform: translate(34cqw, -0.6cqw) rotate(-1deg) scale(1.04); box-shadow: 0 0 0 1px var(--card-ring), 0 2cqw 4cqw light-dark(rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.6)); }
  74%, 91% { transform: translate(34cqw, 0); box-shadow: 0 0 0 1px var(--card-ring); opacity: 1; }
  95% { transform: translate(34cqw, 0); opacity: 0; }
  96% { transform: none; opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes lp-card-e {
  0%, 22% { transform: none; opacity: 1; }
  34%, 60% { transform: translateY(12cqw); }
  72%, 91% { transform: none; opacity: 1; }
  95% { opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes lp-card-f {
  0%, 58% { transform: none; opacity: 1; }
  70%, 91% { transform: translateY(12cqw); opacity: 1; }
  95% { transform: translateY(12cqw); opacity: 0; }
  96% { transform: none; opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes lp-cursor {
  0% { transform: translate(84cqw, 44cqw); opacity: 0; }
  5% { opacity: 1; }
  16% { transform: translate(16cqw, 10.75cqw); }
  18% { transform: translate(16cqw, 10.75cqw) scale(0.86); }
  20% { transform: translate(16cqw, 10.15cqw) scale(0.86); }
  35% { transform: translate(50cqw, 10.15cqw) scale(0.86); }
  39% { transform: translate(50cqw, 10.75cqw) scale(1); }
  47% { transform: translate(38.2cqw, 25.5cqw) scale(1); }
  49% { transform: translate(38.2cqw, 25.5cqw) scale(0.84); }
  51% { transform: translate(38.2cqw, 25.5cqw) scale(1); }
  54% { transform: translate(50cqw, 22.75cqw) scale(1); }
  57% { transform: translate(50cqw, 22.15cqw) scale(0.86); }
  70% { transform: translate(84cqw, 10.15cqw) scale(0.86); }
  74% { transform: translate(84cqw, 10.75cqw) scale(1); opacity: 1; }
  84% { transform: translate(93cqw, 36cqw); opacity: 0; }
  100% { transform: translate(93cqw, 36cqw); opacity: 0; }
}
@keyframes lp-check {
  0%, 49% { border-color: var(--line-strong); background: transparent; }
  50.5%, 93% { border-color: var(--c-green); background: var(--c-green); }
  96%, 100% { border-color: var(--line-strong); background: transparent; }
}
@keyframes lp-check-mark {
  0%, 49% { transform: scale(0); }
  52%, 93% { transform: none; }
  96%, 100% { transform: scale(0); }
}
@keyframes lp-done-title {
  0%, 50% { color: var(--text); }
  53%, 93% { color: var(--text-2); }
  96%, 100% { color: var(--text); }
}
@keyframes lp-confetti {
  0%, 49.5% { opacity: 0; transform: translate(0, 0) rotate(0) scale(0.4); }
  51% { opacity: 1; transform: translate(calc(var(--dx) * 0.35), calc(var(--dy) * 0.35)) rotate(calc(var(--rot) * 0.3)) scale(1); }
  60% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 4cqw)) rotate(var(--rot)) scale(0.8); }
  100% { opacity: 0; }
}

/* Narrow windows (phones): drop the app sidebar so the board stays legible */
@container (max-width: 560px) {
  .lp-app {
    grid-template-columns: minmax(0, 1fr);
    height: 62cqw;
  }
  .lp-app__side {
    display: none;
  }
  .lp-app__main {
    padding: 2.4cqw 3cqw 0;
  }
  .lp-window__bar {
    height: 6cqw;
  }
  .lp-window__url {
    height: 3.8cqw;
    font-size: 1.9cqw;
  }
  .lp-window__dots i {
    width: 1.6cqw;
    height: 1.6cqw;
  }
  .lp-app__head {
    height: 4.6cqw;
  }
  .lp-app__tile {
    width: 3.8cqw;
    height: 3.8cqw;
  }
  .lp-app__title {
    font-size: 2.6cqw;
  }
  .lp-app__status,
  .lp-app__people {
    display: none;
  }
  .lp-app__tabs {
    font-size: 1.9cqw;
  }
  .lp-app svg.icon {
    width: 1.8cqw;
    height: 1.8cqw;
  }
}

/* Small boards (phones): larger type inside the same geometry */
@container (max-width: 420px) {
  .lp-card__title {
    font-size: 2.5cqw;
  }
  .lp-col__head {
    font-size: 2.3cqw;
  }
  .lp-card__meta {
    font-size: 1.9cqw;
  }
}

/* -- Bento --------------------------------------------------------------------------------------- */
.lp-bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.lp-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  overflow: hidden;
  padding: 26px;
  border-radius: 28px;
  background: var(--lp-tile);
}
.lp-tile__art {
  display: grid;
  flex: 1 1 auto;
  place-items: center;
  min-height: 150px;
}
.lp-tile__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.lp-tile__icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: var(--tone-solid);
  color: var(--tone-on);
  box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.08);
}
.lp-tile__title {
  font-family: var(--font-display);
  font-size: var(--fs-title-3);
  font-weight: var(--fw-bold);
  letter-spacing: -0.022em;
}
.lp-tile__text {
  color: var(--text-2);
  font-size: var(--fs-lg);
  line-height: 1.45;
}
@media (min-width: 640px) {
  .lp-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lp-tile--boards,
  .lp-tile--timeline {
    grid-column: span 2;
  }
}
@media (min-width: 1024px) {
  .lp-bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lp-tile--boards {
    grid-row: span 2;
  }
  .lp-tile--boards .lp-tile__art {
    min-height: 300px;
  }
}

/* Boards tile: copy on top, the board rises from the bottom edge */
.lp-tile--boards .lp-tile__body {
  order: -1;
}
.lp-tile--boards .lp-tile__art {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 250px;
  margin: 6px 0 -26px;
}
.lp-tile--boards .lp-art-board {
  max-width: 560px;
}
.lp-tile--boards .lp-art-board__col {
  min-height: 0;
  padding-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
@media (min-width: 1024px) {
  .lp-tile--boards .lp-tile__art {
    min-height: 0;
  }
  .lp-tile--boards .lp-art-board__col {
    gap: 10px;
    padding: 12px;
  }
  .lp-tile--boards .lp-art-board__col i {
    height: 58px;
  }
  .lp-tile--boards .lp-art-board__drag {
    top: 104px;
    height: 58px;
  }
}

/* Art: boards */
.lp-art-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 460px;
}
.lp-art-board__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 190px;
  padding: 10px;
  border-radius: 16px;
  background: var(--lp-art);
  box-shadow: 0 0 0 1px var(--card-ring);
}
.lp-art-board__col b {
  width: 46%;
  height: 8px;
  margin: 2px 0 4px;
  border-radius: var(--radius-full);
  background: var(--tone);
  opacity: 0.85;
}
.lp-art-board__col i,
.lp-art-board__drag {
  position: relative;
  height: 44px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--card-ring),
    var(--shadow-sm);
}
.lp-art-board__col i::before,
.lp-art-board__drag::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 26px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--tone);
}
.lp-art-board__col i::after,
.lp-art-board__drag::after {
  content: "";
  position: absolute;
  top: 24px;
  left: 10px;
  width: 64%;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--fill-3);
}
.lp-art-board__col i.is-placeholder {
  background: var(--accent-softer);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent);
}
.lp-art-board__col i.is-placeholder::before,
.lp-art-board__col i.is-placeholder::after {
  display: none;
}
.lp-art-board__col i.is-done {
  opacity: 0.55;
}
.lp-art-board__drag {
  position: absolute;
  top: 80px;
  left: calc(33.3% + 14px);
  width: calc(33.3% - 6px);
  box-shadow:
    0 0 0 1px var(--card-ring),
    var(--shadow-xl);
  transform: rotate(-4deg);
}

/* Art: list */
.lp-art-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 280px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--lp-art);
  box-shadow: 0 0 0 1px var(--card-ring);
}
.lp-art-list span {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px;
}
.lp-art-list span + span {
  box-shadow: inset 0 1px 0 var(--line);
}
.lp-art-list i {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
}
.lp-art-list .is-done i {
  border-color: var(--c-green);
  background: var(--c-green);
}
.lp-art-list .is-done i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--text-on-accent);
  -webkit-mask: var(--check-mask) center / 70% no-repeat;
  mask: var(--check-mask) center / 70% no-repeat;
}
.lp-art-list b {
  flex: 1 1 auto;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--fill-3);
}
.lp-art-list span:nth-child(2) b {
  flex-basis: 60%;
  max-width: 60%;
}
.lp-art-list span:nth-child(3) b {
  max-width: 76%;
}
.lp-art-list .is-done b {
  opacity: 0.5;
}
.lp-art-list em {
  width: 22px;
  height: 8px;
  margin-left: auto;
  border-radius: var(--radius-full);
  background: var(--tone);
  opacity: 0.85;
}

/* Art: calendar */
.lp-art-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  width: 100%;
  max-width: 240px;
}
.lp-art-cal i {
  position: relative;
  aspect-ratio: 1;
  border-radius: 6px;
  background: var(--lp-art);
  box-shadow: 0 0 0 1px var(--card-ring);
}
.lp-art-cal i.is-weekend {
  background: transparent;
}
.lp-art-cal i.has-chip::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 4px;
  left: 3px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--c-blue);
}
.lp-art-cal i.has-chip:nth-child(3n)::after {
  background: var(--c-purple);
}
.lp-art-cal i.has-chip:nth-child(4n + 1)::after {
  background: var(--c-orange);
}
.lp-art-cal i.is-today {
  background: var(--c-red);
  box-shadow: none;
}

/* Art: inbox */
.lp-art-inbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 280px;
}
.lp-art-inbox span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--lp-art);
  box-shadow: 0 0 0 1px var(--card-ring);
}
.lp-art-inbox span:nth-child(2) {
  margin-inline: 6px;
  opacity: 0.85;
}
.lp-art-inbox span:nth-child(3) {
  margin-inline: 12px;
  opacity: 0.6;
}
.lp-art-inbox i {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--tone-solid);
}
.lp-art-inbox b {
  position: relative;
  flex: 1 1 auto;
  height: 22px;
}
.lp-art-inbox b::before,
.lp-art-inbox b::after {
  content: "";
  position: absolute;
  left: 0;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--fill-3);
}
.lp-art-inbox b::before {
  top: 2px;
  width: 78%;
}
.lp-art-inbox b::after {
  bottom: 2px;
  width: 50%;
  opacity: 0.6;
}
.lp-art-inbox em {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.lp-art-inbox .is-unread em {
  background: var(--accent);
}

/* Art: insights chart */
.lp-art-chart {
  width: 100%;
  max-width: 240px;
  height: auto;
  overflow: visible;
}
.lp-art-chart__bars rect {
  fill: var(--fill-3);
}
.lp-art-chart__bars rect.is-current {
  fill: var(--c-purple);
}
.lp-art-chart__line {
  stroke: var(--c-purple);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lp-art-chart__axis {
  stroke: var(--line-strong);
  stroke-width: 1;
}

/* Art: timeline */
.lp-art-gantt {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 132px;
  border-radius: 16px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), var(--line) calc(12.5% - 1px) 12.5%),
    var(--lp-art);
  box-shadow: 0 0 0 1px var(--card-ring);
}
.lp-art-gantt i {
  position: absolute;
  left: calc(var(--s) * 1%);
  width: calc(var(--l) * 1%);
  height: 14px;
  border-radius: var(--radius-full);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--tone) 78%, var(--surface)) var(--p),
    color-mix(in srgb, var(--tone) 26%, var(--surface)) var(--p)
  );
}
.lp-art-gantt i:nth-of-type(1) { top: 14px; }
.lp-art-gantt i:nth-of-type(2) { top: 36px; }
.lp-art-gantt i:nth-of-type(3) { top: 58px; }
.lp-art-gantt i:nth-of-type(4) { top: 102px; }
.lp-art-gantt b {
  position: absolute;
  top: 81px;
  left: calc(var(--s) * 1%);
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: var(--tone);
  box-shadow: 0 0 0 2px var(--lp-art);
  transform: rotate(45deg);
}
.lp-art-gantt__today {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 48%;
  width: 2px;
  border-radius: 1px;
  background: var(--accent);
}
.lp-art-gantt__today::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* Art: workload */
.lp-art-load {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 260px;
}
.lp-art-load span {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lp-art-load i {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--tone-solid);
}
.lp-art-load b {
  position: relative;
  flex: 1 1 auto;
  height: 10px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--fill-2);
}
.lp-art-load b::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--v);
  border-radius: inherit;
  background: var(--c-green);
}
.lp-art-load .is-over b::after {
  background: var(--c-orange);
}

/* Art: command palette */
.lp-art-palette {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 280px;
  padding: 8px;
  border-radius: 16px;
  background: var(--lp-art);
  box-shadow:
    0 0 0 1px var(--card-ring),
    var(--shadow-md);
}
.lp-art-palette span {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 10px;
  border-radius: 9px;
}
.lp-art-palette__field {
  margin-bottom: 4px;
  box-shadow: inset 0 -1px 0 var(--line);
  border-radius: 0 !important;
  color: var(--text-2);
}
.lp-art-palette__field b {
  width: 36%;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--text);
  opacity: 0.75;
}
.lp-art-palette__field .kbd {
  margin-left: auto;
}
.lp-art-palette span.is-active {
  background: var(--accent-soft);
}
.lp-art-palette span > i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--tone);
}
.lp-art-palette span:not(.lp-art-palette__field) b {
  flex: 0 1 60%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--fill-3);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lp-tile .lp-tile__art > * {
    transition: transform 600ms var(--ease-out);
  }
  .lp-tile:hover .lp-tile__art > * {
    transform: translateY(-4px) scale(1.015);
  }
  .lp-tile--boards:hover .lp-art-board__drag {
    transform: translate(6px, -6px) rotate(-6deg);
  }
  .lp-art-board__drag {
    transition: transform 600ms var(--ease-spring);
  }
}

/* -- How it works -------------------------------------------------------------------------------- */
.lp-steps {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border-radius: 28px;
  background: var(--surface);
}
.lp-step__num {
  align-self: flex-start;
  margin-bottom: 8px;
  background: var(--lp-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.05em;
}
.lp-step__title {
  font-family: var(--font-display);
  font-size: var(--fs-title-3);
  font-weight: var(--fw-bold);
  letter-spacing: -0.022em;
}
.lp-step__text {
  color: var(--text-2);
  font-size: var(--fs-lg);
  line-height: 1.5;
}
@media (min-width: 900px) {
  .lp-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* -- Deep dives ---------------------------------------------------------------------------------- */
.lp-dives {
  display: flex;
  flex-direction: column;
  gap: clamp(72px, 7vw + 24px, 144px);
}
.lp-dive {
  display: grid;
  gap: 36px;
  align-items: center;
}
.lp-dive__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.lp-checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 8px 0 0;
  padding: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  list-style: none;
}
.lp-checks li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lp-checks .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  padding: 5px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.lp-panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: clamp(18px, 2.4vw, 32px);
  border-radius: 28px;
  background: var(--lp-tile);
}
@media (min-width: 900px) {
  .lp-dive {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(40px, 5vw, 80px);
  }
  .lp-dive--flip .lp-dive__text {
    order: 2;
  }
}

/* Deep dive: board */
.lp-dd {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-height: 320px;
}
.lp-dd__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: var(--lp-art);
  box-shadow: 0 0 0 1px var(--card-ring);
}
.lp-dd__head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 22px;
}
.lp-dd__head i {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--tone);
}
.lp-dd__head b {
  width: 46%;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--fill-3);
}
.lp-dd__wip {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: var(--fill-2);
  color: var(--text-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lp-dd__card,
.lp-dd__slot {
  position: relative;
  height: 64px;
  border-radius: 12px;
}
.lp-dd__card {
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--card-ring),
    var(--shadow-sm);
}
.lp-dd__card::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 12px;
  width: 30px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--tone);
}
.lp-dd__card b,
.lp-dd__card em {
  position: absolute;
  left: 12px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--fill-3);
}
.lp-dd__card b {
  top: 28px;
  width: 70%;
}
.lp-dd__card em {
  top: 44px;
  width: 38%;
  opacity: 0.6;
}
.lp-dd__card.is-done {
  opacity: 0.55;
}
.lp-dd__slot {
  background: var(--accent-softer);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent);
}
.lp-dd__card--drag {
  position: absolute;
  top: 118px;
  left: calc(33.3% + 26px);
  width: calc(33.3% - 20px);
  box-shadow:
    0 0 0 1px var(--card-ring),
    var(--shadow-xl);
  transform: rotate(4deg);
}
@media (prefers-reduced-motion: no-preference) {
  .lp-dd__card--drag {
    animation: lp-float 5s var(--ease-in-out) infinite;
  }
  @keyframes lp-float {
    0%,
    100% {
      transform: translate(0, 0) rotate(4deg);
    }
    50% {
      transform: translate(-6px, -8px) rotate(2.5deg);
    }
  }
}

/* Deep dive: timeline */
.lp-gantt {
  --label-w: 22%;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  overflow: hidden;
  border-radius: 18px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(100% / 6 - 1px), var(--line) calc(100% / 6 - 1px) calc(100% / 6))
      var(--label-w) 0 / calc(100% - var(--label-w)) 100% no-repeat,
    var(--lp-art);
  box-shadow: 0 0 0 1px var(--card-ring);
}
.lp-gantt__head {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  height: 38px;
  margin-left: var(--label-w);
  border-bottom: 1px solid var(--line);
}
.lp-gantt__head span {
  position: relative;
  box-shadow: inset 1px 0 0 var(--line);
}
.lp-gantt__head span::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 10px;
  width: 30px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--fill-3);
}
.lp-gantt__row {
  position: relative;
  display: flex;
  align-items: center;
  height: 46px;
}
.lp-gantt__row + .lp-gantt__row {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--line) 60%, transparent);
}
.lp-gantt__row b {
  width: calc(var(--label-w) - 28px);
  height: 7px;
  margin-left: 14px;
  border-radius: var(--radius-full);
  background: var(--fill-3);
}
.lp-gantt__row i {
  position: absolute;
  left: calc(var(--label-w) + (100% - var(--label-w)) * var(--s) / 100);
  width: calc((100% - var(--label-w)) * var(--l) / 100);
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--tone) 52%, var(--surface)) var(--p),
    color-mix(in srgb, var(--tone) 22%, var(--surface)) var(--p)
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 40%, transparent);
}
.lp-gantt__row em {
  position: absolute;
  left: calc(var(--label-w) + (100% - var(--label-w)) * var(--s) / 100);
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--tone);
  box-shadow: 0 0 0 2px var(--lp-art);
  transform: rotate(45deg);
}
.lp-gantt__today {
  position: absolute;
  z-index: 1;
  top: 30px;
  bottom: 0;
  left: calc(var(--label-w) + (100% - var(--label-w)) * 0.46);
  width: 2px;
  background: var(--accent);
}
.lp-gantt__today::before {
  content: "";
  position: absolute;
  top: 0;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* Deep dive: insights */
.lp-charts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  min-height: 320px;
}
.lp-charts__bars {
  flex: 1 1 260px;
  min-width: 0;
  height: auto;
}
.lp-charts__grid line {
  stroke: var(--line);
  stroke-dasharray: 3 4;
}
.lp-charts__cols rect {
  fill: url(#lp-bar-grad);
}
.lp-stop-a {
  stop-color: var(--c-purple);
}
.lp-stop-b {
  stop-color: var(--c-indigo);
  stop-opacity: 0.55;
}
.lp-charts__side {
  display: flex;
  flex: 0 1 160px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-inline: auto;
}
.lp-charts__donut {
  width: 120px;
  height: 120px;
  transform: rotate(-90deg);
}
.lp-donut__track,
.lp-donut__seg {
  fill: none;
  stroke-width: 6;
}
.lp-donut__track {
  stroke: var(--fill-2);
}
.lp-donut__seg {
  stroke: var(--tone);
}
.lp-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
  list-style: none;
}
.lp-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lp-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tone);
}

/* -- Local --------------------------------------------------------------------------------------- */
.lp-local {
  display: grid;
  gap: 16px;
}
.lp-card-local {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 28px;
  border-radius: 28px;
  background: var(--surface);
}
.lp-card-local > :last-child {
  margin-top: auto;
}
.lp-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.lp-langs li {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--fill-1);
  color: var(--text);
  font-weight: var(--fw-medium);
}
.lp-langs li.is-current {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.lp-clock {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}
.lp-clock__face {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.lp-clock__rim {
  fill: var(--lp-tile);
  stroke: var(--line-strong);
  stroke-width: 1.5;
}
.lp-clock__ticks line {
  stroke: var(--text-3);
  stroke-width: 2;
  stroke-linecap: round;
}
.lp-clock__hour,
.lp-clock__minute {
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 32px 32px;
}
.lp-clock__hour {
  stroke: var(--text);
  stroke-width: 3.5;
  transform: rotate(var(--hour-angle, 305deg));
}
.lp-clock__minute {
  stroke: var(--c-orange);
  stroke-width: 2.2;
  transform: rotate(var(--minute-angle, 60deg));
}
.lp-clock__pin {
  fill: var(--c-orange);
}
.lp-clock__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lp-clock__label b {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}
.lp-clock__label span {
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.lp-term {
  width: 100%;
  margin-top: 12px;
  padding: 14px 16px;
  overflow-x: auto;
  border-radius: 14px;
  background: light-dark(var(--surface-inverse), var(--surface-sunken));
  box-shadow: 0 0 0 1px var(--card-ring);
  color: light-dark(var(--text-inverse), var(--text));
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.lp-term__prompt {
  margin-right: 8px;
  color: var(--c-green);
  user-select: none;
}
@media (min-width: 900px) {
  .lp-local {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* -- Final call to action ------------------------------------------------------------------------ */
.lp-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(88px, 8vw + 40px, 168px);
  text-align: center;
}
.lp-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -10% -60% -10%;
  height: 120%;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--c-indigo) 22%, transparent), transparent 70%);
  pointer-events: none;
}
.lp-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.lp-cta__logo {
  width: 72px;
  height: 72px;
  margin-bottom: 8px;
  filter: drop-shadow(0 18px 30px color-mix(in srgb, var(--c-indigo) 40%, transparent));
}
.lp-cta__title {
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.3rem + 4.6vw, 5rem);
  font-weight: var(--fw-bold);
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.lp-cta__text {
  max-width: 560px;
  color: var(--text-2);
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
  line-height: 1.5;
}

/* -- Motion: hero entrance, scroll-driven reveals & tilt -------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .lp-rise,
  .lp-stage {
    animation: lp-rise 900ms var(--ease-out) both;
  }
  .lp-hero__inner > .lp-rise:nth-child(2) { animation-delay: 70ms; }
  .lp-hero__inner > .lp-rise:nth-child(3) { animation-delay: 140ms; }
  .lp-hero__inner > .lp-rise:nth-child(4) { animation-delay: 210ms; }
  .lp-hero__inner > .lp-rise:nth-child(5) { animation-delay: 280ms; }
  .lp-stage {
    animation-duration: 1200ms;
    animation-delay: 260ms;
  }
  @keyframes lp-rise {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
  }
  .lp-pill__dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--c-indigo);
    opacity: 0;
    animation: lp-ping 2.6s var(--ease-out) infinite;
  }
  @keyframes lp-ping {
    0% {
      opacity: 0.45;
      transform: scale(0.5);
    }
    70%,
    100% {
      opacity: 0;
      transform: scale(1.6);
    }
  }

  @supports (animation-timeline: view()) {
    .lp-stage__tilt {
      animation: lp-tilt linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 42%;
    }
    @keyframes lp-tilt {
      from {
        transform: rotateX(22deg) scale(0.9);
      }
      to {
        transform: none;
      }
    }
    .lp-reveal {
      animation: lp-reveal linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }
    @keyframes lp-reveal {
      from {
        opacity: 0;
        transform: translateY(40px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
    .lp-art-chart__line {
      stroke-dasharray: 200;
      animation: lp-draw linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 55%;
    }
    @keyframes lp-draw {
      from {
        stroke-dashoffset: 200;
      }
      to {
        stroke-dashoffset: 0;
      }
    }
  }
  /* Fallback (no scroll-driven animations): landing.js adds .lp-io and toggles .is-in */
  :root.lp-io .lp-reveal:not(.is-in) {
    opacity: 0;
    transform: translateY(32px) scale(0.985);
  }
  :root.lp-io .lp-reveal {
    transition:
      opacity 900ms var(--ease-out) var(--lp-delay, 0ms),
      transform 900ms var(--ease-out) var(--lp-delay, 0ms);
  }
}