/* Halevora API — public landing page.

   Dense, not airy. The earlier versions treated whitespace as quality and read
   as barren; a marketing surface has to fill its folds. So: a bento of unequal
   cells that each carry a visual, an ambient light field, a live tape in the
   hero, and a drenched close. Tokens come from styles.css so this and the
   console stay one product. See DESIGN.md. */

.landing {
  --lp-ground: oklch(0.125 0.007 265);
  --lp-panel: oklch(0.175 0.007 265);
  --lp-panel-2: oklch(0.205 0.008 265);

  /* the money thread: the payoff word, every figure, and the closing field */
  --lp-money: oklch(0.84 0.135 78);
  --lp-close-ink: oklch(0.19 0.025 78);

  --lp-lit: inset 0 1px 0 oklch(1 0 0 / 0.08);
  --lp-shadow: 0 30px 70px oklch(0.04 0 0 / 0.6), 0 3px 12px oklch(0.04 0 0 / 0.4);
  --lp-shadow-sm: 0 14px 34px oklch(0.04 0 0 / 0.5);
  --lp-rule: oklch(0.34 0.008 265 / 0.5);
  --lp-mask: #000;

  /* tighter than before. The page should feel loaded, not spacious. */
  --lp-display: clamp(2.7rem, 1.2rem + 5.6vw, 5.5rem);
  --lp-h2: clamp(1.8rem, 1.1rem + 2.2vw, 2.9rem);
  --lp-h3: clamp(1rem, 0.94rem + 0.28vw, 1.15rem);
  --lp-lede: clamp(1.02rem, 0.94rem + 0.45vw, 1.22rem);
  --lp-gap: clamp(3.25rem, 1.6rem + 5vw, 6rem);
  --lp-pad: clamp(1.1rem, 0.4rem + 3.2vw, 3.75rem);

  --lp-sans: Archivo, ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --lp-mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;

  background: var(--lp-ground);
  font-family: var(--lp-sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

/* Grain, so the dark is a material rather than an absence of light. */
.landing::after {
  content: '';
  position: fixed; inset: 0; z-index: 3;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Ambient light. Three slow sources so the page is never flat black behind the
   content, drifting just enough to feel alive without asking to be watched. */
.lp-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lp-aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
}
.lp-aurora i:nth-child(1) {
  top: -18%; right: -8%; width: 58vw; height: 58vw;
  background: radial-gradient(circle, oklch(0.84 0.135 78 / 0.14), transparent 68%);
}
.lp-aurora i:nth-child(2) {
  top: 34%; left: -18%; width: 52vw; height: 52vw;
  background: radial-gradient(circle, oklch(0.62 0.15 250 / 0.13), transparent 68%);
}
.lp-aurora i:nth-child(3) {
  bottom: 4%; right: 8%; width: 46vw; height: 46vw;
  background: radial-gradient(circle, oklch(0.75 0.13 158 / 0.08), transparent 68%);
}
@media (prefers-reduced-motion: no-preference) {
  .lp-aurora i:nth-child(1) { animation: lp-drift-a 26s ease-in-out infinite alternate; }
  .lp-aurora i:nth-child(2) { animation: lp-drift-b 32s ease-in-out infinite alternate; }
  .lp-aurora i:nth-child(3) { animation: lp-drift-a 38s ease-in-out infinite alternate; }
}
@keyframes lp-drift-a { to { transform: translate3d(-6%, 7%, 0) scale(1.12); } }
@keyframes lp-drift-b { to { transform: translate3d(8%, -6%, 0) scale(1.08); } }

main, .lp-header, .lp-footer { position: relative; z-index: 2; }

.landing h1, .landing h2, .landing h3 { text-wrap: balance; }
.landing p { text-wrap: pretty; }

.landing .money,
.landing .lp-shot b, .landing .lp-shot td, .landing .lp-shot th,
.landing .lp-url, .landing .lp-counter, .landing .lp-strip dd,
.landing .mono {
  font-family: var(--lp-mono);
  font-variant-numeric: tabular-nums;
}
.landing .money { color: var(--lp-money); }

/* --- controls -------------------------------------------------------------- */

.landing .btn {
  border-radius: var(--r-2);
  box-shadow: var(--lp-lit);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.landing .btn.primary { box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.5), 0 10px 26px oklch(0.04 0 0 / 0.5); }
.landing .btn:hover { border-color: var(--line-strong); }
.landing .btn:active { transform: translateY(1px); }

/* --- header ---------------------------------------------------------------- */

.lp-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--s-6);
  padding: var(--s-3) var(--lp-pad);
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklch, var(--lp-ground) 78%, transparent);
  backdrop-filter: blur(16px) saturate(1.5);
}
.lp-brand { display: flex; align-items: center; gap: var(--s-2); font-weight: 700; font-size: 15px; letter-spacing: -0.015em; }
.lp-header-nav { display: flex; gap: var(--s-5); margin-left: auto; font-size: 13.5px; }
.lp-header-nav a { color: var(--ink-2); transition: color var(--fast) var(--ease); }
.lp-header-nav a:hover { color: var(--ink); }
.lp-nav-cta { margin-left: var(--s-2); }

