/* ── Public landing v2 "See the whole market" (T-STORY). Tokens only.
   orange (--accent) = act; seal (--seal) = knowledge. Loaded on the story
   landing (/preview) only. All classes lp2-*. ── */

.lp2 { --lp2-max: 1120px; color: var(--ink);
  /* The pricing card is the old .lp-price-card skeleton, whose CSS reads --lp-*
     vars defined only in the .lp wrapper. Map them to tokens here so the ribbon
     ("14-day free trial …") and its accents aren't white-on-white. */
  --lp-accent: var(--accent); --lp-ink: var(--ink); --lp-line: var(--line);
  --lp-seal: var(--seal); --lp-soft: var(--ink-soft); --lp-paper: var(--paper); }
.lp2-shell { max-width: var(--lp2-max); margin: 0 auto; padding: 0 var(--s5); }
.lp2-measure { max-width: 720px; }

/* Reveal system (§3): initial hidden state applied ONLY when JS has booted
   (root gets .lp2-rv-on) and only when motion is allowed → content is always
   visible without JS / under reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .lp2-rv-on [data-rv] { opacity: 0; transform: translateY(14px); }
  .lp2-rv-on [data-rv].is-in {
    opacity: 1; transform: none;
    transition: opacity .48s cubic-bezier(.22,.61,.36,1),
                transform .48s cubic-bezier(.22,.61,.36,1);
    transition-delay: calc(var(--rvi, 0) * 60ms);
  }
}

/* ── Hero ── */
.lp2-hero { padding: var(--s8) 0 calc(var(--s7) + var(--s5)); background: var(--paper); text-align: center; }
.lp2-hero-inner { max-width: 860px; }
.lp2-h1 { font-family: var(--font-display, inherit); font-weight: 800;
  font-size: clamp(34px, 5.2vw, var(--t-2xl)); line-height: 1.06; letter-spacing: -.02em;
  margin: 0 auto; max-width: 16ch; text-wrap: balance; }
.lp2-sub { font-size: var(--t-md); color: var(--ink-soft); line-height: 1.5;
  max-width: 56ch; margin: var(--s4) auto 0; }
.lp2-cta-row { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap;
  margin-top: var(--s5); }
.lp2-cta-center { margin-top: var(--s4); }
.lp2-btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--r-card); }
.lp2-btn-ghost:hover { border-color: var(--seal); color: var(--seal); }
.lp2-trust { font-size: var(--t-sm); color: var(--ink-soft); margin: var(--s3) auto 0; }
.lp2-coverage { font-size: var(--t-sm); color: var(--seal); font-weight: 600;
  margin: var(--s2) auto 0; max-width: 60ch; }

/* Hero CTAs run ~20% smaller than the shared .btn-lg: at full size they crowded
   the headline and the lookup console below. Scoped to the hero so the same
   .btn-lg elsewhere (pricing card, final CTA) keeps its weight. */
.lp2-hero .lp2-cta-row .btn.btn-lg { font-size: 14.5px; padding: 11px 26px; }

/* hero trust chips — the reassurance that used to sit under the old hero CTA */
.lp2-trustline { list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s2) var(--s4); margin: var(--s4) 0 0; padding: 0; }
.lp2-trustline li { display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-xs); color: var(--ink-soft); }
.lp2-trustline svg { color: var(--seal); flex: none; }

/* ── "Look it up" console ──────────────────────────────────────────────────
   Promoted into the hero and rebuilt as a console rather than a form: a live
   badge, one dominant search field, and four buyer cards that look like the
   product's own rows. The point is that a stranger presses something within
   seconds of landing, so the search bar is the loudest object in the panel. */
/* The timeline's closing caption sits directly above this panel and was reading
   as the panel's own headline. A hairline plus real breathing room ends the
   timeline's thought before the console starts its own.
   Both selectors are doubled up on purpose: the generic `.lp2-lookup` rule lower
   in this file sets `margin: 0 auto`, which silently ate a single-class
   margin-top here. */
.lp2-lookup.lp2-lookup-hero { margin-top: 68px; max-width: 620px; }
.lp2-lookup.lp2-lookup-hero::after { content: ""; position: absolute; top: -38px;
  left: 50%; transform: translateX(-50%); width: 56px; height: 1px;
  background: var(--line); }
.lp2-lookup-hero { position: relative;
  padding: var(--s5) var(--s5) var(--s4); text-align: start;
  background:
    radial-gradient(120% 140% at 50% -30%, var(--seal-wash) 0%, transparent 62%),
    var(--surface);
  border: 1px solid var(--line); border-radius: calc(var(--r-card) + 6px);
  box-shadow: 0 18px 50px rgba(22,85,122,.10), 0 2px 6px rgba(22,85,122,.05); }
