/* The public site (marketing-site.md): the panel's editorial voice on white, the logo at the
   top, the same headline, index and metric pieces. No feature grid, no cards. */
@layer components {
  body.site { background: #fff; }

  .site-header,
  .site-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--block-space) var(--inline-space-double);
    max-inline-size: 60rem;
    margin-inline: auto;
    padding: var(--block-space) var(--inline-space-double);
  }

  .site-header {
    & ul {
      display: flex;
      flex-wrap: wrap;
      gap: var(--block-space-half) calc(var(--inline-space) * 3);
      margin: 0;
      padding: 0;
      list-style: none;
      font-weight: 600;
    }
  }

  .site-header__logo { inline-size: 7.5rem; block-size: auto; }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    margin-block-start: calc(var(--block-space) * 3);
    border-block-start: 1px solid var(--color-border-strong);
    font-size: var(--text-small);
    color: var(--color-subtle);

    & p { margin: 0; }
  }

  .site-page {
    gap: calc(var(--block-space) * 1.5);

    & section { margin-block-start: var(--block-space-double); }
    & h2 { font-size: var(--text-xx-large); letter-spacing: -0.03em; }
    & h3 { margin-block-start: var(--block-space); font-size: var(--text-medium); }
    & p, & li { max-inline-size: 40rem; }
  }

  /* The one quotable sentence (marketing-site.md, Generative search): plain text, early. */
  .site-lede {
    margin-block-start: var(--block-space);
    font-size: var(--text-x-large);
    line-height: 1.35;
    letter-spacing: -0.015em;
  }

  .site-list {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    padding-inline-start: var(--inline-space-double);
  }

  /* Cookie consent: a strip at the foot of the screen, both choices the same size. */
  .consent {
    position: fixed;
    inset-inline: var(--inline-space-double);
    inset-block-end: var(--block-space);
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--block-space-half) var(--inline-space-double);
    max-inline-size: 56rem;
    margin-inline: auto;
    padding: var(--block-space) var(--inline-space-double);
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-large);
    font-size: var(--text-small);

    & p { margin: 0; max-inline-size: 36rem; }
    &[hidden] { display: none; }
  }

  .consent__actions { display: flex; gap: var(--inline-space); }
}