/* Sightdeck AI — landing page (home route only).
   Loaded from index.html.twig via head_extra, so nothing here can reach the
   user guide, the changelog or the account pages. Every class is lp-prefixed
   for the same reason: styles.css still owns .hero, .kicker, .steps and the
   status classes for those pages.

   Palette comes from the styles.css tokens (--lp-bg, --accent, --lp-pink, --lp-doing …).
   The landing page is dark-only, as it was before: data-theme="light" is set by
   the user-guide layout, never here.
*/

/* The page is dark by design — the product is a dark app — so it paints its
   own ground rather than inheriting one. */

:root {
  color-scheme: dark;

  /* ground */
  --lp-bg:        var(--bg);
  --lp-bg-2:      #0a0f2a;
  --lp-bg-3:      #0d1435;
  --lp-surface:   rgba(255, 255, 255, 0.035);
  --lp-surface-2: rgba(255, 255, 255, 0.065);
  --lp-line:      rgba(255, 255, 255, 0.09);
  --lp-line-2:    rgba(255, 255, 255, 0.16);

  /* type */
  --lp-ink:       #f4f5fa;
  --lp-ink-2:     #c3c8da;
  --lp-muted:     #99a1b8;
  --lp-faint:     #6d7590;

  /* brand — the same hues styles.css already defines */
  --lp-cyan:      var(--accent);
  --lp-violet:    var(--accent-2);
  --lp-pink:      var(--pink);

  /* status, separate from the accent */
  --lp-doing:     var(--doing);
  --lp-testing:   var(--testing);
  --lp-done:      var(--released);
  --lp-needs:     var(--danger);
  --lp-queued:    #7a83a0;

  --lp-fd: var(--font-display);
  --lp-fb: var(--font-body);
  --lp-fm: var(--font-mono);

  --lp-r:   14px;
  --lp-r-s: 9px;
  --lp-maxw: 1180px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(124, 58, 237, 0.30), transparent 70%),
    radial-gradient(760px 460px at 92% 4%, rgba(34, 211, 238, 0.16), transparent 70%),
    radial-gradient(900px 700px at 78% 96%, rgba(255, 45, 177, 0.13), transparent 70%),
    linear-gradient(180deg, var(--lp-bg) 0%, var(--lp-bg-2) 55%, var(--lp-bg) 100%);
  background-attachment: fixed;
  color: var(--lp-ink);
  font-family: var(--lp-fb);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* engineering grid — the page's quiet substrate */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 20%, transparent 78%);
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--lp-cyan); outline-offset: 3px; border-radius: 4px; }

/* ---------- type ---------- */
h1, h2, h3, h4 {
  font-family: var(--lp-fd);
  font-weight: 800;
  letter-spacing: -0.028em;
  text-wrap: balance;
  margin: 0;
  line-height: 1.02;
}
h1 { font-size: clamp(2.45rem, 4.6vw, 4rem); }
h2 { font-size: clamp(1.85rem, 3.7vw, 2.85rem); line-height: 1.06; }
h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.018em; line-height: 1.25; }
p  { margin: 0; }

.lp-eyebrow {
  font-family: var(--lp-fm);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lp-cyan);
  margin: 0;
}
.lp-eyebrow.lp-v { color: #b58cff; }
.lp-eyebrow.lp-p { color: #ff79cb; }
.lp-lede {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: var(--lp-ink-2);
  max-width: 62ch;
}
.lp-mono { font-family: var(--lp-fm); font-variant-numeric: tabular-nums; }

/* ---------- shell ---------- */
.lp-wrap {
  width: 100%;
  max-width: var(--lp-maxw);
  margin-inline: auto;
  padding-inline: 22px;
  position: relative;
  z-index: 1;
}
section { position: relative; z-index: 1; }
.lp-sec { padding-block: clamp(68px, 9vw, 120px); }
.lp-sec-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 46px; }

/* hairline section divider that actually carries the brand */
.lp-rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.5) 22%, rgba(34, 211, 238, 0.5) 60%, transparent);
  opacity: 0.55;
}

/* ---------- buttons ---------- */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--lp-fb);
  font-size: 0.94rem;
  font-weight: 600;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.lp-btn:hover { transform: translateY(-1px); }
