/* ============================================================
   Celeritas Digital — the public pages.

   The third sheet in a family: DigitBot and DigitMod each have one
   of these, same class vocabulary (lp-*), same shape — frosted nav,
   hero with a piece of the product beside it, a facts strip, cards,
   steps, FAQ, final call. What differs is the accent: indigo there,
   Discord blurple on DigitMod, the Celeritas blue here, so the three
   read as one house without pretending to be the same product.

   Deliberately separate from digit-edge.css: that sheet dresses a
   tool and now carries the studio's denser tables and surfaces. This
   is a shop window — wider spacing, bigger type, always this one
   dark look regardless of what the visitor's system prefers.
   ============================================================ */

/* The public palette is now the studio's, one step removed: every value
   below is an alias of a --s-* token from system.css, so the shop window
   and the tool are the same colours and the light theme comes for free.
   The two that stay literal are the ones the public pages own: the deep
   backdrop the hero gradient needs, and the shell width. */
:root {
  --bg-0: var(--s-bg);
  --bg-1: var(--s-1);
  --bg-2: #14294d;                 /* the hero's gradient top, dark only */
  --panel: rgba(255, 255, 255, 0.04);
  --panel-2: rgba(255, 255, 255, 0.07);
  --line: var(--s-line);
  --text: var(--s-fg);
  --muted: var(--s-fg-muted);
  --subtle: var(--s-fg-subtle);
  --accent: var(--s-accent);
  --accent-2: var(--s-accent-hi);
  --accent-soft: var(--s-accent-soft);
  --green: var(--s-success);
  --amber: var(--s-warning);
  --live: var(--s-danger);
  --radius: var(--s-radius);
  /* 1280, the same column the studio uses (--de-shell-max: 80rem). At
     1160 the bar read as oversized against the content under it. */
  --shell: 1280px;
}

/* Light: the surfaces come from the system, and the few places that were
   written for a dark sheet (the hero wash, the frosted nav, the panels
   that are white films) get their light counterpart. */
html[data-theme="light"] {
  --bg-2: #dbe6f4;
  --panel: rgba(13, 23, 38, 0.03);
  --panel-2: rgba(13, 23, 38, 0.06);
}
html[data-theme="light"] .lp-nav { background: rgba(255, 255, 255, 0.86); box-shadow: var(--s-shadow); }
html[data-theme="light"] .lp-card { background: var(--s-1); box-shadow: var(--s-shadow); }
html[data-theme="light"] .lp-shot { background: var(--s-1); box-shadow: var(--s-shadow); }
html[data-theme="light"] .lp-links { background: rgba(255, 255, 255, 0.96); }
html[data-theme="light"] .lp-final { background: radial-gradient(ellipse at 50% 0%, var(--s-accent-soft), transparent 70%), var(--s-1); }
/* The chat mocks keep their own dark chrome in both themes: a Discord
   channel and a YouTube live chat are dark in real life, and a light
   version of either would stop looking like the thing it depicts. */
html[data-theme="light"] .lp-chat { background: #0f1626; border-color: rgba(13,23,38,0.14); }
html[data-theme="light"] .lp-chat .lp-chat-title,
html[data-theme="light"] .lp-chat .lp-chat-viewers { color: #98a2b3; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.lp {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  background: radial-gradient(ellipse 120% 60% at 55% 0%, var(--bg-2) 0%, var(--bg-1) 45%, var(--bg-0) 100%) no-repeat;
  background-color: var(--bg-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
.lp img { max-width: 100%; display: block; }
.ms {
  font-family: 'Material Symbols Outlined'; font-weight: 400; font-style: normal;
  font-size: 20px; line-height: 1; display: inline-block; vertical-align: middle;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 14px; padding: 1px 6px; border-radius: 6px; background: var(--panel-2); }

/* ── Nav: a frosted bar that floats over the page ─────────────── */
.lp-nav-wrap { position: sticky; top: 12px; z-index: 50; padding: 0 16px; }
/* The same bar as the studio's .cd-h-row, value for value: 56px tall,
   8/12/8/20 padding, a 6% white film over the page, the system hairline,
   the 8px corner, 12px blur. It was a 14px corner on an 8% film with
   different padding — a second bar that was almost the first. */
.lp-nav {
  max-width: var(--shell); margin: 12px auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 56px;
  padding: 8px 12px 8px 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--s-line); border-radius: var(--s-radius);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
html[data-theme="light"] .lp-nav { background: rgba(255, 255, 255, 0.86); box-shadow: var(--s-shadow); }
.lp-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; text-decoration: none; }
.lp-brand img { height: 36px; width: auto; }   /* the studio's logo height */
.lp-links { display: flex; gap: 4px; margin-left: auto; }
/* .cd-nav-a: 14/500 in the muted ink, 6px corner, the raised surface on hover. */
.lp-links a { padding: 8px 12px; border-radius: var(--s-radius-md); font-size: var(--s-text-sm); font-weight: 500; color: var(--s-fg-muted); text-decoration: none; }
.lp-links a:hover, .lp-links a[aria-current] { color: var(--s-fg); background: var(--s-3); }
.lp-menu { display: none; }

/* ── Buttons ──────────────────────────────────────────────────── */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: 10px;
  font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.lp-btn:hover { transform: translateY(-1px); }
.lp-btn-primary { background: var(--accent); color: var(--s-accent-fg); box-shadow: 0 8px 24px -8px rgba(64, 158, 215, .7); }
.lp-btn-primary:hover { background: var(--accent-2); }
.lp-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .28); color: var(--text); }
.lp-btn-ghost:hover { border-color: rgba(255, 255, 255, .5); }
.lp-btn-sm { height: 36px; padding: 0 12px; font-size: var(--s-text-sm); }   /* the system button */

