/* The landing (second pass, 2026-10-16): the marketing page at `/` on the public demo's box -- a nav,
   the pitch beside a wall of twelve renders, how it works, four features with crops, a band on
   self-hosting, a closing line and a footer (docs/superpowers/specs/2026-10-16-landing-format-wall-
   design.md). Shared pieces are NOT restyled here: `.brand` comes from shell.css and `.btn` from
   components.css (design-system.md rule 3); where the landing needs them different it qualifies them
   inside its own containers. Tokens only. */
@layer pages {
  /* The anonymous layout branch defaults `main` to `.auth-main`, a 440px column for the card alone.
     The landing opts out with `content_for :container_class, "landing-main"`. A BARE class wins here
     because `pages` comes after `shell` in the layer order, as `.public-main` does (css_hygiene_test
     derives the variant from the view and checks it). */
  .landing-main { max-width: 1200px; padding-top: var(--space-5); padding-bottom: var(--space-8); }

  .landing { display: grid; gap: var(--space-8); }
  .landing h2, .landing h3, .landing p { margin: 0; }

  /* NAV. The rail's `.brand`, reused, flush with the page's edge. Nothing to restore: the icon rail
     is a container query on `.rail` (shell.css), which no `.brand` outside the rail can match. */
  .landing-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .landing-nav .brand { padding: 0; }
  .landing-nav-links { display: flex; gap: var(--space-5); font-size: 14px; }
  .landing-nav-links a, .landing-footer a { color: var(--fg-muted); }
  .landing-nav-links a:hover, .landing-footer a:hover { color: var(--fg); }

  /* HERO: the pitch, then the wall on a phone; side by side from 900px. `minmax(0, …)` and never a
     bare `fr`: a track's default minimum is its content's min-width, and a row of 256px images would
     hold it open past a phone's viewport (rule 11). */
  .landing-hero { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: center; }
  @media (min-width: 900px) { .landing-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-7); } }
  .landing-title { font-size: 40px; line-height: 46px; font-weight: 600; letter-spacing: -0.02em; max-width: 16ch; margin-bottom: var(--space-4); }
  .landing .landing-lede { font-size: 17px; line-height: 26px; color: var(--fg-muted); max-width: 52ch; margin-bottom: var(--space-5); }
  .landing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
  .landing-actions form { margin: 0; }
  .landing .landing-hint { margin-top: var(--space-3); font-size: 13px; line-height: 18px; color: var(--fg-muted); }

  /* THE WALL: three across on a phone, four from 900px. Each tile is the app's own render, so it
     sits on the thumb stage, white in both themes (rule 5): most tiles are TRANSPARENT PNGs of dark
     lines, drawn for a white stage, and would vanish on the dark theme's surface.
     The extension is mono because it is data, on a stage-coloured chip. The render is INSET, with the
     bottom 24px kept for that chip (6px off the edge plus its 16px line), so no drawing runs into the
     frame or under its own label -- seen on the first look at the page, where both did. */
  .landing-wall-figure { margin: 0; }
  .landing-wall-figure figcaption { margin-top: var(--space-3); font-size: 13px; line-height: 18px; color: var(--fg-muted); }
  .landing-wall { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (min-width: 900px) { .landing-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); } }
  /* The wall's tiles are the app's own renders, so they are ink on paper like every tile
     (design-system.md rule 5): isolated, and multiplied onto the card. */
  .landing-tile { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--thumb-stage); isolation: isolate; }
  .landing-tile img { display: block; width: 100%; height: 100%; object-fit: contain; padding: var(--space-2) var(--space-2) var(--space-5); mix-blend-mode: multiply; }
  .landing-tile-ext { position: absolute; left: 6px; bottom: 6px; padding: 0 4px; border-radius: var(--radius-control); background: var(--thumb-stage); color: var(--thumb-ink); font-family: var(--font-mono); font-size: 11px; line-height: 16px; }

  .landing .landing-section-title { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--space-5); }

  /* HOW IT WORKS: three numbered steps, one row from 720px. */
  .landing-steps ol { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 720px) { .landing-steps ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .landing-steps li { counter-increment: step; padding-top: var(--space-4); border-top: 1px solid var(--line); }
  .landing-steps li::before { content: counter(step); display: block; margin-bottom: var(--space-2); font-family: var(--font-mono); font-size: 13px; color: var(--fg-muted); }
  .landing .landing-steps h3 { font-size: 17px; line-height: 24px; font-weight: 600; margin-bottom: var(--space-2); }
  .landing-steps p, .landing-feature-text p, .landing-own p, .landing-closing p { font-size: 15px; line-height: 23px; color: var(--fg-muted); }

  /* FEATURES: the text beside its crop from 900px, alternating sides; the crop under the text below.
     Counted inside `.landing-features`, so `:nth-child` sees features only. */
  .landing-features { display: grid; gap: var(--space-8); }
  .landing-feature { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: center; }
  @media (min-width: 900px) {
    .landing-feature { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-7); }
    .landing-feature:nth-child(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
    .landing-feature:nth-child(even) .landing-feature-text { order: 2; }
  }
  .landing .landing-feature h2 { font-size: 22px; line-height: 28px; font-weight: 600; margin-bottom: var(--space-3); }
  .landing-feature-shot { margin: 0; }
  .landing-feature-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); }

  /* YOURS, ON YOUR BOX: four short cells in a panel, two across on a phone. */
  .landing-own { padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); }
  .landing-own ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 900px) { .landing-own ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .landing .landing-own h3 { font-size: 15px; line-height: 22px; font-weight: 600; margin-bottom: var(--space-1); }

  /* CLOSING AND FOOTER. */
  .landing-closing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); padding-top: var(--space-6); border-top: 1px solid var(--line); }
  .landing .landing-closing h2 { font-size: 22px; line-height: 28px; font-weight: 600; margin-bottom: var(--space-1); }
  .landing-footer { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: 13px; color: var(--fg-muted); }

  @media (max-width: 899px) {
    .landing { gap: var(--space-7); }
    .landing-title { font-size: 30px; line-height: 36px; }
    .landing .landing-lede { font-size: 15px; line-height: 23px; }
    /* The panel's desktop padding left each of the four cells about 130px at 375, wrapping a
       two-word heading onto two lines. */
    .landing-own { padding: var(--space-5) var(--space-4); }
  }
}