/* ===========================================================================
KINDRED — COMPONENT LAYER (requires tokens.css to be loaded FIRST)
---------------------------------------------------------------------------
CLASS API — everything available to page authors. Nothing else exists.
---------------------------------------------------------------------------
LAYOUT
.container .container--xs .container--sm .container--md .container--lg
.container--xl
.section .section--alt .section--tight .section--flush .section--dark
.section-head .section-head--left
.stack .stack--xs .stack--sm .stack--lg .stack--xl (vertical rhythm)
.cluster .cluster--sm .cluster--center .cluster--between (wrapping row)
.grid .grid--2 .grid--3 .grid--4 .grid--sidebar .grid--tight
.center .divider .scroll-x .full-bleed
TYPOGRAPHY
.display .h1 .h2 .h3 .h4 .lead .body .small .tiny
.eyebrow .muted .subtle .balance .measure .measure-narrow .measure-wide
.text-accent .gradient-text .link .text-center .text-left
.nowrap .tabular .mono
BUTTONS
.btn + .btn--primary .btn--secondary .btn--ghost .btn--outline
.btn--danger .btn--on-accent
+ .btn--sm .btn--md .btn--lg .btn--xl
+ .btn--block .btn--pill .btn--icon .btn--loading .btn--wrap
.btn-group (side-by-side, stacks under 640px)
SURFACES
.card .card--flat .card--elevated .card--accent .card--interactive
.card--dark .card--pad-sm .card--pad-lg
.card__media .card__header .card__eyebrow .card__title .card__text
.card__body .card__footer
.glass (blurred translucent surface)
.callout .callout--accent .callout--success .callout--warn .callout--info
.note
.social-proof-placeholder (honest empty slot — NO fake testimonials)
CHIPS / BADGES
.chip .chip--sm .chip--lg .chip--accent .chip--outline .chip--active
.chip-row (horizontal scrolling chip strip on mobile)
.badge .badge--accent .badge--success .badge--warn .badge--danger
.badge--neutral .badge--dot
NAV / FOOTER
.nav .nav__inner .nav__brand .nav__logo .nav__wordmark
.nav__links .nav__link .nav__link--active .nav__actions
.nav--scrolled .nav--static
.footer .footer__inner .footer__brand .footer__blurb .footer__cols
.footer__col .footer__heading .footer__links .footer__legal
.footer__note
.sticky-cta .sticky-cta__text .sticky-cta--hidden
(add .has-sticky-cta to for bottom padding)
HERO
.hero .hero--center .hero__inner .hero__eyebrow .hero__title .hero__sub
.hero__actions .hero__note .hero__visual .hero-glow
DEVICE MOCK
.screenshot-frame .screenshot-frame--sm .screenshot-frame--lg
.screenshot-frame--float .screenshot-frame--tilt
.screenshot-frame__screen .screenshot-frame__notch
.screenshot-frame__statusbar .screenshot-frame__scroll
.screenshot-frame__home
CONTENT BLOCKS
.feature-row .feature-row--reverse .feature-row__media .feature-row__body
.feature-icon .feature-icon--moss .feature-icon--honey
.feature-list .feature-list__item (auto check marks)
.steps-list .steps-list__item (auto numbers)
.stat .stat__value .stat__label .stat__sub .stat-row
.avatar .avatar--xs .avatar--sm .avatar--md .avatar--lg .avatar--xl
.avatar--g1 … .avatar--g8 .avatar-stack
.person-card .person-card__head .person-card__id .person-card__name
.person-card__handle .person-card__why .person-card__tags
.person-card__actions
.thread .bubble .bubble--in .bubble--out .bubble__meta .typing
PRICING / FAQ
.pricing-grid .pricing-card .pricing-card--featured .pricing-card__flag
.pricing-card__name .pricing-card__price .pricing-card__amount
.pricing-card__period .pricing-card__note .pricing-card__list
.pricing-card__cta
.faq .faq__item .faq__q .faq__a (/ or button+aria)
FORMS / FEEDBACK
.field .field__label .field__hint .field__error .field--error
.input .input--lg .textarea .select .input-group .input-group__btn
.checkbox .switch
.progress .progress__bar .progress--indeterminate (set --progress: 40%)
.steps .step .step__dot .step__label .step--active .step--done
.toast-region .toast .toast--success .toast--warn .toast--danger
.toast__icon .toast__body .toast__title .toast__close
.skeleton .skeleton--text .skeleton--title .skeleton--avatar
.skeleton--btn .skeleton--card
.spinner .spinner--lg
.icon .icon--sm .icon--lg .icon--xl (sizing box for inline SVG)
.kbd
MOTION
.reveal + .reveal--d1 … .reveal--d6 (stagger)
· JS present : add class "js" to , then toggle ".is-visible"
(".reveal--in" also accepted) via IntersectionObserver.
· No JS : content is visible; browsers with animation-timeline
get a native scroll reveal for free.
· reduced motion: no transform, no fade, always visible.
.float .pulse-dot
UTILITIES
.visually-hidden .skip-link .no-scrollbar
.hide-mobile .hide-desktop .mt-0 .mb-0
---------------------------------------------------------------------------
Breakpoints: 640px (sm) · 900px (md) · 1200px (lg). Mobile-first.
=========================================================================== */
/* ===========================================================================
0. BASE
=========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--nav-h) + var(--space-4));
/* Belt and braces with the `overflow-x: clip` on below. Without it,
the 740px-wide comparison table on pricing.html leaves the DOCUMENT
740px wide at a 390px viewport (documentElement.scrollWidth = 700).
Chrome and Safari 16+ propagate body's clip to the viewport so nothing
actually scrolls, but any engine that drops the unknown `clip` keyword
gets a horizontally scrolling pricing page. `clip` (never `hidden`) so
the sticky nav keeps working. */
overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
margin: 0;
background-color: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: var(--text-lg);
line-height: var(--leading-normal);
font-weight: var(--weight-regular);
letter-spacing: var(--tracking-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
/* `clip` (not `hidden`) — hidden would turn into a scroll container
and break the sticky .nav in Chrome/Safari. */
overflow-x: clip;
}
body.has-sticky-cta { padding-bottom: 92px; }
@media (min-width: 900px) {
body.has-sticky-cta { padding-bottom: 0; }
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: var(--font-display);
font-weight: var(--weight-bold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--text);
text-wrap: balance;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a {
color: var(--text-link);
text-decoration: none;
transition: var(--transition-colors);
}
a:hover { color: var(--accent-hover); }
button, input, select, textarea {
font: inherit;
color: inherit;
letter-spacing: inherit;
}
button { background: none; border: 0; padding: 0; cursor: pointer; }
hr {
border: 0;
height: 1px;
background: var(--border);
margin: var(--space-8) 0;
}
strong, b { font-weight: var(--weight-semibold); color: var(--text); }
code, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; }
::selection {
background: rgb(var(--rgb-accent) / 0.22);
color: var(--text);
}
:focus { outline: none; }
:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring);
outline-offset: var(--focus-ring-offset);
border-radius: var(--radius-xs);
}
/* ===========================================================================
1. LAYOUT
=========================================================================== */
.container {
width: 100%;
max-width: var(--container-xl);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--xs { max-width: var(--container-xs); }
.container--sm { max-width: var(--container-sm); }
.container--md { max-width: var(--container-md); }
.container--lg { max-width: var(--container-lg); }
.container--xl { max-width: var(--container-xl); }
.section {
position: relative;
padding-block: var(--section-y);
}
.section--tight { padding-block: calc(var(--section-y) * 0.55); }
.section--flush { padding-block: 0; }
.section--alt { background-color: var(--bg-subtle); }
.section--dark {
background-image: var(--gradient-ink);
color: var(--text-inverse);
}
.section--dark h1, .section--dark h2,
.section--dark h3, .section--dark h4 { color: #fafafa; }
.section--dark .muted,
.section--dark .subtle { color: rgb(250 250 250 / 0.62); }
.section--dark .card { background-color: rgb(255 255 255 / 0.05); border-color: rgb(255 255 255 / 0.10); color: var(--text-inverse); }
.section-head {
display: flex;
flex-direction: column;
gap: var(--space-4);
align-items: center;
text-align: center;
margin-bottom: var(--space-10);
}
.section-head > * { margin: 0; }
.section-head--left { align-items: flex-start; text-align: left; }
@media (min-width: 900px) {
.section-head { margin-bottom: var(--space-14); }
}
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--xs { gap: var(--space-2); }
.stack--sm { gap: var(--space-3); }
.stack--lg { gap: var(--space-6); }
.stack--xl { gap: var(--space-10); }
.cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
}
.cluster--sm { gap: var(--space-2); }
.cluster--center { justify-content: center; }
.cluster--between { justify-content: space-between; width: 100%; }
.grid {
display: grid;
gap: var(--space-5);
grid-template-columns: 1fr;
}
.grid--tight { gap: var(--space-3); }
@media (min-width: 640px) {
.grid--2, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid { gap: var(--space-6); }
}
@media (min-width: 900px) {
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
}
@media (min-width: 1200px) {
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.center { display: grid; place-items: center; text-align: center; }
.divider {
height: 1px;
width: 100%;
background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
border: 0;
margin: 0;
}
.scroll-x {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.scroll-x::-webkit-scrollbar { display: none; }
.full-bleed {
width: 100vw;
margin-inline: calc(50% - 50vw);
}
/* ===========================================================================
2. TYPOGRAPHY
=========================================================================== */
.display {
font-family: var(--font-display);
font-size: var(--text-display);
font-weight: var(--weight-heavy);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tighter);
text-wrap: balance;
}
.h1 { font-size: var(--text-6xl); font-weight: var(--weight-heavy); line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); }
.h2 { font-size: var(--text-4xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
.h3 { font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
.h4 { font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
h1 { font-size: var(--text-6xl); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-tighter); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
.lead {
font-size: var(--text-xl);
line-height: var(--leading-normal);
color: var(--text-secondary);
letter-spacing: var(--tracking-normal);
text-wrap: pretty;
}
@media (min-width: 900px) {
.lead { font-size: var(--text-2xl); }
}
.body { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--text-secondary); text-wrap: pretty; }
.small { font-size: var(--text-md); line-height: var(--leading-normal); }
.tiny { font-size: var(--text-xs); line-height: var(--leading-normal); }
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--accent-text);
}
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.balance { text-wrap: balance; }
.measure { max-width: var(--measure); }
.measure-narrow { max-width: var(--measure-narrow); }
.measure-wide { max-width: var(--measure-wide); }
.section-head .measure,
.section-head .measure-narrow,
.section-head .measure-wide,
.center .measure { margin-inline: auto; }
.text-accent { color: var(--accent-text); }
.gradient-text {
background-image: var(--gradient-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
/* Repaint safety for the clip in Safari */
padding-bottom: 0.06em;
}
.link {
color: var(--text-link);
font-weight: var(--weight-medium);
text-decoration: underline;
text-decoration-color: rgb(var(--rgb-accent) / 0.35);
text-underline-offset: 0.22em;
text-decoration-thickness: 1.5px;
}
.link:hover { text-decoration-color: currentColor; }
/* A link that performs an action rather than navigating — "Sign in instead" on
the account step. It has to be a