/* --- hero ------------------------------------------------------------------ */

.lp-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
  padding: clamp(3rem, 1.5rem + 4vw, 5.5rem) var(--lp-pad) var(--lp-gap);
}
.lp-hero > *:not(.lp-grid-field) { position: relative; }

.lp-grid-field {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--lp-rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--lp-rule) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 10%, var(--lp-mask) 0%, transparent 74%);
  opacity: 0.4;
}

.lp-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: color-mix(in oklch, var(--lp-panel) 80%, transparent);
  font-size: 12.5px; color: var(--ink-2);
  margin-bottom: var(--s-5);
}
.lp-badge i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lp-money);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--lp-money) 22%, transparent);
}

.lp-hero h1 {
  margin: 0;
  font-size: var(--lp-display);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: 800;
}
.lp-hero h1 em { font-style: normal; color: var(--lp-money); }

.lp-lede { margin: var(--s-5) 0 0; max-width: 44ch; font-size: var(--lp-lede); line-height: 1.58; color: var(--ink-2); }
.lp-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.lp-cta { height: 48px; padding: 0 var(--s-6); font-size: 15px; font-weight: 600; }

/* the strip fills what used to be dead space under the buttons */
.lp-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  margin: var(--s-7) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.lp-strip div { min-width: 0; }
.lp-strip dt { font-size: 11.5px; color: var(--ink-3); margin: 0; }
.lp-strip dd { margin: 4px 0 0; font-size: clamp(1.05rem, 0.8rem + 0.7vw, 1.4rem); font-weight: 600; letter-spacing: -0.03em; }

@media (prefers-reduced-motion: no-preference) {
  .lp-badge, .lp-hero h1, .lp-lede, .lp-actions, .lp-strip, .lp-tape, .lp-float {
    animation: lp-rise 720ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }
  .lp-hero h1 { animation-delay: 60ms; }
  .lp-lede { animation-delay: 120ms; }
  .lp-actions { animation-delay: 180ms; }
  .lp-strip { animation-delay: 240ms; }
  .lp-tape { animation-delay: 140ms; }
  .lp-float-a { animation-delay: 520ms; }
  .lp-float-b { animation-delay: 660ms; }
}
@keyframes lp-rise { from { opacity: 0; transform: translateY(16px); } }

/* --- the tape -------------------------------------------------------------- */

.lp-stage-wrap { position: relative; }

.lp-tape {
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  background: color-mix(in oklch, var(--lp-panel) 92%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: var(--lp-lit), var(--lp-shadow);
  overflow: hidden;
}
.lp-tape-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-5);
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklch, var(--lp-money) 6%, transparent);
}
.lp-tape-label { display: block; font-size: 12px; color: var(--ink-2); }
.lp-counter {
  font-size: clamp(2rem, 1rem + 2.5vw, 3.25rem);
  font-weight: 600; letter-spacing: -0.04em; line-height: 1;
  margin-top: 7px;
  color: var(--lp-money);
}
.lp-tape-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; }
.lp-stream { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink-2); }
.lp-stream i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--positive);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--positive) 20%, transparent);
}
.lp-tape-sub { font-size: 11px; color: var(--ink-3); }

