/* THE UNSIGNED HOMEPAGE (Maaz's mock, 2026-09-15).
   Source: specs/backstage-pass-homepage.html — layout, graphics, structure and
   copy 1:1. What is OURS is the palette and the two type voices (Maaz: "colors
   + font are ours; everything else is the HTML"): the mock's Manrope/Sora pair
   is replaced by var(--sans)/var(--display) and its ink/panel/gold/cream/live
   by the door mood's own tokens, so the page cannot disagree with the rest of
   the product about what gold is.

   EVERY CLASS IN HERE IS PREFIXED `lp-`, and that is this house's own lesson
   rather than tidiness: the mock's own names collide with five live rules in
   application.css — `.hero` (8), `.live-dot` (12, with the reduced-motion
   machinery hung off it), `.clip-card` (8), `.logo` (3) and `.gold` — and a
   name already taken is how a surface inherits a box by reaching for a
   familiar word (the `.fan-card` / `.flyfig__reach` rounds). The markup's
   structure is the mock's; only the words on the class attributes are namespaced.

   IT IS ALSO ITS OWN SHEET, loaded by the landing alone with
   `data-turbo-track="dynamic"` — Turbo 2.0.23 adds a dynamic stylesheet when
   the new head carries it and REMOVES it when the next one does not (verified
   in turbo.min.js: removeUnusedDynamicStylesheetElements), so ~600 lines of
   marketing CSS never rides a studio screen and never lingers after a visit.

   `test/views/landing_css_declared_test.rb` is the #415 fence: every class the
   view renders has a rule here, and nothing in here is unscoped. */

/* ── the mood's tokens, in the mock's own vocabulary ───────────────────────── */
body.lp {
  /* the five colours the mock names, mapped onto the door mood */
  --lp-ink: var(--bg);           /* #030303 */
  --lp-panel: var(--surface);    /* #202123 */
  --lp-gold: var(--gold);        /* #e0b669 */
  --lp-cream: var(--text);       /* #f2f0ea */
  --lp-live: var(--live);        /* #e5484d */

  /* the alpha ladders. They are spelled from the resolved channels rather than
     color-mix so a rule reads exactly as the mock's did; if a mood's canvas
     moves, these three lines are the whole edit. */
  --lp-cream-10: rgb(242 240 234 / 0.10);
  --lp-cream-15: rgb(242 240 234 / 0.15);
  --lp-cream-20: rgb(242 240 234 / 0.20);
  --lp-cream-30: rgb(242 240 234 / 0.30);
  --lp-cream-40: rgb(242 240 234 / 0.40);
  --lp-cream-45: rgb(242 240 234 / 0.45);
  --lp-cream-50: rgb(242 240 234 / 0.50);
  --lp-cream-55: rgb(242 240 234 / 0.55);
  --lp-cream-60: rgb(242 240 234 / 0.60);
  --lp-cream-70: rgb(242 240 234 / 0.70);
  --lp-cream-75: rgb(242 240 234 / 0.75);
  --lp-gold-10: rgb(224 182 105 / 0.10);
  --lp-gold-12: rgb(224 182 105 / 0.12);
  --lp-gold-15: rgb(224 182 105 / 0.15);
  --lp-gold-30: rgb(224 182 105 / 0.30);
  --lp-gold-40: rgb(224 182 105 / 0.40);
  --lp-gold-80: rgb(224 182 105 / 0.80);
  --lp-ink-15: rgb(3 3 3 / 0.15);
  --lp-ink-50: rgb(3 3 3 / 0.50);
  --lp-ink-55: rgb(3 3 3 / 0.55);
  --lp-ink-60: rgb(3 3 3 / 0.60);
  --lp-ink-65: rgb(3 3 3 / 0.65);
  --lp-ink-75: rgb(3 3 3 / 0.75);
  --lp-ink-90: rgb(3 3 3 / 0.90);
  --lp-live-15: rgb(229 72 77 / 0.15);
  --lp-live-40: rgb(229 72 77 / 0.40);
}
/* The mock's own `html { scroll-behavior: smooth }`, scoped. It has to reach
   the ROOT element — for viewport scrolling the behaviour is read off `html`
   (browsers propagate it from `body` too, but not reliably) — so `:has()` is
   what keeps the rule on this one page instead of the whole product. The
   `body` rule stays beside it for a browser that reads that instead. */
