/* landing.css — the marketing homepage (Landing in landing.jsx), 2026-10-04.

   Everything here is scoped to .lp so the signed-in app keeps brand.css
   untouched. The page follows the visitor's system theme (light / dark).

   TOKENS. The --lp-* set is the page's own palette: cool neutral paper, ink,
   and ONE accent (evergreen, the same family as the app's pine so screenshots
   of the real app sit naturally on the page). The legacy brand.css tokens
   (--gold, --cream, --bg-card, ...) are re-pointed at the same values inside
   .lp, so the components this page reuses from the old landing (HowItWorks,
   RoiCalculator, SourcesNote, AppStoreBadge) pick up the new look without
   being rewritten. Device screens (.ohc-screen) keep the app's own ivory on
   purpose: they show the real product.

   SHAPE. Buttons are full pills. Cards, images and panels are 20px. Small
   inner chips are 12px. Nothing else.

   TYPE. Geist for everything (already loaded in index.html), display set
   tight at weight 600. The old serif and italic-accent classes are flattened
   to Geist inside .lp. */

.lp {
  --lp-bg: #f3f4f1;
  --lp-surface: #ffffff;
  --lp-sunk: #e8ebe6;
  --lp-ink: #101513;
  --lp-ink-2: #3c4541;
  --lp-muted: #66706b;
  --lp-line: rgba(16, 21, 19, 0.1);
  --lp-line-strong: rgba(16, 21, 19, 0.2);
  --lp-accent: #1d5a46;
  --lp-accent-hover: #236b53;
  --lp-accent-ink: #f3f4f1;
  --lp-accent-soft: rgba(29, 90, 70, 0.09);
  --lp-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 24px 60px -28px rgba(16, 40, 30, 0.22);
  --lp-r: 20px;
  --lp-r-sm: 12px;
  --lp-max: 1200px;
  --lp-pad: 56px;

  /* legacy tokens, re-pointed */
  --bg-deep: var(--lp-bg);
  --bg: var(--lp-bg);
  --bg-card: var(--lp-surface);
  --bg-elev: var(--lp-sunk);
  --bg-elev-2: var(--lp-sunk);
  --gold: var(--lp-accent);
  --gold-bright: var(--lp-accent-hover);
  --gold-deep: var(--lp-accent);
  --gold-soft: var(--lp-accent-soft);
  --cream: var(--lp-ink);
  --cream-dim: var(--lp-ink-2);
  --text: var(--lp-ink);
  --text-dim: var(--lp-ink-2);
  --text-muted: var(--lp-muted);
  --hairline: var(--lp-line);
  --border: var(--lp-line);
  --border-strong: var(--lp-line-strong);
  --shadow-card: var(--lp-shadow);
  --serif: 'Geist', -apple-system, system-ui, sans-serif;
  --sans: 'Geist', -apple-system, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;

  font-family: var(--sans);
  color: var(--lp-ink);
  background: var(--lp-bg);
  min-height: 100dvh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-color-scheme: dark) {
  .lp {
    --lp-bg: #0b0f0d;
    --lp-surface: #121815;
    --lp-sunk: #161d1a;
    --lp-ink: #e8ece9;
    --lp-ink-2: #b2bbb6;
    --lp-muted: #838d88;
    --lp-line: rgba(232, 236, 233, 0.1);
    --lp-line-strong: rgba(232, 236, 233, 0.22);
    --lp-accent: #6cc59f;
    --lp-accent-hover: #86d3b1;
    --lp-accent-ink: #0b0f0d;
    --lp-accent-soft: rgba(108, 197, 159, 0.12);
    --lp-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 70px -30px rgba(0, 0, 0, 0.8);
  }
}
/* The page sits inside the app's ivory body; match it so overscroll and the
   route crossfade never flash the old colour behind the page. */
