/* base.css, reset, typography, layout primitives */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-18);
    line-height: 1.6;
    color: var(--c-ink);
    background: var(--c-cream);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--c-primary); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--c-primary-deep); }
button { font: inherit; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--c-ink);
    line-height: 1.1;
    margin: 0 0 var(--space-4);
    letter-spacing: -0.01em;
}
h1 { font-size: clamp(var(--fs-36), 5.5vw, var(--fs-72)); letter-spacing: -0.02em; }
h2 { font-size: clamp(var(--fs-30), 3.6vw, var(--fs-44)); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-24); }
p { margin: 0 0 var(--space-4); }

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

.eyebrow {
    text-transform: uppercase;
    font-size: var(--fs-12);
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--c-primary);
    margin: 0 0 var(--space-3);
}

/* Tighter section rhythm (2026-06-24): the top/bottom padding on content
   panels was leaving large empty bands site-wide (up to 128px each end). Cut
   aggressively but with a sane floor so panels still breathe and never collapse
   on mobile. Section variants elsewhere are trimmed proportionally to match. */
.section { padding-block: clamp(20px, 3.5vw, 40px); }
.section__head { max-width: 720px; margin-bottom: var(--space-7); }
.section__centered { max-width: 760px; margin-inline: auto; text-align: center; }
.section__title { margin: 0; }
.section__lede { font-size: var(--fs-20); color: var(--c-ink-soft); margin-top: var(--space-4); }
.section__more { margin-top: var(--space-6); }
.section__more a { font-weight: 600; }

.skip-link {
    position: absolute; left: -9999px; top: var(--space-3);
    background: var(--c-primary); color: #fff;
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
    z-index: 1000;
}
.skip-link:focus { left: var(--space-3); }

/* Buttons, large, rounded, thumb-friendly */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 16px 28px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: var(--fs-16);
    line-height: 1;
    border: 2px solid transparent;
    cursor: pointer;
    overflow: hidden;
    transition:
        transform var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out);
    text-align: center;
    /* will-change removed (1.23.72): .btn applies to ~30+ buttons per page,
       was the single largest contributor to Firefox's will-change budget.
       Hover hint added below only when the user is actively about to click. */
    min-height: 52px;
}
.btn:hover, .btn:focus-visible { will-change: transform; }
.btn--lg { padding: 20px 34px; font-size: var(--fs-18); min-height: 60px; }
.btn--sm { padding: 11px 20px; font-size: var(--fs-14); min-height: 42px; }

.btn--primary {
    background: var(--c-primary); color: #fff;
    box-shadow:
        0 10px 24px -10px rgba(27, 78, 143, 0.55),
        0 2px 6px rgba(14, 30, 25, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.btn--primary:hover {
    background: var(--c-primary-deep); color: #fff; transform: translateY(-3px);
    box-shadow:
        0 18px 36px -14px rgba(27, 78, 143, 0.6),
        0 6px 14px rgba(14, 30, 25, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.btn--accent {
    background: var(--c-accent); color: var(--c-primary-deep);
    box-shadow:
        0 10px 24px -10px rgba(232, 184, 51, 0.55),
        0 2px 6px rgba(14, 30, 25, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn--accent:hover {
    background: var(--c-accent-warm); color: var(--c-primary-deep); transform: translateY(-3px);
    box-shadow:
        0 18px 36px -14px rgba(232, 184, 51, 0.65),
        0 6px 14px rgba(14, 30, 25, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn--ghost {
    background: rgba(255, 255, 255, 0.6);
    color: var(--c-primary);
    border-color: rgba(27, 78, 143, 0.25);
    backdrop-filter: blur(6px);
}
.btn--ghost:hover {
    background: #fff; color: var(--c-primary-deep); transform: translateY(-3px);
    border-color: var(--c-primary);
    box-shadow: 0 10px 24px -10px rgba(27, 78, 143, 0.25);
}

/* Sheen pass on hover */
.btn--sheen::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.8s var(--ease-out);
    pointer-events: none;
}
.btn--sheen:hover::after { transform: translateX(120%); }

.btn__icon { display: inline-flex; }

/* Focus ring, 2px, high-contrast */
:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Glass surface */
.glass {
    background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.4));
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: var(--shadow-2);
    border-radius: var(--radius-xl);
}

/* Prose */
.prose { max-width: 760px; }
.prose h2 { margin-top: var(--space-7); }
.prose p { color: var(--c-ink-soft); font-size: var(--fs-18); }
.fine-print { color: var(--c-ink-soft); font-size: var(--fs-14); margin-top: var(--space-4); }

/* 1.23.29 Mobile polish: long body copy left-aligns on phone width for
   readability. Headlines that live in their own .section__title element
   stay centered because .section__centered only affects free-flow inline/
   block text inside the centered block; we override the alignment but do
   not change container width or any title element. Desktop unchanged. */
@media (max-width: 560px) {
    .section__centered { text-align: left; }
    .section__centered .section__title,
    .section__centered .section__head,
    .section__centered h1,
    .section__centered h2,
    .section__centered h3 { text-align: center; }
}