/* Accent rule along the top edge. It is painted as this pseudo-element's
   BACKGROUND rather than as its box, so the panel's curve clips it.
   A 2px-tall box cannot render a 10px corner: per spec, radii that exceed their
   edge are all scaled down proportionally, so the previous
   `height:2px; border-radius:16px 16px 0 0` rendered as 2px corners and left
   ~7px of square bar sitting outside the panel's rounded top. Sizing the
   element to the whole panel and inheriting its radius means the strip is
   clipped by the same curve the panel has, whatever --r-card becomes. */
.lp2-lookup-hero::before { content: ""; position: absolute; inset: 0;
  pointer-events: none; border-radius: inherit;
  background: linear-gradient(90deg, var(--seal), var(--accent))
              top / 100% 2px no-repeat;
  opacity: .85; }
.lp2-lk-top { text-align: center; }
.lp2-lk-eyebrow { display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--seal); background: var(--seal-wash); border-radius: 999px; padding: 3px 11px; }
.lp2-lk-live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent); animation: lp2-lk-pulse 2.4s ease-out infinite; }
@keyframes lp2-lk-pulse {
  0% { box-shadow: 0 0 0 0 rgba(226,114,52,.55); }
  70% { box-shadow: 0 0 0 7px rgba(226,114,52,0); }
  100% { box-shadow: 0 0 0 0 rgba(226,114,52,0); }
}
@media (prefers-reduced-motion: reduce) { .lp2-lk-live { animation: none; } }
.lp2-lookup-hero .lp2-lookup-h { font-size: var(--t-lg); font-weight: 800;
  letter-spacing: -.015em; margin: var(--s3) 0 0; }
.lp2-lookup-hero .lp2-lookup-sub { margin: var(--s2) auto 0; max-width: 46ch;
  font-size: var(--t-sm); }
.lp2-lookup-hero .lp2-lookup-form { margin: var(--s4) auto 0; max-width: 480px; }
.lp2-lookup-hero .lp2-lookup-field { position: relative; gap: 0; align-items: center;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 4px 4px 4px 14px; transition: border-color .18s ease, box-shadow .18s ease; }
.lp2-lookup-hero .lp2-lookup-field:focus-within { border-color: var(--seal);
  box-shadow: 0 0 0 4px var(--seal-wash); }
.lp2-lk-ic { flex: none; display: grid; place-items: center; color: var(--ink-soft); }
.lp2-lookup-hero .lp2-lookup-field input { border: 0; background: transparent;
  padding: 10px 12px; font-size: var(--t-sm); }
.lp2-lookup-hero .lp2-lookup-field input:focus { outline: none; box-shadow: none; }
.lp2-lookup-hero .lp2-lookup-field .btn { flex: none; border-radius: 999px;
  padding: 9px 20px; font-size: var(--t-sm); }

/* buyer cards — the product's own row, shrunk. Monogram + name + live counts. */
.lp2-lk-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3); margin-top: var(--s5); }
.lp2-lk-card { display: flex; align-items: center; gap: var(--s3); min-width: 0;
  padding: 10px 12px; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.lp2-lk-card:hover { border-color: var(--seal); transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(22,85,122,.10); }
.lp2-lk-card:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }
.lp2-lk-mono { flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background: var(--seal-wash); color: var(--seal);
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .02em; }
.lp2-lk-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lp2-lk-name { font-size: var(--t-sm); font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp2-lk-meta { font-size: var(--t-xs); color: var(--ink-soft); display: flex;
  align-items: center; gap: 6px; flex-wrap: wrap; }
.lp2-lk-meta b { color: var(--seal); font-size: var(--t-sm); }
.lp2-lk-new { color: var(--accent-ink); background: var(--accent-wash);
  border-radius: 999px; padding: 0 7px; font-weight: 700; white-space: nowrap; }
.lp2-lk-go { flex: none; color: var(--line); display: grid; place-items: center;
  transition: color .18s ease, transform .18s ease; }
.lp2-lk-card:hover .lp2-lk-go { color: var(--seal); transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .lp2-lk-card, .lp2-lk-go { transition: none; }
  .lp2-lk-card:hover { transform: none; }
  .lp2-lk-card:hover .lp2-lk-go { transform: none; }
}

.lp2-lk-foot { display: flex; align-items: center; justify-content: center; gap: var(--s3);
  flex-wrap: wrap; margin-top: var(--s4); }
.lp2-lk-more { font-size: var(--t-sm); font-weight: 600; color: var(--seal);
  text-decoration: none; }
.lp2-lk-more:hover { text-decoration: underline; }
.lp2-lk-sep { color: var(--line); }
.lp2-lookup-hero .lp2-lookup-note { text-align: center; margin-top: var(--s3); }

@media (max-width: 620px) {
  .lp2-lk-cards { grid-template-columns: 1fr; }
  .lp2-lookup-hero { padding: var(--s4) var(--s4) var(--s3); }
  .lp2-lookup-hero .lp2-lookup-field { flex-wrap: nowrap; }
  .lp2-lookup-hero .lp2-lookup-field .btn { padding: 9px 14px; }
}

/* sticky CTA — travels with the reader once the hero is gone */
.lp2-sticky { position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 140%);
  z-index: 60; display: flex; align-items: center; gap: var(--s3);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 8px 8px 20px; box-shadow: 0 10px 34px rgba(15,42,60,.16);
  transition: transform .32s cubic-bezier(.22,.61,.36,1); max-width: calc(100vw - 24px); }