body:has(.lp) { background: #f3f4f1; }
@media (prefers-color-scheme: dark) { body:has(.lp) { background: #0b0f0d; } }

.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp a { color: inherit; }
.lp ::selection { background: var(--lp-accent); color: var(--lp-accent-ink); }

/* flatten the old editorial classes for the reused components */
.lp .serif { font-family: var(--sans); font-weight: 600; letter-spacing: -0.03em; }
.lp .serif-it { font-family: var(--sans); font-style: normal; font-weight: 600; letter-spacing: -0.03em; }
.lp .foyer-h2 { font-size: clamp(32px, 3.6vw, 46px) !important; line-height: 1.08 !important; }
.lp .btn { border-radius: 999px; font-weight: 500; letter-spacing: 0; }
.lp .btn-primary { color: var(--lp-accent-ink); }
.lp .btn-primary:hover { color: var(--lp-accent-ink); }

/* reused sections carry inline 56px side padding; brand.css only shrinks
   that under .foyer, so mirror the same mobile rules here */
@media (max-width: 960px) {
  .lp-reuse > section { padding-left: 24px !important; padding-right: 24px !important;
                        padding-top: 80px !important; padding-bottom: 80px !important; }
}
@media (max-width: 720px) {
  .lp-reuse > section { padding: 64px 20px !important; }
}

/* ---------- shared building blocks ---------- */

.lp-wrap { max-width: var(--lp-max); margin: 0 auto; padding: 0 var(--lp-pad); }
.lp-section { padding: 128px 0; }
.lp-h2 {
  font-size: clamp(34px, 4vw, 52px); line-height: 1.04; letter-spacing: -0.035em;
  font-weight: 600; margin: 0; color: var(--lp-ink); text-wrap: balance;
}
.lp-lede { font-size: 18px; line-height: 1.6; color: var(--lp-ink-2); max-width: 60ch; margin: 20px 0 0; text-wrap: pretty; }
.lp-sup { font-size: 0.5em; vertical-align: super; color: var(--lp-muted); font-weight: 500; margin-left: 2px; letter-spacing: 0; }

/* rise-in on scroll. Uses CSS view timelines where the browser has them and
   is simply static everywhere else, so nothing ever waits invisible for an
   observer that never fires (the blank-section bug on the old page). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-rise {
      animation: lpRise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}
@keyframes lpRise {
  from { opacity: 0.001; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- buttons (one identity per intent) ---------- */

/* signup: solid accent pill with an arrow that slides on hover */
.lp-cta {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  height: 52px; padding: 0 26px; border-radius: 999px;
  background: var(--lp-accent); color: var(--lp-accent-ink) !important;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}
.lp-cta:hover { background: var(--lp-accent-hover); }
.lp-cta:active { transform: scale(0.98); }
.lp-cta .lp-arrow { transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
.lp-cta:hover .lp-arrow { transform: translateX(3px); }
.lp-cta--sm { height: 40px; padding: 0 18px; font-size: 14px; }
/* The one button the page exists for (2026-10-25): bigger, with a soft lift so
   it reads as THE action on every screen. */
.lp-cta--lg { height: 60px; padding: 0 34px; font-size: 17px;
  box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--lp-accent) 70%, transparent), 0 2px 6px rgba(0, 0, 0, 0.12); }
.lp-cta--lg:hover { transform: translateY(-1px); }
.lp-cta--nav { height: 44px; padding: 0 20px; font-size: 15px; }
/* Phones: once the hero scrolls away the button rides along at the bottom. */
.lp-sticky-cta { display: none; }
@media (max-width: 720px) {
  .lp-sticky-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--lp-bg) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--lp-line);
    transform: translateY(110%); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .lp-sticky-cta.is-on { transform: none; }
  .lp-sticky-cta .lp-cta { width: 100%; justify-content: center; }
  .lp-cta--nav { height: 40px; padding: 0 16px; font-size: 14px; }
}
/* on the film the accent pill flips to paper so it never sinks into the dusk */
.lp-on-film .lp-cta { background: #f3f4f1; color: #101513 !important; }
.lp-on-film .lp-cta:hover { background: #ffffff; }

/* watch: text link with a ring play glyph */
.lp-watch {
  display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 6px;
  font-size: 15px; font-weight: 500; text-decoration: none; color: inherit;
}
.lp-watch-ring {
  width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center;
  border: 1px solid currentColor; opacity: 0.85; transition: transform 0.25s ease, opacity 0.2s;
}
.lp-watch:hover .lp-watch-ring { transform: scale(1.08); opacity: 1; }

/* ---------- nav ---------- */

.lp-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 68px;
  display: flex; align-items: center;
  color: #f3f4f1;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.lp-nav.is-solid {
  color: var(--lp-ink);
  background: color-mix(in srgb, var(--lp-bg) 84%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--lp-line);
}
.lp-nav .lp-wrap { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.lp-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit;
  font-weight: 600; font-size: 16px; letter-spacing: -0.02em; white-space: nowrap; }
.lp-brand img { width: 30px; height: 30px; display: block; }
.lp-nav-links { display: flex; align-items: center; gap: 4px; }
.lp-nav-link { white-space: nowrap; padding: 10px 14px; font-size: 14px; text-decoration: none; color: inherit; opacity: 0.82; border-radius: 999px; transition: opacity 0.2s; }
.lp-nav-link:hover { opacity: 1; }
.lp-nav:not(.is-solid) .lp-cta { background: #f3f4f1; color: #101513 !important; }
@media (prefers-reduced-transparency: reduce) {
  .lp-nav.is-solid { background: var(--lp-bg); backdrop-filter: none; }
}

/* ---------- hero (film) ---------- */

.lp-hero {
  position: relative; min-height: 100dvh; max-height: 980px; display: flex; align-items: flex-end;
  color: #f3f4f1; background: #0d1418; overflow: hidden; isolation: isolate;
}
.lp-hero-media { position: absolute; inset: 0; z-index: -2; }
.lp-hero-media video, .lp-hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; display: block;
}
.lp-hero::before { /* legibility scrim: heavy at the lower left where the copy sits */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(6, 10, 12, 0.78) 0%, rgba(6, 10, 12, 0.45) 42%, rgba(6, 10, 12, 0) 70%),
    linear-gradient(0deg, rgba(6, 10, 12, 0.7) 0%, rgba(6, 10, 12, 0) 45%),
    linear-gradient(180deg, rgba(6, 10, 12, 0.45) 0%, rgba(6, 10, 12, 0) 18%);
}
.lp-hero .lp-wrap { width: 100%; padding-bottom: 96px; padding-top: 140px; }
.lp-hero-copy { max-width: 920px; }
.lp-h1 {
  margin: 0; font-weight: 600; letter-spacing: -0.045em; line-height: 0.98;
  font-size: clamp(40px, 4.7vw, 68px); text-wrap: balance;
}
.lp-h1 span { display: block; color: rgba(243, 244, 241, 0.7); }
.lp-hero-sub { margin: 26px 0 0; font-size: 19px; line-height: 1.55; color: rgba(243, 244, 241, 0.86); max-width: 520px; text-wrap: pretty; }
.lp-hero-ctas { display: flex; align-items: center; gap: 18px; margin-top: 38px; flex-wrap: wrap; }
.lp-hero-ctas .lp-weblink { font-size: 14px; color: rgba(243, 244, 241, 0.8); text-underline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .lp-hero-copy > * { animation: lpHeroIn 1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .lp-hero-copy > :nth-child(2) { animation-delay: 0.12s; }
  .lp-hero-copy > :nth-child(3) { animation-delay: 0.24s; }
  .lp-hero-media { animation: lpFilmIn 1.6s ease both; }
}
@keyframes lpHeroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes lpFilmIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

/* ---------- speed (stat strip) ---------- */

.lp-speed-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 64px;
  border-top: 1px solid var(--lp-line-strong);
}
.lp-stat { padding: 28px 28px 0 0; }
.lp-stat + .lp-stat { padding-left: 28px; border-left: 1px solid var(--lp-line); }
.lp-stat-n { font-size: clamp(44px, 4.6vw, 64px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--lp-ink); font-variant-numeric: tabular-nums; }
.lp-stat-n em { font-style: normal; color: var(--lp-accent); }
.lp-stat-l { margin-top: 14px; font-size: 14.5px; line-height: 1.5; color: var(--lp-ink-2); max-width: 24ch; }