/* ── Hero ─────────────────────────────────────────────────────── */
.lp-hero {
  max-width: var(--shell); margin: 0 auto; padding: 88px 24px 64px;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
}
.lp-eyebrow { margin: 0 0 14px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lp h1 { margin: 0; font-size: clamp(38px, 5.2vw, 60px); font-weight: 700; line-height: 1.04; letter-spacing: -0.035em; }
.lp-hl { color: var(--accent-2); }
.lp-lede { margin: 22px 0 0; max-width: 560px; font-size: 18px; color: var(--muted); }
.lp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* The work, shown as the thing itself rather than a stock photo. */
.lp-shot {
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: rgba(8, 16, 38, .82);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(64, 158, 215, .08);
}
.lp-shot-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.lp-shot-dots { display: inline-flex; gap: 6px; }
.lp-shot-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); display: block; }
.lp-shot-title { font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-shot-live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 12px; font-weight: 700; }
.lp-shot-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: block; }
.lp-shot img { width: 100%; height: auto; }

/* ── Facts strip ──────────────────────────────────────────────── */
.lp-facts {
  max-width: var(--shell); margin: 0 auto 24px; padding: 0 24px;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.lp-facts > div {
  display: flex; flex-direction: column; gap: 4px; padding: 20px 24px;
  background: var(--panel); border: 1px solid var(--line);
}
.lp-facts > div:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.lp-facts > div:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
.lp-facts > div + div { border-left: 0; }
.lp-fact-k { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--subtle); }
.lp-facts strong { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.lp-facts span:last-child { font-size: 14px; color: var(--muted); }

/* ── Sections ─────────────────────────────────────────────────── */
.lp-section { max-width: var(--shell); margin: 0 auto; padding: 88px 24px 0; }
.lp-narrow { max-width: 820px; }
.lp h2 { margin: 0 0 36px; max-width: 760px; font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; }
.lp-sub { margin: -24px 0 36px; max-width: 640px; font-size: 16px; color: var(--muted); }

.lp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-card {
  display: flex; flex-direction: column;
  padding: 26px; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border: 1px solid var(--line);
  transition: border-color .2s ease, transform .2s ease;
}
.lp-card:hover { border-color: rgba(93, 189, 240, .45); transform: translateY(-2px); }
.lp-ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-2); font-size: 24px; }
.lp-card h3 { margin: 18px 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.lp-card p { margin: 0; font-size: 16px; color: var(--muted); }

/* A card that is a link to one of the products. */
.lp-card-link { text-decoration: none; }
.lp-card-go { margin-top: 18px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--accent-2); }
.lp-card-go .ms { font-size: 18px; transition: transform .2s ease; }
.lp-card-link:hover .lp-card-go .ms { transform: translateX(3px); }
.lp-tag {
  align-self: flex-start; margin-top: 14px; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.lp-tag-live { background: rgba(47, 201, 128, .16); color: var(--green); }
.lp-tag-beta { background: rgba(255, 180, 50, .16); color: var(--amber); }

.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-steps li { position: relative; padding: 26px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.lp-step-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--s-accent-fg); font-weight: 700; }
.lp-steps h3 { margin: 16px 0 8px; font-size: 18px; font-weight: 700; }
.lp-steps p { margin: 0; font-size: 16px; color: var(--muted); }