html:has(body.lp), body.lp { scroll-behavior: smooth; }

/* ── THE MASTHEAD IS THE MOCK'S HEADER (one header, never two) ──────────────
   The mock draws its own 64px bar with the wordmark left and Discover /
   Pricing / Sign in right — which is what `header.topbar` already is on a
   logged-out page, so the landing repositions the house masthead instead of
   stacking a second one under it. Absolute, so it scrolls away over the hero
   exactly as the mock's does, and centred on the page's own 1280 column so the
   wordmark lines up with the hero under it.

   NO `backdrop-filter`. The mock veils the bar with ink at 55% + a 12px blur;
   r9 took that treatment OFF this element on purpose (a compositing layer is
   rasterised on its own origin, so every hairline inside it — here, the gold
   Sign in pill — is snapped against the layer instead of the page). The hero's
   canvas behind the bar is the ink anyway, so transparent reads as the mock's
   veil with none of the cost. */
body.lp header.topbar {
  position: absolute; top: 0; left: 0; right: 0;
  max-width: 1280px; margin: 0 auto;
  background: transparent; border-bottom-color: transparent;
}

/* ── the page ──────────────────────────────────────────────────────────────── */
.lp { display: block; }
.lp-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.lp-section { padding: 96px 0; }
.lp-gold { color: var(--lp-gold); }

@keyframes lp-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lp-livepulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.lp-rise { animation: lp-rise 650ms ease-out both; }
.lp-delay-100 { animation-delay: 100ms; }
.lp-delay-180 { animation-delay: 180ms; }
.lp-delay-260 { animation-delay: 260ms; }
.lp-pulse { animation: lp-livepulse 1.8s ease-in-out infinite; }

/* ── hero ──────────────────────────────────────────────────────────────────── */
.lp-hero {
  position: relative; min-height: 720px; display: flex; align-items: center;
  padding-top: 80px; border-bottom: 1px solid var(--lp-cream-10);
  overflow: hidden; text-align: center;
}
.lp-hero-bg { position: absolute; inset: 0; background: var(--lp-ink); pointer-events: none; }
.lp-spot {
  position: absolute; top: 0; left: 50%; height: 130%; width: 160px;
  transform-origin: top;
  background: linear-gradient(to bottom, var(--lp-gold-12), var(--lp-gold-12) 20%, transparent);
  filter: blur(24px);
}
.lp-spot--left { transform: translateX(-180%) rotate(16deg); }
.lp-spot--right { transform: translateX(80%) rotate(-16deg); }
.lp-spot--center {
  top: 0; height: 110%; width: 256px; transform: translateX(-50%);
  background: linear-gradient(to bottom, rgb(242 240 234 / 0.06), transparent);
  filter: blur(40px);
}
.lp-hero-glow {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  height: 96px; width: 720px; max-width: 90vw; border-radius: 100%;
  background: var(--lp-gold-10); filter: blur(40px);
}
.lp-hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 160px;
  background: linear-gradient(to top, var(--lp-ink), transparent);
}
.lp-hero-content { position: relative; z-index: 10; width: 100%; padding: 80px 20px; }
/* THE HEADINGS KEEP THE MOCK'S SENTENCE CASE. `h1, h2` in application.css are
   uppercase marquee caps — the house voice — and the mock's own copy is
   sentence case with a full stop, so the case is the copy's and the FACE is
   ours (the display voice, at the house's own weight). */
