/* Advertising page: static content, shared theme tokens and responsive grids. */
@layer pages {
  main.adverts-page { padding: 0; }
  .ad-hero { padding-block: 5rem 4rem; text-align: center; }
  .ad-hero > .badge { margin-block-end: 1.25rem; }
  .ad-hero h1 { max-inline-size: 48rem; margin-inline: auto; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; font-weight: 600; letter-spacing: -.045em; text-wrap: pretty; }
  .ad-hero > p { max-inline-size: 42rem; margin: 1.25rem auto 0; font-size: 1.125rem; line-height: 1.6; color: var(--muted-foreground); }
  .ad-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-block-start: 2rem; }
  .ad-highlights { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.5rem; margin-block-start: 2.5rem; color: var(--muted-foreground); font-size: .875rem; }
  .ad-highlights li { display: flex; align-items: center; gap: .5rem; }
  .ad-highlights .icon { color: var(--brand); }
  .ad-section { padding-block: 4rem; }
  .ad-ruled { border-block-start: 1px solid color-mix(in oklch, var(--border) 60%, transparent); }
  .ad-intro { text-align: center; margin-block-end: 2.5rem; }
  .adverts-page h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); line-height: 1.25; letter-spacing: -.035em; font-weight: 600; }
  .adverts-page h3 { font-size: 1rem; font-weight: 500; letter-spacing: -.025em; }
  .ad-feature-grid, .ad-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-feature-grid { gap: 2rem; }
  .ad-feature { display: flex; align-items: flex-start; gap: 1rem; }
  .ad-icon { display: grid; place-items: center; flex-shrink: 0; inline-size: 2.75rem; block-size: 2.75rem; border-radius: .875rem; color: var(--brand); background: color-mix(in oklch, var(--brand) 9%, transparent); }
  .ad-icon .icon { inline-size: 1.25rem; block-size: 1.25rem; }
  .ad-feature p, .ad-option p { margin-block-start: .375rem; font-size: .875rem; line-height: 1.5; color: var(--muted-foreground); }
  .ad-options { gap: 1rem; }
  .ad-option { display: grid; align-content: start; gap: 1rem; padding: 1.5rem; border: 1px solid color-mix(in oklch, var(--border) 65%, transparent); border-radius: 1rem; }
  .ad-developers { margin-block: 4rem 0; padding: 3rem; background: color-mix(in oklch, var(--muted) 40%, transparent); border: 1px solid color-mix(in oklch, var(--border) 65%, transparent); border-radius: 1rem; }
  .ad-lead { max-inline-size: 42rem; margin-block-start: .75rem; color: var(--muted-foreground); line-height: 1.6; }
  .ad-developers .ad-feature-grid { margin-block-start: 2rem; }
  .ad-developers .ad-icon { background: var(--background); }
  .ad-publish { margin-block-start: 2rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--border); color: var(--muted-foreground); font-size: .875rem; line-height: 1.8; }
  .ad-publish a { display: inline-flex; align-items: center; gap: .375rem; color: var(--brand); font-weight: 500; }
  .ad-publish a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .ad-contact { padding-block: 5rem 6rem; text-align: center; }
  .ad-contact > .ad-icon { margin: 0 auto 1.25rem; }
  .ad-contact p { max-inline-size: 36rem; margin: 1rem auto 1.5rem; color: var(--muted-foreground); line-height: 1.6; }
  @media (width < 640px) {
    .ad-hero { padding-block: 3rem; }
    .ad-hero > p { font-size: 1rem; }
    .ad-actions { flex-direction: column; }
    .ad-highlights { flex-direction: column; align-items: center; gap: .875rem; }
    .ad-feature-grid, .ad-options { grid-template-columns: 1fr; }
    .ad-section { padding-block: 3rem; }
    .ad-developers { margin-block-start: 2rem; padding: 1.5rem; }
    .ad-contact { padding-block: 3rem 4rem; }
    .ad-contact .btn { max-inline-size: 100%; padding-inline: 1rem; font-size: .875rem; }
  }
}