/* AiAiAI, "Crescendo" brand: rules in docs/brand/README.md, tokens from docs/brand/tokens.css. Mobile first. */
/* Fonts are self-hosted (from @fontsource): no requests to Google, so no IP addresses leave for a third party.
   Fraunces carries the opsz axis, so display sizes get the display cut (font-optical-sizing: auto). */
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/inter-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/inter-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/fraunces-latin-ext-opsz-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-display: swap; font-weight: 100 900; src: url(/fonts/fraunces-latin-ext-opsz-italic.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/fraunces-latin-opsz-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-display: swap; font-weight: 100 900; src: url(/fonts/fraunces-latin-opsz-italic.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/jetbrains-mono-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root {
  --bg: #FBF6EE; --bg-raised: #FFFFFF; --bg-subtle: #F5EEE0; --border: #EADFC9;
  --fg: #2E2A26; --fg-muted: #6B6558; --fg-inverse: #FBF6EE;
  --accent: #B8532A; --accent-hover: #9A4220; --accent-press: #6F2F17;
  --accent-on-dark: #E07A4C; --muted-on-dark: #C9C2B4;
  --line: #D9C5A7;    /* stronger rule: separators, secondary button borders */
  --control: #9A948A; /* form control borders: 3:1 against white (WCAG 1.4.11) */
  /* Status colours for pills and messages. Semantic, not brand accents. */
  --ok-bg: #EEF1E6; --ok-fg: #3F4A2B; --ok-line: #C9D1B5; --ok: #6F7A55;
  --warn-bg: #FBF1DC; --warn-fg: #6E5214; --warn-line: #E8D29F;
  --bad-bg: #FBE9E6; --bad-fg: #8A2A1E; --bad-line: #EDBDB5; --bad: #B23A2A;
  --neutral-bg: #EFE9DE; --neutral-line: #DCD3C3;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius-sm: 4px; --radius: 8px; --radius-md: 12px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(46, 42, 38, .06), 0 1px 3px rgba(46, 42, 38, .08);
  --shadow: 0 4px 12px rgba(46, 42, 38, .08);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 140ms; --dur: 220ms; --dur-slow: 360ms;
  --max: 75rem; /* 1200px */
  /* Terracotta links pass AA on paper and white (4.5:1) but not on the subtle beige, which darkens them. */
  --link: var(--accent); --link-hover: var(--accent-hover);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }
a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
code { font-family: var(--font-mono); font-weight: 500; font-size: 0.85em; }

/* ---- logo: the canonical wordmark is HTML/CSS (docs/brand/logo/wordmark.html). Size it with font-size. */
.wordmark { font-family: var(--font-display); font-size: 32px; line-height: 1; letter-spacing: -0.02em; display: inline-flex; align-items: baseline; color: var(--fg); white-space: nowrap; }
.wordmark .w1 { font-size: 0.5em; font-weight: 300; color: var(--fg-muted); }
.wordmark .w2 { font-size: 0.72em; font-weight: 500; }
.wordmark .w3 { font-weight: 900; }
.wordmark .w4 { color: var(--accent); }
.on-dark .wordmark { color: var(--fg-inverse); }
.on-dark .wordmark .w1 { color: var(--muted-on-dark); }
.on-dark .wordmark .w4 { color: var(--accent-on-dark); }
/* The one brand moment: on the hero, ai → Ai → A → I fade in one after another. */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.wordmark.crescendo > span { animation: fade-in var(--dur-slow) var(--ease-out) both; }
.wordmark.crescendo > span:nth-child(2) { animation-delay: 120ms; }
.wordmark.crescendo > span:nth-child(3) { animation-delay: 240ms; }
.wordmark.crescendo > span:nth-child(4) { animation-delay: 360ms; }

.demo-banner { background: var(--bg-subtle); border-bottom: 1px solid var(--border); font-size: 0.8125rem; padding: 0.5rem 1rem; text-align: center; }
.demo-banner .chip { margin-right: 0.5rem; }
.chip { display: inline-block; background: var(--fg); color: var(--fg-inverse); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1.4; padding: 0.125rem 0.5rem; border-radius: var(--radius-sm); }

/* ---- header, app navigation, footer */
.top { background: var(--bg); border-bottom: 1px solid var(--border); }
.bar { max-width: var(--max); margin: 0 auto; padding: 0.75rem 1rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; }
.bar.wide { max-width: 80rem; }
.brand { display: inline-flex; padding: 0.25rem 0; text-decoration: none; }
.brand .wordmark { font-size: 28px; }
.top-right { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.top-right form { margin: 0; }
.org-name { font-weight: 600; font-size: 0.875rem; }
.org-switch select { max-width: 12rem; min-height: 2rem; padding: 0.25rem 0.5rem; font-size: 0.875rem; }
.lang { font-size: 0.8125rem; font-weight: 600; text-decoration: none; color: var(--fg-muted); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0.125rem 0.5rem; }
.lang:hover { color: var(--fg); border-color: var(--fg-muted); }

.nav { background: var(--bg-subtle); border-bottom: 1px solid var(--border); }
.nav .bar { flex-wrap: nowrap; gap: 0.25rem; justify-content: flex-start; overflow-x: auto; padding-top: 0.5rem; padding-bottom: 0.5rem; scrollbar-width: thin; }
.nav a { white-space: nowrap; text-decoration: none; color: var(--fg); font-size: 0.875rem; font-weight: 500; padding: 0.375rem 0.75rem; border-radius: var(--radius); transition: background-color var(--dur-fast) var(--ease-out); }
.nav a:hover { background: var(--border); color: var(--fg); }
.nav a[aria-current="page"] { background: var(--fg); color: var(--fg-inverse); }
.top-link { font-size: 0.875rem; font-weight: 500; color: var(--fg); text-decoration: none; }
.top-link:hover, .top-link[aria-current="page"] { text-decoration: underline; color: var(--fg); }
/* The settings area's own small menu (settings, team, history). */
.subnav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-bottom: 1.25rem; font-size: 0.875rem; }
.subnav a { color: var(--fg-muted); text-decoration: none; padding: 0.25rem 0; border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--fg); }
.subnav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }

/* Stone is allowed for one band per page: this is it. */
.foot { background: var(--fg); color: var(--muted-on-dark); font-size: 0.875rem; --link: var(--muted-on-dark); --link-hover: var(--fg-inverse); }
.foot-in { max-width: var(--max); margin: 0 auto; padding: 3rem 1rem; display: grid; gap: 1.5rem; }
.foot .wordmark { font-size: 36px; }
.foot p { margin: 0; max-width: 68ch; }
/* Quiet links: muted, underlined only on hover, so the band reads as one line of text, not a row of buttons. */
.foot a { text-decoration-color: rgba(201, 194, 180, 0.4); }
.foot a:hover { text-decoration-color: currentColor; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.8125rem; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 1.5rem 1rem 3rem; width: 100%; }
.wrap.wide { max-width: 80rem; }
.narrow { max-width: 28rem; margin: 2rem auto; }

/* ---- type */
.display, .h1, .h2, .h3, .section-title { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 0.75rem; }
.display { font-size: clamp(2.5rem, 1.5rem + 2.8vw, 4rem); line-height: 1.05; text-wrap: balance; }
.section-title { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1.08; text-wrap: balance; }
.display em, .h1 em, .section-title em { font-style: italic; color: var(--accent); }
.h1 { font-size: 2rem; }
.h2 { font-size: 1.5rem; font-weight: 500; }
.h3 { font-size: 1.1875rem; font-weight: 500; line-height: 1.25; }
.lead { font-size: 1.0625rem; color: var(--fg-muted); max-width: 68ch; }
.eyebrow { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; color: var(--fg-muted); margin: 0 0 0.75rem; }
.muted { color: var(--fg-muted); }
.small { font-size: 0.8125rem; }
.hint { font-size: 0.8125rem; color: var(--fg-muted); margin: 0.375rem 0 0; }
.pre { white-space: pre-wrap; }
.nowrap { white-space: nowrap; }

