/* The landing page (docs/DESIGN.md §20, 2026-10-12). Linked by the home
   page alone, over the company sheet: its tokens, faces and pills are
   saas/application.css's. The product is drawn here — the editor, the
   agent, the email, the paywall, the themes — so the page needs no
   screenshot and stays sharp at any size. The marketing surface spends
   what the admin does not (§3: violet survives on marketing surfaces):
   the blue→violet spectrum as light, one ink stage, and motion that
   stands still for reduced motion. No script. */

:root {
  --lp-violet: #7c3aed;
  --lp-violet-soft: #f1ebfe;
  --lp-spectrum: linear-gradient(100deg, var(--color-accent) 0%, #5b4cf0 45%, var(--lp-violet) 100%);
  --lp-wrap: 82rem;
  --lp-radius: 28px;
  --lp-shadow: 0 1px 0 rgba(11, 22, 54, 0.04), 0 24px 60px -24px rgba(11, 22, 54, 0.22), 0 0 0 1px rgba(11, 22, 54, 0.06);
  --lp-shadow-soft: 0 18px 40px -22px rgba(11, 22, 54, 0.25), 0 0 0 1px rgba(11, 22, 54, 0.06);
}

.lp {
  overflow-x: clip;
}

.lp-wrap {
  max-width: var(--lp-wrap);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.lp em {
  font-style: normal;
}

.lp code {
  font-family: var(--font-mono);
  font-size: 0.86em;
}

/* — Type ———————————————————————————————————————————— */
.lp-display {
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 1.2rem + 7.4vw, 8.75rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.92;
  text-wrap: balance;
}

.lp-display em {
  font-style: italic;
  background: var(--lp-spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
}

.lp-lede {
  max-width: 40rem;
  margin: 2rem auto 0;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  line-height: 1.55;
  color: var(--color-body);
  text-wrap: pretty;
}

.lp-fine {
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.lp-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.lp-button-lg {
  padding: 0.95rem 1.6rem;
  font-size: 1rem;
}

.lp-pulse {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
}

.lp-pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  opacity: 0;
  animation: lp-ping 2.4s var(--ease-out) infinite;
}

/* — The hero ———————————————————————————————————————— */
.lp-hero {
  position: relative;
  padding: clamp(3.5rem, 2rem + 6vw, 7.5rem) 0 0;
  text-align: center;
  isolation: isolate;
}

/* The light: a fine grid fading out from the headline, and the spectrum
   behind the product as a low glow. */
.lp-hero::before {
  content: "";
  position: absolute;
  inset: -6rem 0 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, rgba(11, 22, 54, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 22, 54, 0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 30%, transparent 75%);
}

.lp-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: -1;
  width: min(1200px, 120vw);
  height: 760px;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side at 30% 50%, rgba(46, 107, 245, 0.28), transparent 70%),
    radial-gradient(closest-side at 70% 45%, rgba(124, 58, 237, 0.24), transparent 70%);
  filter: blur(40px);
}

.lp-hero-copy > * {
  animation: lp-rise 0.9s var(--ease-out) both;
}

.lp-hero-copy > :nth-child(2) { animation-delay: 0.06s; }
.lp-hero-copy > :nth-child(3) { animation-delay: 0.14s; }
.lp-hero-copy > :nth-child(4) { animation-delay: 0.22s; }
.lp-hero-copy > :nth-child(5) { animation-delay: 0.3s; }

.lp-stage {
  position: relative;
  max-width: 84rem;
  margin: clamp(3.5rem, 2rem + 4vw, 5.5rem) auto 0;
  padding: 0 1.5rem;
  text-align: left;
  animation: lp-rise 1.1s 0.35s var(--ease-out) both;
  isolation: isolate;
}

/* A whole site above the editor: the hidden persona theme's hero with
   the sample posts (the showcase tenant), at the viewport's own width and
   its own height (54rem in its 16px, so 864px), a stage with rounded top
   corners whose lower third dissolves into the canvas on an eased curve.
   Its words end above the fade; the editor rises out of it. */
.lp-site {
  position: relative;
  height: 864px;
  margin: clamp(3.5rem, 2rem + 4vw, 5.5rem) clamp(0.5rem, 1.5vw, 1.25rem) 0;
  border-radius: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) 0 0;
  background: #0c1a2e;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, rgba(0, 0, 0, 0.82) 76%, rgba(0, 0, 0, 0.5) 86%, rgba(0, 0, 0, 0.18) 94%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 68%, rgba(0, 0, 0, 0.82) 76%, rgba(0, 0, 0, 0.5) 86%, rgba(0, 0, 0, 0.18) 94%, transparent 100%);
  animation: lp-rise 1.1s 0.3s var(--ease-out) both;
}

.lp-site iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

/* The editor rises out of the fade: a fine light rim and a deep, soft
   shadow with the spectrum in it. */
.lp-stage-over {
  margin-top: -224px;
}

.lp-stage-over .lp-window {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 2px 6px rgba(11, 22, 54, 0.08),
    0 40px 90px -30px rgba(11, 22, 54, 0.5),
    0 100px 180px -60px rgba(91, 76, 240, 0.45);
}

/* The editor's window, drawn: the admin itself, no browser around it. */
.lp-window {
  position: relative;
  border-radius: 18px;
  background: var(--color-paper);
  box-shadow: var(--lp-shadow), 0 60px 120px -40px rgba(46, 107, 245, 0.35);
  overflow: hidden;
  transform-origin: 50% 0;
}

.lp-term-bar i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: #ff5f57;
}

.lp-term-bar i:nth-child(2) { background: #febc2e; }

.lp-term-bar i:nth-child(3) { background: #28c840; }

.lp-editor {
  padding: 1.4rem clamp(1rem, 4vw, 2.5rem) 2.5rem;
}

.lp-editor-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lp-chip {
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-body);
  white-space: nowrap;
}

.lp-chip-ink {
  background: var(--color-ink);
  box-shadow: none;
  color: var(--color-on-ink);
}

.lp-editor-top .lp-chip-ink {
  margin-left: auto;
}

.lp-saved {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-muted);
}

