/* SeatLink v3 home page (3.02.020). Colours come from tokens only. Markup: home.php. A signed-out visitor's first screen: deep teal band, one apricot action. */
@layer pages {
  .lp { background: var(--canvas); }

  .lp-hero { background: var(--teal); color: var(--surface); }
  .lp-hero a:not(.btn) { color: inherit; }
  .lp-nav { display: flex; align-items: center; gap: var(--s-4); max-width: 72rem; margin-inline: auto; padding: var(--s-4); }
  .lp-nav__brand { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.01em; text-decoration: none; }
  .lp-nav__brand .logo { width: 2rem; height: 2rem; }
  .lp-nav__spacer { flex: 1; }
  .lp-nav__link { font-weight: 650; text-decoration: none; padding: var(--s-2) var(--s-3); border-radius: var(--r-1); }
  .lp-nav__link:hover { background: var(--teal-hover); }

  .lp-hero__inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-6); align-items: center; max-width: 72rem; margin-inline: auto; padding: var(--s-6) var(--s-4) var(--s-8); }
  .lp-hero__title { margin: 0; font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: -0.02em; max-width: 20ch; }
  .lp-hero__lede { margin: var(--s-4) 0 0; font-size: var(--text-lg); max-width: 48ch; color: var(--rail-ink-2); }
  .lp-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
  .lp-hero__more { background: transparent; color: var(--surface); border-color: var(--rail-ink-2); }
  .lp-hero__more:hover { background: var(--teal-hover); }
  .lp-hero__note { margin: var(--s-5) 0 0; max-width: 52ch; color: var(--rail-ink-2); font-size: var(--text-sm); }
  .lp-hero__art { width: 100%; height: auto; max-height: 20rem; }

  /* the picture: tables are plates, seats are dots; apricot = taken, outline = free */
  .lp-table { fill: var(--teal-hover); stroke: var(--rail-ink-2); stroke-width: 2; }
  .lp-num { fill: var(--surface); font-size: 1.75rem; font-weight: 800; font-family: var(--font); }
  .lp-seat { fill: transparent; stroke: var(--rail-ink-2); stroke-width: 2; }
  .lp-seat--taken { fill: var(--signal); stroke: var(--signal); }

  .lp-section { max-width: 72rem; margin-inline: auto; padding: var(--s-7) var(--s-4); }
  .lp-section--tint { max-width: none; background: var(--surface); border-block: 1px solid var(--hairline); }
  .lp-section--tint > * { max-width: 72rem; margin-inline: auto; }
  .lp-section__title { margin: 0 0 var(--s-5); font-size: var(--text-2xl); }

  .lp-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
  .lp-feature { padding: var(--s-5); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-2); }
  .lp-feature > .icon { width: 1.75rem; height: 1.75rem; color: var(--teal); }
  .lp-feature__title { margin: var(--s-3) 0 var(--s-1); font-size: var(--text-lg); }
  .lp-feature__title a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .lp-feature p { margin: 0; color: var(--ink-2); }

  .lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--s-5); margin-block: 0; padding: 0; list-style: none; counter-reset: step; }
  .lp-step { counter-increment: step; }
  .lp-step::before {
    content: counter(step); display: grid; place-items: center; width: var(--plate-sm); height: var(--plate-sm); margin-bottom: var(--s-3);
    background: var(--teal); color: var(--surface); border-radius: var(--r-2); font-size: var(--text-xl); font-weight: 800;
  }
  .lp-step__title { margin: 0 0 var(--s-1); font-size: var(--text-lg); }
  .lp-step p { margin: 0; color: var(--ink-2); }

  .lp-close { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .lp-close .lp-section__title { margin: 0; }
  .lp-close p { margin: 0; }

  .lp-foot { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); max-width: 72rem; margin-inline: auto; padding: var(--s-5) var(--s-4) var(--s-6); color: var(--ink-2); font-size: var(--text-sm); }

  @media (max-width: 52rem) {
    .lp-hero__inner { grid-template-columns: 1fr; padding-bottom: var(--s-7); }
    .lp-hero__art { max-height: 14rem; }
  }
}