.lp-know { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-know > div { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: var(--radius); border: 1px dashed rgba(255, 255, 255, .18); }
.lp-know .ms { color: var(--accent-2); font-size: 24px; margin-bottom: 4px; }
.lp-know strong { font-size: 16px; }
.lp-know span:last-child { font-size: 14px; color: var(--muted); }

/* ── Founder: a portrait next to the sentence that explains it ── */
.lp-founder {
  display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center;
  padding: 36px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line);
}
.lp-founder-photo {
  /* Square, with the system's corner. A circle crops a portrait at the
     shoulders and reads as an avatar; this is a photograph. */
  position: relative; width: 220px; height: 220px; border-radius: 16px; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.lp-founder-photo img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.lp-founder-photo span { position: absolute; font-size: 54px; font-weight: 700; color: var(--subtle); }
.lp-founder h2 { margin: 0 0 12px; }
.lp-founder p { margin: 0; font-size: 16px; color: var(--muted); }
.lp-founder-role { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); }

.lp details { border-bottom: 1px solid var(--line); }
.lp details:first-of-type { border-top: 1px solid var(--line); }
.lp summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 4px; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none;
}
.lp summary::-webkit-details-marker { display: none; }
.lp summary::after { content: '+'; font-size: 24px; font-weight: 400; color: var(--subtle); transition: transform .2s ease; }
.lp details[open] summary::after { transform: rotate(45deg); }
.lp details p { margin: 0 4px 20px; color: var(--muted); }

.lp-final {
  max-width: var(--shell); margin: 96px auto 0; padding: 64px 24px;
  text-align: center; border-radius: 20px;
  background: radial-gradient(ellipse at 50% 0%, rgba(64, 158, 215, .35), transparent 70%), var(--panel);
  border: 1px solid var(--line);
}
.lp-final h2 { margin: 0 auto 12px; }
.lp-final p { margin: 0 0 28px; color: var(--muted); font-size: 16px; }

.lp-foot {
  max-width: var(--shell); margin: 0 auto; padding: 40px 24px 48px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  font-size: 14px; color: var(--subtle);
}
.lp-foot > span:first-child { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--muted); }
.lp-foot-links { display: flex; flex-wrap: wrap; gap: 20px; }
.lp-foot a { text-decoration: none; }
.lp-foot a:hover { color: var(--text); }

.lp :focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 6px; }

/* ── Error pages ──────────────────────────────────────────────────
   The same window, with one thing in it. The code is large enough to
   be the picture, so the page needs no illustration. */
body.lp-error { min-height: 100vh; display: flex; flex-direction: column; }
.lp-err { flex: 1; display: grid; place-items: center; padding: 64px 24px; text-align: center; }
.lp-err-code {
  font-size: clamp(92px, 16vw, 168px); font-weight: 700; line-height: .9;
  letter-spacing: -0.05em; color: var(--accent-2);
  text-shadow: 0 24px 60px rgba(64, 158, 215, .28);
}
.lp-err h1 { margin: 22px 0 12px; font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.02em; }
.lp-err p { margin: 0 auto 30px; max-width: 46ch; font-size: 16px; color: var(--muted); }
.lp-err-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ── Smaller screens ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .lp-hero { grid-template-columns: 1fr; gap: 40px; padding-top: 56px; }
  .lp-grid { grid-template-columns: 1fr 1fr; }
  .lp-founder { grid-template-columns: 1fr; gap: 24px; justify-items: center; text-align: center; }
}
@media (max-width: 760px) {
  .lp-nav { padding: 8px 8px 8px 16px; gap: 8px; }
  .lp-nav > .lp-btn { margin-left: auto; }
  .lp-menu {
    display: inline-grid; place-items: center; width: 40px; height: 40px;
    border: 0; border-radius: 9px; background: transparent; color: var(--text); cursor: pointer;
  }
  .lp-menu .ms { font-size: 24px; }
  .lp-links {
    display: none; position: absolute; top: calc(100% + 8px); left: 16px; right: 16px;
    flex-direction: column; padding: 8px; margin: 0;
    background: rgba(8, 16, 38, .96); border: 1px solid var(--line); border-radius: 14px;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }
  .lp-links.open { display: flex; }
  .lp-links a { padding: 12px 14px; font-size: 16px; }

  .lp-hero { padding: 40px 16px 48px; }
  .lp-lede { font-size: 16px; }
  .lp-cta .lp-btn { flex: 1 1 auto; }
  .lp-facts { grid-template-columns: 1fr; padding: 0 16px; }
  .lp-facts > div, .lp-facts > div:first-child, .lp-facts > div:last-child { border-radius: 0; }
  .lp-facts > div:first-child { border-radius: var(--radius) var(--radius) 0 0; }
  .lp-facts > div:last-child  { border-radius: 0 0 var(--radius) var(--radius); }
  .lp-facts > div + div { border-left: 1px solid var(--line); border-top: 0; }
  .lp-section { padding: 64px 16px 0; }
  .lp-grid, .lp-steps, .lp-know { grid-template-columns: 1fr; }
  .lp-founder { padding: 26px 20px; }
  .lp-founder-photo, .lp-founder-photo img { width: 160px; height: 160px; }
  .lp-final { margin: 72px 16px 0; padding: 48px 20px; }
  .lp-foot { padding: 32px 16px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp-btn, .lp-card { transition: none; }
}

/* ── Product pages ────────────────────────────────────────────────
   Every product page is the same shape: name, tagline, lede and
   buttons on the left, the product's own picture on the right, then
   a three-up gallery. Same grid whichever product it is, so the
   pages read as a set rather than as four one-offs. */
.lp-tagline {
  margin: 10px 0 0;
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent-2);
}
.lp-tagline + .lp-lede { margin-top: 16px; }