.lp2-sticky.is-on { transform: translate(-50%, 0); }
.lp2-sticky-msg { font-size: var(--t-sm); color: var(--ink); font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.lp2-sticky-cta { flex: none; border-radius: 999px; padding: 8px 18px; font-size: var(--t-sm); }
.lp2-sticky-x { flex: none; background: none; border: 0; cursor: pointer; color: var(--ink-soft);
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.lp2-sticky-x:hover { background: var(--paper); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .lp2-sticky { transition: none; } }
@media (max-width: 560px) {
  .lp2-sticky { left: 12px; right: 12px; bottom: 12px; transform: translateY(140%);
    max-width: none; padding: 8px 8px 8px 16px; }
  .lp2-sticky.is-on { transform: translateY(0); }
  .lp2-sticky-msg { font-size: var(--t-xs); white-space: normal; }
}

/* Trust note — a statement, not a testimonial card. No badge, no avatar: a short
   gradient rule opens it, the type carries the rest, and the signature sits in
   small letterspaced caps so it reads as a sign-off rather than a heading. */
.lp2-founder { padding: var(--s8) 0; background: var(--surface);
  border-block: 1px solid var(--line); }
.lp2-founder-inner { max-width: 660px; text-align: center; }
.lp2-founder-rule { display: block; width: 52px; height: 3px; margin: 0 auto var(--s5);
  border-radius: 3px; background: linear-gradient(90deg, var(--seal), var(--accent)); }
.lp2-founder-h { font-family: var(--font-display, inherit); font-size: var(--t-xl);
  font-weight: 800; line-height: 1.14; letter-spacing: -.02em; margin: 0;
  text-wrap: balance; }
.lp2-founder-b { font-size: var(--t-md); color: var(--ink-soft); line-height: 1.65;
  margin: var(--s4) auto 0; max-width: 58ch; }
.lp2-founder-sign { font-size: var(--t-xs); font-weight: 700; color: var(--seal);
  letter-spacing: .12em; text-transform: uppercase; margin: var(--s5) 0 0; }

/* proof chips */
.lp2-proof { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap;
  margin-top: var(--s6); }
.lp2-proof-chip { display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--seal-wash); border-radius: var(--r-card); padding: 10px 16px; min-width: 120px; }
.lp2-proof-chip b { font-size: var(--t-lg); color: var(--seal); line-height: 1; }
.lp2-proof-chip span { font-size: var(--t-xs); color: var(--ink-soft); text-align: center; }

/* ── Head-start timeline — vertical workflow (narrow + tall, each step distinct) ── */
.lp2-timeline { margin: var(--s6) auto 0; max-width: 500px; text-align: left; }
.lp2-tl-hs { margin: 0 0 var(--s3) 24px; }
.lp2-tl-hs .lp2-chip span { color: var(--seal); font-weight: 700; }
.lp2-tl-hs-span { display: none; }  /* desktop-only head-start bracket (see §880 block) */
.lp2-tl-steps { list-style: none; margin: 0; padding: 0; position: relative; }
/* the spine: seal for the head-start stretch (steps 1-3), gray to the award */
.lp2-tl-steps::before { content: ""; position: absolute; left: 20px; top: 14px; bottom: 20px; width: 2px;
  background: linear-gradient(var(--seal) 0%, var(--seal) 66%, var(--line) 66%, var(--line) 100%);
  opacity: .45; border-radius: 2px; }
.lp2-tl-step { position: relative; display: flex; gap: var(--s4); padding-bottom: var(--s4);
  align-items: flex-start; }
.lp2-tl-step:last-child { padding-bottom: 0; }
.lp2-tl-mark { flex: none; width: 15px; height: 15px; margin: 6px 0 0 13px; border-radius: 50%;
  background: var(--surface); border: 2.5px solid var(--line); box-shadow: 0 0 0 4px var(--paper);
  position: relative; z-index: 1; }
.lp2-tl-step.is-seal .lp2-tl-mark { border-color: var(--seal); }
.lp2-tl-step.is-you .lp2-tl-mark { width: 18px; height: 18px; margin: 5px 0 0 12px;
  border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }
.lp2-tl-card { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--line); border-radius: var(--r-card); padding: 11px 14px; }
.lp2-tl-step.is-you .lp2-tl-card { border-left-color: var(--accent); background: var(--accent-wash); }
.lp2-tl-step.is-seal .lp2-tl-card { border-left-color: var(--seal); }
.lp2-tl-card b { display: block; font-size: var(--t-sm); color: var(--ink); }
.lp2-tl-card small { display: block; font-size: var(--t-xs); color: var(--ink-soft); margin-top: 2px; }
.lp2-tl-flag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs);
  font-weight: 700; color: var(--accent-ink); background: var(--surface);
  border: 1px solid var(--accent); border-radius: 999px; padding: 1px 9px; margin-bottom: 6px; }
