/* 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 — a post, 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;
}

/* The name is the headline (§20, "The name as the headline"): the mark
   and the wordmark as the navbar sets them — Space Grotesk, Glass in the
   accent — at display size. The mark fills about three quarters of its
   square's height, so at 1.05em it stands just over the capitals. Under
   it the tagline, in the display italic the section heads wear. */
.lp-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12em;
  font-family: var(--font-heading);
  font-size: clamp(3.4rem, 1.4rem + 8.2vw, 9.5rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1;
  color: var(--color-ink);
}

.lp-brand img {
  flex: none;
  width: 0.8em;
  height: 0.8em;
}

.lp-brand b {
  font-weight: inherit;
  color: var(--color-accent);
}

.lp-tagline {
  max-width: 22ch;
  margin: clamp(1rem, 0.6rem + 1vw, 1.6rem) auto 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.6rem);
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  background: var(--lp-spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The eyebrow over the headline (§20, "Start your own"): spaced capitals,
   and what a reader could start in full ink, one at a time. The names
   are stacked in one place, held to the left, so the line keeps its width
   and the lead never moves. Each holds for three seconds and gives way
   with a short fade and a small rise. Under reduced motion the first
   stands alone. */
.lp-hero-eyebrow {
  margin-bottom: clamp(1.25rem, 0.8rem + 1.2vw, 2rem);
  font-size: clamp(0.78rem, 0.72rem + 0.2vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-ink) 74%, var(--color-paper));
}

.lp-own {
  display: inline-grid;
  justify-items: start;
  text-align: left;
}

/* Fourteen names (Saas::LandingHelper::YOUR_OWN), three seconds each: a
   loop of 42s, each name's turn its place times three seconds in (--i),
   so a name is 1/14 of the loop — in by 1.2%, out from 6.2% to 7.4%. */
.lp-own b {
  grid-area: 1 / 1;
  font-weight: 700;
  color: var(--color-ink);
  white-space: nowrap;
  opacity: 0;
  animation: lp-own 42s var(--ease-out) infinite both;
  animation-delay: calc(var(--i) * 3s);
}

@keyframes lp-own {
  0% { opacity: 0; transform: translateY(0.12em); }
  1.2%, 6.2% { opacity: 1; transform: none; }
  7.4%, 100% { opacity: 0; transform: translateY(-0.12em); }
}

.lp-lede {
  max-width: 38rem;
  margin: 2rem auto 0;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: color-mix(in srgb, var(--color-ink) 74%, var(--color-paper));
  text-wrap: balance;
}

/* The company's connector, one address to give an agent (the hero here
   and on /agents). */
.lp-address {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  padding: 0.6rem 0.6rem 0.6rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
}

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

.lp-address code {
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1rem);
  color: var(--color-accent-strong);
  overflow-wrap: anywhere;
}

.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;
}

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

/* The light: a fine grid fading out from the headline. */
.lp-hero::before {
  content: "";
  position: absolute;
  inset: -6rem 0 0;
  z-index: -2;
  pointer-events: none;
  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-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-hero-copy > :nth-child(6) { animation-delay: 0.38s; }

.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-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-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-call-done::before {
  content: "✓ ";
  color: #22a06b;
  font-weight: 700;
}

/* A call waits, then is done on its cue (--done). */
.lp-calls .lp-app-stack {
  justify-items: end;
}

.lp-calls li code {
  opacity: calc(0.45 + var(--done) * 0.55);
}

.lp-call-wait { opacity: calc(1 - var(--done)); }
.lp-call-done { opacity: var(--done); }

/* — 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-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;
}

/* The home page's heads open on the title; the theme agent page's carry an
   eyebrow above it. */
.lp-head h2:first-child {
  margin-top: 0;
}

.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.1rem, 0.98rem + 0.45vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: color-mix(in srgb, var(--color-ink) 74%, var(--color-paper));
  text-wrap: pretty;
}

/* — Clean, bold words (Ronald, 2026-10-24: "nice, clean, bold …
   squarespace vibes"): a lede is plain, larger text in a deep grey, set
   a little tight, and its one strong phrase is in full ink and weight. No token and no
   italic inside the words. — */
.lp-lede b,
.lp-head p b {
  font-weight: 600;
  color: var(--color-ink);
}

/* 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);
}

/* — The ink band (How it works, /agents, the theme agent) ————————— */
.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;
  pointer-events: none;
  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;
  pointer-events: none;
  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);
}

/* The strong phrase is ink on paper; on ink it is the light text. */
.lp-dark .lp-head p b,
.lp-dark .lp-lede b {
  color: var(--color-on-ink);
}

.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;
}

/* — What an agent builds, and what it earns (§20, 2026-10-22) ——————
   Each scene plays one loop of registered numbers, as the admin's
   screens do: only the windows move, nothing changes its size, and what
   appears was there, unseen. Reduced motion shows each scene at its end. */