.lp-btn-1 {
  color: #fff;
  background: linear-gradient(105deg, var(--lp-violet), #b535e0 52%, var(--lp-pink));
  box-shadow: 0 12px 34px -14px rgba(255, 45, 177, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.lp-btn-1:hover { box-shadow: 0 18px 44px -14px rgba(255, 45, 177, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.lp-btn-2 {
  color: var(--lp-ink);
  background: var(--lp-surface);
  border-color: var(--lp-line-2);
}
.lp-btn-2:hover { background: var(--lp-surface-2); }
.lp-btn-s { padding: 8px 15px; font-size: 0.82rem; }

/* ============================================================
   HERO
   ============================================================ */
.lp-hero { padding-block: clamp(48px, 7vw, 92px) clamp(50px, 6vw, 86px); }
.lp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 66px);
  align-items: center;
}
.lp-hero h1 { margin-block: 18px 20px; }
.lp-hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--lp-cyan) 5%, #a78bfa 48%, var(--lp-pink) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-hero .lp-lede { font-size: clamp(1.04rem, 1.6vw, 1.22rem); }
.lp-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.lp-hero-meta {
  margin-top: 20px;
  font-family: var(--lp-fm);
  font-size: 0.74rem;
  color: var(--lp-faint);
  letter-spacing: 0.02em;
}
.lp-hero-meta a { color: var(--lp-ink-2); border-bottom: 1px solid var(--lp-line-2); }

/* ---------- the control-room mock (signature visual) ---------- */
.lp-lane-label {
  font-family: var(--lp-fm);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-faint);
}
.lp-lane {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.lp-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--lp-fm);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.lp-pill i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.lp-pill.lp-doing   { color: #ffca7a; border-color: rgba(245, 166, 35, 0.42); background: rgba(245, 166, 35, 0.12); }
.lp-pill.lp-doing i { background: var(--lp-doing); }
.lp-pill.lp-testing { color: #8ee9f8; border-color: rgba(34, 211, 238, 0.42); background: rgba(34, 211, 238, 0.11); }
.lp-pill.lp-testing i { background: var(--lp-testing); }
.lp-pill.lp-done    { color: #7fe294; border-color: rgba(40, 201, 64, 0.38); background: rgba(40, 201, 64, 0.10); }
.lp-pill.lp-done i  { background: var(--lp-done); }
.lp-pill.lp-queued  { color: var(--lp-muted); border-color: var(--lp-line-2); background: rgba(255, 255, 255, 0.025); }
.lp-pill.lp-queued i { background: var(--lp-queued); }
.lp-pill.lp-needs   { color: #ffadad; border-color: rgba(248, 113, 113, 0.5); background: rgba(248, 113, 113, 0.13); }
.lp-pill.lp-needs i { background: var(--lp-needs); }
.lp-arw { color: var(--lp-faint); font-size: 0.8rem; }

.lp-needs-card {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  border-radius: var(--lp-r-s);
  border: 1px solid rgba(248, 113, 113, 0.55);
  background: rgba(248, 113, 113, 0.09);
  animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.30); }
  50%      { box-shadow: 0 0 0 7px rgba(248, 113, 113, 0.0); }
}
.lp-needs-card .lp-q { font-size: 0.86rem; color: #ffd2d2; flex: 1; min-width: 0; }
.lp-needs-card .lp-id { font-family: var(--lp-fm); font-size: 0.7rem; color: #ff9d9d; }

.lp-prog {
  padding: 12px 13px;
  border-radius: var(--lp-r-s);
  border: 1px solid var(--lp-line);
  background: rgba(255, 255, 255, 0.025);
  display: flex; flex-direction: column; gap: 9px;
}
.lp-prog-top {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--lp-fm);
  font-size: 0.72rem;
  color: var(--lp-ink-2);
}
.lp-prog-top .lp-eta { margin-left: auto; color: var(--lp-faint); }
.lp-steps { display: flex; gap: 4px; }
.lp-steps b {
  height: 5px; flex: 1; border-radius: 3px;
  background: rgba(255, 255, 255, 0.10);
}
.lp-steps b.lp-on { background: var(--lp-doing); }
.lp-steps b.lp-cur { background: var(--lp-doing); animation: blink 1.5s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.lp-prog-file { font-family: var(--lp-fm); font-size: 0.68rem; color: var(--lp-faint); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- figures strip (hairline, not big tiles) ---------- */
.lp-figs {
  border-block: 1px solid var(--lp-line);
  background: rgba(255, 255, 255, 0.018);
}
.lp-figs-in {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding-block: 24px;
}
.lp-fig { padding-inline: 16px; border-left: 1px solid var(--lp-line); }
.lp-fig:first-child { border-left: 0; padding-left: 0; }
.lp-fig b {
  display: block;
  font-family: var(--lp-fd);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--lp-ink);
}
.lp-fig span {
  font-family: var(--lp-fm);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-faint);
}

/* ============================================================
   THE SHIFT — written as a diff, because the reader reads diffs
   ============================================================ */
.lp-diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 8px;
}
.lp-diff-col {
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}
.lp-diff-col.lp-minus { border-color: rgba(248, 113, 113, 0.26); }
.lp-diff-col.lp-plus  { border-color: rgba(40, 201, 64, 0.26); }
.lp-diff-h {
  font-family: var(--lp-fm);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 11px 16px;
  border-bottom: 1px solid var(--lp-line);
  display: flex; align-items: center; gap: 9px;
}
.lp-diff-col.lp-minus .lp-diff-h { color: #ff9d9d; background: rgba(248, 113, 113, 0.08); }
.lp-diff-col.lp-plus  .lp-diff-h { color: #7fe294; background: rgba(40, 201, 64, 0.07); }
.lp-diff-lines { margin: 0; padding: 8px 0; list-style: none; }
.lp-diff-lines li {
  position: relative;
  padding: 7px 16px 7px 32px;
  font-size: 0.905rem;
  color: var(--lp-ink-2);
}
.lp-diff-lines li::before {
  position: absolute;
  left: 12px;
  top: 7px;
  font-family: var(--lp-fm);
  font-size: 0.9rem;
  opacity: 0.85;
}
.lp-diff-col.lp-minus .lp-diff-lines li::before { content: '−'; color: var(--lp-needs); }
.lp-diff-col.lp-plus  .lp-diff-lines li::before { content: '+'; color: var(--lp-done); }
.lp-diff-lines strong { color: var(--lp-ink); font-weight: 600; }

/* ============================================================
   FLOW — the pill motif as a process, because it is one
   ============================================================ */
.lp-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}
.lp-flow-step {
  padding: 22px 20px 24px;
  border-left: 1px solid var(--lp-line);
  display: flex; flex-direction: column; gap: 11px;
}
.lp-flow-step:first-child { border-left: 0; }
.lp-flow-n {
  font-family: var(--lp-fm);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--lp-faint);
}
.lp-flow-step h3 { font-size: 1.04rem; }
.lp-flow-step p { font-size: 0.89rem; color: var(--lp-muted); }
.lp-flow-quote {
  font-family: var(--lp-fm);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--lp-ink-2);
  border-left: 2px solid var(--lp-violet);
  padding-left: 11px;
}
.lp-flow-mini { display: flex; flex-direction: column; gap: 6px; }

/* ============================================================
   BOARD / running tasks
   ============================================================ */
.lp-board {
  border: 1px solid var(--lp-line-2);
  border-radius: 18px;
  background: linear-gradient(170deg, rgba(15, 21, 52, 0.9), rgba(8, 12, 32, 0.96));
  box-shadow: 0 40px 80px -44px rgba(0, 0, 0, 0.8);
  padding: 20px;
  display: flex; flex-direction: column; gap: 20px;
}
.lp-board-proj { display: flex; flex-direction: column; gap: 10px; }
.lp-board-proj-h {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--lp-fm);
  font-size: 0.74rem;
  color: var(--lp-ink-2);
  padding-bottom: 9px;
  border-bottom: 1px dashed var(--lp-line);
}
.lp-board-proj-h em { font-style: normal; margin-left: auto; color: var(--lp-faint); font-size: 0.68rem; }
.lp-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.lp-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; }
.lp-legend span {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--lp-fm);
  font-size: 0.72rem;
  color: var(--lp-muted);
}

