/*
 * The Vestigia website (README). One stylesheet, no build step. Colours,
 * type and motion follow the brand guidelines in the app repo
 * (docs/design/brand.md) and the website designs: the Bloom palette,
 * Bricolage Grotesque titles, Figtree text. Light only for now.
 */

@font-face {
    font-family: 'Figtree';
    src: url('../fonts/figtree-latin-wght-normal.woff2') format('woff2');
    font-weight: 300 900;
    font-display: swap;
}

@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('../fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2');
    font-weight: 200 800;
    font-display: swap;
}

:root {
    --bg: #f9f8fb;
    --surface: #ffffff;
    --text: #16233b;
    --text-soft: #3d4757;
    --muted: #646c78;
    --border: #e3dfea;
    --brand: #4e75bf;
    --brand-deep: #3a5fa6;
    --accent: #b23a6b;
    --accent-deep: #8f2c55;
    --highlight: #fcd752;
    --pop: #fca3b9;
    --navy: #16233b;
    --band-blue: #e4ebf7;
    --band-pink: #fde2ea;
    --tile-blue: #c1cfe9;
    --tile-pink: #fedfe6;
    --tile-yellow: #fef1c2;
    --danger: #b3261e;
    --font-text: 'Figtree', system-ui, sans-serif;
    --font-title: 'Bricolage Grotesque', system-ui, sans-serif;
    --gutter: clamp(16px, 4vw, 32px);
    --section: clamp(64px, 9vw, 112px);
    --ease-out: cubic-bezier(.2, .7, .2, 1);
}

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

/* Keep `hidden` winning over display rules (the join form's steps are flex). */
[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    margin: 0;
    overflow-x: clip;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-text);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

main {
    position: relative;
    overflow-x: clip;
    isolation: isolate;
}

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

a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

a:hover {
    color: var(--accent-deep);
}

:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 3px;
    border-radius: 4px;
}

h1, h2, h3, p, ul, ol {
    margin: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 100;
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--navy);
    color: #fff;
}

.skip-link:focus {
    left: 8px;
}

.wrap {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.wrap--narrow {
    max-width: 880px;
}

/* ---------- Type ---------- */

.eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
}

.eyebrow--blue { color: var(--brand-deep); }
.eyebrow--yellow { color: var(--highlight); }

.title {
    font-family: var(--font-title);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.08;
    text-wrap: balance;
}

.title--xl { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.04; }
.title--l { font-size: clamp(32px, 4vw, 50px); }
.title--s { font-size: 22px; line-height: 1.25; }
.title__blue { color: var(--brand); }

h3 {
    font-family: var(--font-title);
    font-weight: 800;
    letter-spacing: -.025em;
    font-size: 24px;
    line-height: 1.2;
}

.lead {
    font-size: clamp(18px, 1.6vw, 20px);
    line-height: 1.55;
    color: var(--text-soft);
    max-width: 36em;
}

.accent { color: var(--accent); }