.lp-feed { list-style: none; margin: 0; padding: 0; }
.lp-feed-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.95fr auto;
  grid-template-areas: "kind campaign id amount";
  align-items: center; gap: var(--s-3);
  padding: 12px var(--s-5);
  border-bottom: 1px solid color-mix(in oklch, var(--line) 45%, transparent);
  font-size: 12.5px;
}
.lp-feed-row:last-child { border-bottom: none; }
.lp-feed-kind { grid-area: kind; display: flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 500; }
.lp-feed-kind i { width: 6px; height: 6px; border-radius: 50%; background: var(--positive); flex: none; }
.lp-feed-campaign { grid-area: campaign; color: var(--ink-2); }
.lp-feed-id { grid-area: id; color: var(--ink-3); font-size: 11px; }
.lp-feed-amount { grid-area: amount; text-align: right; font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  .lp-feed-row.is-new { animation: lp-arrive 640ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }
}
@keyframes lp-arrive {
  0% { opacity: 0; transform: translateY(-14px); background-color: color-mix(in oklch, var(--lp-money) 16%, transparent); }
  60% { background-color: color-mix(in oklch, var(--lp-money) 7%, transparent); }
  100% { opacity: 1; transform: none; background-color: transparent; }
}

.lp-tape figcaption { padding: var(--s-3) var(--s-5) var(--s-4); font-size: 11px; color: var(--ink-3); border-top: 1px solid var(--line); }

/* floating chips, so the hero has depth rather than one flat rectangle */
.lp-float {
  position: absolute;
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px var(--s-4) 10px var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  background: color-mix(in oklch, var(--lp-panel-2) 94%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--lp-lit), var(--lp-shadow-sm);
  font-size: 12px;
  white-space: nowrap;
}
.lp-float b { display: block; color: var(--ink); font-weight: 600; font-size: 12.5px; }
.lp-float small { display: block; color: var(--ink-3); font-size: 11px; }
.lp-float-a { top: -22px; right: 28px; }
/* bottom-right, because the caption sits bottom-left inside the panel */
.lp-float-b { bottom: -26px; right: 34px; }
.lp-chip-code {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  border-radius: var(--r-2);
  background: color-mix(in oklch, var(--positive) 18%, transparent);
  color: var(--positive);
  font-size: 11px; font-weight: 600;
}
.lp-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ink-3); }
.lp-dot.ok { background: var(--positive); box-shadow: 0 0 0 3px color-mix(in oklch, var(--positive) 20%, transparent); }

/* --- platform strip -------------------------------------------------------- */

.lp-marquee-wrap {
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  padding: var(--s-5) var(--lp-pad);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklch, var(--lp-panel) 45%, transparent);
}
.lp-marquee-label { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.lp-marquee { display: flex; gap: var(--s-3); flex-wrap: wrap; flex: 1; }
.lp-platform {
  display: flex; align-items: center; gap: 9px;
  padding: 9px var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--lp-panel);
  box-shadow: var(--lp-lit);
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.lp-platform span { font-weight: 400; font-size: 11.5px; color: var(--ink-3); }
.lp-p-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--positive); flex: none; }

/* --- sections -------------------------------------------------------------- */

.lp-section { padding: var(--lp-gap) var(--lp-pad); }
.lp-section-head { max-width: 60ch; margin-bottom: var(--s-7); }
.lp-section-head h2 {
  margin: 0;
  font-size: var(--lp-h2);
  line-height: 1.02; letter-spacing: -0.035em; font-weight: 800;
}
.lp-section-head p { margin: var(--s-3) 0 0; font-size: var(--lp-lede); color: var(--ink-2); }

/* --- the bento ------------------------------------------------------------- */

.lp-bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-4);
}
.lp-cell {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: color-mix(in oklch, var(--lp-panel) 88%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: var(--lp-lit), 0 12px 32px oklch(0.04 0 0 / 0.32);
  padding: var(--s-5);
  gap: var(--s-4);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.lp-cell:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.lp-cell-copy h3 { margin: 0 0 6px; font-size: var(--lp-h3); font-weight: 700; letter-spacing: -0.02em; }
.lp-cell-copy p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.lp-cell-foot { margin-top: auto; font-size: 12px; color: var(--ink-3); }
.lp-cell-foot .money { font-weight: 600; }

.lp-cell-console { grid-column: span 4; grid-row: span 2; }
.lp-cell-cohort  { grid-column: span 2; grid-row: span 2; }
.lp-cell-clicks  { grid-column: span 3; }
.lp-cell-link    { grid-column: span 3; }
.lp-cell-fans    { grid-column: span 2; }
.lp-cell-pages   { grid-column: span 2; }
.lp-cell-privacy { grid-column: span 2; }

.lp-cell-console { padding: 0; gap: 0; overflow: hidden; }
.lp-cell-console .lp-cell-copy { padding: var(--s-4) var(--s-5) var(--s-5); border-top: 1px solid var(--line); }

/* console preview */
.lp-shot { background: color-mix(in oklch, var(--lp-ground) 70%, var(--lp-panel)); }
.lp-shot-bar {
  display: flex; gap: 6px; align-items: center;
  padding: 10px var(--s-4);
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklch, var(--lp-ground) 55%, transparent);
}
.lp-shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-2); }
.lp-shot-bar span { margin-left: var(--s-2); font-size: 11px; color: var(--ink-3); }
.lp-shot-body { padding: var(--s-5); }
.lp-shot-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(134px, 1fr));
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.lp-shot-stats span { display: block; font-size: 12px; color: var(--ink-2); }
.lp-shot-stats b { display: block; margin-top: 5px; font-size: clamp(18px, 1.3vw, 23px); font-weight: 500; letter-spacing: -0.025em; }
.lp-shot-stats b.money { font-size: clamp(21px, 1.6vw, 27px); font-weight: 600; }