/* ---------- voice (bento) ---------- */

.lp-bento {
  display: grid; gap: 16px; margin-top: 64px;
  grid-template-columns: 1.15fr 1fr 1fr;
  grid-template-rows: auto auto;
}
.lp-tile {
  border-radius: var(--lp-r); background: var(--lp-surface); border: 1px solid var(--lp-line);
  overflow: hidden; display: flex; flex-direction: column; min-width: 0;
}
.lp-tile-body { padding: 26px 28px 28px; }
.lp-tile h3 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
.lp-tile p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--lp-ink-2); }
.lp-tile--thread { grid-row: span 2; background: var(--lp-accent); color: var(--lp-accent-ink); border-color: transparent; }
.lp-tile--thread p { color: color-mix(in srgb, var(--lp-accent-ink) 78%, transparent); }
.lp-tile--thread .lp-tile-media { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: 8px 28px 0; min-height: 420px; position: relative; overflow: hidden; }
.lp-shot {
  width: min(300px, 100%); border-radius: 34px 34px 0 0; display: block;
  box-shadow: 0 -2px 0 6px rgba(0, 0, 0, 0.18), 0 40px 80px -20px rgba(0, 0, 0, 0.5);
  border: 6px solid #1a1f1c; border-bottom: 0;
}
.lp-tile--photo .lp-tile-media { aspect-ratio: 4 / 3; overflow: hidden; }
.lp-tile--photo .lp-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.lp-tile--photo:hover .lp-tile-media img { transform: scale(1.03); }
.lp-tile--listing { background: var(--lp-sunk); }
.lp-tile--listing .lp-tile-media { aspect-ratio: 4 / 3; overflow: hidden; padding: 22px 22px 0; }
.lp-tile--listing .lp-tile-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; border-radius: var(--lp-r-sm) var(--lp-r-sm) 0 0; display: block; }
.lp-tile--handoff { background: var(--lp-sunk); justify-content: space-between; grid-column: span 2; }
.lp-handoff-row { display: flex; align-items: center; gap: 12px; padding: 26px 28px 0; flex-wrap: wrap; }
.lp-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px;
  border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--lp-surface); border: 1px solid var(--lp-line);
}
.lp-chip--on { background: var(--lp-accent); color: var(--lp-accent-ink); border-color: transparent; }
.lp-chip-line { flex: 0 0 22px; height: 1px; background: var(--lp-line-strong); }