/* A product with no screenshot shows its mark on the panel instead of
   a stretched avatar or, worse, a broken image. */
.lp-shot-mark img { width: 128px; height: 128px; margin: 48px auto; border-radius: 24px; }
.lp-shot-empty {
  display: grid; place-items: center; min-height: 260px;
  background: radial-gradient(ellipse at 50% 40%, var(--accent-soft), transparent 70%);
}
.lp-shot-empty .ms { font-size: 84px; color: var(--accent-2); opacity: .8; }

.lp-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-figure {
  margin: 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); overflow: hidden;
  display: flex; flex-direction: column;
}
/* One ratio for every tile, so three pictures of different sizes still
   line up — the caption sits on its own line underneath. */
.lp-figure img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center;
  border-bottom: 1px solid var(--line);
}
.lp-figure figcaption { padding: 12px 16px; font-size: 14px; color: var(--muted); }

@media (max-width: 960px) { .lp-shots { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .lp-shots { grid-template-columns: 1fr; } }

/* Two-up variants of the grids. Written as classes rather than inline
   grid-template-columns, because an inline value beats the stylesheet's
   media query and the cards then run off the side of a phone. */
.lp-grid-2 { grid-template-columns: 1fr 1fr; }
.lp-know-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) {
  .lp-grid-2, .lp-know-2 { grid-template-columns: 1fr; }
}

/* ── The bots' hero: a chat, not a screenshot ─────────────────────
   DigitBot and PitWallBot have no site to take a picture of yet, and
   a stretched avatar is not a product shot. Both show the same mock
   their own landing pages use — the bot answering in a real chat —
   so the slot holds the same weight as Traces' screenshot beside it.
   Lifted from the sibling sheets (DigitBot/DigitMod landing.css) and
   pointed at this page's tokens. */