.lp-shot-table { width: 100%; border-collapse: collapse; margin-top: var(--s-4); font-size: 12px; }
.lp-shot-table th { text-align: left; font-weight: 400; color: var(--ink-3); padding: var(--s-2) 6px; border-bottom: 1px solid var(--line); }
.lp-shot-table td { padding: 10px 6px; border-bottom: 1px solid color-mix(in oklch, var(--line) 50%, transparent); }
.lp-shot-table tr:last-child td { border-bottom: none; }
.lp-shot-table .r { text-align: right; }
.lp-shot-table td small { display: block; color: var(--ink-3); font-size: 11px; margin-top: 1px; }
.lp-row { display: flex; align-items: center; gap: var(--s-2); }
.lp-av {
  width: 21px; height: 21px; flex: none;
  border-radius: var(--r-1);
  background: var(--surface-2); color: var(--ink-2);
  display: grid; place-items: center;
  font-family: var(--lp-sans); font-size: 10px; font-weight: 700; font-style: normal;
  box-shadow: var(--lp-lit);
}
.lp-row-name { min-width: 0; }

/* time to profit */
.lp-bars { display: flex; align-items: flex-end; gap: 7px; height: 128px; margin-top: auto; }
.lp-bars > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 6px; }
.lp-bars i {
  display: block; height: var(--h);
  border-radius: var(--r-0) var(--r-0) 0 0;
  background: var(--lp-money); opacity: 0.35;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.28);
}
.lp-bars > div:last-child i { opacity: 1; box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.4), 0 0 22px color-mix(in oklch, var(--lp-money) 45%, transparent); }
.lp-bars span { font-size: 10.5px; color: var(--ink-3); text-align: center; font-family: var(--lp-mono); }

/* click quality */
.lp-click-list { margin-top: auto; }
.lp-click-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 8px 0;
  font-size: 12.5px; color: var(--ink-2);
  border-bottom: 1px solid color-mix(in oklch, var(--line) 45%, transparent);
}
.lp-click-row:last-child { border-bottom: none; }
.lp-click-row.is-muted { opacity: 0.5; }
.lp-flag { font-family: var(--lp-mono); font-size: 11px; color: var(--ink-3); width: 22px; flex: none; }
.lp-click-row span:nth-child(2) { flex: 1; }
.lp-tag { font-size: 10.5px; padding: 2px 7px; border-radius: var(--r-1); border: 1px solid var(--line); color: var(--ink-3); }
.lp-tag.good { color: var(--positive); border-color: color-mix(in oklch, var(--positive) 40%, transparent); background: color-mix(in oklch, var(--positive) 10%, transparent); }
.lp-tag.warn { color: var(--caution); border-color: color-mix(in oklch, var(--caution) 40%, transparent); background: color-mix(in oklch, var(--caution) 10%, transparent); }

/* the link */
.lp-url {
  display: flex; flex-wrap: wrap; align-items: baseline;
  font-size: clamp(0.82rem, 0.6rem + 0.55vw, 1.05rem);
  line-height: 2.1;
  word-break: break-word;
  margin-top: auto;
}
.lp-url-sep { color: var(--ink-3); }
.lp-url-part { padding: 2px 4px; border-radius: var(--r-1); border-bottom: 2px solid currentColor; }
.lp-url-part[data-part="domain"] { color: var(--ink); }
.lp-url-part[data-part="code"] { color: var(--accent-ink); }
.lp-url-part[data-part="click"] { color: var(--lp-money); }
.lp-url-part[data-part="utm"] { color: var(--ink-3); }
.lp-url-legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: var(--s-3) 0 0; padding: 0; font-size: 11.5px; color: var(--ink-3); }
.lp-url-legend li { display: flex; align-items: center; gap: 6px; }
.lp-url-legend li::before { content: ''; width: 14px; height: 2px; border-radius: 1px; background: currentColor; }
.lp-url-legend li[data-part="domain"] { color: var(--ink); }
.lp-url-legend li[data-part="code"] { color: var(--accent-ink); }
.lp-url-legend li[data-part="click"] { color: var(--lp-money); }

