/* Public landing surface styles. */
/* --- Hero (spec §5) ------------------------------------------------------- */

.lp-hero {
  padding: 80px 0 96px;     /* step-14: tighter so CTAs land above the fold at 900h */
}

/* Step-15: flat hero grid with named areas. Left column holds
 * headline → lede → CTAs → trust; right column holds the card
 * spanning the full height. Sizes chosen so 600 + 56 + 480 = 1136
 * fits the hero-inner content width exactly at 1440 viewport. On
 * mobile the grid collapses to a single column with the card
 * REORDERED to sit between the lede and the CTAs so the value-prop
 * is above the fold even at 375 × 812. */
.lp-hero-grid {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 480px);
  grid-template-areas:
    "headline stage"
    "lede     stage"
    "cta      stage"
    "trust    stage";
  column-gap: 56px;
  row-gap: 24px;
  align-items: start;
  justify-content: center;
}
.lp-headline   { grid-area: headline; }
.lp-lede       { grid-area: lede;     max-width: 540px; }
.lp-cta-row    { grid-area: cta; }
.lp-trust-row  { grid-area: trust; }
.lp-stage      { grid-area: stage; align-self: center; justify-self: end; }
.lp-headline {
  font-family: var(--lp-font-serif);
  font-size: var(--lp-h1-size);
  line-height: var(--lp-h1-line);
  font-weight: 700;
  letter-spacing: var(--lp-h1-letter);
  color: var(--lp-text);
  margin: 0;            /* grid row-gap handles spacing */
}
.lp-headline span {
  display: block;
  /* Each phrase is one line at the 600 px column. The spans give us
     deliberate stacking (rather than relying on word-wrap) so the
     rhythm survives at any wider viewport too. */
}
.lp-headline-accent { color: var(--lp-orange); }
.lp-lede {
  font-family: var(--lp-font-sans);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--lp-text-mid);
  margin: 0;            /* grid row-gap handles spacing */
}
.lp-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0 8px;   /* extra breathing room around CTAs */
  flex-wrap: wrap;
}
.lp-cta-primary--lg {
  height: 52px;
  padding: 14px 26px;
  font-size: 15px;
  border-radius: 8px;
}
.lp-cta-secondary {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 14px 26px;
  border-radius: 8px;
  background: transparent;
  border: 1.5px solid rgba(10, 31, 61, 0.22);
  color: var(--lp-text);
  font-family: var(--lp-font-sans);
  font-size: var(--lp-cta-size);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: border-color 200ms cubic-bezier(0.2, 0.65, 0.25, 1),
              transform 200ms cubic-bezier(0.2, 0.65, 0.25, 1),
              background 200ms cubic-bezier(0.2, 0.65, 0.25, 1);
}
.lp-cta-secondary:hover {
  border-color: var(--lp-text);
  transform: translateY(-2px);
  text-decoration: none;
  background: rgba(10, 31, 61, 0.04);
}
/* Step-15: trust row is now a 2-column grid (or 1-column on narrow)
 * so it never wraps to an asymmetric 3+2. With 5 items, 2 columns
 * gives 3+2 visually but balanced, OR we switch to wrap-as-many-as-
 * fit on a single row. Using auto-fit gives the cleanest result. */
.lp-trust-row {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
  gap: 10px 24px;
  align-items: center;
}
.lp-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--lp-font-sans);
  font-size: var(--lp-trust-size);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--lp-text-mid);
  white-space: nowrap;
}
.lp-trust-item svg {
  color: var(--lp-text);
  flex-shrink: 0;
}

@media (max-width: 1080px) {
  .lp-headline { font-size: var(--lp-h1-size-md); }
  .lp-hero-grid {
    grid-template-columns: 1fr;
    /* Step-15: card REORDERED above CTAs on mobile so the value
       prop is visible before any scrolling.  Order: headline →
       lede → STAGE → cta → trust. */
    grid-template-areas:
      "headline"
      "lede"
      "stage"
      "cta"
      "trust";
    column-gap: 0;
    row-gap: 28px;
  }
  .lp-headline,
  .lp-lede { max-width: 720px; }
  .lp-stage { align-self: stretch; }
}
@media (max-width: 720px) {
  .lp-hero { padding: 40px 0 64px; }
  .lp-hero-grid { padding: 0 18px; row-gap: 20px; }
  .lp-headline { font-size: var(--lp-h1-size-sm); }
  .lp-cta-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 4px 0 0;
  }
  .lp-cta-primary--lg,
  .lp-cta-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* ----- First-paint stagger ----------------------------------------------- *
 *
 * On first paint, hero elements fade up from 12 px below their final
 * position in a staggered cascade. Subtle, but the difference between
 * "page snaps into place" and "page composes itself in front of you"
 * is exactly what separates competent from premium. The card has the
 * longest delay so the viewer's eye lands on the headline first, then
 * the lede, then the proof on the right. Respects reduced-motion. */
