/* Distill — a self-organizing workspace, built by Artemis.
   Structure follows the SiteBooked page (banner hero, centered pitch, sticky-title flow,
   three-up grid). Palette and type follow Distill's own product UI: Geist on cool paper,
   blue reserved for the through-line and small accents. */

:root {
    --paper:       #F7F8FA;
    --paper-deep:  #EDEFF3;
    --surface:     #FFFFFF;
    --ink:         #1C1E21;
    --ink-soft:    #63676E;
    --line:        #E2E5E9;
    --primary:     #2563eb;
    --primary-dark:#1D4ED8;
    --primary-tint:rgba(37,99,235,0.10);
    --white:       #ffffff;

    --font-display: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-body:    'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --max-width: 1160px;
    --nav-h: 4.5rem;
    --radius: 18px;
    --radius-sm: 12px;
    --shadow: 0 1px 2px rgba(28,30,33,.05), 0 20px 54px -26px rgba(28,30,33,.30);
    --ease: cubic-bezier(.2,.7,.2,1);
}

/* Geist Pixel Square — Vercel, SIL OFL 1.1 (see GeistPixel-OFL.txt). Served from this
   directory rather than added to the shared fonts-all.css bundle, whose SRI hash is
   pinned by every other sales site. */
@font-face {
    font-family: 'Geist Pixel';
    src: url('GeistPixel-Square.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; height: 100%; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--ink);
    line-height: 1.55;
    font-size: 17px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body > *:not(.nav):not(.footer) { flex: 1 0 auto; }

.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

a { color: inherit; text-decoration: none; }
em { font-style: normal; font-weight: 500; color: var(--ink); }

/* ---------- buttons ----------
   Black pill after corner.inc's "download now": the inset top highlight is the detail
   that makes it read as raised rather than flat. Asymmetric padding optically centers
   the label against the pill. */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-body);
    font-weight: 600; font-size: .875rem; line-height: 30px;
    padding: 2px 14px 4px;
    border: 1px solid #000; border-radius: 999px; cursor: pointer;
    transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
    white-space: nowrap;
}
.btn-primary {
    background: #000; color: var(--white);
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,.35);
}
.btn-primary:hover {
    background: #1c1c1c; color: var(--white); transform: translateY(-1px);
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,.45);
}
.btn-primary:active { transform: translateY(0); }

/* ---------- nav ---------- */
.nav {
    position: sticky; top: 0; z-index: 50;
    height: var(--nav-h); padding: 0;
    background: rgba(255,255,255,.55);
    backdrop-filter: saturate(1.5) blur(14px);
    -webkit-backdrop-filter: saturate(1.5) blur(14px);
    border-bottom: 1px solid var(--line);
    transition: color .3s, background .3s, border-color .3s;
}
/* over the hero photo the nav is glassless — any wash reads as a seam against the image */
.nav.over-hero {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.nav-container { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 1rem; }

.nav-left { display: flex; align-items: center; }

.wordmark {
    display: flex; align-items: center;
    font-family: 'Geist Pixel', var(--font-mono);
    font-size: 2.25rem; line-height: 1;
    color: var(--ink); transition: color .25s;
}
/* White only while the nav sits over the hero photo — the nav is sticky, so past the
   hero it lands on pale glass, and the legal pages have no photo at all. */
.nav.over-hero .wordmark, .nav.over-hero .nav-link { color: #ffffff; }

.nav-right { display: flex; align-items: center; gap: 1.4rem; }
.nav-link { color: var(--ink-soft); font-weight: 500; font-size: .95rem; transition: color .18s; }
.nav-link:hover { color: var(--ink); }

/* ---------- hero ---------- */
.hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.6rem, 5vw, 4rem); }
.hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }

.hero-title {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.35rem, 2.35vw, 1.9rem); line-height: 1.25;
    letter-spacing: -.03em; color: var(--ink); text-wrap: balance;
}

/* hero with banner image (index only): no overlay on the photo — opacity is applied to
   the image itself on a ::before layer, so it never touches the text sitting above it.
   At .88 the sky stays saturated enough to carry the white headline. */