@property --bc-1 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --bc-2 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --bc-3 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --b-after { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --b-slide { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --earn-1 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --earn-2 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --earn-3 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --earn-4 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --earn-5 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --earn-6 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --earn-7 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --earn-8 { syntax: "<number>"; inherits: true; initial-value: 0; }

.lp-term-call .lp-app-stack {
  justify-items: end;
}

/* What an agent builds: a window per ask, twelve seconds each — the
   calls done at 7%, 24% and 36%, the result in place from 44%, a
   control moved from 62% — each window a quarter of a loop after the
   one before. */
.lp-builds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem clamp(1.25rem, 3vw, 2.5rem);
}

.lp-build h3 {
  margin-top: 1.25rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

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

.lp-build-window {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border-radius: var(--lp-radius);
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  animation: lp-build 12s linear infinite both;
}

.lp-build:nth-child(2) .lp-build-window { animation-delay: -4s; }
.lp-build:nth-child(3) .lp-build-window { animation-delay: -8s; }

@keyframes lp-build {
  0%, 5% { --bc-1: 0; --bc-2: 0; --bc-3: 0; --b-after: 0; --b-slide: 0; }
  7% { --bc-1: 1; }
  22% { --bc-2: 0; }
  24% { --bc-2: 1; }
  34% { --bc-3: 0; }
  36% { --bc-3: 1; }
  44% { --b-after: 0; }
  48% { --b-after: 1; }
  62% { --b-slide: 0; }
  72% { --b-slide: 1; }
  92% { --bc-1: 1; --bc-2: 1; --bc-3: 1; --b-after: 1; --b-slide: 1; }
  97%, 100% { --bc-1: 0; --bc-2: 0; --bc-3: 0; --b-after: 0; --b-slide: 0; }
}

.lp-build-you {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  border-radius: 14px;
  background: var(--color-paper-2);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* The result: a small browser at the page's address. Its sites are drawn
   in em under a size taken from the frame's width (cqi), so a scene is
   the same picture at any width. */
.lp-build-out {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  aspect-ratio: 16 / 11;
  border-radius: 16px;
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong), 0 18px 40px -28px rgba(11, 22, 54, 0.35);
  overflow: hidden;
  container-type: inline-size;
}

.lp-build-bar {
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.65em 0.9em;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-paper-2);
  font-size: 1.6cqi;
}

.lp-build-bar i {
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  background: var(--color-line-strong);
}

.lp-build-bar span {
  flex: 1;
  max-width: 70%;
  margin-left: 0.8em;
  padding: 0.25em 0.9em;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-line);
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-build-view {
  position: relative;
  overflow: hidden;
  color: #101828;
  font-family: var(--font-sans);
  font-size: 1.75cqi;
  line-height: 1.4;
}

.lp-build-view > * {
  height: 100%;
}

.lp-build-view img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.lp-build-before { opacity: calc(1 - var(--b-after)); }
.lp-build-after { opacity: var(--b-after); }

/* Where a card or a block comes into a post: the post's own words are
   there first, and the result takes their place. */
.lp-build-slot {
  align-items: start;
  margin-top: 0.9em;
}

.lp-build-slot .lp-build-before p {
  font-size: 0.92em;
  line-height: 1.5;
  color: #4a5468;
}

.lp-build-slot .lp-build-before p + p {
  margin-top: 0.6em;
}

.lp-build-calls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-build-calls li {
  padding: 0.32rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  box-shadow: inset 0 0 0 1px var(--color-line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  white-space: nowrap;
}

.lp-build-calls li:not(.lp-build-status) {
  opacity: calc(0.45 + var(--done) * 0.55);
}

.lp-build-calls li:not(.lp-build-status)::after {
  content: "✓";
  margin-left: 0.4rem;
  color: #0f7a46;
  opacity: var(--done);
}

.lp-build-calls code {
  font-size: inherit;
  color: var(--color-accent-strong);
}

.lp-build-calls span {
  margin-left: 0.4rem;
  color: var(--color-muted);
}

.lp-build-call-1 { --done: var(--bc-1); }
.lp-build-call-2 { --done: var(--bc-2); }
.lp-build-call-3 { --done: var(--bc-3); }

.lp-build-calls .lp-build-status {
  margin-left: auto;
  background: var(--color-accent-soft);
  box-shadow: none;
  color: var(--color-accent-strong);
  font-family: var(--font-sans);
  font-weight: 600;
  opacity: var(--b-after);
}

/* Ezra's site, as the persona theme draws it: the navy bar with the
   yellow Subscribe, the newest essay, the cards under it. */
.lp-ezra {
  display: grid;
  align-content: start;
  background: #fff;
}

.lp-ezra-nav {
  display: flex;
  align-items: center;
  gap: 1.4em;
  padding: 0.85em 1.6em;
  background: #0c1a2e;
  color: #fff;
  font-size: 0.92em;
}

.lp-ezra-nav b {
  margin-right: auto;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.lp-ezra-nav span {
  opacity: 0.72;
}

.lp-ezra-nav em {
  padding: 0.35em 1em;
  border-radius: var(--radius-pill);
  background: #f2d27a;
  color: #0c1a2e;
  font-style: normal;
  font-weight: 600;
}

.lp-ezra-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 1.4em;
  align-items: center;
  padding: 1.4em 1.6em 1.2em;
}

.lp-ezra-feature img {
  aspect-ratio: 16 / 9;
  border-radius: 0.6em;
}

.lp-ezra small {
  display: block;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7b8496;
}

.lp-ezra-feature h4 {
  margin: 0.3em 0;
  font-size: 1.9em;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.lp-ezra-feature p {
  font-size: 0.95em;
  color: #4a5468;
}

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

.lp-ezra-cards img {
  aspect-ratio: 3 / 2;
  border-radius: 0.5em;
}

.lp-ezra-cards b {
  display: block;
  margin-top: 0.45em;
  font-size: 0.9em;
  font-weight: 600;
}

/* The same front page as a Sunday paper: newsprint, the nameplate
   between a rule and a double rule, the lead in two columns with a drop
   cap, Inside down the side. */
.lp-sunday {
  padding: 1em 1.6em;
  background: #f4efe4;
  color: #141414;
  font-family: var(--font-display);
}

.lp-sunday-date {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.4em;
  border-bottom: 1px solid #141414;
  font-family: var(--font-sans);
  font-size: 0.7em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lp-sunday h4 {
  padding: 0.15em 0 0.1em;
  border-bottom: 3px double #141414;
  font-size: 3em;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.lp-sunday-front {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: 1.3em;
  margin-top: 0.9em;
}

.lp-sunday small {
  font-family: var(--font-sans);
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b3261e;
}

.lp-sunday h5 {
  margin: 0.15em 0 0.45em;
  font-size: 1.85em;
  font-weight: 400;
  line-height: 1.05;
}

.lp-sunday img {
  aspect-ratio: 2.1 / 1;
  filter: grayscale(1) contrast(1.1);
}

.lp-sunday article p {
  margin-top: 0.6em;
  columns: 2;
  column-gap: 1.2em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.78em;
  line-height: 1.38;
  text-align: justify;
  hyphens: auto;
}

.lp-sunday article p::first-letter {
  float: left;
  padding-right: 0.08em;
  font-family: var(--font-display);
  font-size: 2.9em;
  line-height: 0.85;
}

.lp-sunday aside {
  padding-left: 1em;
  border-left: 1px solid #141414;
}

.lp-sunday ol {
  margin: 0.4em 0 0;
  padding: 0;
  list-style: none;
}

.lp-sunday li {
  padding: 0.5em 0;
  border-bottom: 1px solid #cfc6b4;
}

.lp-sunday li b {
  display: block;
  font-size: 1.1em;
  font-weight: 400;
  line-height: 1.15;
}

.lp-sunday li span {
  font-family: var(--font-sans);
  font-size: 0.66em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6355;
}

.lp-sunday-letter {
  margin-top: 0.8em;
  padding: 0.7em 0.8em;
  background: #141414;
  color: #f4efe4;
  font-family: var(--font-sans);
  font-size: 0.75em;
}

.lp-sunday-letter b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4em;
  font-weight: 400;
}

/* Ezra's editor: a post with the carousel the agent made, selected, its
   photographs turning; the Custom blocks sheet gains Carousel. */
.lp-editor {
  position: relative;
  background: #fff;
}

.lp-editor-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8em 1.4em;
  font-size: 0.85em;
}

.lp-editor-chrome span {
  padding: 0.35em 0.9em;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-line-strong);
  color: var(--color-body);
}

.lp-editor-chrome em {
  padding: 0.35em 1.1em;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: #fff;
  font-style: normal;
  font-weight: 600;
}

.lp-editor-page {
  width: 60%;
  margin-left: 6%;
}

.lp-editor-page h4 {
  font-size: 2.1em;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.lp-editor-page > p {
  margin-top: 0.6em;
  font-size: 0.92em;
  line-height: 1.5;
  color: var(--color-body);
}

.lp-carousel {
  margin: 0;
  padding: 0.35em;
  border-radius: 0.7em;
  box-shadow: 0 0 0 2px var(--color-accent);
  overflow: hidden;
}

.lp-carousel-track {
  display: grid;
  grid-auto-columns: 100%;
  grid-auto-flow: column;
  border-radius: 0.45em;
  overflow: hidden;
}

.lp-carousel-track img {
  aspect-ratio: 16 / 9;
  translate: calc(var(--b-slide) * -100%) 0;
}

.lp-carousel figcaption {
  display: flex;
  align-items: center;
  gap: 0.3em;
  margin-top: 0.45em;
  font-size: 0.78em;
  color: var(--color-body);
}

.lp-carousel figcaption .lp-app-stack {
  margin-right: auto;
}

.lp-carousel figcaption b {
  font-weight: 500;
}

.lp-carousel-one { opacity: calc(1 - var(--b-slide)); }
.lp-carousel-two { opacity: var(--b-slide); }

.lp-carousel figcaption i {
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--color-line-strong);
}

.lp-carousel figcaption i:nth-of-type(1) { background: color-mix(in srgb, var(--color-line-strong) calc(var(--b-slide) * 100%), var(--color-ink)); }
.lp-carousel figcaption i:nth-of-type(2) { background: color-mix(in srgb, var(--color-ink) calc(var(--b-slide) * 100%), var(--color-line-strong)); }

.lp-blocks-sheet {
  position: absolute;
  top: 3.4em;
  right: 1.2em;
  width: 28%;
  padding: 0.7em;
  border-radius: 0.9em;
  background: #fff;
  box-shadow: var(--lp-shadow-soft);
}

.lp-blocks-sheet p {
  padding: 0 0.3em 0.5em;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-heading);
  font-size: 0.9em;
  font-weight: 600;
}

.lp-blocks-sheet ul {
  margin: 0.4em 0 0;
  padding: 0;
  list-style: none;
}

.lp-blocks-sheet li {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.45em 0.4em;
  border-radius: 0.5em;
  font-size: 0.85em;
  font-weight: 500;
}

.lp-blocks-sheet li i {
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 0.4em;
  background: var(--color-paper-2);
  color: var(--color-body);
  font-style: normal;
}

.lp-blocks-sheet li span {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.75em;
  color: var(--color-accent-strong);
}

.lp-blocks-sheet .lp-blocks-new {
  background: var(--color-accent-soft);
}

.lp-blocks-sheet .lp-blocks-new i {
  background: var(--lp-spectrum);
  color: #fff;
}

/* A marketing coach's funnel, built one section a call: the offer with
   its coral button and the proof, then her portrait with the live date,
   then what the class teaches; then the seats left go down. No menu. */
.lp-coach {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #fff7f0;
  color: #1f1235;
}

.lp-coach-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.9em 1.6em;
  border-bottom: 1px solid #f1dfd0;
}

.lp-coach-top b {
  font-family: var(--font-heading);
  font-size: 1.15em;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.lp-coach-top b i {
  color: #ff6b4a;
  font-style: normal;
}

.lp-coach-top span {
  font-size: 0.78em;
  color: #7a6a80;
}

.lp-funnel {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0 1.6em;
  padding: 1.4em 1.6em 0;
}

.lp-funnel-copy { opacity: var(--bc-1); translate: 0 calc((1 - var(--bc-1)) * 0.6em); }
.lp-funnel-photo { opacity: var(--bc-2); translate: 0 calc((1 - var(--bc-2)) * 0.6em); }
.lp-funnel-learn { opacity: var(--b-after); }

.lp-funnel-copy small {
  display: inline-block;
  padding: 0.3em 0.8em;
  border-radius: var(--radius-pill);
  background: #ffe3da;
  color: #c2410c;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lp-funnel-copy h4 {
  margin-top: 0.45em;
  font-family: var(--font-heading);
  font-size: 2.15em;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.04;
}

.lp-funnel-copy mark {
  background: linear-gradient(transparent 58%, #ffc9b8 58%);
  color: inherit;
}

.lp-funnel-copy > p:not([class]) {
  margin-top: 0.55em;
  font-size: 0.95em;
  color: #5b4b63;
}

.lp-funnel-cta {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin-top: 1em;
}

.lp-funnel-cta em {
  padding: 0.75em 1.3em;
  border-radius: 0.6em;
  background: #ff6b4a;
  box-shadow: 0 0.5em 1.2em -0.5em rgba(255, 107, 74, 0.7);
  color: #fff;
  font-style: normal;
  font-weight: 700;
}

.lp-funnel-cta b {
  font-size: 0.78em;
  font-weight: 600;
  color: #c2410c;
}

.lp-funnel-was { opacity: calc(1 - var(--b-slide)); }
.lp-funnel-now { opacity: var(--b-slide); }

.lp-funnel-proof {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1em;
  font-size: 0.78em;
  color: #5b4b63;
}

.lp-funnel-proof span {
  display: flex;
}

.lp-funnel-proof img {
  width: 2.1em;
  border-radius: 50%;
  box-shadow: 0 0 0 0.15em #fff7f0;
}

.lp-funnel-proof img + img {
  margin-left: -0.6em;
}

.lp-funnel-proof b {
  color: #f59e0b;
  letter-spacing: 0.05em;
}

.lp-funnel-photo {
  position: relative;
  align-self: start;
}

.lp-funnel-photo img {
  aspect-ratio: 1 / 1.05;
  border-radius: 1em;
}

.lp-funnel-live {
  position: absolute;
  bottom: 0.8em;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.45em 0.85em;
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: 0 0.4em 1em -0.4em rgba(31, 18, 53, 0.35);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  translate: -50% 0;
}

.lp-funnel-live i {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: #ef4444;
}

.lp-funnel-learn {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8em;
  margin: 1em 0 0;
  padding: 0.9em 0 1.2em;
  border-top: 1px solid #f1dfd0;
  list-style: none;
}

.lp-funnel-learn li {
  display: flex;
  gap: 0.45em;
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.3;
}

.lp-funnel-learn li::before {
  content: "✓";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: #ff6b4a;
  color: #fff;
  font-size: 0.8em;
}

/* What it does for the business, sixteen seconds: eight calls done in
   turn, two an ask, from 8% to 74%; Ezra's month follows them. */
.lp-earn {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  animation: lp-earn 16s linear infinite both;
}

@keyframes lp-earn {
  0%, 6% { --earn-1: 0; --earn-2: 0; --earn-3: 0; --earn-4: 0; --earn-5: 0; --earn-6: 0; --earn-7: 0; --earn-8: 0; }
  8% { --earn-1: 1; }
  14% { --earn-2: 0; }
  16% { --earn-2: 1; }
  24% { --earn-3: 0; }
  26% { --earn-3: 1; }
  32% { --earn-4: 0; }
  34% { --earn-4: 1; }
  44% { --earn-5: 0; }
  46% { --earn-5: 1; }
  52% { --earn-6: 0; }
  54% { --earn-6: 1; }
  64% { --earn-7: 0; }
  66% { --earn-7: 1; }
  72% { --earn-8: 0; }
  74% { --earn-8: 1; }
  93% { --earn-1: 1; --earn-2: 1; --earn-3: 1; --earn-4: 1; --earn-5: 1; --earn-6: 1; --earn-7: 1; --earn-8: 1; }
  97%, 100% { --earn-1: 0; --earn-2: 0; --earn-3: 0; --earn-4: 0; --earn-5: 0; --earn-6: 0; --earn-7: 0; --earn-8: 0; }
}

.lp-earn-1 { --done: var(--earn-1); }
.lp-earn-2 { --done: var(--earn-2); }
.lp-earn-3 { --done: var(--earn-3); }
.lp-earn-4 { --done: var(--earn-4); }
.lp-earn-5 { --done: var(--earn-5); }
.lp-earn-6 { --done: var(--earn-6); }
.lp-earn-7 { --done: var(--earn-7); }
.lp-earn-8 { --done: var(--earn-8); }

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

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

.lp-play > p {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: var(--color-body);
}

.lp-play-chat {
  display: grid;
  gap: 0.45rem;
  padding: 1rem;
  border-radius: 22px;
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
}

.lp-play-you {
  justify-self: end;
  max-width: 92%;
  margin-bottom: 0.3rem;
  padding: 0.6rem 0.85rem;
  border-radius: 14px 14px 4px 14px;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.86rem;
  line-height: 1.45;
}

.lp-play-call {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.65rem;
  border-radius: 10px;
  background: var(--color-paper-2);
  font-size: 0.74rem;
}

.lp-play-call code {
  font-size: inherit;
  color: var(--color-accent-strong);
  opacity: calc(0.45 + var(--done) * 0.55);
}

.lp-play-call > span:not(.lp-app-stack) {
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-play-call .lp-app-stack {
  justify-items: end;
}

.lp-play-call b {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  color: #0f7a46;
  white-space: nowrap;
}

/* Ezra's month: a reader pays after the archive closes and another
   later in the month; the platform's share and the agent's stay at none. */
.lp-month {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--lp-radius);
  background: var(--color-paper);
  box-shadow: var(--lp-shadow-soft);
}

.lp-month-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-heading);
  font-size: 0.95rem;
}