.lp2-tl-flagmark { color: var(--accent); }
.lp2-tl-mostchip { display: inline-block; font-size: var(--t-xs); color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 9px; margin-bottom: 6px; }
.lp2-tl-caption { font-size: var(--t-md); font-weight: 600; color: var(--ink);
  margin: var(--s5) 0 0; max-width: 42ch; }

/* ── Chapters ── */
.lp2-ch { padding: 60px 0; }
.lp2-ch:nth-of-type(even) { background: var(--surface); }
.lp2-ch-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s6) 64px; align-items: center; }
.lp2-ch-rev .lp2-ch-visual { order: -1; }
.lp2-kicker { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); margin-bottom: var(--s3); }
.lp2-kx { display: inline-grid; place-items: center; width: 22px; height: 22px;
  background: var(--seal-wash); color: var(--seal); border-radius: 6px; font-weight: 700; }
.lp2-ch-h { font-size: var(--t-xl); line-height: 1.12; letter-spacing: -.015em; margin: 0;
  text-wrap: balance; max-width: 18ch; }
.lp2-ch-b { font-size: var(--t-md); color: var(--ink-soft); line-height: 1.55;
  max-width: 56ch; margin: var(--s4) 0 0; }
.lp2-ch-sub { font-size: var(--t-md); color: var(--ink-soft); margin: var(--s3) 0 0; }
.lp2-head { text-align: center; max-width: 640px; margin: 0 auto var(--s6); }

/* Edge pill */
.lp2-edge-pill { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-xs);
  font-weight: 700; color: var(--seal); background: var(--seal-wash);
  border-radius: 999px; padding: 2px 9px; text-transform: none; letter-spacing: 0; }
.lp2-edge-pill svg { color: var(--accent); }

/* ── Product mocks ── */
.lp2-ch-visual { min-width: 0; }
.lp2-mock { position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s5); box-shadow: 0 8px 30px rgba(22,85,122,.06);
  pointer-events: none; min-height: 260px; }
.lp2-mock-edge { position: absolute; top: -10px; right: 14px; display: inline-flex; align-items: center;
  gap: 4px; font-size: 11px; font-weight: 700; color: var(--seal); background: var(--seal-wash);
  border: 1px solid var(--seal); border-radius: 999px; padding: 2px 9px; }