/* ============================================================
   SHIPPED PANELS — alternating, each with a real mini-mock
   ============================================================ */
.lp-panels { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 34px); }
.lp-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(22px, 3.4vw, 48px);
  align-items: center;
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  background: rgba(255, 255, 255, 0.022);
}
.lp-panel:nth-child(even) .lp-panel-viz { order: 2; }
.lp-panel-txt { display: flex; flex-direction: column; gap: 12px; }
.lp-panel-txt p { color: var(--lp-ink-2); font-size: 0.965rem; }
.lp-tag {
  align-self: flex-start;
  font-family: var(--lp-fm);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(34, 211, 238, 0.32);
  color: #8ee9f8;
  background: rgba(34, 211, 238, 0.08);
}
.lp-tag.lp-new { border-color: rgba(255, 45, 177, 0.4); color: #ff9dd8; background: rgba(255, 45, 177, 0.1); }
.lp-tag.lp-beta { border-color: rgba(245, 166, 35, 0.4); color: #ffca7a; background: rgba(245, 166, 35, 0.1); }

.lp-viz {
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-s);
  background: linear-gradient(165deg, rgba(13, 19, 48, 0.92), rgba(7, 11, 28, 0.96));
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 176px;
  justify-content: center;
}

/* phone (Anywhere / Remote) */
.lp-phone {
  width: 186px;
  margin-inline: auto;
  border: 1px solid var(--lp-line-2);
  border-radius: 20px;
  padding: 13px 12px 15px;
  background: rgba(255, 255, 255, 0.03);
  display: flex; flex-direction: column; gap: 9px;
}
.lp-phone-notch {
  width: 44px; height: 4px; border-radius: 3px;
  background: var(--lp-line-2);
  margin-inline: auto;
}
.lp-phone-status {
  font-family: var(--lp-fm);
  font-size: 0.62rem;
  color: #7fe294;
  display: flex; align-items: center; gap: 6px;
}
.lp-qr { display: block; width: 56px; height: 56px; margin-inline: auto; opacity: 0.8; }
.lp-qr rect { fill: var(--lp-ink); }

/* team ranges */
.lp-rng { display: flex; align-items: center; gap: 10px; font-family: var(--lp-fm); font-size: 0.72rem; }
.lp-rng .lp-who { color: var(--lp-muted); margin-left: auto; }
.lp-rng-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; display: flex; }
.lp-rng-bar i { display: block; height: 100%; }

