/* landing-page.css — the front door's own layer (2026-09-28 rebuild).

   This is the full sell-and-prove landing that replaced the interim page:
   hero, real Q&A excerpts, the guide library, pricing, footer. It loads on
   landing.html only, after style.css, and it borrows the selling shell
   (.sell, .sellhero, .sellnums, .tiers, .legalfoot, a.cta) from style.css
   rather than restating any of it. Everything here is page-specific layout
   and typography; every color is an existing token. No new color pairs were
   introduced, so no new contrast ratios were minted: text runs on
   --canvas/--surface in --ink or --muted (7.9:1 or better in both themes,
   measured in style.css), signal text wears --signal-ink (7.83:1 light,
   11.89:1 dark), and the drawing is decorative.

   Gates that bound this page (Tj, 2026-09-28):
   - Purple only. The ember ambience the other selling pages carry
     (.sellamb) is warm orange and does not appear here; nothing on this
     page reaches outside the violet token set.
   - Illustrations only. The hero panel is inline SVG in the tube mark's
     stroke language; no photographs, no third-party images.
   - A serif display face for headlines: Fraunces 600, self-hosted below
     with the same one-time-download pattern the Outfit @font-face in
     style.css documents. style.css is contractually held to exactly one
     @font-face block (test_page.py), so the page's face lives here, scoped
     to this page alone. */

/* ── the display face ─────────────────────────────────────────────────
   Fraunces 600, latin subset, downloaded once from Google's type service
   and served from /static/fonts like Outfit: a font request is never a
   page view reported to a third party. One weight, because one weight is
   every weight this page asks of it. display: swap keeps the headline
   visible while the file loads. */

@font-face {
  font-family: 'Fraunces';
  src: url('/static/fonts/fraunces-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --lp-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* The headlines. Same scale the selling shell sets, one face over: h1 a
   half-step larger than .sell's 2.6rem because Fraunces 600 sets smaller
   than Outfit 700 at equal size, and the hero has to hold a room. */

.sell h1 {
  font-family: var(--lp-serif);
  font-weight: 600;
  font-size: 2.75rem;
  letter-spacing: -.005em;
}

.sell h2 {
  font-family: var(--lp-serif);
  font-weight: 600;
  font-size: 1.45rem;
  letter-spacing: -.005em;
}

/* ── the header lockup ────────────────────────────────────────────────
   Moved here from the interim page's inline style block. Same numbers as
   `.brand h1 .tube` in style.css, re-anchored: on this page the h1 is the
   claim, so the lockup rides in an anchor beside it and the wordmark stays
   in Outfit, matching the app header. */

header { display: block; padding: 26px 24px 0; }

.homebrand {
  display: inline-block;
  max-width: 56rem;
  margin: 0 auto;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
}
.homebrand .tube {
  height: .845em;
  width: auto;
  vertical-align: -.115em;
  margin-right: .1em;
  color: var(--signal);
}
.homebrand .beta {
  font: 600 .52em/1 var(--sans);
  letter-spacing: .01em;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: .28em .7em;
  margin-left: .55em;
  vertical-align: .42em;
  white-space: nowrap;
}

/* The shell's own padding already centres a 56rem column; the header sits
   in the same column so the lockup and the hero share one left edge. */
@media (min-width: 61rem) {
  header { padding: 26px 0 0; }
  .homebrand { margin-left: max(24px, calc((100% - 56rem) / 2 + 24px)); }
}

/* ── hero ─────────────────────────────────────────────────────────────
   Claim on the left, drawing on the right. The lead column comes first in
   the source because it comes first on a phone. */

.sellhero.lphero {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 34px;
  align-items: center;
  margin-top: 34px;
}
@media (max-width: 60rem) {
  .sellhero.lphero { grid-template-columns: minmax(0, 1fr); }
}

/* The drawing. Stroke tiers are the mark's own hierarchy carried up in
   scale: the mark draws its glass at 8.8 against a 73-unit body, so a
   panel-scale heavy outline is 6, structure is 3.5, and hairline detail is
   2. All of it currentColor: --ink carries the furniture, --signal carries
   the geometry (needles, ticks, the signal line, the lamp), the same
   two-ink split the room plan uses. */

.lpfig { margin: 0; }
.lpfig svg { display: block; width: 100%; height: auto; color: var(--ink); }
.lpfig .lp-sig { color: var(--signal); }
.lpcap {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--muted);
  text-align: center;
}

/* ── real questions, answered ─────────────────────────────────────────
   Each excerpt is one hairline-ruled row holding the app's own chat
   anatomy: the question as a right-aligned user bubble, the answer as
   plain text under it, then a mono closer line. .msg and .bubble are
   global rules, so a transcript here renders exactly as it does on the
   box, which is the point. */

.lpqalead { color: var(--muted); font-size: 1.02rem; line-height: 1.7; }

.lpthread {
  display: flex;
  flex-direction: column;
  max-width: 46rem;
}

.lpqrow {
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* The trim mark: where a longer answer was cut at a sentence boundary.
   Punctuation of the excerpt, not content, so it is hidden from the
   accessible read. */
.lpmore {
  margin: 10px 0 0;
  font-family: var(--mono);
  letter-spacing: .25em;
  color: var(--muted);
}

/* The closer under each excerpt. Mono, small, underlined, in
   --signal-ink (7.83:1 light, 11.89:1 dark): a link must not be told by
   color alone, so the underline stays on at rest. */
.lpclose {
  margin: 16px 0 0;
  font-family: var(--mono);
  font-size: .9rem;
  letter-spacing: .02em;
}
.lpclose a {
  color: var(--signal-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lpclose a:hover { color: var(--ink); }

/* ── the guide library ────────────────────────────────────────────────
   A grid, not bespoke rows: the section is 7 guides today and the plan
   grows it to 25-30, so the markup is one repeatable card and the grid
   wraps on its own. Square corners; the selling shell's --radius is 0 on
   this page by design. */

.lpgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.lpguide {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 18px 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.lpguide h3 {
  margin: 0;
  font-family: var(--lp-serif);
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.35;
}

.lpguide h3 a {
  color: var(--ink);
  text-decoration: none;
}
.lpguide h3 a:hover { color: var(--signal-ink); text-decoration: underline; text-underline-offset: 3px; }

.lpguide > p {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.6;
}

.lpguide .lpclose { margin-top: 4px; font-size: .85rem; }

/* ── pricing ──────────────────────────────────────────────────────────
   The rows are style.css's .tiers unchanged; only the section's own
   spacing and the notes under it live here. The anchor gets scroll room
   so a jump from the hero's See pricing does not butt the heading against
   the viewport edge, and smooth scrolling is gated the way every motion
   in this codebase is gated. */

#pricing { scroll-margin-top: 2rem; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.lpnotes p { color: var(--muted); font-size: .98rem; }