@keyframes lp-hero-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lp-headline,
.lp-lede,
.lp-cta-row,
.lp-trust-row,
.lp-stage {
  opacity: 0;
  animation: lp-hero-fade-up 720ms cubic-bezier(0.2, 0.65, 0.25, 1) forwards;
}
.lp-headline  { animation-delay: 0ms;   }
.lp-lede      { animation-delay: 140ms; }
.lp-cta-row   { animation-delay: 280ms; }
.lp-trust-row { animation-delay: 360ms; }
.lp-stage     { animation-delay: 220ms; }
@media (prefers-reduced-motion: reduce) {
  .lp-headline,
  .lp-lede,
  .lp-cta-row,
  .lp-trust-row,
  .lp-stage {
    opacity: 1;
    animation: none;
    transform: none;
  }
}

/* --- Product preview composition (spec §6, post step-14) ---------------- *
 *
 * The .lp-frame is the outer chrome — a card with layered shadow that the
 * product preview lives inside. Step-14 collapsed the inner composition
 * from a 3-column fake-app (sidebar + main + drawer, which truncated
 * "Partner Brief" → "Pa..." at column-width) down to a single-fact card:
 * chrome row + eyebrow + subject + big number + verbatim source quote
 * (with the matching number highlighted) + snapshot hash row + CTA. One
 * value, bound to its source, in a frame that breathes. */

.lp-stage {
  position: relative;
  align-self: center;
  width: 100%;
}
.lp-frame {
  position: relative;
  width: 100%;
  max-width: 480px;       /* matches the right-col fixed width in lp-hero-grid */
  margin: 0;              /* override browser default <figure> margin (16px 40px) */
  background: var(--lp-surface);
  border: 1px solid var(--lp-rule);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Step-14 shadow recipe: a closer, softer drop + a wider ambient halo
     so the card reads as a layered object on the cream canvas without
     looking heavy. Tuned to Apple/Linear/Vercel hero-card depth. */
  box-shadow:
    0 1px 2px rgba(10, 31, 61, 0.04),
    0 4px 12px rgba(10, 31, 61, 0.06),
    0 18px 36px rgba(10, 31, 61, 0.08),
    0 48px 96px rgba(10, 31, 61, 0.10);
}

/* --- §6 (step-14) single-fact card --------------------------------------- *
 *
 * The card has two regions: a slim chrome row at top (mark · breadcrumb ·
 * window dots) and a body that follows the fact-with-citation rhythm:
 *
 *   eyebrow      (kind classifier, uppercase, orange)
 *   subject      (what this number is, serif, 22px)
 *   value        (the number itself, serif, 64px tabular)
 *   quote        (verbatim source span on cream, with yellow highlight)
 *   proof        (snapshot hash + retrieved timestamp, monospace small)
 *   CTA          ("View source span ↗", quiet)
 *
 * This composition is the SourceRails value prop in one glance: a number
 * that is bound to the exact words on the filed page, with a durable
 * snapshot anchor a reviewer can verify. */

.lp-fact {
  padding: 0;
}
.lp-fact-chrome {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--lp-rule);
  background: var(--lp-surface);
}
.lp-fact-mark {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
}
.lp-fact-crumb {
  font-family: var(--lp-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--lp-text-mid);
  letter-spacing: 0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  transition: color 160ms ease;
}
a.lp-fact-crumb {
  /* Underline only on hover/focus so the chrome stays calm in
     resting state — the breadcrumb is identification first, link
     second.  Hover gives the affordance. */
  text-decoration: none;
}
a.lp-fact-crumb:hover,
a.lp-fact-crumb:focus-visible {
  color: var(--lp-orange);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.lp-fact-dots {
  display: inline-flex;
  gap: 5px;
}
.lp-fact-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lp-rule);
}

.lp-fact-body {
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
}