/* journals */
.lp-jrn { display: flex; flex-direction: column; gap: 8px; }
.lp-jrn-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border-radius: 7px;
  border: 1px solid var(--lp-line);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.83rem;
  color: var(--lp-ink-2);
}
.lp-jrn-row .lp-when { font-family: var(--lp-fm); font-size: 0.68rem; color: var(--lp-faint); width: 62px; flex: none; }
.lp-jrn-row .lp-aud {
  margin-left: auto; flex: none;
  font-family: var(--lp-fm); font-size: 0.63rem;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--lp-line-2); color: var(--lp-muted);
}
.lp-jrn-row .lp-aud.lp-on { border-color: rgba(124, 58, 237, 0.5); color: #c4aaff; background: rgba(124, 58, 237, 0.14); }

/* terminal (commands) */
.lp-term {
  font-family: var(--lp-fm);
  font-size: 0.74rem;
  border-radius: 8px;
  border: 1px solid var(--lp-line);
  background: rgba(0, 0, 0, 0.35);
  padding: 12px 13px;
  display: flex; flex-direction: column; gap: 7px;
}
.lp-term .lp-ln { display: flex; gap: 9px; color: var(--lp-ink-2); }
.lp-term .lp-ln b { color: var(--lp-cyan); font-weight: 500; }
.lp-term .lp-ok { color: #7fe294; }
.lp-term .lp-cur { color: var(--lp-doing); }

/* ============================================================
   VIEWS — four ways to look at one backlog
   ============================================================ */
.lp-views {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.lp-view {
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  background: rgba(255, 255, 255, 0.022);
  padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.lp-view-h { display: flex; align-items: baseline; gap: 10px; }
.lp-view-h h3 { font-size: 1.02rem; }
.lp-view-h span { font-family: var(--lp-fm); font-size: 0.66rem; color: var(--lp-faint); margin-left: auto; }
.lp-view p { font-size: 0.875rem; color: var(--lp-muted); }

/* kanban */
.lp-kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.lp-kcol { display: flex; flex-direction: column; gap: 5px; }
.lp-kcol .lp-kh {
  font-family: var(--lp-fm); font-size: 0.58rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--lp-faint);
}
.lp-kcard {
  height: 20px; border-radius: 5px;
  border: 1px solid var(--lp-line-2);
  background: rgba(255, 255, 255, 0.04);
}
.lp-kcard.lp-d  { border-color: rgba(245, 166, 35, 0.45); background: rgba(245, 166, 35, 0.13); }
.lp-kcard.lp-t  { border-color: rgba(34, 211, 238, 0.45); background: rgba(34, 211, 238, 0.12); }
.lp-kcard.lp-g  { border-color: rgba(40, 201, 64, 0.4);  background: rgba(40, 201, 64, 0.11); }
.lp-kcard.lp-n  { border-color: rgba(248, 113, 113, 0.5); background: rgba(248, 113, 113, 0.13); }

/* roadmap */
.lp-road { display: flex; flex-direction: column; gap: 7px; }
.lp-road-axis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  font-family: var(--lp-fm); font-size: 0.58rem; color: var(--lp-faint);
  border-bottom: 1px solid var(--lp-line); padding-bottom: 5px;
}
.lp-road-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; align-items: center; height: 16px; }
.lp-road-bar { height: 9px; border-radius: 5px; }
.lp-road-bar.lp-v { background: linear-gradient(90deg, var(--lp-violet), #b535e0); }
.lp-road-bar.lp-c { background: linear-gradient(90deg, rgba(34, 211, 238, 0.85), rgba(34, 211, 238, 0.45)); }
.lp-road-bar.lp-p { background: linear-gradient(90deg, var(--lp-pink), rgba(255, 45, 177, 0.4)); }
.lp-road-mile {
  font-family: var(--lp-fm); font-size: 0.58rem; color: #ff9dd8;
  display: flex; align-items: center; gap: 5px;
}

/* insights */
.lp-spark { display: flex; align-items: flex-end; gap: 4px; height: 56px; }
.lp-spark i {
  flex: 1; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.85), rgba(34, 211, 238, 0.12));
}
.lp-spark i.lp-hi { background: linear-gradient(180deg, var(--lp-pink), rgba(255, 45, 177, 0.15)); }
.lp-kpis { display: flex; gap: 18px; }
.lp-kpi b {
  display: block; font-family: var(--lp-fd); font-size: 1.2rem; font-weight: 800;
  letter-spacing: -0.02em;
}
.lp-kpi span { font-family: var(--lp-fm); font-size: 0.62rem; color: var(--lp-faint); letter-spacing: 0.07em; text-transform: uppercase; }

/* cost list */
.lp-cost { display: flex; flex-direction: column; gap: 6px; }
.lp-cost-row {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.8rem; color: var(--lp-ink-2);
  padding: 7px 9px; border-radius: 7px;
  border: 1px solid var(--lp-line);
  background: rgba(255, 255, 255, 0.02);
}
.lp-cost-row .lp-amt { margin-left: auto; font-family: var(--lp-fm); font-size: 0.72rem; }
.lp-cost-row .lp-amt.lp-lo { color: #7fe294; }
.lp-cost-row .lp-amt.lp-md { color: #ffca7a; }
.lp-cost-row .lp-amt.lp-hi { color: #ff9dd8; }

/* ============================================================
   CAPABILITY MATRIX — everything, grouped by what it's for
   ============================================================ */
.lp-matrix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--lp-line);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  overflow: hidden;
}
.lp-mgroup {
  background: var(--lp-bg-2);
  padding: 22px 20px 24px;
  display: flex; flex-direction: column; gap: 13px;
}
.lp-mgroup-h { display: flex; align-items: center; gap: 9px; }
.lp-mgroup-h h3 { font-size: 0.98rem; }
.lp-mgroup-h .lp-n {
  font-family: var(--lp-fm); font-size: 0.64rem; color: var(--lp-faint); margin-left: auto;
}
.lp-mlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.lp-mlist li {
  position: relative;
  padding-left: 15px;
  font-size: 0.875rem;
  color: var(--lp-muted);
  line-height: 1.45;
}
.lp-mlist li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--lp-line-2);
}
.lp-mlist li strong { color: var(--lp-ink); font-weight: 600; }
.lp-mlist li.lp-fresh::before { background: var(--lp-pink); box-shadow: 0 0 0 3px rgba(255, 45, 177, 0.18); }

/* ============================================================
   STEPS / use cases / quotes / pricing / faq
   ============================================================ */