.lp-chat {
  background: rgba(8, 16, 38, .82);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(64, 158, 215, .08);
  overflow: hidden;
}
.lp-chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.lp-chat-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-chat-viewers { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--subtle); }
.lp-chat-viewers .ms { font-size: 16px; }
.lp-live { padding: 2px 7px; border-radius: 4px; background: var(--live); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.lp-chat-list { list-style: none; margin: 0; padding: 10px 8px 14px; font-size: 14px; }
.lp-chat-list li { padding: 7px 10px; border-radius: 9px; color: #d6ddf2; overflow-wrap: anywhere; }
.lp-chat-list b { margin-right: 6px; font-weight: 700; }
.lp-chat-list .u1 { color: #ffb86b; }
.lp-chat-list .u2 { color: #7ee2a8; }
.lp-chat-list .u3 { color: #7cc7ff; }
.lp-chat-list .u4 { color: #ff9ecb; }
.lp-chat-list .bot { background: var(--accent-soft); }
.lp-chat-list .bot b { color: var(--accent-2); }
.lp-chat-list .bot b::after {
  content: 'BOT'; margin-left: 6px; padding: 1px 5px; border-radius: 4px;
  background: #409ed7; color: #04101f; font-size: 12px; letter-spacing: .05em; vertical-align: 2px;
}
.lp-badge { margin-right: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(126, 226, 168, .15); color: #7ee2a8; font-size: 12px; font-weight: 600; }
.lp-chat-list .superchat { background: rgba(255, 184, 107, .12); }
.lp-amount { margin-right: 6px; padding: 1px 6px; border-radius: 4px; background: #ffb86b; color: #1b1203; font-size: 12px; font-weight: 700; }
.lp-link { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.lp-mention { padding: 0 3px; border-radius: 4px; background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }
.lp-src { display: inline-block; margin-left: 4px; color: var(--subtle); font-size: 12px; }
.lp-chat-list .lp-mod {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 4px;
  background: rgba(255, 184, 107, .10); border-left: 3px solid #ffb86b;
  border-radius: 6px; color: #e9dcc7;
}
.lp-chat-list .lp-mod .ms { color: #ffb86b; font-size: 18px; margin-top: 1px; }
.lp-chat-list .lp-mod em { color: var(--subtle); font-style: normal; }
@media (prefers-reduced-motion: no-preference) {
  .lp-chat-list li { animation: lp-in .5s ease both; }
  .lp-chat-list li:nth-child(2) { animation-delay: .12s; }
  .lp-chat-list li:nth-child(3) { animation-delay: .24s; }
  .lp-chat-list li:nth-child(4) { animation-delay: .36s; }
  .lp-chat-list li:nth-child(5) { animation-delay: .48s; }
}
@keyframes lp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Footer ───────────────────────────────────────────────────────
   Four columns on a desk, stacked on a phone. The old one was a
   single line of links, which left the page ending abruptly and gave
   the products nowhere to be found from the bottom of a long page. */
.lp-footer { border-top: 1px solid var(--line); margin-top: 96px; }
.lp-footer-inner {
  max-width: var(--shell); margin: 0 auto; padding: 56px 24px 40px;
  display: grid; gap: 40px;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
}
.lp-footer-brand img { height: 30px; width: auto; }
.lp-footer-brand p { margin: 16px 0 20px; max-width: 34ch; font-size: 14px; color: var(--muted); }
.lp-footer-col h2 {
  margin: 0 0 14px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--subtle);
}
.lp-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lp-footer-col a { font-size: 14px; color: var(--muted); text-decoration: none; }
.lp-footer-col a:hover { color: var(--text); }
.lp-footer-legal {
  max-width: var(--shell); margin: 0 auto; padding: 20px 24px 48px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  font-size: 12px; color: var(--subtle);
}
@media (max-width: 960px) {
  .lp-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .lp-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .lp-footer-inner { grid-template-columns: 1fr; padding: 40px 16px 32px; }
  .lp-footer-legal { padding: 20px 16px 40px; }
}

/* ── Product cards: a preview above the words ─────────────────────
   A card with only an icon says nothing about what the thing looks
   like. Each product card now leads with its own picture, on one
   16:9 frame so four different sources still line up. The two bots
   have no screenshot to take, so they show the chat they run, in
   miniature, which is the same picture their pages lead with. */
.lp-card-thumb {
  display: block; margin: -26px -26px 18px; overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.lp-card-thumb img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center;
  transition: transform .3s ease;
}
.lp-card-link:hover .lp-card-thumb img { transform: scale(1.03); }

/* The miniature chat, for a product whose picture is its own output. */
.lp-mini {
  aspect-ratio: 16 / 9; padding: 12px; display: flex; flex-direction: column; gap: 6px;
  justify-content: center;
  background: radial-gradient(ellipse at 30% 0%, var(--accent-soft), transparent 70%), var(--bg-1);
}
.lp-mini-row { display: flex; gap: 6px; align-items: center; font-size: 12px; line-height: 1.3; }
.lp-mini-row b { color: var(--accent-2); font-weight: 700; flex: none; }
.lp-mini-row span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-mini-row.is-user b { color: #ffb86b; }
.lp-mini-bubble {
  padding: 5px 8px; border-radius: 8px; background: var(--accent-soft);
  border: 1px solid rgba(64, 158, 215, .18);
}

/* The two bots' miniatures, told apart ──────────────────────────
   They were the same three grey rows, so a visitor scanning the
   grid saw one product listed twice. Each now looks like the place
   it runs: Discord is blurple with a channel bar and a moderation
   note, YouTube is a live chat with a red badge and a Super Chat. */
.lp-mini-bar {
  display: flex; align-items: center; gap: 6px;
  margin: -4px -2px 4px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.lp-mini-count { margin-left: auto; color: var(--subtle); font-weight: 500; }

.lp-mini-discord { background: radial-gradient(ellipse at 30% 0%, rgba(88, 101, 242, .20), transparent 70%), #10121c; }
.lp-mini-discord .lp-mini-hash { color: #8c96ff; font-weight: 700; }
.lp-mini-discord .lp-mini-row b { color: #8c96ff; }
.lp-mini-discord .lp-mini-bubble { background: rgba(88, 101, 242, .16); border-color: rgba(88, 101, 242, .28); }
.lp-mini-flag {
  padding: 4px 8px; border-radius: 6px; font-size: 12px;
  background: rgba(255, 184, 107, .12); border-left: 3px solid #ffb86b; color: #e9dcc7;
}

.lp-mini-youtube { background: radial-gradient(ellipse at 30% 0%, rgba(205, 32, 45, .18), transparent 70%), #140f14; }
.lp-mini-live {
  padding: 1px 5px; border-radius: 3px; background: #cd202d; color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.lp-mini-super {
  padding: 4px 8px; border-radius: 6px; font-size: 12px;
  background: rgba(255, 184, 107, .16); color: #f3e2c8;
}
.lp-mini-super b { color: #ff9ecb; }
.lp-mini-amount {
  margin: 0 4px; padding: 0 4px; border-radius: 3px;
  background: #ffb86b; color: #1b1203; font-weight: 700;
}

/* The theme switch in the public nav. Same two icons and the same stored
   choice as the studio's, so the setting follows a person across both. */
.lp-theme {
  /* .de-theme-toggle, value for value */
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  padding: 0;
  border: 1px solid var(--s-line); border-radius: var(--s-radius);
  background: transparent; color: var(--s-fg-muted);
  cursor: pointer; transition: color .12s, border-color .12s, background .12s;
}
.lp-theme:hover { color: var(--s-fg); border-color: var(--s-line-strong); background: var(--s-2); }
.lp-theme .ms { font-size: 20px; }
.lp-theme .tt-dark { display: none; }
html[data-theme="light"] .lp-theme .tt-dark { display: block; }
html[data-theme="light"] .lp-theme .tt-light { display: none; }
.lp-links a[aria-current="page"] { color: var(--text); background: var(--panel-2); }
@media (max-width: 760px) { .lp-theme { order: 2; } }

/* ── The mocks keep their own ink ─────────────────────────────────
   A Discord channel and a YouTube live chat are dark in life, so the
   previews stay dark in both themes. That means their text cannot
   inherit --text/--muted, which flip with the theme: every colour
   inside a mock is stated here, once, for both. */
.lp-chat, .lp-mini { color-scheme: dark; }
.lp-chat .lp-chat-list li { color: #d6ddf2; }
.lp-chat .lp-chat-title { color: #e6ecfa; }
.lp-chat .lp-chat-viewers, .lp-chat .lp-src { color: #98a2b3; }
.lp-chat .lp-mention { background: rgba(64,158,215,.18); color: #7cc7ff; }
.lp-chat .lp-link { color: #7cc7ff; }

.lp-mini { color: #cfd8ea; }
.lp-mini .lp-mini-row span { color: #b6c2d8; }
.lp-mini .lp-mini-bar { color: #b6c2d8; border-bottom-color: rgba(255,255,255,.10); }
.lp-mini .lp-mini-count { color: #98a2b3; }
.lp-mini-discord .lp-mini-bubble { color: #d7dcff; }
.lp-mini-youtube .lp-mini-bubble { color: #d6e6f5; }
.lp-mini-flag { color: #f0dfc4; }
.lp-mini-super { color: #f6e6cd; }
/* These two sit inside .lp-mini-row, so they need to outrank the row's own
   colour rule above rather than tie with it. */
.lp-mini .lp-mini-row .lp-mini-amount,
.lp-chat .lp-amount { background: #ffb86b; color: #241704; font-weight: 700; }
.lp-mini .lp-mini-row b { color: #7cc7ff; }
.lp-mini-discord .lp-mini-row b { color: #8c96ff; }
.lp-mini .lp-mini-row.is-user b { color: #ffb86b; }
.lp-mini .lp-mini-super b { color: #ff9ecb; }