/* Family theme — reset, typography, layout helpers. */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

body.is-locked {
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    text-wrap: balance;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p {
    margin: 0;
    text-wrap: pretty;
}

a {
    color: inherit;
    text-decoration: none;
}

img, svg, video {
    display: block;
    max-width: 100%;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    border: 0;
    background: none;
    padding: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

table {
    border-collapse: collapse;
    width: 100%;
}

[hidden] {
    display: none !important;
}

::selection {
    background: var(--primary);
    color: var(--on-primary);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Layout */

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

.container--narrow { max-width: 820px; }

.stack { display: flex; flex-direction: column; gap: var(--gap, 16px); }
.row { display: flex; align-items: center; gap: var(--gap, 12px); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.row--top { align-items: flex-start; }
.grow { flex: 1 1 0; min-width: 0; }

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

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

@media (max-width: 640px) {
    .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
}

.section { padding-block: clamp(36px, 6vw, 72px); }
.section--tight { padding-block: clamp(20px, 3vw, 36px); }

.section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(20px, 3vw, 32px);
}

.section__head p { color: var(--text-muted); margin-top: 6px; }

/* Text helpers */

.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.small { font-size: var(--text-sm); }
.tiny { font-size: var(--text-xs); }
.strong { font-weight: 700; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.display { font-family: var(--font-display); letter-spacing: -.02em; }
.gradient-text {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.icon { flex: none; }

/* Rich text written in the product editor */

.prose { color: var(--text-muted); line-height: 1.7; overflow-wrap: anywhere; }
.prose > * + * { margin-top: .9em; }
.prose strong, .prose b { color: var(--text); }
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--text); font-size: var(--text-lg); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 1.6em; }
.prose ul li::before {
    content: '';
    position: absolute;
    left: .2em;
    top: .62em;
    width: .5em;
    height: .5em;
    border-radius: 50%;
    background: var(--grad-brand);
}
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .35em; }
.prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: var(--radius); height: auto; }
.prose table { display: block; overflow-x: auto; }
.prose td, .prose th { border: 1px solid var(--border); padding: 8px 12px; }

/* Scroll reveal */

[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
    transition-delay: calc(var(--i, 0) * 60ms);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.no-js [data-reveal] {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
    }
}