.lp-saved b {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #22a06b;
}

.lp-toolbar {
  display: flex;
  gap: 0.2rem;
  width: fit-content;
  margin: 1.25rem auto 0;
  padding: 0.3rem;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong), 0 8px 20px -12px rgba(11, 22, 54, 0.3);
}

.lp-toolbar span {
  display: grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.35rem;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-ink);
}

.lp-toolbar span:first-child {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.lp-toolbar .lp-sep {
  min-width: 1px;
  width: 1px;
  padding: 0;
  margin: 0.4rem 0.25rem;
  height: auto;
  background: var(--color-line-strong);
}

.lp-doc {
  max-width: 46rem;
  margin: 1.75rem auto 0;
}

/* A picture, drawn: a dusk sky over three hills. */
.lp-cover {
  position: relative;
  aspect-ratio: 21 / 8;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffd7b5 0%, #f7a8a0 40%, #8f7cf0 100%);
  overflow: hidden;
}

.lp-cover span {
  position: absolute;
  bottom: -40%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #2b2f6b;
}

/* Ezra's cover: a photograph, with the image card's width pill. */
.lp-cover-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-cover-photo::after {
  display: none;
}

/* A <small>, never a <span>: the drawn cover's hills are its spans. */
.lp-cover-size {
  position: absolute;
  z-index: 1;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-ink);
}

.lp-cover span:nth-child(1) { left: -15%; background: #3b3f86; }
.lp-cover span:nth-child(2) { left: 30%; bottom: -55%; background: #2b2f6b; }
.lp-cover span:nth-child(3) { right: -20%; left: auto; bottom: -48%; background: #1d2150; }

.lp-cover::after {
  content: "";
  position: absolute;
  top: 22%;
  left: 62%;
  width: 11%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff4d6;
}

.lp-doc-kicker {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}

.lp-doc-title {
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.lp-doc-line {
  height: 0.55rem;
  margin-top: 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--color-line);
}

/* The post's words: a passage selected, the sentence after it typing
   itself and typing again, a caret at its end. */
.lp-doc-text {
  margin-top: 0.85rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: #2a3243;
}

.lp-doc-title + .lp-doc-text {
  margin-top: 1rem;
}

.lp-doc-mark {
  border-radius: 3px;
  background: rgba(46, 107, 245, 0.16);
  color: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.lp-typing {
  display: inline-block;
  white-space: nowrap;
  animation: lp-type 7s steps(42) 1.2s infinite both;
}

.lp-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.15em;
  margin-left: 2px;
  background: var(--color-accent);
  vertical-align: -0.2em;
  animation: lp-caret-blink 1s steps(1) infinite;
}

.lp-w90 { width: 90%; }
.lp-w70 { width: 70%; }
.lp-w60 { width: 60%; }

.lp-callout {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.4rem;
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  background: var(--color-accent-soft);
  font-size: 0.92rem;
  color: var(--color-ink);
}

.lp-callout b {
  color: var(--color-accent);
}

.lp-chart {
  margin: 1.4rem 0 0;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--color-line-strong);
}

.lp-chart figcaption {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 600;
}

.lp-chart figcaption em {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--lp-violet);
}

.lp-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 6.5rem;
  margin-top: 0.9rem;
}

.lp-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 6px 6px 2px 2px;
  background: var(--color-accent-soft);
  transform-origin: bottom;
  animation: lp-grow 1.2s var(--ease-out) both;
}

.lp-bars i:last-child {
  background: var(--lp-spectrum);
}

.lp-bars i:nth-child(2) { animation-delay: 0.05s; }
.lp-bars i:nth-child(3) { animation-delay: 0.1s; }
.lp-bars i:nth-child(4) { animation-delay: 0.15s; }
.lp-bars i:nth-child(5) { animation-delay: 0.2s; }
.lp-bars i:nth-child(6) { animation-delay: 0.25s; }
.lp-bars i:nth-child(7) { animation-delay: 0.3s; }

/* The cards that float over the window: the agent, a payment, a send. */
.lp-float {
  position: absolute;
  z-index: 2;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--lp-shadow);
  animation: lp-bob 7s ease-in-out infinite;
}

.lp-float-agent {
  left: -2.5rem;
  bottom: 9%;
  width: 19.5rem;
  padding: 1rem 1.1rem 1.1rem;
}

.lp-float-money {
  top: 22%;
  right: -2.75rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.2rem 0.9rem 0.9rem;
  animation-delay: -2.5s;
}

.lp-float-send {
  right: -1.5rem;
  bottom: 6%;
  width: 18rem;
  padding: 1rem 1.2rem 1.1rem;
  animation-delay: -4.5s;
}

.lp-float p b {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.lp-float p span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--color-body);
}

.lp-float-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
}

.lp-float-head em {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-orb {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--color-accent), var(--lp-violet), #ff8a5b, var(--color-accent));
}

.lp-ask {
  margin-top: 0.75rem;
  padding: 0.65rem 0.8rem;
  border-radius: 12px 12px 12px 4px;
  background: var(--color-paper-2);
  font-size: 0.82rem;
  line-height: 1.45;
}

.lp-calls {
  display: grid;
  gap: 0.35rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.lp-calls li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-muted);
}

.lp-calls code {
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-size: 0.7rem;
}

.lp-calls span::before {
  content: "✓ ";
  color: #22a06b;
  font-weight: 700;
}

.lp-float-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: var(--lp-spectrum);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
}

.lp-meter {
  height: 0.4rem;
  margin-top: 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--color-line);
  overflow: hidden;
}