.lp-month-head span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.lp-month-figure {
  margin-top: 1.4rem;
}

.lp-month-figure b {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 2rem + 1.6vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
}

.lp-month-figure small {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--color-body);
}

.lp-month-was { opacity: calc(1 - var(--earn-3)); }
.lp-month-then { opacity: calc(var(--earn-3) - var(--earn-7)); }
.lp-month-now { opacity: var(--earn-7); }

.lp-month-cuts {
  margin: 1.25rem 0 0;
}

.lp-month-cuts div {
  display: flex;
  justify-content: space-between;
  padding: 0.65rem 0;
  border-top: 1px solid var(--color-line);
  font-size: 0.88rem;
}

.lp-month-cuts dt {
  color: var(--color-body);
}

.lp-month-cuts dd {
  margin: 0;
  font-family: var(--font-mono);
  color: var(--color-accent-strong);
}

.lp-month-feed {
  display: grid;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.lp-month-feed li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.2rem;
  padding: 0.6rem 0.8rem;
  border-radius: 14px;
  background: var(--color-paper-2);
  font-size: 0.82rem;
  opacity: var(--seen);
  translate: 0 calc((1 - var(--seen)) * 6px);
}

.lp-month-feed li span {
  margin-left: auto;
  color: var(--color-muted);
  white-space: nowrap;
}

.lp-month-1 { --seen: var(--earn-2); }
.lp-month-2 { --seen: var(--earn-3); }
.lp-month-3 { --seen: var(--earn-4); }
.lp-month-4 { --seen: var(--earn-7); }

/* — The platform and the community's points: hairline columns ———— */
.lp-pillars {
  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-pillars-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

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

.lp-pillars li + li {
  padding-left: 1.75rem;
  border-left: 1px solid var(--color-line);
}

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

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

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

.lp-badge {
  padding: 0.1rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-size: 0.68rem;
  font-weight: 600;
}

.lp-avatar {
  flex-shrink: 0;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
}

.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-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;
}

/* The way on from a section to its own page (/pricing). */
.lp-more {
  margin-top: 1.75rem;
}

.lp-more a {
  font-weight: 500;
  color: var(--color-accent-strong);
  text-decoration: none;
}

.lp-more a:hover {
  text-decoration: underline;
}

/* — The themes, each drawn in its own palette (the sign-up page's
   collage and the features page's shelf) ——————————————————— */
.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;
}

.lp-thumb 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 admin, drawn (§20, "The admin, drawn from its views") ————
   Three of the admin's screens in markup that copies its views, each
   beside a line on what it does: the admin's sidebar, pills, panels and
   chips at a window's scale, on the tokens this sheet shares with it. The
   status hues are the admin's own (app/assets/tailwind/application.css).
   Still: no motion. */
.lp-screens {
  display: grid;
  gap: clamp(4rem, 3rem + 4vw, 7rem);
}

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

.lp-screen:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
}

.lp-screen:nth-child(even) .lp-screen-copy {
  order: 2;
}

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

.lp-screen-copy h3 {
  margin-top: 0.9rem;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.lp-screen-copy p {
  margin-top: 1rem;
  font-size: 1.05rem;
  color: var(--color-body);
}

.lp-app {
  --lp-app-published-fg: #1d4ed8;
  --lp-app-published-bg: #e6edfe;
  --lp-app-draft-fg: #5b6478;
  --lp-app-draft-bg: #eef1f7;
  --lp-app-scheduled-fg: #6d28d9;
  --lp-app-sent-fg: #0f7a46;
  --lp-app-mist: #edf2fe;
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 1fr);
  min-height: 30rem;
  border-radius: 18px;
  background: var(--color-canvas);
  box-shadow: var(--lp-shadow-soft);
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-ink);
}

.lp-app-side {
  display: flex;
  flex-direction: column;
  padding: 1rem 0.75rem 0.9rem;
  border-right: 1px solid var(--color-line);
  background: var(--color-paper-2);
}

.lp-app-mark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0.4rem;
}

/* A publication with no icon of its own wears the PixelGlass mark, as
   the admin's sidebar does. */
.lp-app-mark img {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
}

.lp-app-mark b {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lp-app-side ul {
  display: grid;
  gap: 0.1rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.lp-app-side .lp-app-side-foot {
  margin-top: auto;
  padding-top: 1rem;
}

.lp-app-side li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  color: var(--color-body);
  font-weight: 500;
}

.lp-app-side svg {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--color-muted);
}

.lp-app-side li[data-current] {
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  color: var(--color-ink);
}

.lp-app-side li[data-current] svg {
  color: var(--color-accent);
}

/* The roster's two marks (pixel/shared/_nav_links): the accent dot of
   unread notifications, and the plus of a new post at the row's end. */
.lp-app-side-dot {
  width: 0.45rem;
  height: 0.45rem;
  margin-left: auto;
  border-radius: 50%;
  background: var(--color-accent);
}

.lp-app-side-new {
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  margin: -0.2rem -0.25rem -0.2rem auto;
  border-radius: 6px;
}

.lp-app-side .lp-app-side-new svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* The account at the column's foot: the face, the name and the address,
   and the chevrons of the sheet it opens. */
.lp-app-me {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.6rem;
  padding: 0.75rem 0.3rem 0.1rem;
  border-top: 1px solid var(--color-line);
}

.lp-app-me-face {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 600;
}

.lp-app-me-who {
  display: grid;
  flex: 1;
  min-width: 0;
}