.lp-hero h1 {
  font-family: var(--display); font-weight: 800; text-transform: none;
  font-size: 28px; --lh: 1.14; line-height: var(--lh-snap);
  max-width: 900px; margin: 0 auto;
}
.lp-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px;
  border-radius: 8px; background: var(--lp-live-15); color: var(--lp-live);
  border: 1px solid var(--lp-live-40); vertical-align: middle; font-size: 0.85em;
}
.lp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lp-live); flex: none; }
.lp-tagline { margin-top: 24px; font-size: 18px; color: var(--lp-cream-70); }
.lp-icons { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 20px; }
.lp-icon { color: var(--lp-cream-60); transition: color 0.2s; display: inline-flex; }
.lp-icon:hover { color: var(--lp-gold); }
.lp-icon svg { width: 26px; height: 26px; }
.lp-icon-x { font-family: var(--sans); font-size: 20px; font-weight: 500; }

/* ── the claim forms (hero + closing) ──────────────────────────────────────── */
.lp-claim { max-width: 700px; margin: 40px auto 0; }
.lp-claim-row { display: flex; flex-direction: column; gap: 12px; }
.lp-claim-field {
  display: flex; align-items: center; min-height: 60px; flex: 1; padding: 0 20px;
  border-radius: 8px; background: var(--lp-panel); border: 1px solid var(--lp-cream-15);
  transition: border-color 0.2s;
}
.lp-claim-field:focus-within { border-color: var(--lp-gold-40); }
.lp-claim-host { color: var(--lp-cream-50); font-size: 16px; white-space: nowrap; }
/* THE FIELD IS THE WRAPPER'S BOX AND THE INPUT PAINTS NOTHING OF ITS OWN.
   Every property here is a house form rule being turned OFF, not a style: this
   selector is (0,1,1) and so is `input[type="text"]` in application.css, so it
   only wins because the sheet loads from `:page_stylesheets` (after the
   house's) — and `border-radius` and `width` have to be named as well as
   `border`, or the house's 6px radius and `width: 100%` survive inside a
   control the mock draws as one seamless box. `border-radius` is invisible
   under `border: none` and is stated anyway, because the claim this page makes
   is that the house rule does not reach in here (measured in
   test/system/unsigned_homepage_test.rb). */
.lp-claim-field input {
  flex: 1; min-width: 0; width: auto; background: transparent;
  border: none; border-radius: 0; outline: none;
  color: var(--lp-cream); font-family: var(--sans); font-size: 16px;
  padding: 16px 0; margin-left: 4px;
}
.lp-claim-field input::placeholder { color: var(--lp-cream-30); }
.lp-claim-go {
  min-height: 60px; padding: 0 32px; border-radius: 8px; background: var(--lp-gold);
  color: var(--lp-ink); font-family: var(--sans); font-size: 16px; font-weight: 600;
  border: none; cursor: pointer; transition: background 0.2s;
}
.lp-claim-go:hover { background: var(--lp-cream); }

/* ── section headings ──────────────────────────────────────────────────────── */
.lp-label {
  font-family: var(--display); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--lp-gold);
}
.lp-title {
  font-family: var(--display); font-weight: 800; text-transform: none;
  font-size: 36px; --lh: 1.15; line-height: var(--lh-snap); margin-top: 16px;
}
.lp-sub { margin-top: 20px; max-width: 600px; color: var(--lp-cream-55); --lh: 1.7; line-height: var(--lh-snap); }