.lp2-mock-edge svg { color: var(--accent); }
.lp2-mock.lp2-mock-buyer, .lp2-mock.lp2-mock-fw { border-top: 2px solid var(--seal); }
.lp2-mk-head, .lp2-rd-head, .lp2-al-head { display: flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: var(--t-sm); }
.lp2-mk-tabs { display: flex; gap: 4px; margin: 12px 0; flex-wrap: wrap; }
.lp2-mk-tabs span { font-size: var(--t-xs); color: var(--ink-soft); padding: 3px 9px;
  border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.lp2-mk-tabs .is-on { background: var(--seal-wash); color: var(--seal); border-color: var(--seal); font-weight: 600; }
.lp2-mk-stats { display: flex; gap: var(--s4); margin-bottom: 6px; }
.lp2-mk-stats b { font-size: var(--t-lg); color: var(--ink); display: block; line-height: 1; }
.lp2-mk-stats small { font-size: 11px; color: var(--ink-soft); }
.lp2-mk-note { font-size: 11px; color: var(--seal); background: var(--seal-wash);
  display: inline-block; border-radius: 6px; padding: 2px 7px; margin-bottom: 10px; }
.lp2-mk-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.lp2-mk-rows li { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); }
.lp2-mk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.lp2-mk-dot.act { background: var(--accent); }
.lp2-mk-rn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp2-mk-rd { font-size: var(--t-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.lp2-mk-inc { margin-top: 10px; font-size: var(--t-xs); color: var(--ink-soft);
  display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.lp2-mk-inc svg { color: var(--accent); }

/* the dossier card is a REAL link now (chapter 02) — mocks are pointer-events:none,
   so the live one has to opt back in and earn a hover state. */
.lp2-mock-live { display: block; pointer-events: auto; text-decoration: none; color: inherit;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.lp2-mock-live:hover { border-color: var(--seal); transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(22,85,122,.12); }
.lp2-mock-live:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; }
.lp2-mk-rows li.is-locked { color: var(--ink-soft); }
.lp2-mk-lock { flex: none; display: grid; place-items: center; width: 8px; }
.lp2-mk-lock svg { color: var(--ink-soft); opacity: .7; }
.lp2-mk-rows li.is-locked .lp2-mk-rn { -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent);
  mask-image: linear-gradient(90deg, #000 60%, transparent); }
.lp2-mk-open { color: var(--seal); font-weight: 600; }
.lp2-mk-open svg { color: var(--seal); }
@media (prefers-reduced-motion: reduce) { .lp2-mock-live { transition: none; }
  .lp2-mock-live:hover { transform: none; } }

/* "Your next buyers" ranked-list mock */
.lp2-mock.lp2-mock-nb { border-top: 2px solid var(--seal); }
.lp2-nb-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex;
  flex-direction: column; gap: 10px; }
.lp2-nb-list li { display: flex; align-items: center; gap: 10px; }
.lp2-nb-rank { flex: none; width: 1em; text-align: center; font-size: var(--t-xs);
  color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.lp2-nb-score { flex: none; width: 32px; height: 32px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums; }
.lp2-nb-score.high { background: var(--ok-wash); color: var(--ok); }
.lp2-nb-score.mid { background: var(--seal-wash); color: var(--seal); }
.lp2-nb-b { display: flex; flex-direction: column; min-width: 0; }
.lp2-nb-b b { font-size: var(--t-sm); color: var(--ink); }
.lp2-nb-b small { font-size: 11px; color: var(--ink-soft); }

.lp2-fw-top { display: flex; align-items: center; gap: 12px; }
.lp2-rb-head { display: flex; align-items: center; gap: var(--s3); }
.lp2-rb-title { display: flex; flex-direction: column; min-width: 0; }
.lp2-rb-label { font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.lp2-fw-main { display: flex; flex-direction: column; gap: 2px; }
.lp2-fw-main b { font-size: var(--t-sm); }
.lp2-fw-main small { font-size: var(--t-xs); color: var(--ink-soft); }
.lp2-fw-flow { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px; }
.lp2-fw-flow li { font-size: var(--t-sm); color: var(--ink-soft); }
.lp2-fw-flow span { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.lp2-fw-flow i { font-style: normal; font-size: var(--t-xs); }

.lp2-rd-list, .lp2-al-list, .lp2-rb-list { list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }
.lp2-rd-list li, .lp2-al-list li { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); }
.lp2-rd-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp2-rd-d { font-size: var(--t-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.lp2-al-list li { color: var(--ink-soft); }
.lp2-al-foot { margin-top: 10px; font-size: var(--t-xs); color: var(--ink-soft);
  display: flex; align-items: center; gap: 6px; }

.lp2-rb-tally { font-size: var(--t-lg); font-weight: 800; color: var(--seal); line-height: 1.1; }
.lp2-rb-list li { display: flex; align-items: center; gap: 7px; font-size: var(--t-sm); }
.lp2-rb-list li.ok { color: var(--ink); }
.lp2-rb-list li.ok svg { color: var(--ok, #1E7F4F); }
.lp2-rb-list li.gap { color: var(--ink-soft); }
.lp2-rb-list li.gap svg { color: var(--accent); }
.lp2-rb-foot { margin-top: 10px; }

/* chips */
.lp2-chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs);
  font-weight: 600; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.lp2-chip-seal { background: var(--seal-wash); color: var(--seal); }
.lp2-chip-plan { background: var(--seal-wash); color: var(--seal); }
.lp2-chip-act { background: var(--accent-wash); color: var(--accent-ink); }
.lp2-chip-live { background: var(--accent); color: #fff; }
.lp2-track-chips { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); }

/* ── Contour dividers ── */
.lp2-divider { overflow: hidden; height: 72px; margin: 0; pointer-events: none; }
.lp2-ct { opacity: .07; }
@media (prefers-reduced-motion: no-preference) {
  .lp2-ct-1 { animation: lp2drift 52s linear infinite; }
  .lp2-ct-2 { animation: lp2drift 64s linear infinite reverse; }
  .lp2-ct-3 { animation: lp2drift 44s linear infinite; }
  .lp2-ct-4 { animation: lp2drift 70s linear infinite reverse; }
}
@keyframes lp2drift { from { transform: translateX(0); } to { transform: translateX(-240px); } }

/* ── Sources strip ── */
.lp2-sources { padding: var(--s6) 0; background: var(--paper); text-align: center; }
.lp2-source-row { display: flex; gap: var(--s4); justify-content: center; flex-wrap: wrap; }
.lp2-source { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-sm);
  color: var(--ink-soft); }
.lp2-source svg { color: var(--seal); }
.lp2-smallprint { font-size: var(--t-xs); color: var(--ink-soft); max-width: 70ch;
  margin: var(--s3) auto 0; line-height: 1.5; }

/* ── Radar band (stats + final CTA share one canvas) ── */
.lp2-radar-band { position: relative; background: var(--paper); overflow: hidden; }
.lp2-radar { position: absolute; inset: 0; z-index: 0; }
.lp2-radar-canvas, .lp2-radar-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp2-radar-canvas { display: none; }
.lp2-radar-band > section { position: relative; z-index: 1; }
.lp2-stats { padding: var(--s8) 0 var(--s6); }
.lp2-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); text-align: center; }
.lp2-statc b { display: block; font-size: clamp(28px, 4vw, 44px); color: var(--seal);
  line-height: 1; font-variant-numeric: tabular-nums; }
.lp2-statc span { display: block; font-size: var(--t-sm); color: var(--ink-soft); margin-top: 6px; }
.lp2-final { padding: var(--s6) 0 var(--s8); text-align: center; }
.lp2-final-inner { max-width: 620px; }
.lp2-final-h { font-size: var(--t-xl); letter-spacing: -.015em; margin: 0; text-wrap: balance; }

/* ── Pricing Edge band (C2) ── */
.lp2-edge-band { margin: var(--s4) 0; padding: var(--s4); background: var(--seal-wash);
  border-radius: var(--r-card); }
.lp2-edge-bh { font-weight: 700; font-size: var(--t-sm); display: flex; align-items: center;
  gap: 7px; flex-wrap: wrap; }
.lp2-edge-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid;
  grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.lp2-edge-list li { display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); }
.lp2-edge-list li svg { color: var(--seal); flex: none; }
.lp2-edge-foot { font-size: var(--t-xs); color: var(--ink-soft); margin: 10px 0 0; }

/* ── Responsive ── */
/* Chapter dot rail (built by lp2.js, desktop only) */
.lp2-rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 12px; z-index: 40; }
.lp2-raildot { position: relative; width: 9px; height: 9px; border-radius: 999px;
  background: var(--line); transition: background .2s, height .2s; }
.lp2-raildot.is-on { background: var(--accent); height: 22px; }
.lp2-railtip { position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: var(--t-xs); color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  padding: 2px 8px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.lp2-raildot:hover .lp2-railtip { opacity: 1; }
@media (max-width: 1079px) { .lp2-rail { display: none; } }
@media (max-width: 880px) {
  .lp2-ch-grid { grid-template-columns: 1fr; gap: var(--s5); }
  /* Text before the screenshot on mobile: the reversed chapters put the mock
     first in the DOM (for the desktop visual-left layout), so pull the copy
     ahead of it — every chapter then reads copy → mock. */
  .lp2-ch-rev .lp2-ch-copy { order: -1; }
  .lp2-ch-rev .lp2-ch-visual { order: 0; }
  /* The four hero proof chips duplicate the stats band on mobile (desktop hides
     them); hide them here too so the counters appear once. */
  .lp2-proof { display: none; }
  .lp2-stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
  .lp2-edge-list { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .lp2-mk-stats { gap: var(--s3); }
  .lp2-proof-chip { min-width: 0; flex: 1 1 40%; }
}

/* Compact the pricing card on the story page (scoped — the live "/" landing keeps
   its roomier .lp-price-card). Tightens padding, price size, list + group gaps. */
/* 10% off the card's width (760 -> 684). Narrowing alone would make the panel
   TALLER — the three bullet columns wrap sooner — so it only works paired with
   the copy that came out of the Edge band and the price note. */
.lp2-pricing .lp-price-wrap { max-width: 684px; }
.lp2-pricing .lp-price-card { padding: 24px 26px; }
.lp2-pricing .lp-price-amount { font-size: 44px; }
.lp2-pricing .lp-price-note { margin: 8px 0 12px; }
/* Future price, under the free headline. One line, quiet — the point is that
   the number is answerable, not that it competes with "Free". The struck £79
   and the live £39 are the only emphasis; the tail is body text. */
.lp2-price-later { margin: 2px 0 0; font-size: 14px; color: var(--lp-soft);
  display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.lp2-price-later s { text-decoration-thickness: 1.5px; opacity: .75; }
.lp2-price-later b { font-size: 17px; color: var(--lp-ink); font-weight: 700; }
.lp2-price-later > span { margin-left: -3px; }
/* Two columns, not the inherited three. At 684px, three columns are ~200px and
   most bullets wrap to two lines; two are ~316px and nearly all fit on one. The
   taller column carries five rows instead of three and the block still comes out
   shorter, because rows stopped doubling. */
.lp2-pricing .lp-price-cols { gap: 14px 28px; padding: 14px 0; }
/* Above 920px only. The shared rules already give two columns at <=920 and one
   at <=620; this selector outspecifies both, so leaving it unguarded would force
   two columns onto a phone. */
@media (min-width: 921px) {
  .lp2-pricing .lp-price-cols { grid-template-columns: repeat(2, 1fr); }
}
/* Full-bleed reads as a form control on a card this narrow: 25% off, centred.
   `display:flex` is load-bearing — .btn is inline-flex, and auto margins do not
   centre an inline-level box, so width alone would just leave it left-aligned.
   flex keeps the icon/label centering .btn already does.
   Phone keeps the full-width tap target; narrowing a CTA there costs more than
   the tidiness is worth. */
@media (min-width: 621px) {
  .lp2-pricing .lp-price-card > .btn-block {
    display: flex; width: 75%; margin-inline: auto;
  }
}
.lp2-pricing .lp-price-list { gap: 6px; }
.lp2-pricing .lp-price-list li { line-height: 1.35; }
.lp2-pricing .lp-price-reassure { margin-top: 10px; }
.lp2-pricing .lp2-edge-band { padding: var(--s3); margin: 10px 0; }
.lp2-pricing .lp2-edge-list { gap: 4px 14px; margin-top: 6px; }
.lp2-pricing .lp2-head { margin-bottom: var(--s5); }
@media (max-width: 560px) { .lp2-pricing .lp-price-card { padding: 22px 18px; } }

/* /#how lands on chapter 01, cleared below the sticky site nav. */
.lp2-chapters { scroll-margin-top: 80px; }

/* §8.4 hero fold — at ≥880px the vertical timeline becomes ONE horizontal 4-column
   row on a connecting line (markup/strings unchanged), sub-captions on one line,
   ≤200px tall; the hero tightens to ~90vh at 1280×800 with chapter 01's kicker
   peeking (the first divider — hero→ch01 only — is shortened). Mobile: untouched. */
@media (min-width: 880px) {
  /* Hero copy stack tightens so the fold clears the head-start row + a peek of
     chapter 01. The proof-number chips and the coverage line are hidden here —
     the same numbers headline the stats band and the sources reappear in the
     smallprint just below, so the fold loses nothing. */
  .lp2-hero { padding: var(--s5) 0 var(--s4); }
  .lp2-h1 { font-size: clamp(34px, 4vw, 44px); margin: 0 auto; max-width: 20ch; padding-block: 15px; }
  .lp2-sub { margin-top: var(--s3); max-width: 60ch; }
  .lp2-cta-row { margin-top: var(--s4); }
  .lp2-trust { margin-top: var(--s3); }
  .lp2-coverage { display: none; }
  .lp2-proof { display: none; }
  .lp2-hero + .lp2-divider { height: 28px; }
  .lp2-timeline { max-width: 900px; margin-top: 50px; text-align: center; }
  /* Head-start made visible: an orange span-bracket whose two arms land on the
     dot centres of "You start here" (16.1%) and "Most suppliers start here"
     (66.9%). The label sits up top with ~2x the air above the timeline; the arms
     drop the full height down to just above the dots — the advantage window. */
  .lp2-tl-hs { position: relative; height: 58px; margin: 0 0 var(--s3); }
  .lp2-tl-hs-chip { display: none; }
  .lp2-tl-hs-span { display: block; position: absolute; left: 16.1%; right: 33.1%;
    top: 0; bottom: 0; }
  .lp2-tl-hs-span-lbl { position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    white-space: nowrap; font-size: var(--t-xs); font-weight: 700; color: var(--accent-ink);
    letter-spacing: .01em; }
  .lp2-tl-hs-span::after { content: ""; position: absolute; left: 0; right: 0; top: 22px;
    bottom: 0; border: 2px solid var(--accent); border-bottom: 0; border-radius: 6px 6px 0 0; }
  .lp2-tl-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3);
    align-items: start; }
  .lp2-tl-steps::before { left: 12.5%; right: 12.5%; top: 8px; bottom: auto; width: auto;
    height: 2px;
    background: linear-gradient(to right, var(--seal) 0%, var(--seal) 66%, var(--line) 66%, var(--line) 100%); }
  .lp2-tl-step { display: block; padding: 0; text-align: center; }
  .lp2-tl-mark { margin: 0 auto 12px; }
  .lp2-tl-step.is-you .lp2-tl-mark { margin: 0 auto 11px; width: 17px; height: 17px; }
  .lp2-tl-card { border-left: none; border-top: 3px solid var(--line); padding: 9px 11px; }
  .lp2-tl-step.is-you .lp2-tl-card { border-top-color: var(--accent); }
  .lp2-tl-step.is-seal .lp2-tl-card { border-top-color: var(--seal); }
  .lp2-tl-card small { white-space: nowrap; }
  .lp2-tl-flag, .lp2-tl-mostchip { display: inline-block; margin-bottom: 5px; }
  .lp2-tl-caption { text-align: center; margin-top: calc(var(--s2) + 10px); max-width: none; }
}

/* ── T-UKSEO2 "look it up" demo — compact card, brand-blue accents ── */
.lp2-lookup-sec { padding: var(--s4) 0; }
.lp2-lookup { max-width: 540px; margin: 0 auto; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s5) var(--s5) var(--s4); box-shadow: var(--shadow); }
.lp2-lookup-pill { display: inline-flex; margin: 0 auto var(--s3); }
.lp2-lookup-h { font-size: 21px; line-height: 1.15; letter-spacing: -.01em; margin: 0; }
.lp2-lookup-sub { font-size: var(--t-sm); color: var(--ink-soft); margin: var(--s2) auto var(--s4);
  max-width: 44ch; line-height: 1.5; }
.lp2-lookup-form { position: relative; max-width: 440px; margin: 0 auto; }
.lp2-lookup-field { display: flex; gap: var(--s2); }
.lp2-lookup-field input { flex: 1; min-width: 0; padding: 9px 13px; border: 1px solid var(--line);
  border-radius: var(--r-control); background: var(--paper); color: var(--ink); font-size: var(--t-sm); }
.lp2-lookup-field input:focus { outline: 2px solid var(--seal); outline-offset: 1px; border-color: var(--seal); }
.lp2-btn-seal { background: var(--seal); border-color: var(--seal); color: #fff; font-weight: 600; white-space: nowrap; }
.lp2-btn-seal:hover { background: var(--seal); border-color: var(--seal); color: #fff; filter: brightness(1.08); }
.lp2-lookup-sugg { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  list-style: none; margin: 0; padding: 4px; text-align: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-control);
  box-shadow: var(--shadow); max-height: 300px; overflow-y: auto; }
.lp2-lookup-opt { display: flex; justify-content: space-between; gap: var(--s3); align-items: center;
  padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.lp2-lookup-opt:hover, .lp2-lookup-opt.is-active { background: var(--seal-wash); }
.lp2-lookup-opt > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp2-lookup-optn { color: var(--ink-soft); font-size: var(--t-xs); white-space: nowrap;
  flex: none; font-variant-numeric: tabular-nums; }
.lp2-lookup-chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: var(--s4); }
.lp2-chip-lookup { max-width: 190px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.lp2-chip-lookup:hover { border-color: var(--seal); color: var(--seal); }
.lp2-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp2-chip-n { flex: none; color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.lp2-chip-lookup:hover .lp2-chip-n { color: var(--seal); }
.lp2-statc-link { color: inherit; cursor: pointer; }
.lp2-statc-link:hover { text-decoration: none; }
.lp2-statc-link:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--seal); }
.lp2-lookup-note { margin: var(--s3) 0 0; font-size: var(--t-xs); color: var(--ink-soft); }

/* The pricing panel's comparison line lived here. It was the last of three
   stacked "included" promises under the Edge band; the header now carries both
   facts it made, so the element, its string (lp2_edge_note) and these rules all
   went with it. */

/* ── Landing: this week's intake ──────────────────────────────────────────────
   One slim line between the hero and chapter 01. The hero's proof chips say how
   large the corpus is — a claim about us. This says how much arrived since the
   reader last looked: the only figure on the page that moves between two visits.

   It has to catch the eye without becoming a billboard, so the weight goes on
   colour and motion rather than size — an accent number, a live dot, and a
   single light sweep as it scrolls in. Every animation is disabled under
   reduced-motion, where the bar still reads perfectly as static text. */
/* A self-contained strip inside the hero, sitting directly above the
   public-buyers lookup — not the full-bleed band it started as, which would cut
   the hero in half. Rounded, inset, sized to its content. */
.lp2-week { position: relative; overflow: hidden; display: flex;
  justify-content: center; margin: var(--s4) 0 var(--s3);
  border: 1px solid rgba(28, 43, 51, .1); border-radius: 999px;
  background: linear-gradient(90deg, var(--seal-wash), rgba(255,255,255,.4));
  width: fit-content; max-width: 100%; margin-inline: auto; }
.lp2-week-bar { display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; gap: 4px 9px; margin: 0;
  padding: 9px 18px; font-size: var(--t-sm); }
.lp2-week-dot { align-self: center; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: none;
  animation: lp2-week-pulse 2.4s ease-out infinite; }
@keyframes lp2-week-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(214, 106, 32, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(214, 106, 32, 0); }
  100% { box-shadow: 0 0 0 0 rgba(214, 106, 32, 0); }
}
/* The one loud element, and it is loud by colour and weight, not by size. */
.lp2-week-n { font-size: 1.45rem; font-weight: 800; line-height: 1;
  color: var(--accent-ink, var(--accent)); font-variant-numeric: tabular-nums; }
.lp2-week-lbl { font-weight: 700; color: var(--ink); }
.lp2-week-sub { color: var(--ink-soft); }
/* A single sweep of light on entry — the "something just happened" cue. */
.lp2-week::after {
  content: ""; position: absolute; inset: 0 auto 0 -40%; width: 40%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  transform: skewX(-18deg); animation: lp2-week-sweep 5.5s ease-in-out 1s 2;
  pointer-events: none;
}
@keyframes lp2-week-sweep {
  0%   { left: -40%; }
  55%  { left: 120%; }
  100% { left: 120%; }
}
@media (prefers-reduced-motion: reduce) {
  .lp2-week-dot { animation: none; }
  .lp2-week::after { animation: none; display: none; }
}

/* Odometer digits. Each slot is a 1em window over a 0-9 column; lp2.js parks the
   column a full turn low, then releases it, so the digit spins into place. */
.lp2-odo { display: inline-flex; align-items: baseline; }
.lp2-odo-d { display: inline-block; height: 1em; overflow: hidden;
  line-height: 1; vertical-align: baseline; }
.lp2-odo-strip { display: flex; flex-direction: column; line-height: 1;
  transition: transform 1.15s cubic-bezier(.16, .84, .28, 1); will-change: transform; }
.lp2-odo-sep { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .lp2-odo-strip { transition: none; } }