/* ---- landing: full-bleed bands, 96px rhythm on desktop, 48px on mobile */
.band { padding: 3rem 1rem; }
.band-alt { background: var(--bg-subtle); --link: var(--accent-hover); --link-hover: var(--accent-press); }
.container { max-width: var(--max); margin: 0 auto; }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.hero-mark { margin: 0 0 1rem; }
.hero-mark .wordmark { font-size: 64px; }
.definition { margin: 0 0 2rem; color: var(--fg-muted); max-width: 46ch; }
.definition dfn { font-style: normal; font-family: var(--font-display); font-weight: 500; color: var(--fg); }
.hero .lead { font-size: 1.125rem; }
.cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.section-head { margin-bottom: 2rem; }
.section-head .lead { margin: 0; }
.step-n { display: block; font-family: var(--font-display); font-size: 2.75rem; font-weight: 300; line-height: 1; color: var(--fg-muted); margin-bottom: 1rem; }

/* 01 / 02 / 03: numbered, ruled columns; nothing else. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.steps li { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.steps p { margin: 0; color: var(--fg-muted); max-width: 46ch; }
.step-n { color: var(--accent); }
.fit { display: grid; gap: 2rem; }
.ticks, .crosses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.ticks li, .crosses li { padding-left: 1.75rem; position: relative; max-width: 52ch; }
.ticks li::before, .crosses li::before { position: absolute; left: 0; font-weight: 700; }
.ticks li::before { content: '✓'; color: var(--ok); }
.crosses li::before { content: '✕'; color: var(--bad); }
.faq { max-width: 48rem; }
.faq details { border-top: 1px solid var(--line); padding: 1rem 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: 0.75rem 0 0; color: var(--fg-muted); max-width: 64ch; }
/* A form that is only a button ("Log in", "Try the demo") sits inline like a link would. */
.inline-form { display: inline-flex; margin: 0; }
.cta-hint { margin-top: 0.75rem; max-width: 52ch; }
/* Closing band: try it yourself, or talk to us. */
.closing { display: grid; gap: 3rem; }
.closing .cta { margin-top: 1rem; }
.closing .section-title { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }

/* ---- get in touch */
.contact { max-width: 44rem; margin: 0 auto; }
.contact > .lead { margin-bottom: 1.5rem; }
.contact .grid2 { margin: 0; }
.req { color: var(--accent); }
.field-error { margin: 0.25rem 0 0; font-size: 0.8125rem; font-weight: 500; color: var(--bad-fg); }
input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.error-summary p { margin: 0 0 0.25rem; }
.error-summary ul { margin: 0; padding-left: 1.25rem; }
.error-summary a { color: var(--bad-fg); }
/* The honeypot: off-screen rather than display:none, which some scripts skip. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.demo-banner a { font-weight: 600; }

/* Landing examples: the rows are the real sample data, run through the real rules. */
.glimpse-table { font-size: 0.875rem; }
/* Short headers may break at a soft hyphen (Kliendi-/andmed) rather than overflow a phone screen. */
.glimpse-table th { white-space: normal; hyphens: manual; }
.glimpse-table th, .glimpse-table td { padding: 0.625rem 1.25rem; }
.glimpse-table th + th, .glimpse-table td + td { padding-left: 0.5rem; }
.glimpse-foot { margin: 0; padding: 0.75rem 1.25rem; }
.card.glimpse { padding: 0; margin: 0; overflow: hidden; }
.glimpse-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.glimpse-head .h3 { margin: 0; }
.pills { display: flex; flex-wrap: wrap; gap: 0.375rem; }