.lp-meter i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--lp-spectrum);
  transform-origin: left;
  animation: lp-fill 2.4s 0.8s var(--ease-out) both;
}

/* — The agents, scrolling by ——————————————————————————— */
.lp-clients {
  padding: clamp(4rem, 3rem + 3vw, 6rem) 0 1rem;
  text-align: center;
}

.lp-clients-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.lp-marquee {
  display: flex;
  width: max-content;
  margin-top: 1.5rem;
  animation: lp-marquee 38s linear infinite;
}

.lp-clients {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.lp-marquee-row {
  display: flex;
  gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  margin: 0;
  padding: 0 clamp(1.25rem, 0.75rem + 1.5vw, 2.25rem);
  list-style: none;
}

.lp-marquee-row li {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #7c869c;
  white-space: nowrap;
}

/* — Sections ——————————————————————————————————————— */
.lp-section {
  padding: clamp(5rem, 3rem + 7vw, 9.5rem) 0;
}

.lp-tint {
  background: var(--color-paper-2);
  border-block: 1px solid var(--color-line);
}

.lp-head {
  max-width: 52rem;
  margin-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}

.lp-head-row {
  max-width: none;
}

.lp-index {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}

.lp-head h2 {
  margin-top: 1.1rem;
  font-size: clamp(2.4rem, 1.2rem + 4.4vw, 5.25rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
}

.lp-head h2 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  background: var(--lp-spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
}

.lp-head p {
  max-width: 40rem;
  margin-top: 1.5rem;
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--color-body);
  text-wrap: pretty;
}

/* A tile: paper, a ring, a large radius. */
.lp-tile {
  position: relative;
  padding: clamp(1.4rem, 1rem + 1vw, 2rem);
  border-radius: var(--lp-radius);
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  overflow: hidden;
}

.lp-tile h3 {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.lp-tile h3 em {
  font-weight: 400;
  color: var(--color-muted);
}

.lp-tile > p {
  margin-top: 0.4rem;
  font-size: 0.95rem;
  color: var(--color-body);
}

/* — 01, the agent door: the one ink stage ———————————————————— */
.lp-dark {
  position: relative;
  margin: 0 clamp(0.5rem, 1.5vw, 1.25rem);
  border-radius: clamp(24px, 3vw, 40px);
  background: var(--color-ink);
  color: var(--color-on-ink);
  overflow: hidden;
  isolation: isolate;
}

.lp-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(124, 58, 237, 0.45), transparent 60%),
    radial-gradient(50rem 30rem at -10% 110%, rgba(46, 107, 245, 0.4), transparent 60%);
}

.lp-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(234, 240, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(234, 240, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 60%);
  mask-image: linear-gradient(180deg, #000, transparent 60%);
}

.lp-dark .lp-index {
  color: #a9c1fb;
}

.lp-dark .lp-head p {
  color: var(--color-on-ink-muted);
}

.lp-dark .lp-head h2 em {
  background: linear-gradient(100deg, #8fb0ff 0%, #b79cff 60%, #e3a6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.lp-agent {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4.5rem);
  align-items: start;
}

.lp-term {
  border-radius: 20px;
  background: rgba(5, 10, 28, 0.72);
  box-shadow: 0 0 0 1px rgba(234, 240, 255, 0.1), 0 40px 80px -30px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.lp-term-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(234, 240, 255, 0.08);
}

.lp-term-bar span {
  margin-left: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-on-ink-muted);
}

.lp-term-body {
  display: grid;
  gap: 0.6rem;
  padding: clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
}

.lp-term-you {
  justify-self: end;
  max-width: 85%;
  padding: 0.85rem 1.05rem;
  border-radius: 16px 16px 4px 16px;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.5;
}

.lp-term-call {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  background: rgba(234, 240, 255, 0.05);
  box-shadow: 0 0 0 1px rgba(234, 240, 255, 0.07);
  font-size: 0.8rem;
}

.lp-term-call code {
  color: #b9cdfc;
}

.lp-term-call span {
  color: var(--color-on-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-term-call b {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: #7ee2a8;
  white-space: nowrap;
}

.lp-term-agent {
  max-width: 92%;
  margin-top: 0.4rem;
  padding: 0.85rem 1.05rem;
  border-radius: 16px 16px 16px 4px;
  background: rgba(234, 240, 255, 0.08);
  font-size: 0.95rem;
  line-height: 1.55;
}

.lp-server {
  display: grid;
  gap: 1px;
  margin: 0;
  border-radius: 18px;
  background: rgba(234, 240, 255, 0.1);
  overflow: hidden;
}

.lp-server > div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  background: rgba(5, 10, 28, 0.55);
}

.lp-server dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-ink-muted);
}

.lp-server dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.lp-server dd b {
  color: #b79cff;
  font-weight: 500;
}

.lp-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 2rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}

.lp-points h3 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lp-points h3::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 2px;
  margin-bottom: 0.9rem;
  background: linear-gradient(90deg, #8fb0ff, #b79cff);
}

.lp-points p {
  margin-top: 0.45rem;
  font-size: 0.92rem;
  color: var(--color-on-ink-muted);
}

/* — 02, the editor ——————————————————————————————————— */
.lp-bento {
  display: grid;
  gap: 1rem;
}

.lp-bento-editor {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lp-tile-tall {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}

.lp-history {
  display: grid;
  gap: 0.6rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.lp-history li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--color-line);
  font-size: 0.88rem;
}

.lp-history em {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-muted);
}

.lp-history .lp-history-now {
  background: var(--lp-violet-soft);
  box-shadow: none;
}

.lp-dot {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--color-line-strong);
}

.lp-diff {
  margin-top: 1.25rem;
  padding: 1.1rem 1.2rem;
  border-radius: 14px;
  background: var(--color-paper-2);
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.35;
}

.lp-diff del {
  color: var(--color-danger-strong);
  text-decoration-thickness: 2px;
  background: #fde8ec;
}