/* ── journey ───────────────────────────────────────────────────────────────── */
.lp-journey { margin-top: 64px; display: flex; flex-direction: column; gap: 28px; }
.lp-card { border-radius: 10px; overflow: hidden; border: 1px solid var(--lp-cream-10); background: var(--lp-panel); }
.lp-card--gold { background: var(--lp-gold); color: var(--lp-ink); border-color: var(--lp-gold); }
.lp-card--cream { background: var(--lp-cream); color: var(--lp-ink); border-color: var(--lp-cream); }
.lp-card-grid { display: grid; min-height: 480px; }
.lp-card-text { display: flex; flex-direction: column; justify-content: space-between; padding: 48px; }
.lp-step { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: var(--lp-gold); }
.lp-card--gold .lp-step { color: var(--lp-ink-55); }
.lp-card--cream .lp-step { color: var(--lp-ink-50); }
.lp-card-mark { color: var(--lp-gold); margin-bottom: 20px; display: block; }
.lp-card--gold .lp-card-mark, .lp-card--cream .lp-card-mark { color: var(--lp-ink); }
.lp-card-text h3 {
  font-family: var(--display); font-weight: 700; text-transform: none;
  font-size: 30px; --lh: 1.2; line-height: var(--lh-snap);
}
.lp-card-text p { margin-top: 20px; max-width: 450px; color: var(--lp-cream-55); --lh: 1.7; line-height: var(--lh-snap); }
.lp-card--gold .lp-card-text p { color: var(--lp-ink-65); }
.lp-card--cream .lp-card-text p { color: var(--lp-ink-60); }
.lp-card-visual {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 320px; padding: 48px; border-top: 1px solid var(--lp-cream-10);
  background: rgb(242 240 234 / 0.025);
}
.lp-card--gold .lp-card-visual,
.lp-card--cream .lp-card-visual { border-top: 1px solid var(--lp-ink-15); background: transparent; }

/* 01 broadcast */
.lp-bcast {
  position: relative; display: grid; place-items: center; width: 112px; height: 112px;
  border-radius: 50%; border: 1px solid var(--lp-gold-30); background: var(--lp-gold-10); color: var(--lp-gold);
}
.lp-bcast-ring { position: absolute; border-radius: 50%; border: 1px solid var(--lp-gold-15); }
.lp-bcast-ring--1 { inset: -24px; }
.lp-bcast-ring--2 { inset: -48px; }
.lp-bcast-status {
  position: absolute; top: 24px; left: 24px; display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--lp-cream-45);
}
.lp-dests {
  position: absolute; left: 24px; right: 24px; bottom: 28px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
}
.lp-dest { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lp-dest-mark { display: grid; place-items: center; width: 40px; height: 40px; color: var(--lp-cream-75); }
/* THE MOCK OMITS THIS ONE and cannot render without it: its
   `.destination-icon` SVGs carry no width/height attributes and no CSS rule,
   so a browser gives them the default replaced-element size (300x150) inside a
   40x40 grid cell. 24 is the house's own glyph scale in a 40px box. */
.lp-dest-mark svg { width: 24px; height: 24px; }
.lp-dest-mark--x { font-family: var(--sans); font-size: 18px; font-weight: 500; }
.lp-dest-label { font-size: 11px; color: var(--lp-cream-45); }

/* 02 gather */
/* ONE DEVIATION FROM THE MOCK, AND IT IS A LEGIBILITY BUG IN THE MOCK ITSELF:
   `.gather-label` is `position: absolute; top: 0` inside a box whose FIRST
   in-flow child is the dark card, and a positioned element paints above a
   static one whatever the DOM order — so "PUBLIC STREAM → BACKSTAGE" lands on
   top of "Live everywhere" and neither can be read (verified in a browser
   against a faithful port). The label is a caption FOR the pair of cards, so
   the pair is moved down to clear it. Nothing else about the block changed:
   no section invented, no copy rewritten. */
.lp-gather { position: relative; width: 100%; max-width: 400px; padding-top: 30px; }
.lp-gather-label {
  position: absolute; top: 0; left: 0; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.15em; color: var(--lp-ink-50);
}
.lp-public {
  border-radius: 8px; background: var(--lp-ink-90); color: var(--lp-cream);
  padding: 24px; box-shadow: 0 20px 40px rgb(0 0 0 / 0.25);
}
.lp-public-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.lp-public-watchers { display: flex; align-items: center; gap: 8px; color: var(--lp-gold); }
.lp-public-bar { margin-top: 48px; height: 4px; background: var(--lp-cream-10); border-radius: 2px; overflow: hidden; }
.lp-public-bar span { display: block; height: 100%; width: 75%; background: var(--lp-gold); }
.lp-public-end { margin-top: 12px; font-size: 12px; color: var(--lp-cream-45); }
.lp-backstage {
  position: relative; margin-top: -12px; margin-left: auto; width: 88%;
  border-radius: 8px; background: var(--lp-cream); color: var(--lp-ink);
  padding: 24px; box-shadow: 0 20px 40px rgb(0 0 0 / 0.15);
}
.lp-backstage-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.lp-backstage-head span:first-child { font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; }
.lp-backstage-title {
  margin-top: 32px; font-family: var(--display); font-weight: 700; text-transform: none;
  font-size: 24px; --lh: 1.2; line-height: var(--lh-snap);
}
.lp-faces { margin-top: 16px; display: flex; }
.lp-face {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--lp-cream); background: var(--lp-ink); color: var(--lp-gold);
  font-size: 11px; margin-left: -8px;
}
.lp-face:first-child { margin-left: 0; }
.lp-face--more { background: var(--lp-gold); color: var(--lp-ink); font-weight: 600; }