/* fans */
.lp-fans { margin-top: auto; display: grid; gap: 2px; }
.lp-fans > div {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in oklch, var(--line) 45%, transparent);
  font-size: 12.5px; color: var(--ink-2);
}
.lp-fans > div:last-child { border-bottom: none; }
.lp-fans span { flex: 1; }
.lp-fans b { font-family: var(--lp-mono); font-weight: 500; }

/* fifty versus all of them */
.lp-pages { margin-top: auto; display: flex; align-items: center; gap: var(--s-3); }
.lp-pages > div { flex: 1; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-2); text-align: center; }
.lp-pages span { display: block; font-size: 11px; color: var(--ink-3); }
.lp-pages b { display: block; margin-top: 3px; font-family: var(--lp-mono); font-size: 22px; font-weight: 600; letter-spacing: -0.03em; }
.lp-pages-bad { opacity: 0.5; }
.lp-pages-bad b { text-decoration: line-through; }
.lp-pages-good { border-color: color-mix(in oklch, var(--lp-money) 45%, transparent) !important; background: color-mix(in oklch, var(--lp-money) 8%, transparent); }
.lp-pages-arrow { color: var(--ink-3); font-size: 16px; flex: none !important; padding: 0 !important; border: none !important; }

/* privacy */
.lp-privacy { margin-top: auto; display: grid; gap: 2px; font-size: 12px; }
.lp-privacy > div {
  display: flex; justify-content: space-between; gap: var(--s-3);
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in oklch, var(--line) 45%, transparent);
}
.lp-privacy > div:last-child { border-bottom: none; }
.lp-privacy span { color: var(--ink-3); }
.lp-privacy b { font-weight: 500; color: var(--ink-2); }
.lp-strike { text-decoration: line-through; color: var(--ink-3) !important; }
.lp-yes { color: var(--positive) !important; }

/* --- the chain ------------------------------------------------------------- */

.lp-chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.lp-chain li {
  position: relative;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: color-mix(in oklch, var(--lp-panel) 70%, transparent);
  box-shadow: var(--lp-lit);
}
.lp-chain li::after {
  content: '';
  position: absolute;
  top: 50px; left: calc(100% + 1px);
  width: var(--s-4); height: 1px;
  background-image:
    linear-gradient(90deg, transparent, var(--lp-money), transparent),
    linear-gradient(90deg, var(--line-strong), var(--line-strong));
  background-size: 60% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: -60% 0, 0 0;
}
.lp-chain li:last-child::after { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .lp-chain li::after { animation: lp-sweep 3.4s linear infinite; }
  .lp-chain li:nth-child(2)::after { animation-delay: 0.4s; }
  .lp-chain li:nth-child(3)::after { animation-delay: 0.8s; }
}
@keyframes lp-sweep { from { background-position: -60% 0, 0 0; } to { background-position: 160% 0, 0 0; } }

.lp-chain-node {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  background: var(--lp-panel-2);
  color: var(--ink-2);
  margin-bottom: var(--s-4);
  box-shadow: var(--lp-lit), 0 6px 16px oklch(0.04 0 0 / 0.35);
}
.lp-chain-node svg { width: 21px; height: 21px; }
.lp-chain-node.is-end {
  border-color: color-mix(in oklch, var(--lp-money) 60%, transparent);
  color: var(--lp-money);
  box-shadow: var(--lp-lit), 0 0 26px color-mix(in oklch, var(--lp-money) 28%, transparent);
}
.lp-chain h3 { margin: 0 0 6px; font-size: var(--lp-h3); font-weight: 700; letter-spacing: -0.02em; }
.lp-chain p { margin: 0; color: var(--ink-2); font-size: 13.5px; }

/* --- what it will not do --------------------------------------------------- */