.hero-banner {
    position: relative;
    margin-top: calc(-1 * var(--nav-h));
    min-height: 100vh;
    min-height: 100svh;
    display: flex; align-items: center;
    padding-top: calc(var(--nav-h) + clamp(1.5rem, 4vw, 3rem));
    padding-bottom: clamp(2rem, 5vw, 4rem);
    background: var(--paper);
}
.hero-banner::before {
    content: "";
    position: absolute; inset: 0;
    background: url('hero.jpg') center/cover no-repeat;
    opacity: .88;
}
.hero-banner .hero-inner { position: relative; }
.hero-banner .hero-title { color: #ffffff; }

/* ---------- intake folder ----------
   While the day's sources are landing they need somewhere to go, so the copy steps
   aside for a glass folder and comes back once everything has collapsed into it.
   The copy is only ever hidden by a class JS adds, so with no JS, on small screens,
   or under reduced motion the headline is simply there. */
.hero-folder {
    position: absolute; left: 50%; top: 50%;
    width: 260px; height: 190px;
    /* The tab sits above the panel, so centring the whole 190px box drops the panel
       low. The panel spans y 41-183, centre 112 against the box's own centre of 95 —
       lift by the 17px difference so the body is what reads as centred. */
    --folder-lift: 17px;
    transform: translate(-50%, calc(-50% - var(--folder-lift))) scale(.94);
    opacity: 0; pointer-events: none;
    transition: opacity .55s var(--ease), transform .55s var(--ease);
}

.hero-folder-glass,
.hero-folder-rim { position: absolute; inset: 0; width: 260px; height: 190px; }

/* real glass: the sky behind actually blurs through the folder's silhouette */
.hero-folder-glass {
    clip-path: path("M14 36c0-9.94 8.06-18 18-18h58c5.3 0 10.3 2.33 13.7 6.38l8.6 10.24c3.4 4.05 8.4 6.38 13.7 6.38h102c9.94 0 18 8.06 18 18v106c0 9.94-8.06 18-18 18H32c-9.94 0-18-8.06-18-18z");
    background: linear-gradient(160deg, rgba(255,255,255,.46), rgba(255,255,255,.26) 55%, rgba(255,255,255,.34));
    backdrop-filter: blur(22px) saturate(1.3);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
}

.hero-folder-rim path { stroke: rgba(255,255,255,.6); stroke-width: 1.5; }

.hero-folder-word {
    /* centred on the folder's front panel, which spans y 41-183 of the 190px box —
       centring on the full height would ride up into the tab */
    position: absolute; left: 0; right: 0; top: 112px;
    transform: translateY(-50%);
    text-align: center;
    font-family: 'Geist Pixel', var(--font-mono);
    font-size: 2.5rem; line-height: 1;
    color: #fff;
    text-shadow: 0 2px 14px rgba(10, 22, 48, .35);
}

/* ---------- the workspace ----------
   Where the intake resolves: a desktop-proportioned window that takes the folder's
   place. Sized from its height so it can never outgrow the viewport, with the width
   following the 16:10 ratio. Only in flow while the animation is running, so small
   screens and no-JS get the plain hero. */
.hero-app {
    display: none;
    height: min(640px, 71vh);
    aspect-ratio: 16 / 10;
    margin-top: clamp(1.4rem, 3vw, 2.4rem);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 34px 80px -34px rgba(10, 22, 48, .6);
    text-align: left;
}

.hero-inner.animated .hero-app {
    display: block;
    opacity: 0;
    transform: translateY(20px) scale(.975);
    transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.hero-inner.output .hero-app { opacity: 1; transform: none; }

.hero-app-bar {
    display: flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 12px;
    background: var(--paper-deep);
    border-bottom: 1px solid var(--line);
}
.hero-app-dot { width: 9px; height: 9px; border-radius: 50%; background: #cfd4da; }
.hero-app-url {
    margin-left: 10px; padding: 2px 12px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
    font-family: 'Geist Pixel', var(--font-mono);
    font-size: .8rem; line-height: 1.4; color: var(--ink-soft);
}
.hero-app-body { height: calc(100% - 34px); display: flex; background: var(--surface); }

/* Sidebar after the real app's: #F9F9F9 rail, #EDEFF3 active row, children indented
   under a hairline. Scaled down, since the window stands in for a desktop screen. */
.app-nav {
    flex: 0 0 152px;
    padding: 10px 8px;
    background: #f9f9f9;
    border-right: 1px solid #e7e7e7;
    display: flex; flex-direction: column; gap: 1px;
}

.app-nav-item {
    display: flex; align-items: center; gap: 7px;
    padding: 5px 8px; border-radius: 5px;
    font-size: 10.5px; line-height: 1.3; color: #1c1c1c;
}
.app-nav-item.is-active { background: #edeff3; }
.app-ic { width: 12px; height: 12px; flex-shrink: 0; color: #57534e; }

.app-nav-kids {
    display: flex; flex-direction: column; gap: 1px;
    margin: 2px 0 7px 15px; padding-left: 9px;
    border-left: 1px solid #d8d8d8;
}
.app-nav-kids span {
    padding: 3px 7px; border-radius: 4px;
    font-size: 9.5px; line-height: 1.35; color: #57534e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.app-main {
    flex: 1; min-width: 0; display: flex; gap: 12px;
    padding: 13px 14px; background: var(--surface);
}

/* the one decision that needs a person, with its context already assembled */
.app-doc { flex: 1; min-width: 0; }
.doc-top { display: flex; align-items: center; gap: 6px; }
.doc-flag {
    padding: 1.5px 7px; border-radius: 999px;
    background: #fef2f2; color: #dc2626; border: 1px solid #fecaca;
    font-size: 9px; font-weight: 600;
}
.doc-title { margin-top: 7px; font-size: 14px; font-weight: 600; line-height: 1.25; color: #1c1c1c; letter-spacing: -.01em; }
.doc-why { margin-top: 5px; font-size: 10.5px; line-height: 1.5; color: #6b7280; }

/* separated by space rather than rules — the hairlines were doing work the spacing does */
.doc-rows { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.doc-row { display: flex; gap: 10px; font-size: 10px; }
.doc-k { flex: 0 0 68px; color: #6b7280; }
.doc-v { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: #1c1c1c; }
/* mention pills, per person, matching the palette the app itself uses */
.who {
    padding: 0 5px; border-radius: 999px; border: 1px solid;
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 9.5px; font-weight: 500; white-space: nowrap;
}
.who-ic { width: 10px; height: 10px; flex-shrink: 0; }
.who-sara   { color: #0369a1; background: #e0f2fe; border-color: #bae6fd; }
.who-dan    { color: #9333ea; background: #f3e8ff; border-color: #e9d5ff; }
.who-priya  { color: #c2410c; background: #ffedd5; border-color: #fed7aa; }
.who-marcus { color: #15803d; background: #dcfce7; border-color: #bbf7d0; }
.who-claude { color: #57534e; background: #f5f5f4; border-color: #e7e5e4; }
.doc-link { color: var(--primary); }

.doc-hist { margin-top: 14px; }
.doc-hist-head { font-size: 10px; color: #6b7280; margin-bottom: 6px; }
/* newest first, on a stepper rail — the live dot marks the most recent change */
.tl { position: relative; }
.tl-row {
    position: relative; display: flex; align-items: baseline; gap: 6px;
    padding: 10px 0 10px 15px; font-size: 10px; line-height: 1.45;
}
.tl-row::before {
    content: ""; position: absolute; left: 3px; top: 0; bottom: 0;
    width: 1px; background: #e7e7e7;
}
/* the rail runs between the first and last node rather than past them */
.tl-row:first-child::before { top: 50%; }
.tl-row:last-child::before { bottom: auto; height: 50%; }
/* centred on the row, so it holds whether an item runs one line or two */
.tl-node {
    position: absolute; left: 1px; top: 50%; transform: translateY(-50%);
    width: 5px; height: 5px; border-radius: 50%;
    background: #fff; border: 1px solid #cfd4da;
}
/* emerald-500, no halo — a filled dot already reads louder than the hollow ones */
.tl-row.is-latest .tl-node { background: #10b981; border-color: #10b981; }
.ev-ic { width: 10px; height: 10px; flex-shrink: 0; align-self: center; }
.ev-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; color: #57534e; }
.ev-line { color: #6b7280; }
.ev-sum { font-size: 10px; line-height: 1.5; color: #1c1c1c; }
.ev-sum .who { vertical-align: baseline; }
.ev-line code {
    font-family: var(--font-mono); font-size: 9px;
    background: #f3f3f2; border-radius: 3px; padding: 0 3px; color: #57534e;
}
.ev-who { color: #1c1c1c; font-weight: 600; }
.ev-when { flex-shrink: 0; font-family: var(--font-mono); font-size: 8.5px; color: #9ca3af; }

/* what is queued behind it, in order */
.app-rail { flex: 0 0 158px; border-left: 1px solid #ececed; padding-left: 11px; }
.app-rail-head { font-size: 10px; color: #6b7280; margin-bottom: 9px; }
/* each queued item is its own card, so the rail reads as a stack rather than a list */
.q {
    display: flex; margin-bottom: 8px;
    padding: 8px 9px; border-radius: 7px;
    background: var(--surface); border: 1px solid #ececed;
}
.q:last-child { margin-bottom: 0; }
.q-b { min-width: 0; }
.q-t { display: block; font-size: 10px; line-height: 1.35; color: #1c1c1c; }
.q-m { display: block; margin-top: 2px; font-size: 8.5px; color: #9ca3af; }

/* the intake beat: copy out, folder in */
.hero-title { transition: opacity .5s var(--ease); }
.hero-inner.animated .hero-title { opacity: 0; }
.hero-inner.output .hero-title { opacity: 1; }
.hero-inner.intake .hero-folder {
    opacity: 1;
    transform: translate(-50%, calc(-50% - var(--folder-lift))) scale(1);
}

/* ---------- hero animation (lg+ only) ----------
   The day's sources scatter in, shrink to a common size, and collapse into the folder,
   which then gives way to the workspace window. */
.hero-anim { display: none; }

@media (min-width: 1024px) {
    .hero-anim { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
}

.hero-banner .hero-inner { z-index: 2; }

.orb {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%) translate(var(--x, 0px), var(--y, 0px)) rotate(var(--r, 0deg)) scale(var(--s, 1));
    opacity: 0;
    will-change: transform, opacity;
}

/* ---------- source items ----------
   Each input is a small facsimile of the thing it came from, so the intake reads as
   real sources rather than abstract shapes. Sized to be recognisable at hero scale,
   not to be read. One type per commit; remaining slots stay rectangles. */
.item {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px -14px rgba(12, 22, 48, .45);
    overflow: hidden;
    font-family: var(--font-body);
    text-align: left;
}

.item-chrome {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 9px;
    border-bottom: 1px solid #ececed;
    background: #f8f8f8;
}
.item-chrome svg { width: 11px; height: 11px; display: block; }
.item-chrome-label { font-size: 9px; font-weight: 600; color: #8b8d91; letter-spacing: .02em; }

/* Slack: unanswered mention */
.item-slack { width: 264px; }
.item-slack-row { display: flex; gap: 8px; padding: 9px 10px 11px; }
.item-slack-avatar {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 6px;
    background: #4a154b; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; letter-spacing: .01em;
}
.item-slack-head { display: flex; align-items: baseline; gap: 6px; }
.item-slack-name { font-size: 12.5px; font-weight: 700; color: #1d1c1d; }
.item-slack-time { font-size: 10px; color: #616061; }
.item-slack-text { margin-top: 2px; font-size: 12.5px; line-height: 1.38; color: #1d1c1d; }
.item-mention { color: #1264a3; background: rgba(29, 155, 209, .1); border-radius: 3px; padding: 0 2px; }
.item-slack-foot {
    display: flex; align-items: center; gap: 5px;
    margin-top: 6px; font-size: 10.5px; font-weight: 600; color: #b8452f;
}
.item-slack-dot { width: 5px; height: 5px; border-radius: 50%; background: #e01e5a; }

/* Compact row: the second and subsequent items of a kind. A real day has six PRs and
   five mentions, not one of each — full cards for one of every source, rows for the rest,
   so the volume reads without burying the headline. */
.item-row {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px 6px 8px;
    background: #fff; border-radius: 8px;
    box-shadow: 0 8px 22px -12px rgba(12, 22, 48, .4);
    font-size: 11.5px; color: #2b2d31;
    white-space: nowrap;
}
.item-row svg { width: 12px; height: 12px; flex-shrink: 0; display: block; }
.item-row-text { overflow: hidden; text-overflow: ellipsis; max-width: 168px; }
.item-row-badge { font-family: var(--font-mono); font-size: 9.5px; color: #8a8f98; flex-shrink: 0; }
.item-row-mention { color: #1264a3; font-weight: 600; }

/* Calendar: an out-of-office block */
.item-cal { width: 240px; }
.item-cal-body { padding: 9px 10px 11px; }
.item-cal-date { font-size: 10px; font-weight: 600; color: #5f6368; letter-spacing: .03em; text-transform: uppercase; }
.item-cal-block {
    margin-top: 6px; padding: 7px 9px; border-radius: 5px;
    background: #616161; color: #fff;
}
.item-cal-title { font-size: 12.5px; font-weight: 600; }
.item-cal-time { margin-top: 1px; font-size: 10.5px; color: rgba(255, 255, 255, .82); }
.item-cal-foot { margin-top: 7px; font-size: 10.5px; color: #5f6368; }

/* GitHub: a pull request waiting on review */
.item-pr { width: 262px; }
.item-pr-body { padding: 9px 10px 11px; }
.item-pr-title { font-size: 12.5px; font-weight: 600; color: #1f2328; line-height: 1.35; }
.item-pr-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 10.5px; color: #59636e; }
.item-pr-state {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 7px; border-radius: 999px;
    background: #1f883d; color: #fff; font-size: 10px; font-weight: 600;
}
.item-pr-foot { margin-top: 7px; font-size: 10.5px; font-weight: 600; color: #9a6700; }

/* Linear: a ticket blocked on a decision */
.item-ticket { width: 246px; }
.item-ticket-body { padding: 9px 10px 11px; }
.item-ticket-id { font-family: var(--font-mono); font-size: 10px; color: #8a8f98; }
.item-ticket-title { margin-top: 2px; font-size: 12.5px; font-weight: 500; color: #22232a; line-height: 1.35; }
.item-ticket-meta { display: flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 10.5px; color: #6b6f76; }
.item-ticket-dot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid #f2994a; }

/* Huddle: something said out loud and never written down */
.item-huddle { width: 258px; }
.item-huddle-body { padding: 9px 10px 11px; }
.item-huddle-wave { display: flex; align-items: center; gap: 2px; height: 14px; }
.item-huddle-wave span { width: 2px; border-radius: 1px; background: #9aa0a6; }
.item-huddle-quote { margin-top: 7px; font-size: 12px; font-style: italic; color: #2b2d31; line-height: 1.4; }
.item-huddle-who { margin-top: 6px; font-size: 10.5px; color: #6b6f76; }

/* Docs: a draft nobody has come back to */
.item-doc { width: 236px; }
.item-doc-body { padding: 9px 10px 11px; }
.item-doc-title { font-size: 12.5px; font-weight: 600; color: #202124; }
.item-doc-lines { margin-top: 7px; display: flex; flex-direction: column; gap: 3px; }
.item-doc-lines span { height: 3px; border-radius: 2px; background: #e3e5e8; }
.item-doc-meta { margin-top: 8px; font-size: 10.5px; color: #5f6368; }

/* ---------- pitch (statement under hero) ---------- */
.pitch { padding: clamp(4rem, 9vw, 8rem) 0; }
.pitch-lead {
    max-width: 100%; margin: 0 auto; text-align: center; text-wrap: balance;
    font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.45;
    font-weight: 500; letter-spacing: -.02em; color: var(--ink);
}
.pitch-lead + .pitch-lead { margin-top: 1.4rem; }

/* ---------- get distill ---------- */
.get { padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(4rem, 8vw, 6rem); text-align: center; }
/* same treatment as the pitch statements, so the page closes in the voice it opened in */
.get-title {
    font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.45;
    font-weight: 500; letter-spacing: -.02em; color: var(--ink);
    text-wrap: balance;
}
.get .btn { margin-top: 1.6rem; }

/* ---------- footer ---------- */
.footer { flex-shrink: 0; padding: 1.4rem 0; border-top: 1px solid var(--line); background: rgba(237,239,243,.5); }
.footer-container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.footer-copyright { flex: 1; margin: 0; font-size: .85rem; color: var(--ink-soft); }
.footer-links { flex: 1; display: flex; justify-content: flex-end; gap: 1.4rem; }
.footer-links a { color: var(--ink-soft); font-size: .85rem; transition: color .18s; }
.footer-links a:hover { color: var(--ink); }

/* ---------- legal pages ---------- */
.legal { padding: 4.5rem 0 5.5rem; }
.legal-inner { max-width: 680px; }
.legal-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4.5vw, 2.7rem); letter-spacing: -.03em; line-height: 1.05; }
.legal-updated { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; color: var(--ink-soft); margin: .7rem 0 2.2rem; }
.legal h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em; margin: 2.1rem 0 .6rem; }
.legal p { color: var(--ink-soft); margin-bottom: .9rem; }
.legal p em { color: var(--ink); }
.legal-link { color: var(--primary); font-weight: 500; }
.legal-link:hover { color: var(--primary-dark); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
}
@media (max-width: 560px) {
    body { font-size: 16px; }
    .container { padding: 0 18px; }
    .footer-container { flex-direction: column; text-align: center; }
    .footer-links { justify-content: center; flex-wrap: wrap; }
    .nav-link { display: none; }
    .wordmark { font-size: 1.7rem; }
    .nav .btn { padding: 2px 12px 4px; font-size: .8125rem; line-height: 26px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}