/* 03 retain */
.lp-retain { width: 100%; max-width: 420px; }
.lp-retain-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; }
.lp-retain-label { font-size: 12px; text-transform: uppercase; color: var(--lp-cream-40); }
.lp-retain-count {
  font-family: var(--display); font-weight: 800; font-size: 36px; margin-top: 8px;
  --lh: 1; line-height: var(--lh-snap); font-variant-numeric: tabular-nums lining-nums;
}
.lp-retain-growth { font-size: 14px; color: var(--lp-gold); }
.lp-channel {
  display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 6px;
  border: 1px solid var(--lp-cream-10); background: rgb(3 3 3 / 0.70); margin-bottom: 12px;
}
.lp-channel-mark {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--lp-gold-15); color: var(--lp-gold); flex: none;
}
.lp-channel-info { flex: 1; min-width: 0; }
.lp-channel-name { font-size: 14px; font-weight: 600; }
.lp-channel-desc { font-size: 12px; color: var(--lp-cream-40); }
.lp-channel-count { font-size: 12px; color: var(--lp-gold); }

/* 04 replay */
.lp-replay { width: 100%; max-width: 520px; }
.lp-replay-card {
  border-radius: 8px; background: var(--lp-ink); color: var(--lp-cream);
  padding: 20px; box-shadow: 0 20px 40px rgb(0 0 0 / 0.25);
}
.lp-replay-head { display: flex; align-items: center; justify-content: space-between; }
.lp-replay-badge {
  padding: 2px 8px; border-radius: 3px; background: var(--lp-gold); color: var(--lp-ink);
  font-size: 11px; font-weight: 600;
}
.lp-replay-dur { font-size: 12px; color: var(--lp-cream-40); }
.lp-wave { display: flex; align-items: flex-end; gap: 4px; height: 96px; margin-top: 48px; }
.lp-wave span { flex: 1; border-radius: 1px; background: var(--lp-cream-20); }
.lp-wave span.lp-wave--on { background: var(--lp-gold); }
.lp-replay-labels {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px;
  text-align: center; font-size: 12px; color: var(--lp-cream-50);
}

/* 05 republish */
.lp-republish { position: relative; display: flex; align-items: flex-end; gap: 16px; min-height: 320px; }
.lp-clip {
  aspect-ratio: 9/14; width: 100px; border-radius: 6px; padding: 12px;
  background: var(--lp-ink); border: 1px solid var(--lp-cream-15); text-align: center;
}
.lp-clip:nth-child(1) { transform: rotate(-6deg); }
.lp-clip:nth-child(2) {
  width: 116px; background: var(--lp-gold); color: var(--lp-ink);
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.4); z-index: 2;
}
.lp-clip:nth-child(3) { transform: rotate(6deg); }
.lp-clip-time { font-size: 10px; color: var(--lp-gold); }
.lp-clip:nth-child(2) .lp-clip-time { color: var(--lp-ink-75); }
.lp-clip-body { margin-top: 48px; }
/* `display: block` is added to the mock's rule: `margin: 0 auto` on an INLINE
   svg centres nothing, and the mock plainly means the glyph to sit in the
   middle of its 9:14 card. */