.lp-app-me-who b,
.lp-app-me-who i {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-app-me-who b {
  font-size: 0.78rem;
  font-weight: 500;
}

.lp-app-me-who i {
  font-size: 0.66rem;
  font-style: normal;
  color: var(--color-muted);
}

.lp-app-me svg {
  width: 0.8rem;
  height: 0.8rem;
}

.lp-app-main {
  min-width: 0;
  padding: 1.75rem clamp(1.25rem, 0.5rem + 2vw, 2.25rem) 2rem;
}

.lp-app-eyebrow,
.lp-app-figures dt,
.lp-app-links-head span {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.lp-app-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.8rem;
}

.lp-app-title {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-app-verbs {
  display: flex;
  flex-shrink: 0;
  gap: 0.4rem;
}

.lp-app-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.5em 0.95em;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  color: var(--color-body);
  font-weight: 500;
  white-space: nowrap;
}

.lp-app-pill svg {
  width: 0.8rem;
  height: 0.8rem;
  margin-right: -0.2em;
}

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

.lp-app-lede {
  margin-top: 0.8rem;
  font-size: 0.875rem;
  color: var(--color-body);
}

.lp-app-field {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5em 0.8em;
  border: 1px solid var(--color-line-strong);
  border-radius: 12px;
  background: var(--color-paper);
  color: var(--color-muted);
}

.lp-app-main .lp-app-field {
  margin-top: 1rem;
}

.lp-app-field svg {
  width: 0.95rem;
  height: 0.95rem;
}

.lp-app-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.lp-app-panel {
  border: 1px solid var(--color-line-strong);
  border-radius: 14px;
  background: var(--color-paper);
}

.lp-app-roster {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.lp-app-roster li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
}

.lp-app-roster li + li,
.lp-app-links li + li {
  border-top: 1px solid var(--color-line);
}

.lp-app-avatar {
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
}

.lp-app-row {
  display: grid;
  flex: 1;
  min-width: 0;
}

.lp-app-row > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-app-row-name {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.lp-app-row-name i {
  font-style: normal;
  font-weight: 400;
  color: var(--color-body);
}

.lp-app-row-sub {
  font-size: 0.78rem;
  color: var(--color-body);
}

.lp-app-labels {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.3rem;
}

.lp-app-labels span {
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--lp-app-mist);
  color: var(--color-body);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lp-app-mono {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-muted);
}

.lp-app-row .lp-app-mono {
  margin-top: 0.2rem;
}

.lp-app-chip {
  flex-shrink: 0;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lp-app-chip-live {
  background: var(--lp-app-published-bg);
  color: var(--lp-app-published-fg);
}

.lp-app-chip-draft {
  background: var(--lp-app-draft-bg);
  color: var(--lp-app-draft-fg);
}

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

/* A row of the posts list (pixel/posts/index): the picture, or the slate
   with its aperture; the title, the byline and the status line in its
   status's light (Pixel::PostsHelper::STATUS_TEXT); then the row's verbs
   as quiet round pills. */
.lp-app-thumb {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 3.6rem;
  height: 2.4rem;
  border-radius: 8px;
  background: var(--color-paper-2);
  color: var(--color-muted);
  object-fit: cover;
}

.lp-app-thumb svg {
  width: 1rem;
  height: 1rem;
}

.lp-app-row .lp-app-line-draft { color: var(--lp-app-draft-fg); }
.lp-app-row .lp-app-line-scheduled { color: var(--lp-app-scheduled-fg); }
.lp-app-row .lp-app-line-published { color: var(--lp-app-published-fg); }
.lp-app-row .lp-app-line-sent { color: var(--lp-app-sent-fg); }

.lp-app-row-verbs {
  display: flex;
  flex-shrink: 0;
  gap: 0.25rem;
}

.lp-app-row-verbs i {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  color: var(--color-body);
}

.lp-app-row-verbs svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* The status line in its status's colour, as post_status_text_class
   gives it. */
.lp-app-status {
  margin-top: 0.75rem;
  color: var(--lp-app-published-fg);
}

/* The campaign's figures, four to a row as the admin sets them: the
   email's four, then the site's two and the comments. */
.lp-app-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1.4rem 0 0;
}

.lp-app-figures div {
  padding: 0.8rem 1rem;
}

.lp-app-figures div:not(:nth-child(4n + 1)) {
  border-left: 1px solid var(--color-line);
}

.lp-app-figures div:nth-child(n + 5) {
  border-top: 1px solid var(--color-line);
}

.lp-app-figures dd {
  margin: 0;
}

.lp-app-figures dt + dd {
  margin-top: 0.4rem;
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.lp-app-send,
.lp-app-links {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
}

.lp-app-send-head,
.lp-app-links-head {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lp-app-send-head {
  justify-content: space-between;
}

.lp-app-send-head b,
.lp-app-links-head b {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.lp-app-send .lp-app-row-sub {
  margin-top: 0.2rem;
}

/* Under the send line, each after a hairline: the readers on the list it
   did not reach with Send to them, then what did not arrive. */
.lp-cam-more,
.lp-cam-trouble {
  margin: 0.8rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--color-line);
}

.lp-cam-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--color-body);
}

.lp-cam-more .lp-app-pill {
  flex-shrink: 0;
  font-size: 0.72rem;
}

.lp-cam-trouble {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  font-size: 0.78rem;
}

.lp-cam-trouble div {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.lp-cam-trouble dt {
  color: var(--color-body);
}

.lp-cam-trouble dd {
  margin: 0;
  color: var(--color-ink);
}

.lp-app-links-head b {
  flex: 1;
}

.lp-app-links-head span,
.lp-app-links li > .lp-app-mono {
  width: 3.5rem;
  flex-shrink: 0;
  text-align: right;
}

.lp-app-links ul {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}

.lp-app-links li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.6rem 0;
}

.lp-app-links li > .lp-app-mono {
  padding-top: 0.1rem;
  font-size: 0.78rem;
  color: var(--color-body);
}

.lp-app-links li > .lp-app-row:not(.lp-cam-fix) > span:first-child,
.lp-cam-fix > * > span:first-child {
  font-size: 0.9rem;
}

/* Publishing in two steps, then its success page: three pages in one
   place, each later page opaque over the one before it, so the walk
   shows a page by its opacity alone. Each page is its own stacking
   layer, in the order of the markup: else a positioned or scaled
   control of an earlier page (Next, Later, a pointer's target) paints
   over the later page's ground and shows through it. */
.lp-app-publish {
  grid-template-columns: minmax(0, 1fr);
}

.lp-pub-page {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  grid-area: 1 / 1;
  min-width: 0;
  padding: 0.9rem;
  background: var(--color-canvas);
}

.lp-pub-choose {
  opacity: var(--pub-next);
}

.lp-pub-done {
  opacity: var(--pub-done);
}

.lp-app-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* The preview's header: the way back on the left, the modes in the
   middle, the mail's weight and the test send on the right. */
.lp-pub-preview .lp-app-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.lp-pub-preview .lp-app-back {
  justify-self: start;
}

/* The weight and the test send show while Email does (CSS :has in the
   admin). */
.lp-pub-verbs {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: 0.8rem;
  opacity: var(--pub-design);
}

.lp-pub-weight {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}

.lp-pub-classic-only { opacity: calc(1 - var(--pub-design)); }
.lp-pub-plain-only { opacity: var(--pub-design); }

/* The float at the preview's foot: where it goes, the design, Next. */
.lp-pub-float {
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  max-width: 100%;
  padding: 0.4rem;
  border: 1px solid var(--color-line-strong);
  border-radius: 1.4rem;
  background: var(--color-paper);
  box-shadow: 0 10px 15px -3px rgba(11, 22, 54, 0.1), 0 4px 6px -4px rgba(11, 22, 54, 0.1);
}

.lp-pub-segments {
  display: flex;
  gap: 0.2rem;
  padding: 0.2rem;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
}

.lp-pub-segments .lp-app-choice {
  padding: 0.3rem 0.7rem;
  box-shadow: none;
}

.lp-pub-next {
  position: relative;
  scale: calc(1 - var(--pub-nudge) * 0.03);
}

/* The second step: one narrow column, a row for each choice. */
.lp-pub-column {
  width: min(100%, 24rem);
  margin: 0 auto;
  padding-top: 1.3rem;
}

.lp-pub-headline {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.lp-pub-headline span {
  display: block;
}

.lp-pub-headline span:first-child {
  color: var(--color-accent-strong);
}

.lp-pub-headline span + span {
  margin-top: 0.4rem;
}

.lp-pub-rows {
  margin-top: 1.3rem;
  border-block: 1px solid var(--color-line);
}

.lp-pub-rows > * + * {
  border-top: 1px solid var(--color-line);
}

.lp-pub-summary {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0;
  font-size: 0.85rem;
  font-weight: 500;
}

.lp-pub-summary > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-pub-summary svg {
  flex-shrink: 0;
  width: 0.9rem;
  height: 0.9rem;
  color: var(--color-muted);
}

.lp-pub-open .lp-pub-summary svg:last-child {
  rotate: 180deg;
}

.lp-pub-body {
  display: grid;
  gap: 0.6rem;
  padding: 0 0 0.9rem 1.55rem;
}

/* The success page: the mark, what happened, the post, the ways on. */
.lp-pub-done-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 25rem);
  margin: 0 auto;
  padding-top: 1.6rem;
  text-align: center;
}

.lp-pub-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  scale: calc(0.7 + var(--pub-done) * 0.3);
}

.lp-pub-mark svg {
  width: 1.6rem;
  height: 1.6rem;
}

.lp-pub-confetti {
  position: absolute;
  top: calc(50% - 0.2rem);
  left: calc(50% - 0.2rem);
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  translate: calc(var(--x) * var(--pub-done)) calc(var(--y) * var(--pub-done));
}

.lp-pub-confetti:nth-child(even) {
  border-radius: 2px;
}

.lp-pub-confetti-accent { background: var(--color-accent); }
.lp-pub-confetti-violet { background: var(--lp-violet); }
.lp-pub-confetti-ink { background: var(--color-ink); }

.lp-pub-done-title {
  margin-top: 1.6rem;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.lp-pub-detail {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--color-body);
}

.lp-pub-card {
  width: 100%;
  margin-top: 1.2rem;
  padding: 0.85rem;
  border: 1px solid var(--color-line-strong);
  border-radius: 12px;
  background: var(--color-paper);
  text-align: left;
}

.lp-pub-card-head,
.lp-pub-card-url {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lp-pub-card-head img {
  flex-shrink: 0;
  width: 3.4rem;
  height: 2.4rem;
  border-radius: 8px;
  object-fit: cover;
}

.lp-pub-card-head b,
.lp-pub-card-url code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-pub-card-head b {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.lp-pub-card-url {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--color-line);
}

.lp-pub-card-url code {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-body);
}

.lp-pub-ways {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.2rem;
}

.lp-pub-text {
  padding: 0.5em 0.8em;
  color: var(--color-body);
  font-weight: 500;
}

.lp-app-back {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.9rem 0.3rem 0.35rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-body);
  font-weight: 500;
  white-space: nowrap;
}

/* The PixelGlass mark, as the admin's back pill wears it
   (pixel/posts/previews/_back). */
.lp-app-back-mark {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 6px;
}

.lp-app-back i {
  width: 1px;
  height: 0.9rem;
  background: var(--color-line-strong);
}

.lp-app-back b {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.lp-app-back b::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-muted);
}

.lp-app-modes {
  display: flex;
  gap: 0.2rem;
  padding: 0.2rem;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
}

/* A mode is on as far as --on says, as a choice is: the walk moves the
   frame from Desktop to Email. */
.lp-app-modes span {
  --on: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-accent-soft) calc(var(--on) * 100%), transparent);
  color: color-mix(in srgb, var(--color-accent-strong) calc(var(--on) * 100%), var(--color-body));
  font-size: 0.7rem;
  font-weight: 500;
}

.lp-app-modes svg {
  width: 0.8rem;
  height: 0.8rem;
}

.lp-app-modes em {
  font-style: normal;
}

.lp-pub-mode-desktop { --on: calc(1 - var(--pub-design)); }
.lp-pub-mode-email { --on: var(--pub-design); }

/* The frame: the site at its full width, or the mail in its column. */
.lp-app-mail {
  flex: 1;
  place-items: start center;
  padding: 1.2rem 1rem;
  border-radius: 14px;
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-line);
}

.lp-pub-site {
  justify-self: stretch;
  opacity: calc(1 - var(--pub-design));
}

.lp-pub-site-nav {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-body);
  font-size: 0.68rem;
}

.lp-pub-site-nav b {
  flex: 1;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink);
}

.lp-pub-site-nav ~ * {
  max-width: 26rem;
  margin-inline: auto;
}

/* Plain: the faces every client has, a mail client's link blue. */
.lp-pub-letter {
  width: min(100%, 22rem);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #1a1a1a;
  opacity: var(--pub-design);
}