/* The yellow highlighter under key words; drawn in once (site.js). */
.mark {
    padding: 0 4px;
    background-image: linear-gradient(transparent 58%, var(--highlight) 58%, var(--highlight) 92%, transparent 92%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.js .mark {
    background-size: 0% 100%;
    transition: background-size 1.4s cubic-bezier(.45, 0, .25, 1) .5s;
}

.js .mark.is-in {
    background-size: 100% 100%;
}

/* ---------- Buttons: a fill sweeps in from the left on hover ---------- */

.btn {
    --sweep: var(--navy);
    --sweep-text: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    background-image: linear-gradient(var(--sweep), var(--sweep));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    transition: background-size .45s cubic-bezier(.65, 0, .35, 1), color .3s, border-color .3s;
}

.btn:hover,
.btn:focus-visible {
    background-size: 100% 100%;
    color: var(--sweep-text);
    border-color: var(--sweep);
}

.btn--primary { background-color: var(--brand); color: #fff; border-color: var(--brand); }
.btn--accent { background-color: var(--accent); color: #fff; border-color: var(--accent); }
.btn--outline { --sweep: var(--brand); background-color: var(--surface); color: var(--text); border-color: var(--border); }
.btn--large { font-size: 18px; padding: 15px 28px; }
.btn--small { min-height: 44px; padding: 10px 20px; }
.btn--block { width: 100%; }

/* ---------- Header ---------- */

.site-head {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(249, 248, 251, .82);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    border-bottom: 1px solid rgba(227, 223, 234, .7);
}

.site-head__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px var(--gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 32px;
}

.site-head__logo { display: flex; }
.logo-horizontal { height: 48px; width: auto; }

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 28px;
    font-weight: 600;
}

.site-nav a,
.site-head__signin {
    color: var(--text);
    text-decoration: none;
    padding: 10px 0;
}

.site-nav a:hover,
.site-nav a[aria-current="page"],
.site-head__signin:hover {
    color: var(--accent);
}

.site-nav__signin { display: none; }

.site-head__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    font-weight: 600;
}

.menu-btn {
    display: none;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

@media (max-width: 860px) {
    .site-head__actions { margin-left: auto; }
    .site-head__signin { display: none; }
    .site-nav__signin { display: block; }

    /* With JavaScript, the links fold behind the Menu button. */
    .js .menu-btn { display: inline-flex; }
    .js .site-nav { display: none; order: 4; width: 100%; flex-direction: column; gap: 0; padding: 4px 0 8px; }
    .js .site-nav.is-open { display: flex; }
    .js .site-nav a { padding: 14px 0; border-top: 1px solid var(--border); }
}

@media (max-width: 480px) {
    .logo-horizontal { height: 40px; }
    .btn--small { padding: 8px 14px; font-size: 15px; }
}

/* ---------- Logo colours (Bloom) ---------- */

.logo__name path { fill: var(--text); }
.logo__tag path { fill: var(--accent); }
.logo__toe-1, .logo__sole-1, .logo__toe-4 { fill: var(--brand); }
.logo__toe-2, .logo__toe-5, .logo__sole-3 { fill: var(--pop); }
.logo__toe-3, .logo__sole-2 { fill: var(--highlight); }

/* ---------- Footprint trails, faint, behind the page ---------- */

.trail {
    position: absolute;
    pointer-events: none;
    background: var(--pop);
    opacity: .35;
    -webkit-mask: url('../images/trail-a.svg') no-repeat center / contain;
    mask: url('../images/trail-a.svg') no-repeat center / contain;
}

.trail--hero { top: 380px; right: -40px; width: min(62vw, 640px); aspect-ratio: 582 / 604; }
.trail--page { top: 160px; right: -60px; width: min(50vw, 480px); aspect-ratio: 582 / 604; opacity: .25; }
.trail--hero, .trail--page { z-index: -1; translate: 0 calc(var(--py, 0) * 1px); will-change: translate; }
.trail--name {
    inset: -15% 0;
    z-index: -1;
    -webkit-mask-size: cover;
    mask-size: cover;
    translate: 0 calc(var(--py, 0) * 1px);
    will-change: translate;
    background: var(--accent);
    opacity: .08;
    -webkit-mask-image: url('../images/trail-b.svg');
    mask-image: url('../images/trail-b.svg');
}

@media (max-width: 700px) {
    .trail { opacity: .18; }
}

/* ---------- Hero ---------- */

.hero {
    padding-top: clamp(40px, 7vw, 96px);
    padding-bottom: clamp(72px, 9vw, 120px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 56px;
}

.hero__text {
    flex: 1 1 480px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero__ticks {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-soft);
}

.hero__ticks li { display: inline-flex; align-items: center; gap: 8px; }
.hero__ticks .icon { color: var(--accent); }

.hero__visual {
    flex: 1 1 420px;
    min-width: 0;
    position: relative;
    max-width: 480px;
    margin: 0 auto;
}

/* The app picture. */
.mock {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 28px;
    box-shadow: 0 2px 4px rgba(22, 35, 59, .04), 0 24px 56px -12px rgba(22, 35, 59, .18);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mock__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mock__title { font-family: var(--font-title); font-weight: 800; letter-spacing: -.025em; font-size: 22px; }

.mock__button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 9px 16px;
    border-radius: 999px;
}

.mock__day { margin-top: 4px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.mock__entry {
    background: var(--surface);
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(22, 35, 59, .08);
    padding: 16px 20px 16px 16px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.mock__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mock__entry-title { font-family: var(--font-title); font-weight: 800; letter-spacing: -.025em; font-size: 19px; line-height: 1.25; }
.mock__meta { margin-top: -4px; font-size: 14px; color: var(--muted); }
.mock__photos { display: flex; gap: 8px; }

.mock__photo {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7a5c3a;
}

.mock__photo--1 { background: #f1dcbc; }
.mock__photo--2 { background: #e6c79c; }
.mock__photo--3 { background: #d8b587; }

.mock__chips { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; letter-spacing: .02em; }

.chip { padding: 1px 10px; border-radius: 999px; background: #f1eef6; }
.chip--green { background: #e4efee; }
.chip--blue { background: #e5ebf3; }
.chip--lilac { background: #ede8f3; }
.chip--sage { background: #e6ede8; }

.chip--learner {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    padding: 1px 10px 1px 2px;
    background: #f7ebf2;
}

.chip--learner span {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #dba3c2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.badge {
    position: absolute;
    left: -36px;
    bottom: -36px;
    background: var(--navy);
    color: #fff;
    border-radius: 20px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 18px 40px -12px rgba(22, 35, 59, .4);
}

.badge__icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--highlight);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge__title { font-weight: 700; font-size: 15px; line-height: 1.3; }
.badge__sub { font-size: 13px; color: #bdc4d1; line-height: 1.3; }

@media (max-width: 600px) {
    .badge { left: 12px; bottom: -28px; }
}

/* ---------- Tiles (icons on a soft square) ---------- */

.tile {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
}

.tile--large { width: 52px; height: 52px; border-radius: 16px; }
.tile--blue { background: var(--tile-blue); }
.tile--pink { background: var(--tile-pink); }
.tile--yellow { background: var(--tile-yellow); }

/* ---------- Trust strip ---------- */

.strip {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.strip__inner {
    list-style: none;
    padding-top: 28px;
    padding-bottom: 28px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px 32px;
    font-weight: 600;
}

.strip__inner li { display: inline-flex; align-items: center; gap: 10px; }
.strip__inner .icon { color: var(--accent); }

/* ---------- Sections ---------- */

.section {
    padding-top: var(--section);
    padding-bottom: var(--section);
}

.section__intro {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 56px;
}

.section__intro--centre {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    align-items: center;
}

.band { position: relative; overflow: hidden; }
.band--blue { background: var(--band-blue); }
.band--pink { background: var(--band-pink); }
.band--navy { background: var(--navy); color: #fff; }
.band--navy .lead { color: #d5dae3; }

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 24px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card h3 { margin-top: 4px; }
.card p { color: var(--text-soft); }

.steps {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 32px;
}

.steps li { display: flex; flex-direction: column; gap: 14px; }
.steps h3 { font-size: 26px; }
.steps p { color: #2c3a52; }

.steps__n {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-title);
    font-weight: 800;
    font-size: 24px;
    color: #fff;
}

.steps__n--blue { background: var(--brand); }
.steps__n--pink { background: var(--accent); }
.steps__n--yellow { background: var(--highlight); color: var(--navy); }

.manifesto { padding: var(--section) 0; text-align: center; }
.manifesto__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.manifesto .lead { max-width: 38em; }
.manifesto__accent { color: var(--highlight); }
.manifesto__sign { margin: 8px 0 0; font-weight: 700; font-size: 1.1em; color: var(--highlight); }

.name { padding: var(--section) 0; text-align: center; isolation: isolate; }
.name__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.name__logo { height: 80px; width: auto; margin-bottom: 8px; }
.name__line { max-width: 18em; line-height: 1.15; }
.name__line em { font-style: italic; }

.promises {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 20px 40px;
}

.promises li { display: flex; gap: 14px; align-items: flex-start; }

.promises__tick {
    flex: none;
    width: 32px;
    height: 32px;
    margin-top: 2px;
    border-radius: 999px;
    background: var(--highlight);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Join the beta ---------- */

.join {
    padding-top: var(--section);
    padding-bottom: var(--section);
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    align-items: flex-start;
}

.join__text {
    flex: 1 1 400px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.join__list,
.page-form__list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.join__list li,
.page-form__list li { display: flex; gap: 12px; align-items: center; }
.join__list .icon { color: var(--highlight); }
.page-form__list .icon { color: var(--brand); }

/* ---------- Forms ---------- */

.card-form {
    flex: 1 1 380px;
    min-width: 0;
    max-width: 480px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: clamp(24px, 4vw, 36px);
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 24px 56px -12px rgba(22, 35, 59, .18);
}

.form__intro { display: flex; flex-direction: column; gap: 8px; }
.form__title { font-family: var(--font-title); font-weight: 800; letter-spacing: -.025em; font-size: 28px; line-height: 1.15; }
.form__intro p { color: var(--text-soft); }
.form__small { font-size: 14px; color: var(--muted); }
.form__step { display: flex; flex-direction: column; gap: 20px; }
.form__progress { margin: 0; font-size: 14px; font-weight: 700; color: var(--accent); }
.form__actions { display: flex; gap: 12px; }
.form__actions .btn--primary { flex: 1; }

.form__alert {
    padding: 12px 16px;
    border: 1px solid var(--danger);
    border-radius: 14px;
    background: #fdf1f0;
    color: var(--danger);
    font-weight: 600;
}

.form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 20px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.field > label,
.field > legend {
    padding: 0;
    font-weight: 600;
}

.field__optional { font-weight: 400; font-size: 14px; color: var(--muted); }
.field__hint { font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.field__error { font-size: 15px; font-weight: 600; color: var(--danger); }

input[type="text"],
input[type="email"],
select,
textarea {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1.5px solid #c9c2d6;
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

textarea { resize: vertical; }

input:focus,
select:focus,
textarea:focus {
    outline: 3px solid var(--brand);
    outline-offset: 1px;
    border-color: var(--brand);
}

[aria-invalid="true"] { border-color: var(--danger); }

.choice {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-weight: 400;
    cursor: pointer;
}

.choice input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--brand);
}

/* The spam trap: off screen, not hidden, so bots still see it. */
.honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Other pages ---------- */

.page-form {
    padding-top: clamp(40px, 7vw, 96px);
    padding-bottom: var(--section);
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    align-items: flex-start;
}

.page-form__text {
    flex: 1 1 420px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.page-intro {
    padding-top: clamp(40px, 7vw, 96px);
    padding-bottom: 48px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact {
    padding-bottom: var(--section);
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
}

.contact .card-form { flex: 2 1 480px; max-width: 720px; }

.contact__aside {
    flex: 1 1 280px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.aside-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.thanks {
    padding-top: clamp(56px, 9vw, 120px);
    padding-bottom: var(--section);
    max-width: 760px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

/* ---------- FAQ ---------- */

.faq { display: flex; flex-direction: column; gap: 12px; }

.faq__item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 0 24px;
}

.faq__item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 64px;
    padding: 18px 0;
    cursor: pointer;
    list-style: none;
}

.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { font-family: var(--font-text); font-weight: 700; letter-spacing: 0; font-size: 19px; line-height: 1.4; }
.faq__chevron { flex: none; color: var(--accent); transition: transform .3s ease; }
.faq__item[open] .faq__chevron { transform: rotate(180deg); }
.faq__item p { padding-bottom: 22px; color: var(--text-soft); }

/* ---------- Final call ---------- */

.final-wrap { padding-bottom: var(--section); }

.final {
    max-width: 1136px;
    margin: 0 auto;
    background: var(--band-pink);
    border-radius: 32px;
    padding: clamp(40px, 6vw, 72px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.final > div { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }

/* ---------- Footer ---------- */

.site-foot {
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.site-foot__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px var(--gutter) 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 32px;
}

.site-foot__brand { display: flex; flex-direction: column; gap: 12px; max-width: 320px; }
.logo-footer { height: 56px; width: auto; }
.site-foot__brand p { font-size: 15px; color: var(--muted); }

.site-foot__nav { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.site-foot__nav div { display: flex; flex-direction: column; gap: 6px; }
.site-foot__nav a { color: var(--text); text-decoration: none; padding: 4px 0; }
.site-foot__nav a:hover { color: var(--accent); }

.site-foot__heading {
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.site-foot__base {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px var(--gutter) 32px;
    border-top: 1px solid var(--border);
    font-size: 14px;
    color: var(--muted);
}

/* ---------- Motion: only with JavaScript, never if reduced motion is asked for ---------- */

.js .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s var(--ease-out);
}

.js .reveal.is-in { opacity: 1; transform: none; }

.pop {
    opacity: 0;
    transform: scale(.92) translateY(14px);
    animation: pop-in .5s cubic-bezier(.3, 1.45, .5, 1) .3s forwards;
}

.pop--late { animation-delay: .7s; }

@keyframes pop-in {
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn, .faq__chevron { transition: none; }
    .pop { opacity: 1; transform: none; animation: none; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .js .mark { background-size: 100% 100%; transition: none; }
}

/* ---------- Display titles: each word fades in and rises, 70ms apart, as
   the title comes into view (docs/design/brand.md, Motion). site.js wraps
   the words; the highlighter waits for the last one. ---------- */
.js .word {
    display: inline-block;
    opacity: 0;
    translate: 0 .45em;
    transition: opacity .5s ease, translate .6s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
}

.js .is-split.is-in .word { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
    .js .word { opacity: 1; translate: none; transition: none; }
}