.lp-clip-body svg { margin: 0 auto; display: block; color: var(--lp-gold); }
.lp-clip:nth-child(2) .lp-clip-body svg { color: var(--lp-ink); }
.lp-clip-title { margin-top: 12px; font-size: 12px; }
.lp-clip:nth-child(2) .lp-clip-title { font-weight: 600; }
.lp-republish-dests {
  position: absolute; left: 20px; right: 20px; bottom: 20px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
}

/* ── pricing ───────────────────────────────────────────────────────────────── */
.lp-pricing { border-top: 1px solid var(--lp-cream-10); }
.lp-plans { margin-top: 64px; display: grid; gap: 28px; }
.lp-plan {
  position: relative; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--lp-cream-10); background: var(--lp-panel); padding: 40px;
}
.lp-plan--featured { background: var(--lp-gold); color: var(--lp-ink); border-color: var(--lp-gold); }
.lp-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lp-plan-name {
  font-family: var(--display); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--lp-gold);
}
.lp-plan--featured .lp-plan-name { color: var(--lp-ink-55); }
.lp-plan-badge {
  padding: 4px 12px; border-radius: 999px; background: var(--lp-ink); color: var(--lp-gold);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em;
  white-space: nowrap;
}
.lp-plan-price {
  margin-top: 32px; font-family: var(--display); font-weight: 800; font-size: 48px;
  --lh: 1; line-height: var(--lh-snap); font-variant-numeric: tabular-nums lining-nums;
}
.lp-plan-per { font-family: var(--sans); font-size: 16px; font-weight: 400; color: var(--lp-cream-45); }
.lp-plan--featured .lp-plan-per { color: var(--lp-ink-50); }
.lp-plan-features { margin: 40px 0 0; padding: 0; list-style: none; }
.lp-plan-feature { display: flex; gap: 12px; margin-bottom: 16px; font-size: 14px; color: var(--lp-cream-70); }
.lp-plan--featured .lp-plan-feature { color: var(--lp-ink-75); }
.lp-plan-feature > svg { flex-shrink: 0; margin-top: 3px; width: 16px; height: 16px; color: var(--lp-gold); }
.lp-plan--featured .lp-plan-feature > svg { color: var(--lp-ink); }
.lp-plan-dests { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; color: var(--lp-cream-60); }
.lp-plan--featured .lp-plan-dests { color: var(--lp-ink-60); }
.lp-plan-dests svg { width: 18px; height: 18px; }
.lp-plan-dests span { font-family: var(--sans); font-size: 14px; font-weight: 500; }
.lp-plan-cta {
  display: inline-flex; justify-content: center; width: 100%; margin-top: 32px;
  padding: 14px 24px; border-radius: 8px; background: var(--lp-gold); color: var(--lp-ink);
  font-size: 14px; font-weight: 600; transition: background 0.2s;
}
.lp-plan-cta:hover { background: var(--lp-cream); }
.lp-plan--featured .lp-plan-cta { background: var(--lp-ink); color: var(--lp-gold); }
.lp-plan--featured .lp-plan-cta:hover { background: var(--lp-panel); }
.lp-ent { margin-top: 28px; border-radius: 10px; overflow: hidden; border: 1px solid var(--lp-cream-10); background: var(--lp-panel); }
.lp-ent-grid { display: grid; }
.lp-ent-content { padding: 40px; }
.lp-ent-label {
  font-family: var(--display); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--lp-gold);
}
.lp-ent-desc { margin-top: 20px; max-width: 650px; color: var(--lp-cream-55); --lh: 1.7; line-height: var(--lh-snap); }
.lp-ent-action { padding: 40px; border-top: 1px solid var(--lp-cream-10); display: flex; align-items: center; }
.lp-ent-btn {
  display: inline-flex; white-space: nowrap; padding: 14px 32px; border-radius: 8px;
  background: var(--lp-gold); color: var(--lp-ink); font-size: 14px; font-weight: 600;
  transition: background 0.2s;
}
.lp-ent-btn:hover { background: var(--lp-cream); }