.lp-pub-letter p + p {
  margin-top: 0.7rem;
}

.lp-pub-letter u {
  color: #1155cc;
}

.lp-pub-letter .lp-pub-letter-foot {
  margin-top: 1.4rem;
  font-size: 0.62rem;
  color: var(--color-muted);
}

.lp-app-mail-title {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.1;
}

.lp-app-mail-cover {
  margin-top: 0.9rem;
  aspect-ratio: 900 / 380;
  border-radius: 4px;
  background: var(--color-paper-2);
  overflow: hidden;
}

.lp-app-mail-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-app-mail-text {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  line-height: 1.55;
}

.lp-app-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* A choice is on as far as --on says, 0 to 1, so the walk can turn one
   on and another off. */
.lp-app-choice {
  --on: 0;
  position: relative;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-accent-soft) calc(var(--on) * 100%), transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, rgba(46, 107, 245, 0.4) calc(var(--on) * 100%), var(--color-line-strong));
  color: color-mix(in srgb, var(--color-accent-strong) calc(var(--on) * 100%), var(--color-body));
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
}

.lp-app-choice-on {
  --on: 1;
}

/* What Publish will do, then Publish: under the rows, the verb at its
   own width on the left. */
.lp-app-decide-foot {
  display: grid;
  justify-items: start;
  gap: 0.9rem;
  margin-top: 1.4rem;
}

/* The Dashboard (pixel/analytics, DESIGN.md §26), drawn: the tabs as plain
   words, the open one on a soft ink wash; the Overview's figures on one
   panel with hairlines between, each with its sparkline; the chart as a
   flat accent wash over its grid; the latest post; the world map as the
   admin's .world-map-* rules draw it, and the countries under it, each
   line a share bar in the accent wash. The walk moves three numbers
   (--dash-traffic, --dash-card, --dash-aud; "The admin, at work"). */
.lp-dash-live {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5em;
  color: var(--color-body);
}

.lp-dash-live i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-accent);
}

.lp-dash-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
}

.lp-dash-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  margin-left: -0.7rem;
}

.lp-dash-tabs > span {
  position: relative;
  padding: 0.35em 0.85em;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-ink) calc(var(--on, 0) * 5%), transparent);
  color: color-mix(in srgb, var(--color-ink) calc(var(--on, 0) * 100%), var(--color-body));
  font-weight: 500;
  white-space: nowrap;
}

.lp-dash-tab-overview { --on: calc(1 - var(--dash-traffic)); }
.lp-dash-tab-traffic { --on: calc(var(--dash-traffic) - var(--dash-aud)); }
.lp-dash-tab-audience { --on: var(--dash-aud); }

/* The period in force: the menu's pill on the accent wash. */
.lp-dash-period {
  flex-shrink: 0;
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.lp-dash-period svg:first-child {
  margin: 0 0 0 -0.15em;
}

.lp-dash-body {
  margin-top: 1.1rem;
}

.lp-dash-body > * {
  align-self: start;
}

.lp-dash-overview { opacity: calc(1 - var(--dash-traffic)); }
.lp-dash-countries { opacity: var(--dash-traffic); }
.lp-dash-when-traffic { opacity: calc(1 - var(--dash-aud)); }
.lp-dash-when-audience { opacity: var(--dash-aud); }

.lp-dash-heads {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--color-line-strong);
  border-radius: 14px;
  background: var(--color-line);
}

.lp-dash-heads > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0.8rem 0.9rem 0.6rem;
  background: var(--color-paper);
}

.lp-dash-head-word {
  font-weight: 500;
  color: var(--color-body);
}

.lp-dash-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.45rem;
  margin-top: 0.3rem;
}

.lp-dash-figure b {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.lp-dash-figure i,
.lp-dash-card i {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-style: normal;
  color: var(--color-muted);
}

.lp-app-dash [data-sparkline] {
  display: block;
  width: 100%;
  color: var(--color-accent);
}

.lp-dash-heads [data-sparkline] {
  height: 2rem;
  margin-top: 0.6rem;
}

.lp-dash-chart,
.lp-dash-latest {
  margin-top: 0.9rem;
}

.lp-dash-chart,
.lp-dash-countries {
  padding: 0.9rem 1rem 0.7rem;
}

.lp-dash-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.lp-dash-panel-head b,
.lp-dash-panel-title b {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.lp-dash-panel-head span,
.lp-dash-list-head {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.lp-dash-panel-head span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.lp-dash-panel-head svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* The chart's grid: four hairlines over the axis, the line on them. */
.lp-dash-plot {
  position: relative;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  height: 6.5rem;
  margin-top: 0.8rem;
  border-bottom: 1px solid var(--color-line);
}

.lp-dash-plot i {
  border-top: 1px solid var(--color-line);
}

/* The chart's line (landing_plot) over its grid; the feature pages'
   charts use it too. */
.lp-dash-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--color-accent);
}

.lp-dash-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.35rem;
  font-size: 0.68rem;
  color: var(--color-muted);
}

.lp-dash-latest {
  overflow: hidden;
}

.lp-dash-latest-post {
  display: flex;
  gap: 1rem;
  padding: 0.9rem 1rem;
}

.lp-dash-cover {
  flex-shrink: 0;
  width: 8.5rem;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  background: var(--color-paper-2);
  object-fit: cover;
}

.lp-dash-latest-post p {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lp-dash-latest-post b {
  margin-top: 0.4rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.lp-dash-byline {
  margin-top: 0.15rem;
  overflow: hidden;
  color: var(--color-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-dash-published {
  color: var(--lp-app-published-fg);
}

.lp-dash-latest-verbs {
  display: flex;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.6rem;
}

.lp-dash-latest-verbs .lp-app-pill {
  padding: 0.35em 0.8em;
}

.lp-dash-latest-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--color-line);
}

.lp-dash-latest-figures div {
  padding: 0.7rem 1rem;
}

.lp-dash-latest-figures div + div {
  border-left: 1px solid var(--color-line);
}

.lp-dash-latest-figures dt {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.lp-dash-latest-figures dd {
  margin: 0.3rem 0 0;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* The map: Equal Earth on the globe's outline, the land in the grey of
   a strong line, a shaded country the accent mixed into it, a quarter for
   the least to whole for the most (world_map_fill), by visitors and then
   by members as the walk turns to Audience. */
.lp-dash-world {
  position: relative;
  margin-top: 0.8rem;
  overflow: hidden;
  border-radius: 10px;
}

.lp-dash-map {
  display: block;
  width: 100%;
  height: auto;
}

.lp-dash-sphere {
  fill: var(--color-paper-2);
  stroke: var(--color-line-strong);
  vector-effect: non-scaling-stroke;
}

.lp-dash-graticule {
  fill: none;
  stroke: var(--color-line);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
}

.lp-dash-land {
  fill: color-mix(in srgb, var(--color-accent) calc(var(--visitors, 0%) * (1 - var(--dash-aud)) + var(--members, 0%) * var(--dash-aud)), var(--color-line-strong));
  stroke: var(--color-paper);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
}

/* The country under the pointer takes an ink border while its card is up. */
.lp-dash-pointed {
  stroke: color-mix(in srgb, var(--color-ink) calc(var(--dash-card) * 100%), var(--color-paper));
  stroke-width: calc(0.5 + var(--dash-card) * 0.5);
}

.lp-dash-zoom {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: grid;
  gap: 0.3rem;
}

.lp-dash-zoom i {
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  color: var(--color-body);
}

.lp-dash-zoom svg {
  width: 0.75rem;
  height: 0.75rem;
}

.lp-dash-zoom .lp-dash-zoom-off {
  opacity: 0.4;
}

.lp-dash-point,
.lp-dash-card,
.lp-dash-faces {
  position: absolute;
}

.lp-dash-card {
  z-index: 3;
  display: grid;
  margin: 0.7rem 0 0 0.7rem;
  padding: 0.4rem 0.65rem;
  border-radius: 12px;
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong), 0 0.75em 1.5em -0.5em rgba(11, 22, 54, 0.18);
  white-space: nowrap;
  opacity: var(--dash-card);
}

.lp-dash-card b {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
}

/* A country's faces: three at most, overlapped, each with a paper ring,
   and a chip for the rest. */
.lp-dash-faces {
  z-index: 2;
  display: flex;
  align-items: center;
  translate: -50% -50%;
  opacity: var(--dash-aud);
}

.lp-dash-face {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  box-shadow: 0 0 0 2px var(--color-paper);
}

.lp-dash-face + .lp-dash-face {
  margin-left: -0.4rem;
}

.lp-dash-faces b {
  margin-left: 0.2rem;
  padding: 0 0.3rem;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 400;
  color: var(--color-body);
}

.lp-dash-countries > .lp-app-stack {
  margin-top: 0.9rem;
}

.lp-dash-list-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-line);
}

.lp-dash-lines {
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
}

.lp-dash-lines li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.3rem 0.45rem 0.3rem 0.5rem;
  isolation: isolate;
}

.lp-dash-lines li::before {
  content: "";
  position: absolute;
  inset: 0.1rem auto 0.1rem 0;
  z-index: -1;
  pointer-events: none;
  width: var(--share);
  border-radius: 6px;
  background: var(--color-accent-soft);
}

.lp-dash-lines span {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.lp-dash-lines em {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-style: normal;
  color: var(--color-body);
}

.lp-dash-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.35rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--color-line);
}

.lp-dash-pager .lp-app-pill {
  padding: 0.35em 0.8em;
}

/* The admin's own breakpoint: the figures stand two by two, the cover
   above the latest post. */
@media (max-width: 47.9375rem) {
  .lp-dash-bar {
    flex-wrap: wrap;
  }

  .lp-dash-heads,
  .lp-dash-latest-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-dash-latest-figures div:nth-child(3) {
    border-left: 0;
  }

  .lp-dash-latest-figures div:nth-child(n + 3) {
    border-top: 1px solid var(--color-line);
  }

  .lp-dash-latest-post {
    flex-direction: column;
  }

  .lp-dash-cover {
    width: 100%;
  }
}

/* — The admin, at work ———————————————————————————————
   Each drawn screen walks through one real flow on a loop, its pointer
   pressing what a person would: the publish page picks Plain and Next,
   then Later and Schedule; Audience ticks two rows and the bulk bar comes up; the
   campaign fixes a broken link. A screen's steps are numbers from 0 to 1
   (registered below, so they ease), moved by one timeline on the screen;
   the elements read them. Nothing outside a window moves, and nothing
   changes its size: the moments of a row are stacked in one place, and
   what appears was there, unseen. Reduced motion stops every timeline,
   and the screens stand at their first moment. */