.lp-steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: s; }
.lp-step3 {
  border: 1px solid var(--lp-line);
  border-top: 2px solid var(--lp-cyan);
  border-radius: 4px var(--lp-r) var(--lp-r) var(--lp-r);
  background: rgba(255, 255, 255, 0.022);
  padding: 22px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.lp-step3:nth-child(2) { border-top-color: #a78bfa; }
.lp-step3:nth-child(3) { border-top-color: var(--lp-pink); }
.lp-step3 .lp-num { font-family: var(--lp-fm); font-size: 0.68rem; color: var(--lp-faint); letter-spacing: 0.1em; }
.lp-step3 p { font-size: 0.89rem; color: var(--lp-muted); }
.lp-step3 code {
  font-family: var(--lp-fm); font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 5px; border-radius: 4px;
  color: #8ee9f8;
}

.lp-shapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lp-shape {
  border-left: 2px solid var(--lp-line-2);
  padding: 4px 0 4px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.lp-shape:nth-child(1) { border-left-color: rgba(34, 211, 238, 0.6); }
.lp-shape:nth-child(2) { border-left-color: rgba(124, 58, 237, 0.6); }
.lp-shape:nth-child(3) { border-left-color: rgba(255, 45, 177, 0.6); }
.lp-shape:nth-child(4) { border-left-color: rgba(40, 201, 64, 0.5); }
.lp-shape h3 { font-size: 0.98rem; }
.lp-shape p { font-size: 0.86rem; color: var(--lp-muted); }

.lp-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lp-quote {
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  padding: 26px;
  margin: 0;
  background: rgba(255, 255, 255, 0.022);
  display: flex; flex-direction: column; gap: 18px;
}
.lp-quote blockquote {
  margin: 0;
  font-family: var(--lp-fd);
  font-size: 1.06rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--lp-ink);
}
.lp-quote figcaption { display: flex; flex-direction: column; gap: 2px; }
.lp-quote .lp-who { font-weight: 600; font-size: 0.92rem; }
.lp-quote .lp-role { font-family: var(--lp-fm); font-size: 0.72rem; color: var(--lp-faint); }

.lp-pay {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
  border: 1px solid var(--lp-line-2);
  border-radius: 18px;
  padding: clamp(26px, 3.4vw, 44px);
  background:
    radial-gradient(700px 340px at 88% 10%, rgba(255, 45, 177, 0.16), transparent 70%),
    linear-gradient(160deg, rgba(18, 24, 60, 0.9), rgba(8, 12, 32, 0.95));
}
.lp-price { display: flex; align-items: baseline; gap: 10px; margin-block: 16px 20px; }
.lp-price b { font-family: var(--lp-fd); font-size: 3.4rem; font-weight: 800; letter-spacing: -0.04em; }
.lp-price span { font-family: var(--lp-fm); font-size: 0.82rem; color: var(--lp-muted); }
.lp-incl { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.lp-incl li { display: flex; gap: 11px; font-size: 0.92rem; color: var(--lp-ink-2); }
.lp-incl li::before { content: '✓'; color: var(--lp-done); font-family: var(--lp-fm); font-size: 0.85rem; }
.lp-dl { display: flex; flex-direction: column; gap: 11px; }
.lp-dl-card {
  display: flex; align-items: center; gap: 13px;
  border: 1px solid var(--lp-line-2);
  border-radius: var(--lp-r-s);
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  transition: background 0.16s ease, border-color 0.16s ease;
}
.lp-dl-card:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(34, 211, 238, 0.45); }
.lp-dl-card .lp-t { display: flex; flex-direction: column; }
.lp-dl-card .lp-t b { font-size: 0.92rem; font-weight: 600; }
.lp-dl-card .lp-t span { font-family: var(--lp-fm); font-size: 0.68rem; color: var(--lp-faint); }
.lp-dl-card .lp-go { margin-left: auto; color: var(--lp-cyan); font-family: var(--lp-fm); font-size: 0.74rem; }

.lp-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }
.lp-faq details {
  border-bottom: 1px solid var(--lp-line);
  padding-block: 16px;
}
.lp-faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  list-style: none;
  display: flex; align-items: center; gap: 12px;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: '+';
  margin-left: auto;
  font-family: var(--lp-fm);
  color: var(--lp-cyan);
  font-size: 1.05rem;
}
.lp-faq details[open] summary::after { content: '−'; }
.lp-faq details p { margin-top: 11px; font-size: 0.9rem; color: var(--lp-muted); max-width: 54ch; }

/* ============================================================
   REAL PRODUCT SCREENSHOTS
   ============================================================ */
.lp-shot {
  border: 1px solid var(--lp-line-2);
  border-radius: 16px;
  overflow: hidden;
  background: var(--lp-bg-2);
  box-shadow: 0 44px 90px -40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.lp-shot img { display: block; width: 100%; height: auto; }
.lp-shot-cap {
  font-family: var(--lp-fm);
  font-size: 0.7rem;
  color: var(--lp-faint);
  margin-top: 13px;
}

.lp-hero-visual { position: relative; }
.lp-float { position: absolute; z-index: 2; }
.lp-float > * {
  background-color: rgba(7, 11, 28, 0.93);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.9);
}
.lp-float-a { left: -16px; bottom: 96px; width: min(310px, 82%); }
.lp-float-b { right: -16px; bottom: -26px; width: min(300px, 80%); }

.lp-view-shot {
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--lp-bg);
  max-width: 100%;
}
.lp-view-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; cursor: zoom-in; transition: transform .15s ease; }
.lp-view-shot img:hover { transform: scale(1.02); }

.lp-viz-shot { padding: 0; overflow: hidden; min-height: 0; }
.lp-viz-shot img { display: block; width: 100%; height: auto; }
.lp-viz-stack { position: relative; }
.lp-viz-phone {
  position: absolute;
  right: -10px;
  bottom: -14px;
  width: 128px;
  z-index: 2;
  background-color: rgba(7, 11, 28, 0.95);
  border-radius: 20px;
  box-shadow: 0 26px 50px -18px rgba(0, 0, 0, 0.95);
}
.lp-viz-phone .lp-phone { width: 100%; padding: 10px 9px 12px; margin: 0; }

