/**
 * Layout primitives: a centered container plus a CSS Grid helper.
 * Breakpoints (mobile-first):
 *   base   0–479px   phones
 *   sm   480px        large phones
 *   md   768px        tablets
 *   lg  1024px        laptops
 *   xl  1280px        desktops
 *   xxl 1536px        ultra-wide
 */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

@media (min-width: 768px) {
    .container { padding-inline: var(--space-6); }
}

@media (min-width: 1536px) {
    .container { max-width: 1440px; }
}

.grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid--2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 480px) {
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }

.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

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

@media (min-width: 1024px) {
    .section { padding-block: var(--space-24); }
}

.stack > * + * {
    margin-top: var(--space-4);
}

/* Prompt #2: in-page anchor links (hero "How it works" CTA, footer category
   links) land below the sticky header instead of underneath it. Reduced-
   motion users already get instant jumps via reset.css's blanket override. */
html {
    scroll-behavior: smooth;
}

[id] {
    scroll-margin-top: calc(var(--header-height) + var(--space-6));
}