/* Apple marketing layout tokens + utilities — measured 2026-10-26 (audit + apple.com).
   Load after tokens.css. Breakpoints: tablet ≤1068px, phone ≤734px, gutter ≤833px (footer). */

:root {
  --band-seam-gap: var(--space-3);

  --section-padding-main: var(--space-36);
  --section-padding-compact: var(--space-20);

  --stack-gap-headline-subhead: 6px;
  --stack-gap-subhead-cta: 17px;

  --grid-gap-col: var(--space-5);
  --grid-gap-row: var(--space-6);

  --layout-content-max: 980px;
  --layout-nav-max: 1024px;
  --layout-gutter: 22px;

  --bp-apple-tablet: 1068px;
  --bp-apple-phone: 734px;
  --bp-apple-gutter: 833px;
}

@media (max-width: 1068px) {
  :root {
    --section-padding-main: var(--space-30);
    --stack-gap-headline-subhead: var(--space-1);
    --stack-gap-subhead-cta: var(--space-4);
  }
}

@media (max-width: 734px) {
  :root {
    --section-padding-main: var(--space-28);
    --section-padding-compact: var(--space-18);
    --stack-gap-subhead-cta: 11px;
  }
}

/* Footer horizontal inset: 22px default, 16px at max-width 833px
   Source: ac-globalfooter.built.css — .ac-gf-content { padding: 0 22px } and
   @media (max-width: 833px) { padding: 0 16px } (see footers/apple-footer/notes.md). */
@media (max-width: 833px) {
  :root {
    --layout-gutter: var(--space-4);
  }
}

.section {
  padding-block: var(--section-padding-main);
}

.section--compact {
  padding-block: var(--section-padding-compact);
}

.band-seam > * + * {
  margin-block-start: var(--band-seam-gap);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-headline-subhead);
}

.stack--to-cta {
  gap: var(--stack-gap-subhead-cta);
}

.grid {
  display: grid;
  column-gap: var(--grid-gap-col);
  row-gap: var(--grid-gap-row);
}

.wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--layout-content-max);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.wrap--nav {
  max-width: var(--layout-nav-max);
}