/* ── creators ──────────────────────────────────────────────────────────────── */
.lp-creators-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.lp-creators {
  margin-top: 48px; display: grid;
  border-left: 1px solid var(--lp-cream-10); border-top: 1px solid var(--lp-cream-10);
}
.lp-creator {
  min-height: 224px; padding: 28px;
  border-right: 1px solid var(--lp-cream-10); border-bottom: 1px solid var(--lp-cream-10);
  transition: background 0.2s;
}
.lp-creator:hover { background: var(--lp-panel); }
.lp-creator-mark { color: var(--lp-gold); display: block; }
.lp-creator h3 { margin-top: 40px; font-family: var(--sans); font-size: 20px; font-weight: 600; text-transform: none; }
.lp-creator p { margin-top: 8px; max-width: 280px; font-size: 14px; color: var(--lp-cream-50); --lh: 1.6; line-height: var(--lh-snap); }

/* ── the closing claim ─────────────────────────────────────────────────────── */
.lp-claim-section { border-top: 1px solid var(--lp-cream-10); text-align: center; }
.lp-claim-section .lp-title { font-size: 48px; }

/* ── footer ────────────────────────────────────────────────────────────────── */
.lp-foot { border-top: 1px solid var(--lp-cream-10); padding: 40px 0 0; }
.lp-foot-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 16px; font-size: 14px; color: var(--lp-cream-50);
}
.lp-foot-brand {
  font-family: var(--display); font-size: 12px; font-weight: 700;
  text-transform: uppercase; color: var(--lp-gold); letter-spacing: 0.05em;
}
.lp-foot-top { color: var(--lp-cream-50); transition: color 0.2s; }
.lp-foot-top:hover { color: var(--lp-gold); }

/* ── responsive (the mock's own two breakpoints) ───────────────────────────── */
@media (min-width: 640px) {
  .lp-hero h1 { font-size: 48px; }
  .lp-tagline { font-size: 20px; }
  .lp-title { font-size: 48px; }
  .lp-card-text h3 { font-size: 36px; }
  .lp-claim-row { flex-direction: row; }
  .lp-claim-host, .lp-claim-field input { font-size: 18px; }
  .lp-claim-go { font-size: 18px; }
  .lp-icon svg { width: 28px; height: 28px; }
  .lp-plan-price { font-size: 56px; }
}

@media (min-width: 1024px) {
  .lp-hero h1 { font-size: 72px; }
  .lp-hero .lp-gold { white-space: nowrap; }
  .lp-card-grid { grid-template-columns: 0.8fr 1.2fr; }
  .lp-card-grid--reverse { grid-template-columns: 1.2fr 0.8fr; }
  .lp-card-visual { border-top: none; border-left: 1px solid var(--lp-cream-10); }
  .lp-card--gold .lp-card-visual,
  .lp-card--cream .lp-card-visual { border-top: none; border-left: 1px solid var(--lp-ink-15); }
  .lp-plans { grid-template-columns: repeat(3, 1fr); }
  .lp-creators { grid-template-columns: repeat(3, 1fr); }
  .lp-ent-grid { grid-template-columns: 1fr auto; align-items: center; }
  .lp-ent-action { border-top: none; border-left: 1px solid var(--lp-cream-10); }
  .lp-foot-inner { flex-direction: row; }
}

/* The mock's own reduced-motion block. The house kill for `.live-dot` lives
   next to its own declaration in application.css (the r9 lesson: an override
   above the rule it overrides is inert), so this one sits next to these. */
@media (prefers-reduced-motion: reduce) {
  .lp-rise { animation: none; opacity: 1; }
  .lp-pulse { animation: none; }
  body.lp { scroll-behavior: auto; }
}