.lp-diff ins {
  text-decoration: none;
  color: #0f7a46;
  background: #dcf5e7;
}

.lp-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.lp-cards span {
  display: grid;
  place-items: center;
  gap: 0.35rem;
  padding: 0.9rem 0.25rem 0.7rem;
  border-radius: 14px;
  background: var(--color-paper-2);
  font-size: 1.35rem;
  color: var(--color-accent);
}

.lp-cards span:nth-child(even) {
  color: var(--lp-violet);
}

.lp-cards em {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-body);
}

.lp-widths {
  display: grid;
  gap: 0.45rem;
  margin-top: 1.5rem;
  justify-items: center;
}

.lp-widths i {
  height: 1.1rem;
  border-radius: 6px;
  background: var(--color-accent-soft);
}

.lp-widths i:nth-child(1) { width: 52%; }
.lp-widths i:nth-child(2) { width: 76%; background: #dcd0fb; }
.lp-widths i:nth-child(3) { width: 100%; background: var(--lp-spectrum); }

.lp-photos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  margin-top: 1.5rem;
}

.lp-photos img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: var(--color-paper-2);
  object-fit: cover;
}

.lp-photos img:nth-child(1) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* The badge on the picture the post already shows (the first row's
   second), as the library marks a file in use. */
.lp-photos-used {
  position: absolute;
  top: 0.35rem;
  left: calc(33.333% + 0.45rem);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  background: rgba(11, 22, 54, 0.78);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
}

.lp-langs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
}

.lp-langs span {
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  font-size: 0.82rem;
  font-weight: 500;
}

.lp-langs span:nth-child(2) {
  background: var(--color-ink);
  box-shadow: none;
  color: var(--color-on-ink);
}

.lp-langs code {
  flex-basis: 100%;
  margin-top: 0.5rem;
  color: var(--color-accent-strong);
}

/* — 03, newsletters —————————————————————————————————— */
.lp-news {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}

.lp-phone {
  justify-self: center;
  width: min(100%, 22rem);
  padding: 0.75rem;
  border-radius: 46px;
  background: var(--color-ink);
  box-shadow: var(--lp-shadow), 0 50px 100px -40px rgba(124, 58, 237, 0.45);
  transform: rotate(-3deg);
}

.lp-phone-screen {
  min-height: 32rem;
  padding: 2.25rem 1.25rem 1.5rem;
  border-radius: 36px;
  background: var(--color-paper);
}

.lp-mail-from {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
}

.lp-mail-from span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-muted);
}