@media (min-width: 1000px) {
  .lp-limits { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-8); align-items: center; }
  .lp-limits .lp-section-head { margin-bottom: 0; }
}
.lp-limits-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.lp-limits-list li {
  position: relative;
  padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-6) + var(--s-3));
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: color-mix(in oklch, var(--lp-panel) 60%, transparent);
  color: var(--ink-2);
  font-size: 14px;
}
.lp-limits-list li::before {
  content: '';
  position: absolute; left: var(--s-4); top: calc(var(--s-4) + 4px);
  width: 13px; height: 13px;
  border: 1px solid color-mix(in oklch, var(--critical) 55%, transparent);
  border-radius: 50%;
  background: linear-gradient(45deg, transparent 44%, var(--critical) 44%, var(--critical) 56%, transparent 56%);
}
.lp-limits-list b { color: var(--ink); font-weight: 700; }

/* --- the drenched close ----------------------------------------------------
   Every other section is near-black. Ending on a full field of the money
   colour is the one moment the brand raises its voice. */

.lp-close {
  position: relative;
  padding: clamp(4rem, 2rem + 6vw, 7.5rem) var(--lp-pad);
  background: var(--lp-money);
  color: var(--lp-close-ink);
  text-align: center;
  overflow: hidden;
}
.lp-close::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(oklch(0.2 0.03 78 / 0.11) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.2 0.03 78 / 0.11) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(ellipse 70% 100% at 50% 50%, var(--lp-mask) 0%, transparent 76%);
}
.lp-close > * { position: relative; }
.lp-close h2 { margin: 0; font-size: clamp(2.3rem, 1rem + 4.8vw, 4.75rem); line-height: 0.94; letter-spacing: -0.042em; font-weight: 900; }
.lp-close p { margin: var(--s-5) auto var(--s-6); max-width: 46ch; font-size: var(--lp-lede); color: oklch(0.34 0.06 78); }
.lp-close-cta {
  height: 54px; padding: 0 var(--s-7);
  font-size: 16px; font-weight: 700;
  background: var(--lp-close-ink); color: var(--lp-money);
  border-color: transparent;
  box-shadow: 0 14px 34px oklch(0.2 0.05 78 / 0.4);
}
.lp-close-cta:hover { background: oklch(0.24 0.03 78); border-color: transparent; }

/* --- footer ---------------------------------------------------------------- */

.lp-footer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) var(--lp-pad);
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-3);
}
.lp-footer a { color: var(--ink-2); }
.lp-footer a:hover { color: var(--ink); }

/* --- responsive ------------------------------------------------------------ */

@media (max-width: 1180px) {
  .lp-cell-console { grid-column: span 6; grid-row: auto; }
  .lp-cell-cohort { grid-column: span 3; grid-row: auto; }
  .lp-cell-clicks { grid-column: span 3; }
  .lp-cell-link { grid-column: span 6; }
  .lp-cell-fans, .lp-cell-pages, .lp-cell-privacy { grid-column: span 2; }
  .lp-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-chain li::after { display: none; }
}

@media (max-width: 900px) {
  .lp-hero { grid-template-columns: 1fr; }
  .lp-header-nav { display: none; }
  .lp-nav-cta { margin-left: auto; }
  .lp-float { display: none; }
  .lp-cell-cohort, .lp-cell-clicks { grid-column: span 6; }
  .lp-cell-fans, .lp-cell-pages, .lp-cell-privacy { grid-column: span 3; }
  /* the label and the badges fight over one line on a phone */
  .lp-marquee-wrap { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .lp-marquee { width: 100%; }
  .lp-platform { flex: 1 1 auto; }
}

@media (max-width: 720px) {
  .lp-chain { grid-template-columns: 1fr; }
  .lp-cell-fans, .lp-cell-pages, .lp-cell-privacy { grid-column: span 6; }
  .lp-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .lp-feed-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "kind amount" "campaign id";
    row-gap: 3px; padding: 12px var(--s-4);
  }
  .lp-feed-id { text-align: right; }
  .lp-tape-head { padding: var(--s-4); }
  .lp-tape figcaption { padding-left: var(--s-4); padding-right: var(--s-4); }
}

@media (max-width: 560px) {
  .lp-shot-table th:nth-child(2), .lp-shot-table td:nth-child(2),
  .lp-shot-table th:nth-child(3), .lp-shot-table td:nth-child(3) { display: none; }
  .lp-shot-table th:last-child, .lp-shot-table td:last-child { white-space: nowrap; }
  .lp-shot-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
  .lp-shot-body { padding: var(--s-4); }
}