/* SD-3061: the Anywhere pairing visual.
   It used to be the whole pairing dialog as a 1284x880 screenshot, real QR
   code included. Two things wrong with that: the code was the biggest element
   on the panel while being the least interesting thing the section has to say,
   and it printed a scannable credential on a public page, under a dialog line
   that says not to pass one on. The screenshot also set the panel's height —
   ~390px with padding — and `align-items: center` handed that height to the
   text column next to it.
   What replaces it is drawn: a mark that reads as "scan this" and carries
   nothing to scan, the three lines the dialog actually says, and the phone at
   the size of a result rather than a second subject. */
.lp-viz-pair {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 18px;
  min-height: 0;
}
.lp-pair-mark {
  width: 96px;
  height: 96px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--lp-line-2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.lp-pair-dialog { flex: 1 1 180px; min-width: 0; }
.lp-pair-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  font-family: var(--lp-fd);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--lp-ink);
}
.lp-pair-left { font-family: var(--lp-fm); font-size: 0.62rem; font-weight: 400; color: var(--lp-muted); }
.lp-pair-state {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 9px 0 0;
  font-size: 0.8rem;
  color: var(--lp-ink);
}
.lp-pair-url {
  display: block;
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--lp-fm);
  font-size: 0.62rem;
  color: var(--lp-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-viz-pair .lp-phone {
  width: 92px;
  flex: none;
  margin: 0;
  padding: 8px 7px 9px;
  border-radius: 15px;
}
.lp-viz-pair .lp-phone-status { font-size: 0.54rem; }
.lp-viz-pair .lp-q { font-size: 0.56rem; }

/* The points that replaced the second paragraph. */
.lp-panel-pts { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.lp-panel-pts li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--lp-ink-2);
}
.lp-panel-pts svg { flex: none; margin-top: 3px; }