.lp-fact-eyebrow {
  display: inline-block;
  font-family: var(--lp-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-orange);
  margin-bottom: 14px;
}
.lp-fact-subject {
  font-family: var(--lp-font-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--lp-text-mid);
  margin: 0 0 6px;
}
.lp-fact-value {
  font-family: var(--lp-font-serif);
  font-size: 64px;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--lp-text);
  font-variant-numeric: tabular-nums;
  margin: 4px 0 22px;
  display: flex;
  align-items: baseline;
}
.lp-fact-currency {
  font-size: 0.55em;
  color: var(--lp-text-mid);
  margin-right: 4px;
  letter-spacing: 0;
}
.lp-fact-unit {
  font-size: 0.45em;
  color: var(--lp-text-mid);
  margin-left: 6px;
  font-weight: 600;
  letter-spacing: 0;
}

.lp-fact-quote {
  margin: 0 0 36px;     /* step-17: extra room below for citation chip */
  padding: 18px 20px 22px;
  background: var(--lp-bg-soft);
  border-left: 3px solid var(--lp-orange);
  border-radius: 0 8px 8px 0;
}
.lp-fact-quote p {
  font-family: var(--lp-font-serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.55;
  color: var(--lp-text);
  margin: 0 0 10px;
}
.lp-fact-hl {
  background: var(--lp-highlight);
  color: var(--lp-text);
  padding: 1px 3px;
  border-radius: 2px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  /* Positioning context for the citation marker that anchors the
     claim → source bind moment (see .lp-fact-hl::after below). */
  position: relative;
}

/* --- Step-17 claim → source bind moment ------------------------------- *
 *
 * The hero card's central act is showing that the displayed claim value
 * is bound to the same highlighted value inside the illustrative source
 * span. The earlier composition relied on the reader to
 * notice this on their own. Step-17 adds a small VISIBLE bind
 * marker that survives in the resting state — a citation chip
 * ("Live proof") anchored to the highlighted span — and a brief
 * one-shot first-paint animation that draws attention to the bind:
 *
 *   1. The big value gets a soft orange ring that expands once
 *      and fades (160 ms in, hold 280 ms, 200 ms out).
 *   2. The highlight in the quote brightens to full opacity from
 *      a starting wash (the wash itself is final state — the
 *      animation only emphasises it).
 *   3. The citation chip slides up from under the highlight,
 *      pointing to where the value came from.
 *
 * The resting state (post-animation, or under prefers-reduced-
 * motion: reduce) still shows: highlighted number + visible
 * citation chip + orange left rule on the quote. The bind is
 * explained in CSS, not in motion alone. */

.lp-fact-value {
  /* Add an attention pulse ring on first paint. The ring is
     orange-soft, expands from 0 to a halo, and fades. Final state:
     no ring (the value stands alone). */
  position: relative;
}
.lp-fact-value::before {
  content: '';
  position: absolute;
  inset: -8px -12px;
  border-radius: 12px;
  background: var(--lp-orange);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  animation: lp-bind-value-pulse 1400ms cubic-bezier(0.2, 0.65, 0.25, 1) 600ms 1 forwards;
}
@keyframes lp-bind-value-pulse {
  0%   { opacity: 0;    transform: scale(0.96); }
  30%  { opacity: 0.12; transform: scale(1.0);  }
  100% { opacity: 0;    transform: scale(1.06); }
}

/* Highlight: visible in resting state; the animation only adds a
 * one-shot "settle" — a brief brighter sweep that finishes at the
 * normal --lp-highlight color. Even with prefers-reduced-motion
 * the highlight itself remains. */
.lp-fact-hl {
  animation: lp-bind-highlight-settle 900ms cubic-bezier(0.2, 0.65, 0.25, 1) 900ms 1;
}
@keyframes lp-bind-highlight-settle {
  0%   { background: rgba(252, 233, 166, 0);   box-shadow: 0 0 0 0 rgba(208, 74, 2, 0); }
  30%  { background: rgba(252, 233, 166, 1);   box-shadow: 0 0 0 6px rgba(208, 74, 2, 0.18); }
  100% { background: var(--lp-highlight);      box-shadow: 0 0 0 0 rgba(208, 74, 2, 0); }
}

/* Citation chip — durable resting-state element that anchors the
 * bind. Lives just under the highlight, points to the Note + page
 * (the same information the quote footer carries but rendered as
 * a tactile object next to the value being explained). */
.lp-fact-hl::after {
  content: 'Note 7 · p. 47';
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--lp-font-sans);
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-orange);
  background: var(--lp-surface);
  border: 1px solid var(--lp-orange);
  border-radius: 999px;
  padding: 3px 8px;
  /* Resting state is OPACITY 1 — the chip is permanently visible.
   * The animation uses fill-mode "both" so the backwards fill
   * applies opacity 0 during the delay (chip hidden until 1.5 s
   * after paint), then animates to opacity 1, then forwards fill
   * holds — but even if forwards is dropped by any cascade quirk,
   * the base value is 1 and the chip stays visible.  Truth survives
   * animation: the bind is shown by a real element, not by motion. */
  opacity: 1;
  animation: lp-bind-chip-in 600ms cubic-bezier(0.2, 0.65, 0.25, 1) 1500ms 1 both;
  pointer-events: none;
}
@keyframes lp-bind-chip-in {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* prefers-reduced-motion: respect. Skip all bind animations but
 * keep the final visual relationships:
 *   - highlight in normal yellow
 *   - citation chip visible in resting position
 *   - no value-pulse ring
 * The bind is still explained — by visible elements, not by motion. */
@media (prefers-reduced-motion: reduce) {
  .lp-fact-value::before { animation: none; opacity: 0; }
  .lp-fact-hl { animation: none; background: var(--lp-highlight); }
  .lp-fact-hl::after {
    animation: none;
    opacity: 1;
    transform: translateX(-50%);
  }
}
.lp-fact-quote footer {
  font-family: var(--lp-font-sans);
  font-size: 11.5px;
  font-style: normal;
  color: var(--lp-text-soft);
  letter-spacing: 0.005em;
}

.lp-fact-proof {
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.lp-fact-proof > div { margin: 0; }
.lp-fact-proof dt {
  font-family: var(--lp-font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-text-soft);
  margin: 0 0 4px;
}
.lp-fact-proof dd {
  margin: 0;
  font-family: var(--lp-font-sans);
  font-size: 12.5px;
  color: var(--lp-text-mid);
  font-variant-numeric: tabular-nums;
}
.lp-fact-proof code {
  font-family: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--lp-text);
  background: transparent;
}

/* Step-16 P0: the fake button below the proof row was replaced
 * with truthful caption text. The styling is deliberately quiet —
 * it reads as "this is sample text" rather than "this is a control
 * you can press." The inline <a> to /examples IS a real link and
 * gets the standard inline-link treatment so a keyboard user can
 * tab to it and a screen reader hears its destination. */
.lp-fact-caption {
  margin: 0;
  font-family: var(--lp-font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--lp-text-soft);
  font-style: italic;
}
.lp-fact-caption a {
  color: var(--lp-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  font-style: normal;
}
.lp-fact-caption a:hover {
  color: var(--lp-orange);
  text-decoration-color: var(--lp-orange);
}

/* Step-15: card now lifts more dramatically on hover and the
 * highlighted source quote breathes. The shadow growth and 4 px
 * translate give a sense of "this card represents something you
 * can pick up and look at." */
.lp-fact {
  transition: transform 360ms cubic-bezier(0.2, 0.65, 0.25, 1),
              box-shadow 360ms cubic-bezier(0.2, 0.65, 0.25, 1);
  will-change: transform;
}
.lp-fact-hl {
  transition: background 240ms ease, color 240ms ease;
}
@media (hover: hover) {
  .lp-stage:hover .lp-fact {
    transform: translateY(-6px);
    box-shadow:
      0 1px 2px rgba(10, 31, 61, 0.05),
      0 8px 20px rgba(10, 31, 61, 0.10),
      0 28px 56px rgba(10, 31, 61, 0.14),
      0 64px 128px rgba(10, 31, 61, 0.16);
  }
  .lp-stage:hover .lp-fact-hl {
    background: var(--lp-orange);
    color: var(--lp-cta-fg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-fact { transition: none; }
  .lp-fact-hl { transition: none; }
}

@media (max-width: 1080px) {
  .lp-frame { max-width: 520px; margin: 0 auto; }
  .lp-fact-body { padding: 24px 26px 28px; }
  .lp-fact-value { font-size: 56px; }
}
@media (max-width: 720px) {
  .lp-frame { max-width: 100%; border-radius: 14px; }
  .lp-fact-chrome { padding: 12px 16px; }
  .lp-fact-body { padding: 22px 20px 24px; }
  .lp-fact-eyebrow { font-size: 10.5px; }
  .lp-fact-subject { font-size: 18px; }
  .lp-fact-value { font-size: 48px; }
  .lp-fact-quote { padding: 14px 16px 12px; }
  .lp-fact-quote p { font-size: 14px; }
  .lp-fact-proof { grid-template-columns: 1fr; gap: 12px; }
}

/* --- Feature strip (spec §9) --------------------------------------------- */

.lp-features {
  padding: 96px 0 112px;
}
.lp-section-head {
  text-align: center;
  margin-bottom: 56px;
  padding: 0 40px;
}
.lp-section-eyebrow {
  font-family: var(--lp-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-orange);
  margin: 0 0 14px;
}
.lp-section-title {
  font-family: var(--lp-font-serif);
  font-size: var(--lp-section-title);
  line-height: 1.2;
  font-weight: 700;
  color: var(--lp-text);
  letter-spacing: -0.01em;
  margin: 0;
}
.lp-section-rule {
  width: 48px;
  height: 3px;
  background: var(--lp-orange);
  border-radius: 2px;
  margin: 16px auto 0;
}

/* --- Trust section (step-16 P0) ----------------------------------------- *
 *
 * Five trust cards laid out as a 3-2 grid (3 across at desktop,
 * stacking gracefully on narrow). Each card is a real commitment,
 * not generic SaaS reassurance — the body text states the boundary
 * concretely (e.g., "We never ingest client-confidential documents,
 * working papers, or unfiled drafts."). */
.lp-trust-section {
  padding: 96px 0 112px;
  background: var(--lp-bg-soft);
  border-top: 1px solid var(--lp-rule);
}
.lp-trust-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 28px;
}
.lp-trust-grid > .lp-trust-card:nth-child(4),
.lp-trust-grid > .lp-trust-card:nth-child(5) {
  /* Visually balance 5 → 3+2 by letting the bottom row span wider
   * gaps so the orphan doesn't feel left-aligned. */
}
.lp-trust-card {
  background: var(--lp-surface);
  border: 1px solid var(--lp-rule);
  border-radius: 12px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lp-trust-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--lp-orange-soft);
  color: var(--lp-orange);
  border-radius: 10px;
}
.lp-trust-card-title {
  font-family: var(--lp-font-serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--lp-text);
  margin: 0;
}
.lp-trust-card-body {
  font-family: var(--lp-font-sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--lp-text-mid);
  margin: 0;
}
@media (max-width: 1080px) {
  .lp-trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .lp-trust-section { padding: 64px 0 80px; }
  .lp-trust-grid {
    grid-template-columns: 1fr;
    padding: 0 18px;
    gap: 18px;
  }
  .lp-trust-card { padding: 22px 20px; }
}
.lp-feature-grid {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
}
.lp-feature-card {
  text-align: left;
  display: flex;
  flex-direction: column;
}
.lp-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--lp-orange-soft);
  color: var(--lp-orange);
  border-radius: 10px;
  margin-bottom: 16px;
}
.lp-feature-title {
  font-family: var(--lp-font-sans);
  font-size: var(--lp-feature-title);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--lp-text);
  line-height: 1.3;
  margin: 0 0 8px;
}
.lp-feature-body {
  font-family: var(--lp-font-sans);
  font-size: var(--lp-feature-body);
  line-height: 1.55;
  color: var(--lp-text-mid);
  margin: 0;
  max-width: 240px;
}