@property --pub-design { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --pub-later { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --pub-press { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --pub-nudge { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --pub-next { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --pub-done { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --mem-1 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --mem-2 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --mem-bar { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --mem-label { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --mem-sheet { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --mem-type { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --mem-add { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --mem-tag { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --cam-edit { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --cam-type { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --cam-fixed { syntax: "<number>"; inherits: true; initial-value: 0; }

/* The pointer: in from below right, a press at 9.5% of its loop, then
   gone. A step's delay puts its press on the step's moment. */
.lp-app-cursor {
  position: absolute;
  top: 55%;
  left: 60%;
  z-index: 2;
  width: 1rem;
  height: 1rem;
  opacity: 0;
  pointer-events: none;
  animation: lp-app-cursor 10s var(--ease-out) infinite both;
}

.lp-app-cursor svg {
  display: block;
  filter: drop-shadow(0 1px 1px rgba(11, 22, 54, 0.25));
}

@keyframes lp-app-cursor {
  0% { opacity: 0; transform: translate(1.6rem, 1.2rem); }
  4% { opacity: 1; }
  8% { opacity: 1; transform: none; }
  9.5% { transform: scale(0.8); }
  11% { opacity: 1; transform: none; }
  16%, 100% { opacity: 0; transform: translate(0.3rem, 0.3rem); }
}

/* Publish, fourteen seconds: Plain at 12%; Next at 28%, and the second
   step comes over the preview until 32%; Later at 46%; Schedule at 64%,
   and the success page comes over it until 70%. At 92% the first two
   pages go back to their start under the success page, which goes from
   92% to 96%. Each press is 1.33s into its pointer's loop. */
.lp-app-publish {
  animation: lp-app-publish 14s linear infinite both;
}

.lp-app-publish .lp-app-cursor {
  animation-duration: 14s;
}

@keyframes lp-app-publish {
  0%, 11% { --pub-design: 0; --pub-nudge: 0; --pub-next: 0; --pub-later: 0; --pub-press: 0; --pub-done: 0; }
  12.5% { --pub-design: 1; }
  27.5% { --pub-nudge: 0; }
  28% { --pub-nudge: 1; --pub-next: 0; }
  29% { --pub-nudge: 0; }
  32% { --pub-next: 1; }
  45.5% { --pub-later: 0; }
  47% { --pub-later: 1; }
  63.5% { --pub-press: 0; }
  64% { --pub-press: 1; --pub-done: 0; }
  65.5% { --pub-press: 0; }
  70% { --pub-done: 1; }
  91.5% { --pub-design: 1; --pub-next: 1; --pub-later: 1; --pub-done: 1; }
  92% { --pub-design: 0; --pub-next: 0; --pub-later: 0; }
  96%, 100% { --pub-done: 0; }
}

.lp-pub-step-1 { animation-delay: 0.35s; }
.lp-pub-step-2 { animation-delay: 2.59s; }
.lp-pub-step-3 { animation-delay: 5.11s; }
.lp-pub-step-4 { animation-delay: 7.63s; }

.lp-pub-classic { --on: calc(1 - var(--pub-design)); }
.lp-pub-plain { --on: var(--pub-design); }
.lp-pub-now { --on: calc(1 - var(--pub-later)); }
.lp-pub-later { --on: var(--pub-later); }

/* Later opens the time on a line of its own: the field, then the zone. */
.lp-pub-time {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: var(--pub-later);
}

.lp-pub-time .lp-app-field {
  font-size: 0.72rem;
  color: var(--color-ink);
}

.lp-pub-verb {
  position: relative;
  scale: calc(1 - var(--pub-press) * 0.03);
  background: color-mix(in srgb, var(--color-ink-2) calc(var(--pub-press) * 100%), var(--color-ink));
}

/* Two moments in one place: the later one over the first, each as far
   as its step. */
.lp-app-stack {
  display: grid;
}

.lp-app-stack > * {
  grid-area: 1 / 1;
}

.lp-pub-when-now { opacity: calc(1 - var(--pub-later)); }
.lp-pub-when-later { opacity: var(--pub-later); }

/* Audience, twelve seconds: a row ticked at 16% and another at 32%, the
   bar up at 35%, Label pressed at 46% and its menu open above it, a name
   typed from 50% to 58%, Add label pressed at 64%, the label on both
   rows from 66%, back to the start from 92%. Its pointer keeps the same
   twelve seconds, so each delay puts a press on its moment. */
.lp-app-members {
  animation: lp-app-members 12s linear infinite both;
}

.lp-app-members .lp-app-cursor {
  animation-duration: 12s;
}

@keyframes lp-app-members {
  0%, 15% { --mem-1: 0; --mem-2: 0; --mem-bar: 0; --mem-label: 0; --mem-sheet: 0; --mem-type: 0; --mem-add: 0; --mem-tag: 0; }
  16.5% { --mem-1: 1; }
  31% { --mem-2: 0; }
  32.5% { --mem-2: 1; --mem-bar: 0; }
  36% { --mem-bar: 1; }
  45% { --mem-label: 0; --mem-sheet: 0; }
  46.5% { --mem-label: 1; }
  48% { --mem-sheet: 1; }
  50% { --mem-type: 0; animation-timing-function: steps(7, end); }
  58% { --mem-type: 1; }
  63.5% { --mem-add: 0; }
  64.5% { --mem-add: 1; --mem-sheet: 1; --mem-label: 1; --mem-tag: 0; }
  66.5% { --mem-add: 0; --mem-sheet: 0; --mem-label: 0; --mem-tag: 1; }
  92% { --mem-1: 1; --mem-2: 1; --mem-bar: 1; --mem-type: 1; --mem-tag: 1; }
  96%, 100% { --mem-1: 0; --mem-2: 0; --mem-bar: 0; --mem-type: 0; --mem-tag: 0; }
}

.lp-mem-step-1 { animation-delay: 0.76s; }
.lp-mem-step-2 { animation-delay: 2.76s; }
.lp-mem-step-3 { animation-delay: 4.42s; }
.lp-mem-step-4 { animation-delay: 6.56s; }

.lp-app-main {
  position: relative;
}

.lp-app-box {
  position: relative;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-ink) calc(var(--on, 0) * 100%), var(--color-paper));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) calc(var(--on, 0) * 100%), var(--color-line-strong));
}

.lp-app-box > svg {
  width: 0.7rem;
  height: 0.7rem;
  color: #fff;
  opacity: var(--on, 0);
}

.lp-mem-tick-1 { --on: var(--mem-1); }
.lp-mem-tick-2 { --on: var(--mem-2); }

.lp-mem-tick-1,
.lp-mem-tick-2 {
  background: color-mix(in srgb, var(--color-paper-2) calc(var(--on) * 100%), transparent);
}

.lp-app-batch {
  position: absolute;
  right: 0;
  bottom: 1.1rem;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  width: fit-content;
  max-width: calc(100% - 2rem);
  margin: 0 auto;
  padding: 0.3rem;
  padding-left: 0.9rem;
  border-radius: 22px;
  box-shadow: 0 12px 30px -12px rgba(11, 22, 54, 0.3);
  opacity: var(--mem-bar);
  translate: 0 calc((1 - var(--mem-bar)) * 1.5rem);
}

.lp-app-batch b {
  margin-right: 0.3rem;
  font-weight: 500;
}

/* The bar's pills are the admin's small pills, so the whole bar fits on
   one line in a wide window and wraps in a narrow one, as it does there. */
.lp-app-batch .lp-app-pill {
  padding: 0.45em 0.8em;
  font-size: 0.75rem;
}

/* A pill with its glyph before the word: Export all, Export, Delete. */
.lp-mem-lead svg {
  margin-right: 0;
  margin-left: -0.15em;
}

.lp-app-batch .lp-mem-delete {
  color: var(--color-danger-strong);
}

.lp-app-batch .lp-mem-clear {
  padding: 0.45em;
}

.lp-mem-clear svg {
  margin: 0;
}

/* The hairline between the bar's changes and its Export and Delete. */
.lp-mem-rule {
  width: 1px;
  height: 1.1rem;
  margin: 0 0.1rem;
  background: var(--color-line);
}

/* Export all, over the roster at its right, as the admin puts it. */
.lp-mem-tools {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

.lp-mem-tools + .lp-app-roster {
  margin-top: 0.7rem;
}

/* Email stopped: the admin's danger-soft chip for a suppressed address. */
.lp-mem-chip-stopped {
  background: #fdecef;
  color: var(--color-danger-strong);
}

/* Badges and Circles stand down when the window is too narrow for the
   title and four pills, so the title never loses its letters. */
.lp-app-members .lp-app-main {
  container-type: inline-size;
}

@container (max-width: 25rem) {
  .lp-mem-more {
    display: none;
  }
}

.lp-mem-label {
  position: relative;
  background: color-mix(in srgb, var(--color-accent-soft) calc(var(--mem-label) * 100%), var(--color-paper));
  color: color-mix(in srgb, var(--color-accent-strong) calc(var(--mem-label) * 100%), var(--color-body));
}

/* The Label menu, above its pill as the admin opens it: the name typed
   into the field, then Add label pressed. */
.lp-mem-sheet {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: 50%;
  z-index: 1;
  display: grid;
  gap: 0.35rem;
  width: 13rem;
  padding: 0.4rem;
  border-radius: 16px;
  background: var(--color-paper);
  box-shadow: var(--lp-shadow-soft);
  color: var(--color-body);
  font-weight: 400;
  opacity: var(--mem-sheet);
  translate: -50% calc((1 - var(--mem-sheet)) * 0.4rem);
}

.lp-mem-name {
  display: grid;
  padding: 0.5em 0.8em;
  border: 1px solid var(--color-line-strong);
  border-radius: 10px;
}

.lp-mem-name > * {
  grid-area: 1 / 1;
  font-style: normal;
}

.lp-mem-name i {
  color: var(--color-muted);
  opacity: calc(1 - min(1, var(--mem-type) * 20));
}

.lp-mem-name b {
  font-weight: 500;
  color: var(--color-ink);
  clip-path: inset(0 calc((1 - var(--mem-type)) * 100%) 0 0);
}

.lp-mem-verbs {
  display: flex;
  gap: 0.35rem;
}

.lp-mem-verbs .lp-app-pill {
  flex: 1;
  justify-content: center;
}

.lp-mem-verbs .lp-mem-add {
  position: relative;
  background: color-mix(in srgb, var(--color-paper-2) calc(var(--mem-add) * 100%), var(--color-paper));
  color: var(--color-ink);
}

/* The label added: on both ticked rows, in the accent while it is new. */
.lp-app-labels .lp-mem-tag {
  background: color-mix(in srgb, var(--color-accent-soft) calc(var(--mem-tag) * 100%), var(--lp-app-mist));
  color: color-mix(in srgb, var(--color-accent-strong) calc(var(--mem-tag) * 100%), var(--color-body));
  opacity: var(--mem-tag);
}

/* A campaign, eleven seconds: Edit at 14%, the address typed from 20% to
   44%, Save at 52%, back to the start from 92%. */
.lp-app-links {
  animation: lp-app-campaign 11s linear infinite both;
}

@keyframes lp-app-campaign {
  0%, 13% { --cam-edit: 0; --cam-type: 0; --cam-fixed: 0; }
  15% { --cam-edit: 1; }
  20% { --cam-type: 0; animation-timing-function: steps(31, end); }
  44% { --cam-type: 1; }
  51% { --cam-edit: 1; --cam-fixed: 0; }
  53% { --cam-edit: 0; --cam-fixed: 1; }
  92% { --cam-fixed: 1; --cam-type: 1; }
  96%, 100% { --cam-fixed: 0; --cam-type: 0; }
}

.lp-cam-step-1,
.lp-cam-step-2 {
  animation-duration: 11s;
}

.lp-cam-step-1 { animation-delay: 0.495s; }
.lp-cam-step-2 { animation-delay: 4.675s; }

/* A moment holds its pointer, so it clips nothing; its lines clip
   themselves, but not the pills a pointer presses. */
.lp-app-row.lp-cam-fix > span {
  display: grid;
  align-content: start;
  min-width: 0;
  overflow: visible;
}

.lp-cam-fix > * > :not(.lp-app-text-pill, .lp-cam-form, .lp-app-changed) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-cam-broken { opacity: calc((1 - var(--cam-edit)) * (1 - var(--cam-fixed))); }
.lp-cam-editing { opacity: var(--cam-edit); }
.lp-cam-fixed { opacity: var(--cam-fixed); }

.lp-app-danger {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--color-danger-strong);
}

.lp-app-danger svg {
  flex-shrink: 0;
  width: 0.8rem;
  height: 0.8rem;
}

/* The check's answer in the danger colour, the address beside it in the
   muted ink, as the admin's link row shows them. */
.lp-cam-code {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.25rem;
}

.lp-cam-where {
  min-width: 0;
  margin-left: 0.1rem;
  overflow: hidden;
  color: var(--color-muted);
  text-overflow: ellipsis;
}

.lp-app-text-pill {
  position: relative;
  justify-self: start;
  margin-top: 0.3rem;
  padding: 0.15rem 0.45rem;
  margin-left: -0.45rem;
  border-radius: var(--radius-pill);
  color: var(--color-body);
  font-size: 0.72rem;
}

.lp-cam-form {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.3rem;
}

.lp-cam-form .lp-app-field {
  flex: 1;
  min-width: 0;
  padding: 0.3em 0.6em;
  color: var(--color-ink);
}

.lp-cam-form .lp-app-pill {
  position: relative;
  padding: 0.35em 0.8em;
}

.lp-cam-form .lp-app-text-pill {
  margin: 0;
}

/* The address as it is typed: a monospace face, so a character is 1ch,
   and the view says how many (--chars). */
.lp-cam-typed {
  display: inline-block;
  width: calc(var(--cam-type) * var(--chars) * 1ch);
  max-width: 100%;
  overflow: hidden;
  border-right: 1px solid var(--color-accent);
  white-space: nowrap;
}

/* What it changed from, who and when, and Restore: one line that wraps,
   as the admin's does. */
.lp-app-changed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.5rem;
  min-width: 0;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--color-body);
}

.lp-app-changed .lp-app-mono {
  margin-top: 0;
}

.lp-app-changed .lp-cam-restore {
  margin: 0;
  padding: 0.05rem 0.45rem;
}

/* The Dashboard, twelve seconds: Web traffic pressed at 16% and the map
   comes, shaded by visitors; the pointer on the United States at 36.5%
   and its card up until the pointer goes; Audience pressed at 62%, and
   the map is shaded by members with their faces; back to the Overview
   from 92%. Its pointer keeps the same twelve seconds. */
@property --dash-traffic { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --dash-card { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --dash-aud { syntax: "<number>"; inherits: true; initial-value: 0; }

.lp-app-dash {
  animation: lp-app-dash 12s linear infinite both;
}

.lp-app-dash .lp-app-cursor {
  animation-duration: 12s;
}

@keyframes lp-app-dash {
  0%, 16% { --dash-traffic: 0; --dash-card: 0; --dash-aud: 0; }
  18% { --dash-traffic: 1; }
  36.5% { --dash-card: 0; }
  38% { --dash-card: 1; }
  42.5% { --dash-card: 1; }
  44% { --dash-card: 0; }
  62% { --dash-aud: 0; }
  64% { --dash-aud: 1; }
  92% { --dash-traffic: 1; --dash-aud: 1; }
  96%, 100% { --dash-traffic: 0; --dash-aud: 0; }
}

.lp-dash-step-1 { animation-delay: 0.78s; }
.lp-dash-step-2 { animation-delay: 3.24s; }
.lp-dash-step-3 { animation-delay: 6.3s; }

@media (max-width: 63.9375rem) {
  .lp-screen,
  .lp-screen:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-screen:nth-child(even) .lp-screen-copy {
    order: 0;
  }
}

/* The admin's own breakpoints: the sidebar goes, the preview's header
   wraps and its modes keep only their glyphs, the figures stand two by
   two. */
@media (max-width: 47.9375rem) {
  .lp-app,
  .lp-app-publish {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-app-side {
    display: none;
  }

  .lp-pub-preview .lp-app-bar {
    display: flex;
  }

  .lp-app-modes em {
    display: none;
  }

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

  .lp-app-figures div:nth-child(2n + 1) {
    border-left: 0;
  }

  .lp-app-figures div:nth-child(n + 3) {
    border-top: 1px solid var(--color-line);
  }
}

/* — The close ——————————————————————————————————————— */
/* — Pricing (§20, "Pricing", the scale of 2026-10-25) ————————————————
   The panel keeps one size whichever plan is picked: its tracks are
   fractions and the toggle's is fixed (a track sized by its content
   grows with the bars and the strip that span it), the figure keeps
   its unit on a line of its own and room for two lines under it.
   One panel: on the left the emails a month of the plan picked and a bar
   for each plan, its height its price; on the right that plan whole and
   what every plan has. Radios ahead of the panel pick the plan and the
   interval with no script; they stay in the tab order, out of sight, and
   the arrow keys move along the bars. Still: no motion of its own. */
.lp-interval-input,
.lp-pick-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.lp-scale {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem minmax(0, 1fr);
  grid-template-areas:
    "figure toggle plan"
    "bars bars plan"
    "includes includes includes";
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border-radius: var(--lp-radius);
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
}

.lp-scale-figure,
.lp-scale-bars {
  padding-inline: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.lp-scale-plan {
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem) clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  border-left: 1px solid var(--color-line);
  background: var(--color-paper-2);
}

/* The interval toggle: the plan step's pill, at the top of the scale. */
.lp-interval {
  grid-area: toggle;
  align-self: start;
  justify-self: end;
  display: flex;
  width: fit-content;
  gap: 0.25rem;
  margin: clamp(1.5rem, 1rem + 2vw, 2.75rem) clamp(1.5rem, 1rem + 2vw, 3rem) 0 0;
  padding: 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  box-shadow: inset 0 0 0 1px var(--color-line);
}

.lp-interval label {
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-pill);
  color: var(--color-body);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}

.lp-interval label span {
  margin-left: 0.35rem;
  color: var(--color-accent-strong);
}

#lp-interval-year:checked ~ .lp-scale label[for="lp-interval-year"],
#lp-interval-month:checked ~ .lp-scale label[for="lp-interval-month"] {
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  color: var(--color-ink);
}

#lp-interval-year:focus-visible ~ .lp-scale label[for="lp-interval-year"],
#lp-interval-month:focus-visible ~ .lp-scale label[for="lp-interval-month"] {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

#lp-interval-year:checked ~ .lp-scale [data-interval="month"],
#lp-interval-month:checked ~ .lp-scale [data-interval="year"] {
  display: none;
}

/* The plan picked: its block opens into the grid, the others stay shut. */
.lp-scale-choice {
  display: none;
}

#lp-plan-solo:checked ~ .lp-scale [data-plan="solo"],
#lp-plan-personal:checked ~ .lp-scale [data-plan="personal"],
#lp-plan-publisher:checked ~ .lp-scale [data-plan="publisher"],
#lp-plan-business:checked ~ .lp-scale [data-plan="business"],
#lp-plan-scale:checked ~ .lp-scale [data-plan="scale"],
#lp-plan-media:checked ~ .lp-scale [data-plan="media"],
#lp-plan-network:checked ~ .lp-scale [data-plan="network"] {
  display: contents;
}

.lp-scale-figure {
  grid-area: figure;
  padding-top: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

.lp-scale-emails b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2rem + 4vw, 6rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.lp-scale-emails span {
  display: block;
  margin-top: 0.5rem;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-ink);
}

.lp-scale-subscribers {
  min-height: 3em;
  margin-top: 1rem;
  line-height: 1.5;
  color: var(--color-body);
}

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

/* The bars: a column each, its height its price, its tick under it. */
.lp-scale-bars {
  grid-area: bars;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  align-items: end;
  gap: clamp(0.4rem, 0.2rem + 0.6vw, 0.9rem);
  padding-top: 2.5rem;
  padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

.lp-scale-bar {
  display: grid;
  gap: 0.75rem;
  cursor: pointer;
}

.lp-scale-column {
  display: flex;
  justify-content: center;
  height: calc(2.75rem + var(--h) * 12rem);
  padding-top: 0.75rem;
  border-radius: 0.9rem 0.9rem 0.35rem 0.35rem;
  box-shadow: inset 0 0 0 1px var(--color-line);
  font-size: clamp(0.75rem, 0.65rem + 0.3vw, 0.9rem);
  font-weight: 600;
}

.lp-scale-tick {
  text-align: center;
  font-size: 0.9rem;
}

.lp-scale-bar:hover .lp-scale-column {
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

#lp-plan-solo:checked ~ .lp-scale label[for="lp-plan-solo"],
#lp-plan-personal:checked ~ .lp-scale label[for="lp-plan-personal"],
#lp-plan-publisher:checked ~ .lp-scale label[for="lp-plan-publisher"],
#lp-plan-business:checked ~ .lp-scale label[for="lp-plan-business"],
#lp-plan-scale:checked ~ .lp-scale label[for="lp-plan-scale"],
#lp-plan-media:checked ~ .lp-scale label[for="lp-plan-media"],
#lp-plan-network:checked ~ .lp-scale label[for="lp-plan-network"] {
  --lp-bar: var(--color-ink);
  --lp-bar-text: var(--color-on-ink);
  --lp-tick: var(--color-ink);
}

.lp-scale-bar .lp-scale-column {
  background: var(--lp-bar, var(--color-paper-2));
  color: var(--lp-bar-text, var(--color-body));
}

.lp-scale-bar .lp-scale-tick {
  color: var(--lp-tick, var(--color-muted));
  font-weight: 500;
}

#lp-plan-solo:focus-visible ~ .lp-scale label[for="lp-plan-solo"],
#lp-plan-personal:focus-visible ~ .lp-scale label[for="lp-plan-personal"],
#lp-plan-publisher:focus-visible ~ .lp-scale label[for="lp-plan-publisher"],
#lp-plan-business:focus-visible ~ .lp-scale label[for="lp-plan-business"],
#lp-plan-scale:focus-visible ~ .lp-scale label[for="lp-plan-scale"],
#lp-plan-media:focus-visible ~ .lp-scale label[for="lp-plan-media"],
#lp-plan-network:focus-visible ~ .lp-scale label[for="lp-plan-network"] {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 0.9rem;
}

/* The plan picked, whole. */
.lp-scale-plan {
  grid-area: plan;
  display: flex;
  flex-direction: column;
}

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

.lp-scale-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;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.lp-plan-price b {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 2vw, 4rem);
  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.5rem 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--color-line-strong);
  list-style: none;
  color: var(--color-body);
}

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

/* What every plan has: one strip along the foot of the panel. */
.lp-scale-includes {
  grid-area: includes;
  display: flex;
  align-items: baseline;
  gap: 0.75rem 2rem;
  padding: 1.25rem clamp(1.5rem, 1rem + 2vw, 3rem);
  border-top: 1px solid var(--color-line);
}

.lp-scale-includes p {
  flex: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-ink);
}

.lp-scale-includes ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  color: var(--color-body);
}

.lp-scale-includes li {
  position: relative;
  padding-left: 1.25rem;
}

.lp-scale-includes li::before {
  content: "";
  position: absolute;
  top: 0.35em;
  left: 0.1rem;
  width: 0.35rem;
  height: 0.65rem;
  border: solid var(--color-accent-strong);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

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

@media (max-width: 63.9375rem) {
  .lp-scale {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "toggle" "figure" "bars" "plan" "includes";
    grid-template-rows: none;
  }

  .lp-interval {
    margin-inline: clamp(1.5rem, 1rem + 2vw, 3rem);
  }

  .lp-scale-plan {
    border-left: 0;
  }

  .lp-scale-includes {
    flex-direction: column;
  }

  .lp-scale-plan {
    border-top: 1px solid var(--color-line);
  }
}

@media (max-width: 29.9375rem) {
  .lp-scale-tick {
    font-size: 0.75rem;
  }
}

.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;
  pointer-events: none;
  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-close-eyebrow {
  margin-bottom: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}

.lp-close .lp-lede {
  margin-top: 1.75rem;
}

/* The claim: the address as one pill — the scheme, the field, the
   tenants' domain — and its primary beside it. */
.lp-claim {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.lp-claim-field {
  display: flex;
  align-items: center;
  max-width: 100%;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: var(--lp-shadow-soft);
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 0.8rem + 0.7vw, 1.3rem);
  color: var(--color-muted);
  cursor: text;
}

.lp-claim-field:focus-within {
  box-shadow: var(--lp-shadow-soft), 0 0 0 2px var(--color-accent);
}

.lp-claim-input {
  position: relative;
  display: grid;
  min-width: 0;
}

.lp-claim-input input {
  width: 11ch;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-weight: 500;
  color: var(--color-ink);
  text-align: center;
}

/* Names behind the empty field, each typed, held and gone in turn. */
.lp-claim-names {
  position: absolute;
  inset: 0;
  display: grid;
  pointer-events: none;
}

.lp-claim-input:has(input:not(:placeholder-shown)) .lp-claim-names,
.lp-claim-input:focus-within .lp-claim-names {
  display: none;
}

.lp-claim-names span {
  grid-area: 1 / 1;
  justify-self: center;
  overflow: hidden;
  border-right: 2px solid var(--color-accent);
  color: color-mix(in srgb, var(--color-ink) 45%, transparent);
  white-space: nowrap;
  opacity: 0;
  animation: lp-claim-name 12s steps(12, end) infinite;
}

.lp-claim-names span:first-child { opacity: 1; }
.lp-claim-names span:nth-child(2) { animation-delay: 3s; }
.lp-claim-names span:nth-child(3) { animation-delay: 6s; }
.lp-claim-names span:nth-child(4) { animation-delay: 9s; }

@keyframes lp-claim-name {
  0% { opacity: 1; max-width: 0; }
  12% { max-width: 12ch; }
  22% { opacity: 1; max-width: 12ch; }
  25%, 100% { opacity: 0; max-width: 12ch; }
}

/* — 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-pillars li,
  .lp-build,
  .lp-play,
  .lp-month {
    animation: lp-rise linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 28%;
  }
}

/* — 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-marquee {
  to { transform: translateX(-50%); }
}

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

  /* The hero's eyebrow names one thing to start, still. */
  .lp-own b:first-child {
    opacity: 1;
  }

  .lp-build-window {
    --bc-1: 1; --bc-2: 1; --bc-3: 1; --b-after: 1; --b-slide: 1;
  }

  .lp-earn {
    --earn-1: 1; --earn-2: 1; --earn-3: 1; --earn-4: 1; --earn-5: 1; --earn-6: 1; --earn-7: 1; --earn-8: 1;
  }

  /* The Dashboard stands at its end: Audience open, the map shaded by
     members, with their faces. */
  .lp-app-dash {
    --dash-traffic: 1; --dash-aud: 1;
  }
}

/* — Smaller screens ————————————————————————————————— */
@media (max-width: 68rem) {
  .lp-agent,
  .lp-earn,
  .lp-builds {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .lp-pillars-three {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-pillars li + li {
    padding-left: 0;
    border-left: 0;
  }

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

/* — The phone (Ronald, 2026-10-12: "mobile needs serious love") ——————
   The doors stack full width; every band breathes less. */
@media (max-width: 47.9375rem) {
  .lp-wrap {
    padding: 0 1rem;
  }

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

  .lp-build-calls span {
    display: none;
  }

  .lp-hero {
    padding: 2.5rem 0 3.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-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-pillars,
  .lp-builds {
    grid-template-columns: minmax(0, 1fr);
  }

  .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 .lp-app-stack {
    display: none;
  }

  .lp-tags {
    gap: 0.4rem;
  }

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

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

  .lp-pillars 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-claim {
    margin-top: 1.75rem;
  }

  .lp-claim-field {
    padding: 0.75rem 1.1rem;
  }

  .lp-claim .saas-button {
    width: 100%;
  }

}

/* — Calls to action along the way (2026-10-25, Ronald: "more CTAs along
   the way … experiment with different buttons") ——————————————
   One under a section where it fits, each its own kind and in the words
   of its section. Here: a prompt to an agent (what it builds) and a band
   of ink with a light pill (what it earns); the new sections keep theirs
   in their own sheets (saas/home/). Still, like the rest of the page: a
   hover changes colour and shadow, never place. Each names itself in its
   address (Saas::CallsToAction). */
.lp-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
}

.lp-cta-light {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radius-pill);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, color var(--dur-fast) ease;
}

/* On the ink stage and the band: paper light, with a violet glow. */
.lp-cta-light {
  background: var(--color-on-ink);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 18px 40px -18px rgba(124, 58, 237, 0.75);
  color: var(--color-ink);
}

/* A prompt to an agent: the orb, what a person might ask for, and the
   send button in the spectrum. */
.lp-cta-prompt {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: min(100%, 42rem);
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: var(--lp-shadow);
  color: var(--color-muted);
  text-decoration: none;
  transition: box-shadow var(--dur-fast) ease;
}

.lp-cta-prompt-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 1rem;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-cta-prompt-send {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.45em;
  padding: 0.8rem 1.3rem;
  border-radius: var(--radius-pill);
  background: var(--lp-spectrum);
  color: #fff;
  font-weight: 600;
}

/* A band of ink across the section: the promise, and the light pill. */
.lp-cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  padding: clamp(1.75rem, 1rem + 2vw, 2.75rem) clamp(1.5rem, 1rem + 2.5vw, 3.25rem);
  border-radius: var(--lp-radius);
  background:
    radial-gradient(40rem 18rem at 100% 0%, rgba(124, 58, 237, 0.45), transparent 60%),
    var(--color-ink);
  color: var(--color-on-ink);
}

.lp-cta-band p {
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 1rem + 1.6vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.lp-cta-band p em {
  background: linear-gradient(100deg, #8fb0ff 0%, #b79cff 60%, #e3a6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (hover: hover) {

  .lp-cta-light:hover {
    background: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 22px 48px -18px rgba(124, 58, 237, 0.95);
  }

  .lp-cta-prompt:hover {
    box-shadow: var(--lp-shadow), 0 0 0 2px var(--color-accent);
  }
}

@media (max-width: 40rem) {
  .lp-cta-prompt-text {
    display: none;
  }

  .lp-cta-prompt {
    justify-content: space-between;
    width: auto;
  }

  .lp-cta-band {
    justify-content: center;
    text-align: center;
  }
}