/* ---------- kiosk photo band ---------- */

.lp-band-media { border-radius: var(--lp-r); overflow: hidden; aspect-ratio: 21 / 9; background: var(--lp-sunk); }
.lp-band-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block; }
.lp-band-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 40px; align-items: start; }
.lp-band-copy .lp-h2 { font-size: clamp(30px, 3.2vw, 42px); }
.lp-band-copy p { margin: 4px 0 0; font-size: 17px; line-height: 1.65; color: var(--lp-ink-2); max-width: 52ch; }

/* ---------- data (FAQ rows) ---------- */

.lp-data { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: start; }
.lp-data-head { position: sticky; top: 110px; }
.lp-data-head a { color: var(--lp-accent); text-underline-offset: 3px; }
.lp-qa { border-top: 1px solid var(--lp-line-strong); }
.lp-qa-row { padding: 30px 0; border-bottom: 1px solid var(--lp-line); display: grid; grid-template-columns: 200px 1fr; gap: 28px; }
.lp-qa-q { font-size: 15px; font-weight: 500; color: var(--lp-muted); }
.lp-qa-a h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.025em; }
.lp-qa-a p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--lp-ink-2); }

/* ---------- beta offer panel ---------- */

.lp-offer {
  border-radius: var(--lp-r); background: var(--lp-surface); border: 1px solid var(--lp-line);
  box-shadow: var(--lp-shadow); display: grid; grid-template-columns: 1.25fr 1fr; overflow: hidden; margin-top: 56px;
}
.lp-offer-list { padding: 44px 48px; }
.lp-offer-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.lp-offer-list li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; }
.lp-offer-list li strong { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; }
.lp-offer-list li span.d { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.6; color: var(--lp-ink-2); }
.lp-tick { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; background: var(--lp-accent-soft); color: var(--lp-accent); margin-top: 1px; }
.lp-offer-price {
  padding: 44px 48px; background: var(--lp-sunk); border-left: 1px solid var(--lp-line);
  display: flex; flex-direction: column;
}
.lp-price { font-size: 88px; font-weight: 600; letter-spacing: -0.06em; line-height: 0.9; }
.lp-price-note { margin-top: 14px; font-size: 15px; color: var(--lp-ink-2); line-height: 1.55; }
.lp-offer-price .lp-cta { margin-top: 30px; align-self: flex-start; }
.lp-after { margin-top: auto; padding-top: 34px; font-size: 14px; line-height: 1.65; color: var(--lp-ink-2); }
.lp-after strong { color: var(--lp-ink); font-weight: 600; display: block; margin-bottom: 4px; font-size: 14.5px; }
.lp-verified { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--lp-line); }
.lp-verified span { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--lp-ink-2); }
.lp-verified svg { color: var(--lp-accent); }