@media (max-width: 1080px) {
  .lp-feature-grid { grid-template-columns: repeat(3, 1fr); }
  .lp-feature-grid > .lp-feature-card:nth-child(n+4) {
    /* Visually balance 5 → 3+2 layout: extra cards center under
       the row of three so we don't leave an orphan stuck left. */
  }
}
@media (max-width: 720px) {
  .lp-features { padding: 64px 0 80px; }
  .lp-section-head { margin-bottom: 36px; padding: 0 18px; }
  .lp-feature-grid {
    grid-template-columns: 1fr;
    padding: 0 18px;
  }
}

/* Stack the preview at narrow widths — shrink sidebar, hide drawer. */
@media (max-width: 1080px) {
  .lp-frame { max-width: 720px; margin: 0 auto; aspect-ratio: 4 / 3; }
}

/* ============================================================
   Marketing landing — hero with cycling story frame
   ============================================================ */

/* ============================================================
   Marketing landing — sections (features / how / cases / trust / about)
   ============================================================ */

/* ----- Features ------------------------------------------------------ */

/* ----- How it works -------------------------------------------------- */

/* ----- Use cases ----------------------------------------------------- */

/* ----- Trust principles --------------------------------------------- */

/* ----- About -------------------------------------------------------- */

/* ============================================================
   Marketing landing — responsive collapse
   ============================================================ */