.lp-mail-subject {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.lp-mail-cover {
  aspect-ratio: 16 / 9;
  margin-top: 1rem;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffd7b5 0%, #f7a8a0 45%, #8f7cf0 100%);
}

.lp-mail-button {
  display: block;
  margin: 1.25rem 0 0.25rem;
  padding: 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
}

.lp-mail-foot {
  margin-top: 1.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.68rem;
  color: var(--color-muted);
  text-align: center;
}

.lp-news-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/* The audience, growing: the one wide tile, a curve in the spectrum. */
.lp-growth {
  grid-column: 1 / -1;
  padding-bottom: 0;
}

.lp-growth-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.lp-growth-head p:not(.lp-growth-figure) {
  margin-top: 0.4rem;
  font-size: 0.95rem;
  color: var(--color-body);
}

.lp-growth-figure {
  text-align: right;
}

.lp-growth-figure b {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 1.5rem + 2vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
}

.lp-growth-figure span {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #0f7a46;
}

.lp-growth-chart {
  display: block;
  width: calc(100% + 2 * clamp(1.4rem, 1rem + 1vw, 2rem));
  height: 9rem;
  margin: 1.25rem calc(-1 * clamp(1.4rem, 1rem + 1vw, 2rem)) 0;
}

.lp-subscribe {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
  padding: 0.35rem 0.35rem 0.35rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  box-shadow: inset 0 0 0 1px var(--color-line-strong);
}

.lp-subscribe span {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-subscribe b {
  padding: 0.55rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-size: 0.82rem;
  font-weight: 600;
}

.lp-lists {
  display: grid;
  gap: 0.4rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.lp-lists li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  background: var(--color-paper-2);
  font-size: 0.85rem;
}

.lp-lists li::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
}

.lp-lists li:nth-child(2)::before { background: var(--lp-violet); }
.lp-lists li:nth-child(3)::before { background: #9aa3b8; }

.lp-lists span {
  flex: 1;
}

.lp-lists b {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lp-campaign {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.lp-campaign dl {
  display: flex;
  gap: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  margin: 0;
}

.lp-campaign dt {
  font-size: 0.78rem;
  color: var(--color-muted);
}

.lp-campaign dd {
  margin: 0.15rem 0 0;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

.lp-campaign div:nth-child(2) dd {
  background: var(--lp-spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* — 04, the business ————————————————————————————————— */
.lp-money {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr);
  gap: 1rem;
}

.lp-zero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 22rem;
  padding: 2rem;
  border-radius: var(--lp-radius);
  background: var(--lp-spectrum);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.lp-zero::before {
  content: "";
  position: absolute;
  right: -30%;
  top: -40%;
  z-index: -1;
  width: 90%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.lp-zero-figure {
  margin-bottom: auto;
  font-family: var(--font-heading);
  font-size: clamp(6rem, 4rem + 6vw, 10rem);
  font-weight: 700;
  letter-spacing: -0.07em;
  line-height: 0.85;
}

.lp-zero h3 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.lp-zero p:last-child {
  margin-top: 0.5rem;
  color: rgba(255, 255, 255, 0.86);
}

.lp-providers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-provider {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border-radius: var(--lp-radius);
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.lp-provider:hover {
  transform: translateY(-4px);
  box-shadow: var(--lp-shadow-soft);
}

/* Each provider's own logo, as the provider publishes it (2026-10-12):
   Stripe's wordmark from stripe.com, Dodo's from its brand kit, and
   Paystack's mark from its own repository with its name set beside it —
   Paystack publishes no wordmark we can take. Files in
   public/brand/partners, paths alone; never recoloured or redrawn. */
.lp-provider-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 2.25rem;
  margin-bottom: auto;
  padding-bottom: 3rem;
  box-sizing: content-box;
}

.lp-provider-logo img {
  display: block;
  width: auto;
  height: 2rem;
}

.lp-provider-stripe .lp-provider-logo img {
  height: 2.25rem;
  margin-left: -0.15rem;
}

.lp-provider-paystack .lp-provider-logo img {
  height: 1.55rem;
}

.lp-provider-logo b {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: #011b33;
}

.lp-provider h3 {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lp-provider p {
  margin-top: 0.5rem;
  font-size: 0.92rem;
  color: var(--color-body);
}

.lp-sell {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 1rem;
  margin-top: 1rem;
}

.lp-sell > div {
  padding: 1.6rem;
  border-radius: var(--lp-radius);
  background: var(--color-paper-2);
  box-shadow: inset 0 0 0 1px var(--color-line);
}

.lp-paywall {
  position: relative;
  overflow: hidden;
}

.lp-paywall .lp-doc-kicker {
  margin-top: 0;
}

.lp-paywall-title {
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.05;
}

.lp-paywall-gate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.4rem;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: var(--color-paper);
  box-shadow: var(--lp-shadow-soft);
  font-size: 0.9rem;
}

.lp-tiers {
  display: grid;
  gap: 0.6rem;
}

.lp-tier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.85rem 1rem;
  border-radius: 16px;
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line);
}

.lp-tier b {
  font-size: 0.95rem;
}

.lp-tier span {
  grid-row: 2;
  font-size: 0.78rem;
  color: var(--color-muted);
}

.lp-tier em {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.lp-tier small {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--color-muted);
}

.lp-tier-on {
  box-shadow: 0 0 0 2px var(--color-accent);
}

.lp-roster {
  display: grid;
  align-content: center;
  gap: 0.75rem;
}

.lp-roster p {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
}

.lp-avatar {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-size: 0.75rem;
  font-weight: 600;
}

.lp-roster p:nth-child(2) .lp-avatar { background: var(--color-accent); }
.lp-roster p:nth-child(3) .lp-avatar { background: var(--lp-violet); }
.lp-roster p:nth-child(4) .lp-avatar { background: #9aa3b8; }

.lp-pill {
  margin-left: auto;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--lp-violet-soft);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--lp-violet);
}

.lp-pill-paid {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.lp-pill-free {
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  color: var(--color-body);
}

.lp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.lp-tags li {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  font-size: 0.88rem;
  font-weight: 500;
}

/* — 05, the themes, each drawn in its own palette ——————————————— */
.lp-themes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-theme h3 {
  margin-top: 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lp-theme p {
  margin-top: 0.3rem;
  font-size: 0.88rem;
  color: var(--color-body);
}

.lp-thumb {
  --t-bg: #fff;
  --t-ink: #0b1636;
  --t-soft: #e7eaf2;
  --t-accent: #2e6bf5;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  aspect-ratio: 4 / 3;
  padding: 14px;
  border-radius: 18px;
  background: var(--t-bg);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.lp-theme:hover .lp-thumb {
  transform: translateY(-6px);
  box-shadow: var(--lp-shadow);
}

/* The drawn thumbnail's blocks alone; a live card's label is its own. */
.lp-thumb:where(:not(.lp-thumb-live)) span {
  display: block;
  border-radius: 4px;
  background: var(--t-soft);
}

.lp-thumb .t-mast {
  grid-column: 1 / -1;
  height: 10px;
  width: 38%;
  background: var(--t-ink);
}

.lp-thumb .t-hero {
  grid-column: 1 / -1;
  border-radius: 8px;
  background: var(--t-accent);
}

.lp-thumb .t-a,
.lp-thumb .t-b,
.lp-thumb .t-c {
  height: 26px;
}

/* pixel: the newest post as a hero, a row of cards. */
.lp-thumb-pixel .t-hero {
  background: linear-gradient(135deg, #2e6bf5, #7c3aed);
}

/* words: one quiet column. */
.lp-thumb-words {
  --t-ink: #1b1b1b;
  grid-template-columns: 1fr;
  padding-inline: 26%;
}

.lp-thumb-words .t-mast { width: 60%; height: 7px; }
.lp-thumb-words .t-hero { background: transparent; border-top: 6px solid #1b1b1b; border-bottom: 3px solid #e5e5e5; border-radius: 0; }
.lp-thumb-words .t-a,
.lp-thumb-words .t-b,
.lp-thumb-words .t-c { height: 5px; }

/* dispatch: warm paper, the masthead centred, one postal red. */
.lp-thumb-dispatch {
  --t-bg: #f6f1e7;
  --t-ink: #1d1a16;
  --t-soft: #e6dccb;
  --t-accent: #c8352b;
}

.lp-thumb-dispatch .t-mast { justify-self: center; }
.lp-thumb-dispatch .t-hero { justify-self: center; align-self: center; width: 46%; height: 18px; border-radius: 999px; }

/* press: newsprint, a rule under the nameplate, a lead and columns. */
.lp-thumb-press {
  --t-bg: #f3efe6;
  --t-ink: #111;
  --t-soft: #ddd6c7;
  --t-accent: #b3261e;
}

.lp-thumb-press .t-mast { width: 100%; height: 12px; border-bottom: 3px double #111; border-radius: 0; background: transparent; }
.lp-thumb-press .t-hero { grid-column: 1 / 3; background: #c9c1b0; border-radius: 2px; }
.lp-thumb-press .t-a { grid-column: 3; grid-row: 2; height: auto; background: linear-gradient(#b3261e 0 6px, transparent 6px 12px, #ddd6c7 12px); }

/* figure: white plates and a chart breaking the column. */
.lp-thumb-figure {
  --t-ink: #13151a;
  --t-accent: #0f766e;
}

.lp-thumb-figure .t-hero {
  background:
    linear-gradient(to top, #0f766e 30%, transparent 30%) 8% 100% / 12% 100% no-repeat,
    linear-gradient(to top, #0f766e 55%, transparent 55%) 30% 100% / 12% 100% no-repeat,
    linear-gradient(to top, #14b8a6 42%, transparent 42%) 52% 100% / 12% 100% no-repeat,
    linear-gradient(to top, #0f766e 80%, transparent 80%) 74% 100% / 12% 100% no-repeat,
    linear-gradient(to top, #14b8a6 66%, transparent 66%) 96% 100% / 12% 100% no-repeat,
    #f1f5f4;
}

/* practice: a portrait, deep green, Work with me. */
.lp-thumb-practice {
  --t-ink: #1f4d3a;
  --t-soft: #e3ebe6;
  --t-accent: #1f4d3a;
}

.lp-thumb-practice .t-hero { grid-column: 1 / 3; border-radius: 0; background: linear-gradient(#1f4d3a 0 14px, transparent 14px 22px, #e3ebe6 22px 28px, transparent 28px 36px, #e3ebe6 36px 42px, transparent 42px 54px, #1f4d3a 54px 66px, transparent 66px) 0 0 / 70% 100% no-repeat; }
.lp-thumb-practice .t-a { grid-column: 3; grid-row: 2; height: auto; border-radius: 50%; aspect-ratio: 1; align-self: center; background: #b7c9bf; }

/* coach: linen, sage, a portrait and soft cards. */
.lp-thumb-coach {
  --t-bg: #f4efe6;
  --t-ink: #3d4a3f;
  --t-soft: #e6dfd2;
  --t-accent: #6b8f71;
}

.lp-thumb-coach .t-hero { grid-column: 2 / 4; border-radius: 16px; }
.lp-thumb-coach .t-a { grid-column: 1; grid-row: 2; height: auto; border-radius: 999px 999px 12px 12px; background: #c9b8a0; }
.lp-thumb-coach .t-b,
.lp-thumb-coach .t-c { border-radius: 12px; }

/* folio: the work in a grid, one colour for the dot. */
.lp-thumb-folio {
  --t-bg: #fafafa;
  --t-ink: #111;
  --t-soft: #e8e8e8;
  --t-accent: #ff5a1f;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr 1fr;
}

.lp-thumb-folio .t-mast { width: 30%; }
.lp-thumb-folio .t-hero { grid-column: auto; background: #111; border-radius: 4px; }
.lp-thumb-folio .t-c { display: none; }
.lp-thumb-folio .t-a,
.lp-thumb-folio .t-b,
.lp-thumb-folio .t-c { height: auto; border-radius: 4px; }
.lp-thumb-folio .t-a { background: #ff5a1f; }
.lp-thumb-folio .t-b { background: #d4d4d4; }
.lp-thumb-folio .t-hero { grid-row: 2; }

/* The real thing, when the showcase tenant is there: the theme's front
   page with the sample posts, drawn at four times the card's width and
   scaled into it (the onboarding walk's cards, DESIGN.md §7), a picture
   that takes no pointer. The card's name is the button; its ::after
   stretches over the whole card, so the card is what one presses. */
.lp-theme {
  position: relative;
}

.lp-thumb-live {
  display: block;
  padding: 0;
  background: var(--color-paper-2);
}

.lp-thumb-live iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 400%;
  border: 0;
  transform: scale(0.25);
  transform-origin: 0 0;
  pointer-events: none;
}

.lp-thumb-hint {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.lp-theme:hover .lp-thumb-hint,
.lp-theme:has(.lp-theme-open:focus-visible) .lp-thumb-hint {
  opacity: 1;
  transform: none;
}

.lp-theme-open {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.lp-theme-open::after {
  content: "";
  position: absolute;
  inset: 0;
}

.lp-theme-open:focus-visible {
  outline: none;
}

.lp-theme:has(.lp-theme-open:focus-visible) .lp-thumb {
  box-shadow: 0 0 0 3px var(--color-accent);
}

/* A theme, large: the browser's own popover (Esc and a click outside
   close it), the front page at a desktop's width, scrolling inside. */
.lp-modal {
  position: fixed;
  inset: 0;
  width: min(94vw, 88rem);
  height: min(92vh, 64rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: 0 50px 120px -30px rgba(11, 22, 54, 0.5), 0 0 0 1px rgba(11, 22, 54, 0.08);
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.3s var(--ease-out), transform 0.45s var(--ease-out), overlay 0.3s allow-discrete, display 0.3s allow-discrete;
}

.lp-modal:popover-open {
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: none;
}

@starting-style {
  .lp-modal:popover-open {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
}

.lp-modal::backdrop {
  background: rgba(11, 22, 54, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.lp-modal-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0.85rem 0.85rem 1.4rem;
  border-bottom: 1px solid var(--color-line);
}

.lp-modal-name {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.lp-modal-line {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  color: var(--color-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-modal-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-paper-2);
}

/* The page drawn at a third more than the window's width and scaled back,
   so a theme meets a desktop; the box is the scaled height, the frame the
   full one. */
.lp-modal-frame {
  position: relative;
  height: 3750px;
  overflow: hidden;
}

.lp-modal-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 133.334%;
  height: 5000px;
  border: 0;
  transform: scale(0.75);
  transform-origin: 0 0;
  pointer-events: none;
  background: #fff;
}

/* — 06, included —————————————————————————————————————— */
.lp-included {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line-strong);
}

.lp-included li {
  padding: 2rem 1.75rem 2.25rem 0;
  border-bottom: 1px solid var(--color-line-strong);
}

.lp-included li:not(:nth-child(4n + 1)) {
  padding-left: 1.75rem;
  border-left: 1px solid var(--color-line);
}

.lp-included span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}

.lp-included h3 {
  margin-top: 1.25rem;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lp-included p {
  margin-top: 0.45rem;
  font-size: 0.92rem;
  color: var(--color-body);
}

/* — The close ——————————————————————————————————————— */
/* — Pricing (§20, "Pricing") ——————————————————————————
   Three cards from the plans' roster, the middle one ringed in ink, the
   price in the display face. Still: no motion of its own. */
.lp-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-plan {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1rem + 1vw, 2.25rem);
  border-radius: var(--lp-radius);
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
}

.lp-plan:nth-child(2) {
  box-shadow: 0 0 0 2px var(--color-ink);
}

.lp-plan h3 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.lp-plan-line {
  margin-top: 0.25rem;
  color: var(--color-body);
}

.lp-plan-price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.lp-plan-price b {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2.5rem + 2.5vw, 4.75rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--color-ink);
}

.lp-plan-price span {
  color: var(--color-muted);
}

.lp-plan-year {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-body);
}

.lp-plan-facts {
  display: grid;
  gap: 0.6rem;
  margin: 1.75rem 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--color-line);
  list-style: none;
  color: var(--color-body);
}

.lp-plan-facts b {
  font-weight: 600;
  color: var(--color-ink);
}

.lp-plan-button {
  margin-top: auto;
}

.lp-plans-fine {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--color-muted);
  text-align: center;
}

@media (max-width: 47.9375rem) {
  .lp-plans {
    grid-template-columns: 1fr;
  }
}

.lp-close {
  position: relative;
  padding: clamp(6rem, 4rem + 8vw, 11rem) 0;
  text-align: center;
  isolation: isolate;
}

.lp-close::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: -1;
  width: min(1100px, 120vw);
  height: 70%;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side at 35% 70%, rgba(46, 107, 245, 0.22), transparent 70%),
    radial-gradient(closest-side at 65% 70%, rgba(124, 58, 237, 0.2), transparent 70%);
  filter: blur(30px);
}

.lp-close .lp-display {
  font-size: clamp(2.9rem, 1rem + 6.5vw, 7.5rem);
}

.lp-address {
  display: inline-block;
  margin-top: 2.5rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: var(--lp-shadow-soft);
  font-family: var(--font-mono);
  font-size: clamp(0.9rem, 0.75rem + 0.8vw, 1.35rem);
  color: var(--color-muted);
}

.lp-address b {
  font-weight: 500;
  color: var(--color-ink);
  border-right: 2px solid var(--color-accent);
  padding-right: 2px;
  animation: lp-caret 1.1s steps(1) infinite;
}

/* — The footer ——————————————————————————————————————— */
.lp-footer {
  max-width: var(--lp-wrap);
  padding-inline: 1.5rem;
}

.lp-footer nav {
  flex-wrap: wrap;
}

.lp-footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.lp-footer-mark img {
  width: 1.4rem;
  height: 1.4rem;
}

/* — Scroll: what comes into view rises into place, where the browser
   can tie an animation to the scroll; elsewhere it simply stands. — */
@supports (animation-timeline: view()) {
  .lp-head,
  .lp-tile,
  .lp-provider,
  .lp-zero,
  .lp-sell > div,
  .lp-theme,
  .lp-included li,
  .lp-term-line,
  .lp-points li,
  .lp-server,
  .lp-phone-screen {
    animation: lp-rise linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 28%;
  }

  .lp-growth-stroke {
    stroke-dasharray: 1;
    animation: lp-draw linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 45%;
  }

  .lp-window {
    animation: lp-untilt linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
}

/* — Motion ——————————————————————————————————————————— */
@keyframes lp-rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

@keyframes lp-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes lp-untilt {
  from { transform: perspective(1800px) rotateX(14deg) scale(0.94); }
  to { transform: none; }
}

@keyframes lp-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes lp-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes lp-fill {
  from { transform: scaleX(0.08); }
  to { transform: scaleX(1); }
}

@keyframes lp-ping {
  0% { opacity: 0.7; transform: scale(0.6); }
  80%, 100% { opacity: 0; transform: scale(1.8); }
}

@keyframes lp-marquee {
  to { transform: translateX(-50%); }
}

@keyframes lp-type {
  0% { clip-path: inset(0 100% 0 0); }
  45%, 100% { clip-path: inset(0 -4px 0 0); }
}

@keyframes lp-caret-blink {
  50% { opacity: 0; }
}

@keyframes lp-caret {
  50% { border-color: transparent; }
}

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

/* — Smaller screens ————————————————————————————————— */
/* The window's width less the cards' overhang: below it, the cards tuck
   in over the window's edges rather than leave the screen. */
@media (max-width: 92rem) {
  .lp-float-agent { left: -0.5rem; }
  .lp-float-money { right: -0.5rem; }
  .lp-float-send { right: 0.5rem; }
}

@media (max-width: 68rem) {
  .lp-agent,
  .lp-news,
  .lp-money {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-zero {
    min-height: 16rem;
  }

  .lp-sell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-sell .lp-roster {
    grid-column: 1 / -1;
  }

  .lp-themes,
  .lp-included {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-included li:not(:nth-child(4n + 1)) {
    padding-left: 0;
    border-left: 0;
  }

  .lp-included li:nth-child(even) {
    padding-left: 1.75rem;
    border-left: 1px solid var(--color-line);
  }
}

/* Ezra's site on a tablet and a phone: still his desktop page, drawn at
   a desktop's width and scaled into the band — 160% at five-eighths, then
   a third more than three times at three-tenths — so the band is a picture
   of the real site rather than the theme's narrow layout, and its height
   is the scaled hero's. The editor rises over less of it. */
@media (max-width: 68rem) {
  .lp-site {
    height: 540px;
  }

  .lp-site iframe {
    width: 160%;
    height: 864px;
    transform: scale(0.625);
    transform-origin: 0 0;
  }

  .lp-stage-over {
    margin-top: -140px;
  }
}

/* — The phone (Ronald, 2026-10-12: "mobile needs serious love") ——————
   The site band stays, as a picture; the doors stack full width; the
   editor sheds its chart and its long status, its typed sentence wraps;
   the agent and the payment follow it; the themes scroll sideways, one
   and a bit at a time; every band breathes less. */
@media (max-width: 47.9375rem) {
  .lp-wrap,
  .lp-stage {
    padding: 0 1rem;
  }

  .lp-hero {
    padding-top: 2.5rem;
  }

  .lp-display {
    font-size: clamp(2.6rem, 1rem + 8.4vw, 3.4rem);
    line-height: 0.95;
  }

  .lp-lede {
    margin-top: 1.25rem;
    font-size: 1.02rem;
  }

  .lp-actions {
    flex-direction: column;
    align-items: stretch;
    max-width: 22rem;
    margin-inline: auto;
    margin-top: 1.75rem;
  }

  .lp-actions .saas-button {
    justify-content: center;
    text-align: center;
  }

  .lp-site {
    height: 260px;
    margin: 2.5rem 0.5rem 0;
    border-radius: 20px 20px 0 0;
  }

  .lp-site iframe {
    width: 333.334%;
    transform: scale(0.3);
  }

  .lp-stage {
    margin-top: 2.5rem;
  }

  .lp-stage-over {
    margin-top: -56px;
  }

  /* The cards leave the window and follow it: the agent, then the
     payment; the send waits for its own section. */
  .lp-stage {
    display: grid;
    gap: 0.75rem;
  }

  .lp-float {
    position: static;
    width: auto;
    animation: none;
  }

  .lp-float-send {
    display: none;
  }

  .lp-window {
    border-radius: 16px;
  }

  .lp-editor {
    padding: 1rem 1rem 1.5rem;
  }

  .lp-saved-more,
  .lp-chart {
    display: none;
  }

  .lp-toolbar {
    margin-top: 1rem;
  }

  .lp-toolbar span:nth-child(n + 6) {
    display: none;
  }

  .lp-doc {
    margin-top: 1.25rem;
  }

  .lp-cover {
    aspect-ratio: 16 / 9;
    border-radius: 10px;
  }

  .lp-doc-title {
    font-size: 1.85rem;
  }

  .lp-doc-text {
    font-size: 0.95rem;
  }

  .lp-typing {
    display: inline;
    white-space: normal;
    animation: none;
  }

  .lp-clients {
    padding-top: 3.5rem;
  }

  .lp-section {
    padding: 4.5rem 0;
  }

  .lp-head {
    margin-bottom: 2.25rem;
  }

  .lp-head h2 {
    font-size: clamp(2.1rem, 1rem + 6vw, 2.6rem);
    letter-spacing: -0.04em;
  }

  .lp-head p {
    margin-top: 1rem;
    font-size: 1.02rem;
  }

  .lp-dark {
    margin-inline: 0.5rem;
    border-radius: 24px;
  }

  .lp-tile {
    padding: 1.35rem;
    border-radius: 22px;
  }

  .lp-bento-editor,
  .lp-providers,
  .lp-news-side,
  .lp-sell,
  .lp-points,
  .lp-included {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-tile-tall {
    grid-row: auto;
  }

  .lp-term-body {
    padding: 1rem;
  }

  .lp-term-you,
  .lp-term-agent {
    max-width: 100%;
    font-size: 0.9rem;
  }

  .lp-term-call {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .lp-term-call b {
    display: none;
  }

  .lp-server > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }

  .lp-points {
    gap: 1.5rem;
    margin-top: 1.75rem;
  }

  .lp-phone {
    width: min(100%, 17rem);
    transform: none;
  }

  .lp-phone::before {
    width: 16rem;
    height: 16rem;
  }

  .lp-phone-screen {
    min-height: 0;
  }

  .lp-campaign dl {
    gap: 1.25rem;
  }

  .lp-growth-figure {
    text-align: left;
  }

  .lp-growth-chart {
    height: 6.5rem;
  }

  .lp-zero {
    min-height: 0;
    padding: 1.6rem;
  }

  .lp-zero-figure {
    margin-bottom: 1.5rem;
    font-size: 5.5rem;
  }

  .lp-provider {
    padding: 1.4rem;
  }

  .lp-provider-logo {
    padding-bottom: 1.25rem;
  }

  .lp-tags {
    gap: 0.4rem;
  }

  .lp-tags li {
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
  }

  /* The themes, sideways: a card and a sliver of the next, snapping, run
     to the screen's edges. */
  .lp-themes {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: 1rem;
    margin-inline: -1rem;
    padding: 0.5rem 1rem 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    scrollbar-width: none;
  }

  .lp-themes::-webkit-scrollbar {
    display: none;
  }

  .lp-theme {
    scroll-snap-align: start;
    animation: none;
  }

  .lp-thumb-hint {
    opacity: 1;
    transform: none;
  }

  .lp-included li,
  .lp-included li:nth-child(even) {
    padding: 1.25rem 0;
    border-left: 0;
  }

  .lp-included h3 {
    margin-top: 0.6rem;
  }

  .lp-close {
    padding: 5rem 0 4rem;
  }

  .lp-close .lp-display {
    font-size: clamp(2.4rem, 1rem + 7.6vw, 3.1rem);
  }

  .lp-address {
    margin-top: 1.75rem;
    padding: 0.75rem 1.2rem;
  }

  .lp-footer nav {
    gap: 0.75rem 1.25rem;
  }

  .lp-modal {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }

  .lp-modal-line {
    display: none;
  }

  .lp-modal-name {
    flex: 1;
  }
}