.lp-demo-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--lp-line-2);
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 44px 90px -40px rgba(0, 0, 0, 0.85);
  max-width: 100%;
}
.lp-demo-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lp-demo-alt {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin-top: 14px;
  font-family: var(--lp-fm); font-size: 0.72rem; color: var(--lp-faint);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .lp-hero-grid { grid-template-columns: 1fr; }
  .lp-panel { grid-template-columns: 1fr; }
  .lp-panel:nth-child(even) .lp-panel-viz { order: 0; }
  .lp-matrix { grid-template-columns: 1fr 1fr; }
  .lp-flow { grid-template-columns: 1fr 1fr; }
  .lp-flow-step:nth-child(3) { border-left: 0; }
  .lp-flow-step:nth-child(n+3) { border-top: 1px solid var(--lp-line); }
  .lp-shapes { grid-template-columns: 1fr 1fr; }
  .lp-pay { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  /* SD-3061: three columns do not fit a phone screen — the mark and the
     dialog keep the row, the phone drops under them rather than shrinking
     into a sliver. */
  .lp-viz-pair .lp-phone { margin-inline: auto; }
  .lp-pair-dialog { flex-basis: 140px; }
}
@media (max-width: 860px) {
  .lp-float { position: static; width: auto; margin-top: 12px; }
  .lp-float > * { backdrop-filter: none; }
  .lp-viz-phone { position: static; width: 150px; margin: 12px auto 0; box-shadow: none; }
}
@media (max-width: 720px) {
  .lp-figs-in { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
  .lp-fig:nth-child(odd) { border-left: 0; padding-left: 0; }
  .lp-diff { grid-template-columns: 1fr; }
  .lp-views { grid-template-columns: 1fr; }
  .lp-matrix { grid-template-columns: 1fr; }
  .lp-flow { grid-template-columns: 1fr; }
  .lp-flow-step { border-left: 0; }
  .lp-flow-step:nth-child(n+2) { border-top: 1px solid var(--lp-line); }
  .lp-steps3 { grid-template-columns: 1fr; }
  .lp-shapes { grid-template-columns: 1fr; }
  .lp-quotes { grid-template-columns: 1fr; }
  .lp-faq { grid-template-columns: 1fr; }
  .lp-kanban { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   SD-4109 — Agentic Studio: hero pipeline, USP panels, workflows,
   studio split + Code view mock, videos
   ============================================================ */

.lp-studio-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 13px 6px 8px;
  border-radius: 999px;
  border: 1px solid var(--lp-line-2);
  background: var(--lp-surface);
  font-family: var(--lp-fm); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--lp-ink-2);
}
.lp-studio-badge b {
  font-weight: 500; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; color: #fff;
  background: linear-gradient(105deg, var(--lp-violet), #b535e0 52%, var(--lp-pink));
}
.lp-hero h1 { font-size: clamp(2.4rem, 4.4vw, 3.8rem); }
.lp-hero h1 .lp-line { display: block; }

/* the pipeline: Tasks -> ... -> Done */
.lp-pipe {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: clamp(38px, 5vw, 60px);
  padding: 16px 18px;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  background: rgba(255, 255, 255, 0.022);
}
.lp-pipe .lp-lane-label { margin-right: 8px; }
.lp-pipe .lp-pill.lp-agent { color: #c4aaff; border-color: rgba(124, 58, 237, 0.5); background: rgba(124, 58, 237, 0.14); }
.lp-pipe .lp-pill.lp-agent i { background: #a78bfa; }

/* USP grid */
.lp-usp-n {
  font-family: var(--lp-fm); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--lp-faint);
}
.lp-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-family: var(--lp-fm); font-size: 0.72rem; }
.lp-kv dt { color: var(--lp-faint); }
.lp-kv dd { margin: 0; color: var(--lp-ink-2); }
.lp-refined {
  border: 1px solid var(--lp-line-2); border-radius: var(--lp-r-s);
  background: rgba(255, 255, 255, 0.03); padding: 12px 13px;
  display: flex; flex-direction: column; gap: 10px;
}
.lp-refined-h { display: flex; align-items: center; gap: 9px; font-size: 0.86rem; color: var(--lp-ink); }
.lp-refined-h .lp-mono { font-size: 0.68rem; color: var(--lp-faint); }
.lp-arrow-down { text-align: center; font-family: var(--lp-fm); color: var(--lp-faint); font-size: 0.8rem; }

.lp-gate { display: flex; align-items: center; gap: 9px; font-size: 0.8rem; color: var(--lp-ink-2); }
.lp-gate .lp-ck { font-family: var(--lp-fm); color: var(--lp-done); width: 14px; }
.lp-gate .lp-gate-who { margin-left: auto; font-family: var(--lp-fm); font-size: 0.64rem; color: var(--lp-faint); }
.lp-gate.lp-run .lp-ck { color: var(--lp-doing); }

/* workforce */
.lp-wf-shot { position: relative; }
.lp-wf-shot img { display: block; width: 100%; height: auto; }
.lp-wf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.lp-wf-item {
  border: 1px solid var(--lp-line); border-radius: var(--lp-r);
  background: rgba(255, 255, 255, 0.022);
  padding: 18px; display: flex; flex-direction: column; gap: 8px;
}
.lp-wf-item h3 { font-size: 0.98rem; }
.lp-wf-item p { font-size: 0.86rem; color: var(--lp-muted); }
.lp-roster { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.lp-agent-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px 5px 5px; border-radius: 999px;
  border: 1px solid var(--lp-line-2); background: rgba(255, 255, 255, 0.03);
  font-size: 0.8rem; color: var(--lp-ink);
}
.lp-agent-chip .lp-av {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--lp-fm); font-size: 0.6rem; font-weight: 700; color: #0a0f2a;
}
.lp-agent-chip em { font-style: normal; font-family: var(--lp-fm); font-size: 0.62rem; color: var(--lp-faint); }

/* studio split */
.lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lp-mode {
  border: 1px solid var(--lp-line); border-radius: var(--lp-r);
  background: rgba(255, 255, 255, 0.022);
  padding: clamp(22px, 2.6vw, 30px);
  display: flex; flex-direction: column; gap: 14px;
}
.lp-mode.lp-deleg { border-top: 2px solid var(--lp-cyan); }
.lp-mode.lp-dive  { border-top: 2px solid var(--lp-pink); }
.lp-mode h3 { font-size: 1.35rem; }
.lp-mode > p { color: var(--lp-ink-2); font-size: 0.95rem; }
.lp-hand {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 18px;
  font-family: var(--lp-fm); font-size: 0.74rem; color: var(--lp-muted);
}
.lp-hand i { flex: 1; max-width: 160px; height: 1px; background: linear-gradient(90deg, var(--lp-cyan), var(--lp-pink)); }


/* ---------- code view mock ---------- */
.lp-code {
  margin-top: 26px;
  border: 1px solid var(--lp-line-2); border-radius: 16px; overflow: hidden;
  background: linear-gradient(170deg, rgba(15, 21, 52, 0.96), rgba(7, 11, 28, 0.98));
  box-shadow: 0 44px 90px -40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-family: var(--lp-fm); font-size: 0.72rem; color: var(--lp-ink-2);
}
.lp-code-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--lp-line); background: rgba(255,255,255,.02); }
.lp-dots { display: flex; gap: 6px; }
.lp-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.lp-dots i:nth-child(2) { background: #febc2e; } .lp-dots i:nth-child(3) { background: #28c840; }
.lp-code-tabs { display: flex; gap: 4px; margin-left: 10px; }
.lp-code-tabs span { padding: 4px 10px; border-radius: 6px; color: var(--lp-faint); }
.lp-code-tabs span.on { color: var(--lp-ink); background: rgba(255,255,255,.07); }
.lp-code-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr) 270px; min-height: 380px; }
.lp-tree { border-right: 1px solid var(--lp-line); padding: 12px 10px; display: flex; flex-direction: column; gap: 3px; }
.lp-tree-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.lp-tree-tabs span { padding: 3px 8px; border-radius: 999px; border: 1px solid var(--lp-line); color: var(--lp-faint); font-size: 0.64rem; }
.lp-tree-tabs span.on { color: #8ee9f8; border-color: rgba(34,211,238,.42); background: rgba(34,211,238,.1); }
.lp-tree-f { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-tree-f.d { color: var(--lp-faint); }
.lp-tree-f.on { background: rgba(124,58,237,.18); color: var(--lp-ink); }
.lp-tree-f b { margin-left: auto; font-weight: 500; font-size: 0.62rem; }
.lp-tree-f b.m { color: var(--lp-doing); } .lp-tree-f b.a { color: #7fe294; }
.lp-ed { display: flex; flex-direction: column; min-width: 0; }
.lp-ed-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; border-bottom: 1px solid var(--lp-line); }
.lp-ed-h .file { color: var(--lp-ink); }
.lp-ed-h .by { color: var(--lp-faint); }
.lp-ed-h .lp-btn { margin-left: auto; padding: 5px 11px; font-size: 0.66rem; }
.lp-code-diff { display: grid; grid-template-columns: 1fr 1fr; flex: 1; }
.lp-code-diff > div { padding: 8px 0; min-width: 0; overflow: hidden; }
.lp-code-diff > div + div { border-left: 1px solid var(--lp-line); }
.lp-code-ln { display: flex; gap: 10px; padding: 1px 12px; white-space: pre; line-height: 1.7; }
.lp-code-ln i { font-style: normal; color: var(--lp-faint); width: 18px; text-align: right; flex: none; opacity: .7; }
.lp-code-ln.del { background: rgba(248,113,113,.12); color: #ffc4c4; }
.lp-code-ln.add { background: rgba(40,201,64,.12); color: #bff3c9; }
.lp-code-ln .k { color: #c4aaff; } .lp-code-ln .s { color: #8ee9f8; } .lp-code-ln .c { color: var(--lp-faint); }
.lp-hunk { display: flex; align-items: center; gap: 10px; margin: 6px 12px; padding: 5px 10px; border-radius: 6px; border: 1px dashed var(--lp-line-2); color: var(--lp-faint); font-size: 0.64rem; }
.lp-hunk b { margin-left: auto; font-weight: 500; color: #ff9dd8; }
.lp-code-panel { border-left: 1px solid var(--lp-line); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.lp-code-panel h4 { font-family: var(--lp-fb); font-size: 0.82rem; font-weight: 600; letter-spacing: 0; color: var(--lp-ink); display: flex; align-items: center; gap: 8px; }
.lp-code-panel h4 span { font-family: var(--lp-fm); font-size: 0.6rem; font-weight: 500; padding: 2px 7px; border-radius: 999px; color: #c4aaff; background: rgba(124,58,237,.16); border: 1px solid rgba(124,58,237,.4); }
.lp-ask-q { align-self: flex-end; max-width: 90%; padding: 7px 10px; border-radius: 10px 10px 2px 10px; background: rgba(124,58,237,.2); color: var(--lp-ink); font-family: var(--lp-fb); font-size: 0.78rem; }
.lp-ask-a { padding: 9px 11px; border-radius: 10px 10px 10px 2px; border: 1px solid var(--lp-line); background: rgba(255,255,255,.03); font-family: var(--lp-fb); font-size: 0.78rem; line-height: 1.5; color: var(--lp-ink-2); display: flex; flex-direction: column; gap: 7px; }
.lp-jump { align-self: flex-start; font-family: var(--lp-fm); font-size: 0.62rem; padding: 2px 7px; border-radius: 5px; color: #8ee9f8; background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.35); }
.lp-code-term { border-top: 1px solid var(--lp-line); padding: 9px 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; background: rgba(0,0,0,.28); }
.lp-code-term .t { color: var(--lp-faint); } .lp-code-term .ok { color: #7fe294; } .lp-code-term .run { color: var(--lp-doing); }
.lp-code-cap { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.lp-code-cap div { font-size: 0.86rem; color: var(--lp-muted); }
.lp-code-cap strong { display: block; color: var(--lp-ink); font-weight: 600; margin-bottom: 2px; }

/* ---------- videos ---------- */
.lp-vids { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; }
.lp-vids-side { display: flex; flex-direction: column; gap: 18px; }
.lp-vid { display: flex; flex-direction: column; gap: 10px; }
.lp-vid-thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; max-width: 100%;
  border: 1px solid var(--lp-line-2); border-radius: 14px; overflow: hidden; background: var(--lp-bg-2);
  box-shadow: 0 30px 60px -36px rgba(0,0,0,.85);
}
.lp-vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.lp-vid-thumb:hover img { transform: scale(1.02); }
.lp-play {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(105deg, var(--lp-violet), #b535e0 52%, var(--lp-pink));
  box-shadow: 0 14px 34px -10px rgba(255,45,177,.75);
}
.lp-vids-side .lp-play { width: 46px; height: 46px; }
.lp-vid-thumb.lp-empty { display: grid; place-items: center; border-style: dashed; background: rgba(255,255,255,.02); color: var(--lp-faint); font-family: var(--lp-fm); font-size: 0.7rem; box-shadow: none; }
.lp-vid h3 { font-size: 1rem; }
.lp-vid p { font-family: var(--lp-fm); font-size: 0.7rem; color: var(--lp-faint); }

@media (max-width: 1000px) {
  .lp-code-grid { grid-template-columns: 180px minmax(0, 1fr); }
  .lp-code-panel { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--lp-line); }
  .lp-code-cap { grid-template-columns: 1fr 1fr; }
  .lp-vids { grid-template-columns: 1fr; }
  .lp-vids-side { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .lp-code-grid { grid-template-columns: 1fr; }
  .lp-code-lbl { display: none; }
  .lp-code-tabs { margin-left: 0; }
  .lp-tree { display: none; }
  .lp-code-diff { grid-template-columns: 1fr; }
  .lp-code-diff > div:first-child { display: none; }
  .lp-code-diff > div + div { border-left: 0; }
  .lp-code-cap, .lp-vids-side { grid-template-columns: 1fr; }
}

@media (max-width: 1000px) {
  .lp-wf-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .lp-wf-grid, .lp-split { grid-template-columns: 1fr; }
  .lp-pipe .lp-arw { display: none; }
}
.lp-vids.lp-vids-one { grid-template-columns: minmax(0, 1fr); }