/* ---- cards and layout */
.card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem; box-shadow: var(--shadow-sm); min-width: 0; --link: var(--accent); --link-hover: var(--accent-hover); }
.card + .card, section + section { margin-top: 1rem; }
.band + .band { margin-top: 0; }
.lift { transition: box-shadow var(--dur) var(--ease-out); }
.lift:hover { box-shadow: var(--shadow); }
.callout { background: var(--bg-subtle); box-shadow: none; }
.locked { text-align: center; padding: 2rem 1rem; }
.card.flush { padding: 0; }
.card.flush th:first-child, .card.flush td:first-child { padding-left: 1rem; }
/* The tool list stacks into one card per tool on a phone: four columns do not fit 375px. */
@media (max-width: 639px) {
  /* Headers are hidden visually but stay in the accessibility tree, and the tables carry explicit ARIA roles,
     because display:block on table parts drops table semantics in some browsers (Codex, #18). */
  .tools-table thead, .cards-sm thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tools-table tr { display: block; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
  .tools-table td { display: block; border: 0; padding: 0.125rem 0; }
  .card.flush .tools-table td:first-child { padding-left: 0; }
  .tools-table td[data-label]::before { content: attr(data-label) ': '; color: var(--fg-muted); font-size: 0.8125rem; }
  .tools-table .pills { margin: 0.375rem 0 0.125rem; }
  /* Other wide tables (customer summary, audit log) stack the same way; the staff rules keep their grid with
     short column names, the full names being in the legend under it. */
  .cards-sm tr { display: block; padding: 0.625rem 0; border-bottom: 1px solid var(--border); }
  .cards-sm td { display: block; border: 0; padding: 0.125rem 0; }
  .cards-sm td[data-label]::before { content: attr(data-label) ': '; color: var(--fg-muted); font-size: 0.8125rem; }
  .table-wrap.card .cards-sm tr { padding-left: 0; padding-right: 0; }
  .matrix th .lg { display: none; }
}
.matrix th .sm { display: none; }
@media (max-width: 639px) {
  .matrix th .sm { display: inline; }
  .matrix th { white-space: normal; hyphens: manual; } /* "Kliendi­andmed" breaks at its soft hyphen */
  .matrix th, .matrix td { padding-left: 0.375rem; padding-right: 0.375rem; }
}
.next { border-left: 3px solid var(--accent); }
.next-list { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.next-list li > span { display: block; }
.check-line { display: flex; gap: 0.5rem; align-items: flex-start; }
.agenda-line { display: block; }
.rules { margin-top: 1rem; }
/* Regulation references are "standard references": the one place the brand uses JetBrains Mono. */
.ref { font-family: var(--font-mono); font-weight: 500; }

.grid2, .grid3, .grid4 { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1rem 0; }
.grid2 > .card + .card, .grid3 > .card + .card, .grid4 > .card + .card { margin-top: 0; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack > .card + .card { margin-top: 0; }
.row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.row form { margin: 0; }
.wrap-row input { flex: 1 1 14rem; }
.page-head { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.page-head .h1 { margin: 0; }
.split { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }

@media (min-width: 640px) {
  .bar { padding: 1rem 1.5rem; }
  .nav .bar { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .brand .wordmark { font-size: 32px; }
  .wrap { padding: 2rem 1.5rem 4rem; }
  .band { padding: 4rem 1.5rem; }
  .foot-in { padding: 4rem 1.5rem; }
  .hero-mark .wordmark { font-size: 96px; }
  .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
  .closing { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
  .h1 { font-size: 2.5rem; }
  .card { padding: 1.25rem; }
}
@media (min-width: 960px) {
  .band { padding: 6rem 1.5rem; }
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; }
  .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
  .split { grid-template-columns: minmax(0, 1fr) 22rem; }
  .split aside { position: sticky; top: 1rem; }
  .foot-in { grid-template-columns: auto 1fr; column-gap: 4rem; align-items: start; }
}

.plan.current { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg); }
.price { font-weight: 600; }
.tag { display: inline-block; font-size: 0.8125rem; font-weight: 600; padding: 0.25rem 0.625rem; border-radius: var(--radius-pill); background: var(--bg-subtle); border: 1px solid var(--line); }

/* ---- buttons: terracotta for the one thing to do; everything else is quiet */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-height: 2.75rem; padding: 0.5rem 1.125rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-raised); color: var(--fg); font: inherit; font-weight: 600; font-size: 0.9375rem; text-decoration: none; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--bg-subtle); color: var(--fg); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-primary:active { background: var(--accent-press); border-color: var(--accent-press); color: #fff; }
.btn-ghost { background: transparent; }
.btn-danger { color: var(--bad); border-color: var(--bad); background: transparent; }
.btn-danger:hover { background: var(--bad-bg); color: var(--bad-fg); }
.btn-sm { min-height: 2.25rem; padding: 0.25rem 0.75rem; font-size: 0.8125rem; }

/* ---- forms */
.field { display: flex; flex-direction: column; gap: 0.25rem; }
.field label { font-size: 0.875rem; font-weight: 600; }
input, select, textarea { font: inherit; font-size: 1rem; color: var(--fg); background: #fff; border: 1px solid var(--control); border-radius: var(--radius); padding: 0.5rem 0.625rem; width: 100%; min-height: 2.75rem; }
input[type="radio"], input[type="checkbox"] { width: auto; min-height: 0; accent-color: var(--accent); }
fieldset { margin: 0; min-width: 0; }
fieldset.bare { border: 0; padding: 0; }
fieldset.choice { border: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
fieldset.choice > legend { font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; padding: 0; margin-bottom: 0.5rem; }
/* Folded sections: everything inside is still submitted, so a folded field is never "missing". */
details.fold > summary { cursor: pointer; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; }
details.fold[open] > summary { margin-bottom: 1rem; }
.fold-body { margin: 0; }
details.why { margin-top: 0.75rem; }
details.why > summary { cursor: pointer; font-size: 0.8125rem; color: var(--fg-muted); }
fieldset.card { display: flex; flex-direction: column; gap: 0.875rem; }
fieldset .grid2, fieldset .grid3 { margin: 0; }
legend { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; padding: 0 0.25rem; }
/* Inside the card rather than astride its border: a floated legend is laid out like any other child. */
fieldset.card > legend { float: left; width: 100%; padding: 0; margin: 0; }
fieldset[disabled] input, fieldset[disabled] select, fieldset[disabled] textarea { background: var(--bg-subtle); border-color: var(--line); }
.radio-row { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.5rem 0; border-bottom: 1px dashed var(--border); }
.radios { display: flex; flex-wrap: wrap; gap: 1rem; }
.radios label, .check { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9375rem; }
.check input { margin-top: 0.3rem; }
@media (min-width: 640px) { .radio-row { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; } }
.radio-row .radios { flex-wrap: nowrap; }

/* ---- tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { text-align: left; padding: 0.625rem 0.5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); font-weight: 600; white-space: nowrap; }
.matrix td.yes, .matrix td.no { text-align: center; font-weight: 700; }
.matrix td.yes { color: var(--ok); }
.matrix td.no { color: var(--bad); }

.list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.agenda { padding-left: 2rem; display: flex; flex-direction: column; gap: 0.5rem; }

.pill { display: inline-block; font-size: 0.75rem; font-weight: 600; line-height: 1; padding: 0.3rem 0.5rem; border-radius: var(--radius-pill); white-space: nowrap; border: 1px solid transparent; }
.pill-done, .pill-approved, .pill-low, .pill-paid { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-line); }
.pill-partial, .pill-medium, .pill-transparency, .pill-requested, .pill-proposed { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-line); }
.pill-todo, .pill-high, .pill-stop { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-line); }
.pill-restricted, .pill-baseline { background: var(--neutral-bg); color: var(--fg); border-color: var(--neutral-line); }
.pill-retired { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-line); }
.pill-cancelled { background: var(--bg-subtle); color: var(--fg-muted); border-color: var(--line); }

.flash { padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-weight: 500; }
.flash-ok { background: var(--ok-bg); color: var(--ok-fg); }
.flash-err { background: var(--bad-bg); color: var(--bad-fg); }
.demo-box { background: var(--bg-subtle); border: 1px dashed var(--accent); border-radius: var(--radius); padding: 0.75rem 1rem; --link: var(--accent-hover); }
.demo-box p { margin: 0 0 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  .wordmark.crescendo > span { animation: none; }
  .btn, .lift, .nav a { transition: none; }
  .btn:active { transform: none; }
}

@media print {
  /* The DEMO label stays on paper: a printed page must not pass for a real company's record. */
  .top, .nav, .subnav, .foot, .btn, form, .screen-only { display: none !important; }
  .demo-banner { border: 1px solid #999; }
  body { background: #fff; display: block; }
  .card { box-shadow: none; border-color: #ddd; break-inside: avoid; }
  .wrap { padding: 0; max-width: none; }
}

/* Legal documents (rendered markdown) */
.doc { max-width: 48rem; }
.doc h1 { font-family: var(--font-display); font-weight: 400; font-size: 2rem; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 0.5rem; }
.doc h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.3125rem; margin: 1.75rem 0 0.5rem; }
.doc p, .doc li { max-width: 68ch; }
.doc table { display: block; overflow-x: auto; margin: 0.75rem 0; }
.doc hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }
.doc code { background: var(--bg-subtle); padding: 0.05rem 0.3rem; border-radius: var(--radius-sm); }