/* Marketing landing (app/views/marketing) — structural bones only: the sticky-footer
   shell, the header bar, the section container, the narrow reading column, a responsive
   column pair, the signup column, the FAQ rows, and the skip link. Everything visual
   comes from the kit + tokens; the landing deliberately degrades to simple stacked
   sections rather than reproducing the old Tailwind hero/grid styling. */
@layer components {
  .marketing-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  /* Full-bleed surface band (header, footer, trust strip, closing CTA). */
  .marketing-band {
    background-color: var(--surface);
  }

  .marketing-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--space-3) var(--space-4);
  }

  .marketing-section {
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--space-6) var(--space-4);
  }

  .marketing-narrow {
    max-width: var(--prose);
    margin-inline: auto;
  }

  .marketing-cols {
    display: grid;
    gap: var(--space-5);
  }
  @media (min-width: 768px) {
    .marketing-cols {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* The proof card's headline figure — numerals in the UI face, never mono. */
  .marketing-metric {
    font: var(--type-h1);
    font-variant-numeric: tabular-nums;
  }

  /* Early-access capture: input above button; width behaves in both block and flex
     contexts (hero column, centered closing band). */
  .marketing-signup {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    max-width: 24rem;
  }

  .marketing-faq-item {
    padding-block: var(--space-4);
  }
  .marketing-faq-chevron {
    color: var(--text-secondary);
    transition: transform var(--duration-fast) var(--ease-smooth);
  }
  details[open] .marketing-faq-chevron {
    transform: rotate(180deg);
  }

  /* Visually hidden until keyboard focus; composes with .btn-secondary when shown. */
  .skip-link {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 50;
  }
  .skip-link:not(:focus) {
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}