.lp-bounty {
  margin-top: 16px; border-radius: var(--lp-r); padding: 30px 36px; border: 1px solid var(--lp-line);
  display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
}
.lp-bounty-n { font-size: 64px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; color: var(--lp-accent); }
.lp-bounty h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.lp-bounty p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--lp-ink-2); max-width: 78ch; }
.lp-bounty small { display: block; margin-top: 10px; font-size: 12.5px; color: var(--lp-muted); line-height: 1.55; }

.lp-brokers {
  margin-top: 16px; border-radius: var(--lp-r); padding: 30px 36px; border: 1px solid var(--lp-line);
  display: grid; grid-template-columns: auto 1fr; gap: 10px 36px; align-items: center;
}
.lp-brokers h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.lp-brokers ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 32px; }
.lp-brokers li { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--lp-ink); }
.lp-broker-tag {
  font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 8px;
  background: var(--lp-sunk); color: var(--lp-ink-2); white-space: nowrap;
}
.lp-broker-tag.is-live { background: var(--lp-accent-soft); color: var(--lp-accent); }
.lp-brokers p { grid-column: 2; margin: 0; font-size: 14px; line-height: 1.6; color: var(--lp-muted); }

/* ---------- closing (film still) ---------- */

.lp-close {
  position: relative; color: #f3f4f1; text-align: center; overflow: hidden; isolation: isolate;
  padding: 168px 0 160px; background: #0d1418;
}
.lp-close img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.lp-close::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 50% 55%, rgba(6, 10, 12, 0.55) 0%, rgba(6, 10, 12, 0.82) 70%); }
.lp-close h2 { margin: 0 auto; font-size: clamp(40px, 5.4vw, 72px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; max-width: 14ch; text-wrap: balance; }
.lp-close p { margin: 24px auto 0; font-size: 18px; line-height: 1.6; color: rgba(243, 244, 241, 0.82); max-width: 52ch; }
.lp-close-ctas { margin-top: 38px; display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; }
.lp-close-claude { display: inline-block; margin-top: 30px; font-size: 14px; color: rgba(243, 244, 241, 0.72); text-decoration: none; }
.lp-close-claude:hover { color: #fff; }
.lp-close-claude b { font-weight: 500; color: #a9e0c6; }
.lp-close .lp-weblink { font-size: 14px; color: rgba(243, 244, 241, 0.8); text-underline-offset: 3px; }

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

.lp-foot { padding: 40px 0 44px; border-top: 1px solid var(--lp-line); }
.lp-foot .lp-wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.lp-foot nav { display: flex; gap: 24px; flex-wrap: wrap; font-size: 13.5px; color: var(--lp-muted); }
.lp-foot nav a { text-decoration: none; }
.lp-foot nav a:hover { color: var(--lp-ink); }
.lp-foot .lp-brand { font-size: 14.5px; }
.lp-foot .lp-brand img { width: 24px; height: 24px; }

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

@media (max-width: 1100px) {
  .lp-bento { grid-template-columns: 1fr 1fr; }
  .lp-tile--thread { grid-row: span 1; grid-column: span 2; }
  .lp-tile--thread .lp-tile-media { min-height: 380px; max-height: 420px; }
  .lp-offer { grid-template-columns: 1fr; }
  .lp-offer-price { border-left: 0; border-top: 1px solid var(--lp-line); }
}
@media (max-width: 960px) {
  .lp { --lp-pad: 24px; }
  .lp-section { padding: 96px 0; }
  .lp-speed-grid { grid-template-columns: 1fr 1fr; }
  .lp-stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .lp-stat:nth-child(n+3) { border-top: 1px solid var(--lp-line); margin-top: 28px; }
  .lp-band-copy, .lp-data { grid-template-columns: 1fr; gap: 28px; }
  .lp-data-head { position: static; }
  .lp-nav-links .lp-nav-link:not(.lp-nav-signin) { display: none; }
}
@media (max-width: 720px) {
  .lp { --lp-pad: 20px; }
  .lp-section { padding: 80px 0; }
  .lp-nav { height: 60px; }
  .lp-brand { font-size: 15px; }
  .lp-nav-links .lp-nav-signin { display: none; }
  .lp-hero { min-height: 92dvh; }
  .lp-hero-media video, .lp-hero-media img { object-position: 70% 50%; }
  .lp-hero::before {
    background: linear-gradient(0deg, rgba(6, 10, 12, 0.88) 0%, rgba(6, 10, 12, 0.55) 48%, rgba(6, 10, 12, 0.15) 75%, rgba(6, 10, 12, 0.4) 100%);
  }
  .lp-hero .lp-wrap { padding-bottom: 56px; }
  .lp-hero-sub { font-size: 17px; }
  .lp-bento { grid-template-columns: 1fr; }
  .lp-tile--thread, .lp-tile--handoff { grid-column: span 1; }
  .lp-band-media { aspect-ratio: 4 / 3; }
  .lp-qa-row { grid-template-columns: 1fr; gap: 8px; }
  .lp-offer-list, .lp-offer-price { padding: 32px 26px; }
  .lp-price { font-size: 72px; }
  .lp-bounty { grid-template-columns: 1fr; gap: 12px; padding: 26px; }
  .lp-brokers { grid-template-columns: 1fr; gap: 12px; padding: 26px; }
  .lp-brokers p { grid-column: 1; }
  .lp-brokers li { align-items: flex-start; }
  .lp-close { padding: 120px 0; }
  .lp-foot .lp-wrap { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .lp-speed-grid { grid-template-columns: 1fr; }
  .lp-stat, .lp-stat + .lp-stat { padding-left: 0; border-left: 0; }
  .lp-stat + .lp-stat { border-top: 1px solid var(--lp-line); margin-top: 24px; }
  .lp-hero-ctas { gap: 12px; }
}