/* =========================================================================
   Bricks Next docs site — Geist-inspired shell
   ========================================================================= */

:root {
  --sidebar-w: 260px;
  --toc-w: 240px;
  --nav-h: 56px;
  --content-max: 880px;
  --mono: var(--font-family-mono);

  /* Docs-surface semantic (light) */
  --doc-bg: var(--neutral-100);
  --doc-bg-2: var(--neutral-97);
  --doc-bg-3: var(--neutral-94);
  --doc-fg: var(--neutral-0);
  --doc-fg-2: var(--neutral-24);
  --doc-fg-3: var(--neutral-35);
  --doc-fg-4: var(--neutral-53);
  --doc-border: var(--neutral-90);
  --doc-border-2: var(--neutral-84);
  --doc-code-bg: var(--neutral-97);
  --doc-code-fg: var(--neutral-0);
  --doc-code-border: var(--neutral-90);
  --doc-accent: var(--blue-36);
  --doc-kbd-bg: var(--neutral-94);
  --doc-kbd-border: var(--neutral-84);
  --doc-swatch-ring: rgba(35,32,29,.08);
}

html[data-theme="dark"] {
  --doc-bg: #0E0C0A;
  --doc-bg-2: #17140F;
  --doc-bg-3: #1F1B16;
  --doc-fg: #F6F4F1;
  --doc-fg-2: #C6C1BB;
  --doc-fg-3: #A0968C;
  --doc-fg-4: #786E64;
  --doc-border: #23201D;
  --doc-border-2: #37322D;
  --doc-code-bg: #17140F;
  --doc-code-fg: #F6F4F1;
  --doc-code-border: #23201D;
  --doc-accent: #6F9AFF;
  --doc-kbd-bg: #23201D;
  --doc-kbd-border: #37322D;
  --doc-swatch-ring: rgba(255,255,255,.08);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  background: var(--doc-bg);
  color: var(--doc-fg);
  font-family: var(--font-family-default);
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  min-height: 100vh;
  font-feature-settings: "ss01", "ss02", "kern";
}

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

::selection { background: var(--blue-36); color: #fff; }

/* ============================================================ Layout */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
  grid-template-rows: var(--nav-h) 1fr;
  grid-template-areas:
    "nav nav nav"
    "sidebar main toc";
  min-height: 100vh;
}
@media (max-width: 1200px) {
  .app {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    grid-template-areas: "nav nav" "sidebar main";
  }
  .toc { display: none; }
}
@media (max-width: 820px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-areas: "nav" "main";
  }
  .sidebar { display: none; }
  .sidebar.open { display: block; position: fixed; inset: var(--nav-h) 0 0 0; z-index: 40; width: 100%; background: var(--doc-bg); }
}

/* ============================================================ Nav */

.nav {
  grid-area: nav;
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  background: color-mix(in srgb, var(--doc-bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--doc-border);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 15px/1 var(--font-family-default);
  letter-spacing: -0.014em;
}
.nav-brand .mark {
  width: 16px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--doc-fg);
  margin-right: 2px;
}
.nav-brand .mark svg { width: 16px; height: 22px; display: block; }
.nav-brand .divider {
  width: 1px; height: 16px; background: var(--doc-border-2); margin: 0 2px;
}
.nav-brand .sys {
  color: var(--doc-fg-3);
  font-weight: 400;
}
.nav-brand .ver {
  font: 500 11px/1 var(--mono);
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--doc-bg-3);
  color: var(--doc-fg-3);
  letter-spacing: 0;
}

.nav-main {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
}
.nav-main a {
  font: 500 13px/1 var(--font-family-default);
  letter-spacing: -0.014em;
  color: var(--doc-fg-3);
  padding: 8px 10px;
  border-radius: 6px;
  transition: color 120ms, background 120ms;
}
.nav-main a:hover { color: var(--doc-fg); background: var(--doc-bg-2); }
.nav-main a.active { color: var(--doc-fg); }

.nav-spacer { flex: 1; }

.nav-actions { display: flex; align-items: center; gap: 8px; }

.nav-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 8px 0 10px;
  min-width: 240px;
  background: var(--doc-bg-2);
  border: 1px solid var(--doc-border);
  border-radius: 8px;
  color: var(--doc-fg-3);
  font: 400 13px/1 var(--font-family-default);
  letter-spacing: -0.014em;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.nav-search:hover { border-color: var(--doc-border-2); }
.nav-search .lucide { width: 14px; height: 14px; }
.nav-search .search-label { flex: 1; text-align: left; }
.nav-search .kbd { margin-left: auto; }

.kbd {
  font: 500 11px/1 var(--mono);
  color: var(--doc-fg-3);
  background: var(--doc-kbd-bg);
  border: 1px solid var(--doc-kbd-border);
  border-radius: 5px;
  padding: 3px 5px;
  min-width: 18px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--doc-border);
  background: var(--doc-bg-2);
  border-radius: 8px;
  color: var(--doc-fg-2);
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, color 120ms;
}
.icon-btn:hover { color: var(--doc-fg); border-color: var(--doc-border-2); }
.icon-btn .lucide { width: 15px; height: 15px; }

.menu-btn { display: none; }
@media (max-width: 820px) {
  .menu-btn { display: inline-flex; }
  .nav-search { min-width: 0; padding-right: 6px; }
  .nav-search .search-label, .nav-search .kbd { display: none; }
  .nav-main { display: none; }
}

/* ============================================================ Sidebar */

.sidebar {
  grid-area: sidebar;
  border-right: 1px solid var(--doc-border);
  padding: 24px 16px 80px 24px;
  overflow-y: auto;
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
}
.sidebar-group { margin-bottom: 20px; }
.sidebar-label {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--doc-fg-4);
  padding: 6px 10px;
  margin-bottom: 4px;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font: 400 13.5px/1.2 var(--font-family-default);
  letter-spacing: -0.014em;
  color: var(--doc-fg-2);
  border-radius: 6px;
  transition: color 120ms, background 120ms;
}
.sidebar-link:hover { color: var(--doc-fg); background: var(--doc-bg-2); }
.sidebar-link.active {
  color: var(--doc-fg);
  background: var(--doc-bg-2);
  font-weight: 500;
}
.sidebar-link .dot {
  width: 4px; height: 4px; border-radius: 2px;
  background: var(--doc-fg-4);
  opacity: 0;
  transition: opacity 120ms;
}
.sidebar-link.active .dot { opacity: 1; background: var(--doc-accent); }

/* Badge-style sidebar link (e.g. llms.txt) */
.sidebar-link.sidebar-link-badge {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0;
  color: var(--doc-fg-2);
  background: var(--doc-bg-2);
  border: 1px solid var(--doc-border);
  border-radius: 8px;
  padding: 5px 10px;
  margin-top: 4px;
  display: inline-flex;
  width: fit-content;
}
.sidebar-link.sidebar-link-badge:hover {
  background: var(--doc-bg-3);
  color: var(--doc-fg);
  border-color: var(--doc-border-2);
}
.sidebar-link.sidebar-link-badge .dot { display: none; }

/* ============================================================ Main */

.main {
  grid-area: main;
  padding: 40px 56px 96px;
  min-width: 0;
}
@media (max-width: 820px) {
  .main { padding: 24px 20px 80px; }
}

.page {
  max-width: var(--content-max);
  margin: 0 auto;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 12px/1 var(--font-family-default);
  letter-spacing: -0.014em;
  color: var(--doc-fg-3);
  margin-bottom: 20px;
}
.crumbs .sep { opacity: .4; }

.page-title {
  font: 500 40px/1.05 var(--font-family-default);
  letter-spacing: -0.03em;
  margin: 0 0 12px;
}
.page-lede {
  font: 400 18px/1.5 var(--font-family-default);
  letter-spacing: -0.024em;
  color: var(--doc-fg-2);
  margin: 0 0 40px;
  max-width: 640px;
}

h2.doc-h2 {
  font: 500 24px/1.2 var(--font-family-default);
  letter-spacing: -0.028em;
  margin: 56px 0 16px;
  scroll-margin-top: 80px;
}
h3.doc-h3 {
  font: 500 18px/1.25 var(--font-family-default);
  letter-spacing: -0.024em;
  margin: 32px 0 12px;
  scroll-margin-top: 80px;
}
p.doc-p {
  font: 400 15px/1.6 var(--font-family-default);
  letter-spacing: -0.014em;
  color: var(--doc-fg-2);
  margin: 0 0 16px;
  max-width: 680px;
}
p.doc-p strong, strong.doc-strong { color: var(--doc-fg); font-weight: 500; }
a.doc-link {
  color: var(--doc-fg);
  border-bottom: 1px solid var(--doc-border-2);
  transition: border-color 120ms;
}
a.doc-link:hover { border-color: var(--doc-fg); }

ul.doc-ul, ol.doc-ol {
  padding-left: 20px;
  margin: 0 0 16px;
}
ul.doc-ul li, ol.doc-ol li {
  font: 400 15px/1.6 var(--font-family-default);
  letter-spacing: -0.014em;
  color: var(--doc-fg-2);
  margin-bottom: 6px;
}

code.doc-code {
  font: 500 0.88em/1 var(--mono);
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--doc-code-bg);
  border: 1px solid var(--doc-code-border);
  color: var(--doc-fg);
  letter-spacing: 0;
}

/* ============================================================ TOC */

.toc {
  grid-area: toc;
  padding: 40px 24px 80px;
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow-y: auto;
}
.toc-label {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--doc-fg-4);
  margin-bottom: 12px;
}
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list a {
  display: block;
  padding: 5px 10px;
  font: 400 13px/1.4 var(--font-family-default);
  letter-spacing: -0.014em;
  color: var(--doc-fg-3);
  border-left: 1.5px solid var(--doc-border);
  margin-left: -1.5px;
  transition: color 120ms, border-color 120ms;
}
.toc-list a.h3 { padding-left: 20px; }
.toc-list a:hover { color: var(--doc-fg-2); }
.toc-list a.active { color: var(--doc-fg); border-left-color: var(--doc-fg); }

/* ============================================================ Primitives */

/* Code block with copy */
.codeblock {
  position: relative;
  background: var(--doc-code-bg);
  border: 1px solid var(--doc-code-border);
  border-radius: 8px;
  margin: 16px 0 24px;
  overflow: hidden;
}
.codeblock-tabs {
  display: flex;
  border-bottom: 1px solid var(--doc-code-border);
  background: var(--doc-bg-2);
}
.codeblock-tab {
  font: 500 12px/1 var(--mono);
  color: var(--doc-fg-3);
  padding: 10px 14px;
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 1.5px solid transparent;
  margin-bottom: -1px;
}
.codeblock-tab.active { color: var(--doc-fg); border-bottom-color: var(--doc-fg); }
.codeblock-tab:hover { color: var(--doc-fg-2); }
.codeblock-body {
  position: relative;
  padding: 16px 18px;
  overflow-x: auto;
}
.codeblock pre {
  margin: 0;
  font: 400 13px/1.6 var(--mono);
  color: var(--doc-code-fg);
  white-space: pre;
}
.codeblock .copy-btn {
  position: absolute;
  top: 10px; right: 10px;
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid var(--doc-border);
  background: var(--doc-bg);
  color: var(--doc-fg-3);
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms, color 120ms, border-color 120ms;
}
.codeblock:hover .copy-btn { opacity: 1; }
.codeblock .copy-btn:hover { color: var(--doc-fg); border-color: var(--doc-border-2); }
.codeblock .copy-btn .lucide { width: 13px; height: 13px; }
.codeblock .copy-btn.copied { color: var(--green-31); border-color: var(--green-31); opacity: 1; }

/* Syntax highlight (very light) */
.tok-k { color: #c678dd; }
.tok-s { color: #98c379; }
.tok-c { color: var(--doc-fg-4); font-style: italic; }
.tok-p { color: #e06c75; }
.tok-v { color: #d19a66; }
.tok-t { color: #61afef; }
.tok-a { color: #e5c07b; }
html[data-theme="dark"] .tok-k { color: #c678dd; }

/* Preview surface */
.preview {
  background: var(--doc-bg);
  border: 1px solid var(--doc-border);
  border-radius: 8px;
  padding: 32px;
  margin: 16px 0 0;
  position: relative;
  overflow: hidden;
}
.preview.pad-0 { padding: 0; }
.preview.bg-2 { background: var(--doc-bg-2); }
.preview.bg-3 { background: var(--doc-bg-3); }
.preview-label {
  position: absolute;
  top: 10px; right: 12px;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--doc-fg-4);
}
.preview + .codeblock { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: -1px; border-top: 1px solid var(--doc-border); }
.preview:has(+ .codeblock) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* ============================================================ Token tables */

.token-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font: 400 13px/1.5 var(--font-family-default);
  letter-spacing: -0.014em;
}
.token-table th, .token-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--doc-border);
  vertical-align: middle;
}
.token-table th {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--doc-fg-4);
  background: var(--doc-bg-2);
  padding: 10px 14px;
}
.token-table td.mono { font-family: var(--mono); font-size: 12.5px; color: var(--doc-fg-2); }
.token-table td.num { font-family: var(--mono); font-size: 13px; color: var(--doc-fg-2); white-space: nowrap; }
.token-table .swatch {
  width: 24px; height: 24px; border-radius: 6px; display: inline-block;
  box-shadow: inset 0 0 0 1px var(--doc-swatch-ring);
  vertical-align: middle;
  margin-right: 10px;
}

/* ============================================================ Color chips */

.color-ramp {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 4px;
  margin: 12px 0 20px;
}
.color-chip {
  aspect-ratio: 1;
  border-radius: 8px;
  display: flex;
  align-items: flex-end;
  padding: 8px;
  font: 500 10px/1.1 var(--mono);
  color: var(--fg-primary);
  box-shadow: inset 0 0 0 1px var(--doc-swatch-ring);
  cursor: pointer;
  transition: transform 120ms;
}
.color-chip.light-text { color: #fff; }
.color-chip:hover { transform: translateY(-2px); }
.color-chip .code { opacity: 0; transition: opacity 120ms; }
.color-chip:hover .code { opacity: 1; }

.semantic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 12px 0 24px;
}
.semantic-card {
  border: 1px solid var(--doc-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--doc-bg);
}
.semantic-swatch {
  height: 70px;
  background: var(--fg-primary);
  box-shadow: inset 0 0 0 1px var(--doc-swatch-ring);
}
.semantic-meta {
  padding: 10px 12px;
  border-top: 1px solid var(--doc-border);
}
.semantic-meta .name {
  font: 500 13px/1.2 var(--font-family-default);
  letter-spacing: -0.014em;
  color: var(--doc-fg);
  margin-bottom: 4px;
}
.semantic-meta .val {
  font: 400 11.5px/1 var(--mono);
  color: var(--doc-fg-3);
}

/* ============================================================ Cmd+K Palette */

.palette-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: none;
  padding-top: 12vh;
  justify-content: center;
  animation: fade-in 120ms var(--ease-accel-decel-fastest);
}
.palette-scrim.open { display: flex; }
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes slide-in { from { transform: translateY(-6px); opacity: 0 } to { transform: none; opacity: 1 } }

.palette {
  width: min(640px, calc(100vw - 32px));
  max-height: 70vh;
  background: var(--doc-bg);
  border: 1px solid var(--doc-border-2);
  border-radius: 12px;
  box-shadow: var(--shadow-overlay);
  display: flex;
  flex-direction: column;
  animation: slide-in 180ms var(--ease-accel-decel-fastest);
  overflow: hidden;
}
.palette-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--doc-border);
}
.palette-input-wrap .lucide { width: 16px; height: 16px; color: var(--doc-fg-3); }
.palette-input {
  flex: 1;
  border: none;
  outline: none;
  font: 400 16px/1 var(--font-family-default);
  letter-spacing: -0.014em;
  background: transparent;
  color: var(--doc-fg);
}
.palette-input::placeholder { color: var(--doc-fg-4); }
.palette-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.palette-empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--doc-fg-4);
  font: 400 14px/1.4 var(--font-family-default);
  letter-spacing: -0.014em;
}
.palette-group-label {
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--doc-fg-4);
  padding: 12px 10px 6px;
}
.palette-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--doc-fg-2);
}
.palette-item:hover, .palette-item.active { background: var(--doc-bg-2); color: var(--doc-fg); }
.palette-item .lucide { width: 15px; height: 15px; color: var(--doc-fg-3); flex-shrink: 0; }
.palette-item-body { flex: 1; min-width: 0; }
.palette-item-title { font: 500 13px/1.3 var(--font-family-default); letter-spacing: -0.014em; }
.palette-item-sub { font: 400 12px/1.3 var(--font-family-default); letter-spacing: -0.014em; color: var(--doc-fg-4); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-item-sub mark { background: transparent; color: var(--doc-fg); font-weight: 500; }
.palette-item-title mark { background: transparent; color: var(--doc-accent); font-weight: 500; }
.palette-item-kind {
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--doc-fg-4);
  padding: 3px 6px;
  border: 1px solid var(--doc-border);
  border-radius: 4px;
}
.palette-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  border-top: 1px solid var(--doc-border);
  font: 400 11px/1 var(--font-family-default);
  letter-spacing: -0.014em;
  color: var(--doc-fg-4);
}
.palette-footer .kbd { margin-right: 4px; }

/* ============================================================ Footer */

.page-footer {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--doc-border);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.page-footer a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border: 1px solid var(--doc-border);
  border-radius: 8px;
  min-width: 220px;
  transition: border-color 120ms;
}
.page-footer a:hover { border-color: var(--doc-fg-3); }
.page-footer a.next { text-align: right; align-items: flex-end; }
.page-footer .label {
  font: 400 12px/1 var(--font-family-default);
  letter-spacing: -0.014em;
  color: var(--doc-fg-4);
}
.page-footer .target {
  font: 500 14px/1.2 var(--font-family-default);
  letter-spacing: -0.014em;
  color: var(--doc-fg);
}

/* ============================================================ Demo component styles */

/* Buttons — tokens match Figma: Primary is brand blue, Secondary is white w/ neutral border,
   Secondary-inverse is warm black. 1.5px border on all. Sizes: xs/sm/md/lg → 47/55/65/75px. */
.od-btn {
  font-family: var(--font-family-default);
  font-weight: 500;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 160ms var(--ease-accel-decel-fastest),
              border-color 160ms var(--ease-accel-decel-fastest),
              color 160ms var(--ease-accel-decel-fastest),
              transform 120ms var(--ease-accel-decel-fastest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  user-select: none;
}
.od-btn:active:not([disabled]) { transform: scale(0.97); }
.od-btn:focus-visible { outline: 2px solid var(--blue-36); outline-offset: 2px; }

/* Sizes — matched to Figma measurements */
.od-btn.size-xs { height: 47px; font-size: 16px; letter-spacing: -0.014em; line-height: 1.25; padding: 0 16px;  border-radius: 12px; }
.od-btn.size-sm { height: 55px; font-size: 16px; letter-spacing: -0.014em; line-height: 1.25; padding: 0 20px;  border-radius: 14px; }
.od-btn.size-md { height: 65px; font-size: 18px; letter-spacing: -0.024em; line-height: 1.20; padding: 0 24px;  border-radius: 18px; }
.od-btn.size-lg { height: 75px; font-size: 20px; letter-spacing: -0.024em; line-height: 1.20; padding: 0 30px;  border-radius: 24px; }

/* Variants (Figma-aligned) */
.od-btn.var-primary           { background: var(--blue-36); color: #fff; border-color: var(--blue-36); }
.od-btn.var-primary:hover     { background: var(--blue-15); border-color: var(--blue-15); }
.od-btn.var-secondary         { background: #fff; color: var(--neutral-0); border-color: var(--neutral-84); }
.od-btn.var-secondary:hover   { background: var(--neutral-97); }
.od-btn.var-secondary-inverse { background: var(--neutral-0); color: #fff; border-color: var(--neutral-0); }
.od-btn.var-secondary-inverse:hover { background: var(--neutral-24); border-color: var(--neutral-24); }

/* Legacy aliases kept for back-compat with existing examples */
.od-btn.var-brand             { background: var(--blue-36); color: #fff; border-color: var(--blue-36); }
.od-btn.var-brand:hover       { background: var(--blue-15); border-color: var(--blue-15); }
.od-btn.var-ghost             { background: transparent; color: var(--neutral-0); }
.od-btn.var-ghost:hover       { background: var(--neutral-94); }
.od-btn.var-destructive       { background: var(--red-55); color: #fff; border-color: var(--red-55); }
.od-btn.var-destructive:hover { background: var(--red-43); border-color: var(--red-43); }

/* States */
.od-btn[disabled],
.od-btn[aria-disabled="true"] { background: var(--neutral-94); color: var(--neutral-53); border-color: transparent; cursor: not-allowed; }
.od-btn[disabled]:active { transform: none; }

/* Loading — dots replace the label; keep the button's original width */
.od-btn.is-loading { pointer-events: none; }
.od-btn.is-loading > .od-btn-label { visibility: hidden; }
.od-btn .od-btn-dots {
  position: absolute;
  display: inline-flex;
  gap: 6px;
}
.od-btn.is-loading .od-btn-dots { position: static; }
.od-btn:not(.is-loading) .od-btn-dots { display: none; }
.od-btn .od-btn-dots > span {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  animation: od-btn-bounce 1.05s infinite var(--ease-accel-decel-fastest);
}
.od-btn .od-btn-dots > span:nth-child(2) { animation-delay: .14s; }
.od-btn .od-btn-dots > span:nth-child(3) { animation-delay: .28s; }
@keyframes od-btn-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .55; }
  40%           { transform: translateY(-3px); opacity: 1; }
}

/* Inputs */
.od-field { display: flex; flex-direction: column; gap: 6px; }
.od-label { font: 500 14px/1.2 var(--font-family-default); letter-spacing: -0.014em; color: var(--neutral-0); }
.od-hint { font: 400 12px/1.3 var(--font-family-default); letter-spacing: -0.014em; color: var(--neutral-35); }
.od-hint.err { color: var(--red-55); }
.od-input, .od-select, .od-textarea {
  font: 400 16px/1.2 var(--font-family-default);
  letter-spacing: -0.014em;
  padding: 14px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--neutral-84);
  background: #fff;
  color: var(--neutral-0);
  outline: none;
  transition: border-color 180ms, box-shadow 180ms;
  width: 100%;
}
.od-input:focus, .od-select:focus, .od-textarea:focus {
  border-color: var(--blue-36);
  box-shadow: 0 0 0 3px rgba(0,66,230,.12);
}
.od-input.err { border-color: var(--red-55); }
.od-input.err:focus { box-shadow: 0 0 0 3px rgba(193,62,62,.12); }
.od-input::placeholder, .od-textarea::placeholder { color: var(--neutral-53); }
.od-textarea { resize: vertical; min-height: 96px; }

html[data-theme="dark"] .od-input,
html[data-theme="dark"] .od-select,
html[data-theme="dark"] .od-textarea {
  background: var(--doc-bg-2);
  border-color: var(--doc-border-2);
  color: var(--doc-fg);
}

/* Cards */
.od-card {
  background: var(--neutral-100);
  border: 1px solid var(--neutral-90);
  border-radius: 16px;
  padding: 20px;
}
html[data-theme="dark"] .od-card { background: var(--doc-bg-2); border-color: var(--doc-border); color: var(--doc-fg); }

/* Pills */
.od-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/1 var(--font-family-default);
  letter-spacing: -0.014em;
  padding: 6px 12px;
  border-radius: 9999px;
  background: var(--neutral-94);
  color: var(--neutral-0);
  border: 1.5px solid transparent;
}
.od-pill.tone-brand { background: var(--blue-93); color: var(--blue-15); }
.od-pill.tone-success { background: var(--green-93); color: var(--green-20); }
.od-pill.tone-error { background: var(--red-94); color: var(--red-43); }
.od-pill.tone-inverse { background: var(--neutral-0); color: #fff; }
.od-pill.tone-outline { background: transparent; border-color: var(--neutral-84); color: var(--neutral-0); }

/* Toasts */
.od-toast {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--neutral-0);
  color: #fff;
  box-shadow: var(--shadow-default);
  min-width: 300px;
  max-width: 420px;
  font: 500 14px/1.35 var(--font-family-default);
  letter-spacing: -0.014em;
}
.od-toast .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--green-42); flex-shrink: 0;
}
.od-toast.tone-error .dot { background: var(--red-55); }
.od-toast.tone-info .dot { background: var(--blue-42); }
.od-toast .close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
}
.od-toast .close:hover { color: #fff; }

/* ============================================================ Utilities */

.stack { display: flex; flex-direction: column; }
.stack.gap-2 { gap: 8px; }
.stack.gap-3 { gap: 12px; }
.stack.gap-4 { gap: 16px; }
.stack.gap-6 { gap: 24px; }
.row { display: flex; align-items: center; flex-wrap: wrap; }
.row.gap-2 { gap: 8px; }
.row.gap-3 { gap: 12px; }
.row.gap-4 { gap: 16px; }
.row.gap-6 { gap: 24px; }

.muted { color: var(--doc-fg-3); }
.mono { font-family: var(--mono); font-size: 0.88em; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 680px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.callout {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-left: 2px solid var(--doc-accent);
  background: var(--doc-bg-2);
  border-radius: 0 8px 8px 0;
  margin: 16px 0 24px;
}
.callout .lucide { width: 16px; height: 16px; color: var(--doc-accent); flex-shrink: 0; margin-top: 2px; }
.callout .callout-body { font: 400 13.5px/1.55 var(--font-family-default); letter-spacing: -0.014em; color: var(--doc-fg-2); }
.callout .callout-body strong { color: var(--doc-fg); font-weight: 500; }
.callout.tone-warn { border-left-color: var(--red-55); }
.callout.tone-warn .lucide { color: var(--red-55); }

/* ============================================================ Home / Landing */

.home-hero {
  padding: 48px 0 64px;
  max-width: var(--content-max);
  margin: 0 auto;
}
.home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 12px/1 var(--font-family-default);
  letter-spacing: -0.014em;
  color: var(--doc-fg-3);
  padding: 6px 10px;
  border: 1px solid var(--doc-border);
  border-radius: 9999px;
  margin-bottom: 24px;
}
.home-eyebrow .lucide { width: 13px; height: 13px; }
.home-title {
  font: 500 56px/1.02 var(--font-family-default);
  letter-spacing: -0.034em;
  margin: 0 0 20px;
  max-width: 820px;
}
@media (max-width: 680px) { .home-title { font-size: 40px; } }
.home-title .accent { color: var(--doc-accent); }
.home-sub {
  font: 400 19px/1.5 var(--font-family-default);
  letter-spacing: -0.024em;
  color: var(--doc-fg-2);
  max-width: 580px;
  margin: 0 0 28px;
}
.home-cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------- Home hero layout (art on top, copy below) ---------- */
.home-hero-top {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: stretch;
}
.home-hero-copy { min-width: 0; }

/* ---------- Line-art hero animation ---------- */
.home-hero-art {
  width: 100%;
  aspect-ratio: 1200 / 380;
  max-height: 320px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, color-mix(in oklch, var(--blue-42) 6%, transparent), transparent 70%),
    linear-gradient(180deg, var(--doc-bg-2) 0%, var(--doc-bg) 100%);
  border: 1px solid var(--doc-border);
}
[data-theme="dark"] .home-hero-art {
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, color-mix(in oklch, var(--blue-42) 12%, transparent), transparent 70%),
    linear-gradient(180deg, var(--doc-bg) 0%, var(--doc-bg-2) 100%);
}
.hero-art-svg {
  width: 100%;
  height: 100%;
  color: var(--doc-fg);
  overflow: hidden;
  display: block;
}

/* ----- Layer-wide draw-in ----- */
.hero-draw,
.hero-draw-mid,
.hero-draw-bg {
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  animation: hero-draw-line 1s cubic-bezier(.4,.7,.4,1) forwards;
}
@keyframes hero-draw-line { to { stroke-dashoffset: 0; } }

/* Hero house strokes — staggered */
.hero-draw-1  { --len: 520; animation-delay: 1.1s; }
.hero-draw-2  { --len: 230; animation-delay: 1.5s; }
.hero-draw-2a { --len: 120; animation-delay: 1.8s; animation-duration: 0.7s; }
.hero-draw-3  { --len: 100; animation-delay: 2.0s; }
.hero-draw-4  { --len: 260; animation-delay: 2.1s; }
.hero-draw-5  { --len: 140; animation-delay: 2.3s; }
.hero-draw-6  { --len: 100; animation-delay: 2.5s; }
.hero-draw-7  { --len: 140; animation-delay: 2.7s; }
.hero-draw-8  { --len: 150; animation-delay: 2.9s; }

/* Background layers — earlier */
.hero-hill-1, .hero-hill-2 {
  --len: 1400;
  animation-duration: 2.2s;
}
.hero-hill-1 { animation-delay: 0.2s; }
.hero-hill-2 { animation-delay: 0.5s; }

/* Mid-ground houses draw in */
.hero-mid-row-l .hero-draw-mid { --len: 260; }
.hero-mid-row-l .hero-draw-mid:nth-child(1) { animation-delay: 0.7s; }
.hero-mid-row-l .hero-draw-mid:nth-child(2) { animation-delay: 0.75s; }
.hero-mid-row-l .hero-draw-mid:nth-child(3) { animation-delay: 0.8s; }
.hero-mid-row-l .hero-draw-mid:nth-child(4) { animation-delay: 0.85s; }
.hero-mid-row-l .hero-draw-mid:nth-child(5) { animation-delay: 0.9s; }
.hero-mid-row-l .hero-draw-mid:nth-child(6) { animation-delay: 0.95s; }
.hero-mid-row-l .hero-draw-mid:nth-child(7) { animation-delay: 1.0s; }
.hero-mid-row-r .hero-draw-mid { --len: 260; }
.hero-mid-row-r .hero-draw-mid:nth-child(1) { animation-delay: 0.7s; }
.hero-mid-row-r .hero-draw-mid:nth-child(2) { animation-delay: 0.75s; }
.hero-mid-row-r .hero-draw-mid:nth-child(3) { animation-delay: 0.8s; }
.hero-mid-row-r .hero-draw-mid:nth-child(4) { animation-delay: 0.85s; }
.hero-mid-row-r .hero-draw-mid:nth-child(5) { animation-delay: 0.9s; }
.hero-mid-row-r .hero-draw-mid:nth-child(6) { animation-delay: 0.95s; }
.hero-mid-row-r .hero-draw-mid:nth-child(7) { animation-delay: 1.0s; }
.hero-mid-row-r .hero-draw-mid:nth-child(8) { animation-delay: 1.05s; }

/* Ground line */
.hero-ground {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: hero-draw-line 1.4s cubic-bezier(.3,.7,.3,1) forwards 0.3s;
}

/* Static layer fade-ins */
.hero-far-row, .hero-poles, .hero-mid-trees, .hero-fence, .hero-grass, .hero-walkway, .hero-stars {
  opacity: 0;
  animation: hero-fade-in 1.2s ease forwards;
}
.hero-stars { animation-delay: 0.6s; --target-op: 1; }
.hero-far-row { animation-delay: 0.4s; --target-op: 0.28; }
.hero-poles { animation-delay: 0.8s; --target-op: 0.32; }
.hero-mid-trees { animation-delay: 1.0s; --target-op: 0.5; }
.hero-fence { animation-delay: 2.3s; --target-op: 0.4; }
.hero-grass { animation-delay: 2.5s; --target-op: 0.3; }
.hero-walkway { animation-delay: 2.7s; --target-op: 0.35; }
@keyframes hero-fade-in {
  to { opacity: var(--target-op, 1); }
}

/* Sun/moon — subtle orbit */
.hero-sun, .hero-sun-inner {
  opacity: 0;
  animation: hero-sun-in 1.8s ease forwards 1s;
  transform-origin: 960px 110px;
}
.hero-sun-inner { animation-delay: 1.2s; }
@keyframes hero-sun-in {
  0% { opacity: 0; transform: scale(0.7); }
  100% { opacity: 1; transform: scale(1); }
}
.hero-sun { animation-name: hero-sun-in-outer; }
@keyframes hero-sun-in-outer {
  0% { opacity: 0; transform: scale(0.7); }
  100% { opacity: 0.35; transform: scale(1); }
}

/* Twinkling stars */
.hero-stars circle {
  animation: hero-twinkle 4s ease-in-out infinite;
}
.hero-stars circle:nth-child(2) { animation-delay: 0.8s; }
.hero-stars circle:nth-child(3) { animation-delay: 1.6s; }
.hero-stars circle:nth-child(4) { animation-delay: 2.2s; }
.hero-stars circle:nth-child(5) { animation-delay: 0.4s; }
.hero-stars circle:nth-child(6) { animation-delay: 3.0s; }
.hero-stars circle:nth-child(7) { animation-delay: 1.2s; }
.hero-stars circle:nth-child(8) { animation-delay: 2.6s; }
@keyframes hero-twinkle {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.6; }
}

/* Clouds drifting */
.hero-cloud {
  animation: hero-cloud-drift 40s linear infinite;
}
.hero-cloud-1 { animation-delay: -5s; }
.hero-cloud-2 { animation-delay: -20s; animation-duration: 55s; }
.hero-cloud-3 { animation-delay: -35s; animation-duration: 48s; }
.hero-cloud-4 { animation-delay: -12s; animation-duration: 62s; }
@keyframes hero-cloud-drift {
  from { transform: translateX(-80px); }
  to   { transform: translateX(1300px); }
}

/* Birds flying across */
.hero-birds {
  animation: hero-birds-fly 14s ease-in-out infinite;
  animation-delay: 4s;
}
.hero-birds .hero-bird-1 { transform: translate(0, 0); }
.hero-birds .hero-bird-2 { transform: translate(-20px, 8px); }
.hero-birds .hero-bird-3 { transform: translate(-38px, 14px); }
.hero-bird {
  animation: hero-bird-flap 0.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.hero-bird-2 { animation-delay: 0.1s; }
.hero-bird-3 { animation-delay: 0.2s; }
@keyframes hero-bird-flap {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.55); }
}
@keyframes hero-birds-fly {
  0%   { opacity: 0; transform: translate(-80px, 180px); }
  10%  { opacity: 0.6; }
  40%  { transform: translate(600px, 80px); opacity: 0.6; }
  70%  { transform: translate(1100px, 120px); opacity: 0.4; }
  85%  { opacity: 0; }
  100% { opacity: 0; transform: translate(1300px, 140px); }
}

/* Hero windows light up in sequence */
.hero-window-1 { animation: hero-window-light 6s ease-in-out infinite 4s; }
.hero-window-2 { animation: hero-window-light 6s ease-in-out infinite 5.5s; }
.hero-window-3 { animation: hero-window-light 6s ease-in-out infinite 7s; }
@keyframes hero-window-light {
  0%, 100% { fill: transparent; }
  40%, 70% { fill: color-mix(in oklch, var(--blue-42) 22%, transparent); }
}

/* Chimney smoke */
.hero-smoke {
  animation: hero-smoke-puff 5s ease-in-out infinite 3.5s;
}
@keyframes hero-smoke-puff {
  0%, 100% { opacity: 0; transform: translateY(0); }
  30% { opacity: 0.3; }
  70% { opacity: 0.2; transform: translateY(-10px); }
}

/* FOR SALE / SOLD swap */
.hero-sign-text { opacity: 0; }
.hero-sign-text-for {
  animation: hero-sign-for 12s ease-in-out infinite;
  animation-delay: 3s;
}
.hero-sign-text-sold {
  animation: hero-sign-sold 12s ease-in-out infinite;
  animation-delay: 3s;
  fill: var(--blue-42);
}
@keyframes hero-sign-for {
  0% { opacity: 0; }
  6%, 50% { opacity: 1; }
  55%, 100% { opacity: 0; }
}
@keyframes hero-sign-sold {
  0%, 55% { opacity: 0; transform: translateY(-4px); }
  60% { opacity: 1; transform: translateY(0); }
  92% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}

/* Key arcs in from upper right */
.hero-key {
  opacity: 0;
  offset-path: path('M 1100 100 Q 980 160 860 220 Q 760 270 700 320 Q 670 340 654 360');
  offset-distance: 0%;
  offset-rotate: auto;
  animation: hero-key-arc 12s ease-in-out infinite;
  animation-delay: 3.5s;
}
@keyframes hero-key-arc {
  0%   { opacity: 0; offset-distance: 0%; }
  3%   { opacity: 1; }
  18%  { opacity: 1; offset-distance: 90%; }
  22%  { opacity: 0; offset-distance: 100%; }
  100% { opacity: 0; offset-distance: 100%; }
}

/* Key trail path pulses visible in sync */
.hero-key-path {
  stroke-dasharray: 6 6;
  animation: hero-path-dash 2s linear infinite, hero-path-visible 12s ease-in-out infinite;
  animation-delay: 0s, 3.5s;
}
@keyframes hero-path-dash { to { stroke-dashoffset: -24; } }
@keyframes hero-path-visible {
  0%, 2% { opacity: 0; }
  5%, 20% { opacity: 0.22; }
  26%, 100% { opacity: 0; }
}

/* Door stroke pulse when key arrives */
.hero-door {
  animation: hero-door-pulse 12s ease-in-out infinite;
  animation-delay: 3.5s;
}
@keyframes hero-door-pulse {
  0%, 18% { stroke-width: 1.75; }
  22% { stroke-width: 3; }
  30% { stroke-width: 1.75; }
  100% { stroke-width: 1.75; }
}

/* Offer-pulse dots traveling along paths between houses */
.hero-pulse-1 {
  offset-path: path('M 320 340 Q 420 320 516 340');
  offset-rotate: 0deg;
  opacity: 0;
  animation: hero-pulse 8s ease-in-out infinite;
}
.hero-pulse-2 {
  offset-path: path('M 740 320 Q 800 310 860 330');
  offset-rotate: 0deg;
  opacity: 0;
  animation: hero-pulse 8s ease-in-out infinite;
  animation-delay: 3s;
}
.hero-pulse-3 {
  offset-path: path('M 1000 340 Q 1060 330 1130 345');
  offset-rotate: 0deg;
  opacity: 0;
  animation: hero-pulse 8s ease-in-out infinite;
  animation-delay: 5s;
}
@keyframes hero-pulse {
  0%   { opacity: 0; offset-distance: 0%; }
  10%  { opacity: 0.8; }
  80%  { opacity: 0.8; offset-distance: 100%; }
  100% { opacity: 0; offset-distance: 100%; }
}

/* Ambient drifting activity dots */
.hero-dot {
  opacity: 0;
  animation: hero-dot-drift 7s ease-in-out infinite;
}
.hero-dot-1 { animation-delay: 3s; }
.hero-dot-2 { animation-delay: 5s; }
.hero-dot-3 { animation-delay: 4s; }
.hero-dot-4 { animation-delay: 6s; }
.hero-dot-5 { animation-delay: 5.5s; }
.hero-dot-6 { animation-delay: 4.5s; }
.hero-dot-7 { animation-delay: 7s; }
@keyframes hero-dot-drift {
  0%   { opacity: 0; transform: translateY(10px); }
  25%  { opacity: 0.4; }
  70%  { opacity: 0.4; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(-16px); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-ground, .hero-draw, .hero-draw-mid, .hero-draw-bg,
  .hero-far-row, .hero-poles, .hero-mid-trees, .hero-fence,
  .hero-grass, .hero-walkway, .hero-stars, .hero-stars circle,
  .hero-sun, .hero-sun-inner, .hero-cloud, .hero-birds, .hero-bird,
  .hero-window-1, .hero-window-2, .hero-window-3, .hero-smoke,
  .hero-sign-text-for, .hero-sign-text-sold, .hero-key, .hero-key-path,
  .hero-door, .hero-pulse-1, .hero-pulse-2, .hero-pulse-3, .hero-dot {
    animation: none !important;
  }
  .hero-ground, .hero-draw, .hero-draw-mid, .hero-draw-bg { stroke-dashoffset: 0; }
  .hero-far-row { opacity: 0.28; }
  .hero-poles { opacity: 0.32; }
  .hero-mid-trees { opacity: 0.5; }
  .hero-fence { opacity: 0.4; }
  .hero-grass { opacity: 0.3; }
  .hero-walkway { opacity: 0.35; }
  .hero-stars { opacity: 1; }
  .hero-sun { opacity: 0.35; }
  .hero-sun-inner { opacity: 0.22; }
  .hero-sign-text-for { opacity: 1; }
}

.home-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .home-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .home-grid { grid-template-columns: 1fr; } }
.home-card {
  border: 1px solid var(--doc-border);
  border-radius: 12px;
  padding: 22px 22px 24px;
  background: var(--doc-bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 180ms, transform 180ms;
  min-height: 172px;
  position: relative;
  overflow: hidden;
}
.home-card:hover { border-color: var(--doc-fg-3); }
.home-card .lucide { width: 18px; height: 18px; color: var(--doc-fg-2); }
.home-card .title { font: 500 16px/1.25 var(--font-family-default); letter-spacing: -0.014em; color: var(--doc-fg); }
.home-card .desc { font: 400 13.5px/1.5 var(--font-family-default); letter-spacing: -0.014em; color: var(--doc-fg-3); }
.home-card .arrow { position: absolute; right: 18px; top: 20px; color: var(--doc-fg-4); transition: transform 180ms, color 180ms; }
.home-card:hover .arrow { transform: translateX(2px); color: var(--doc-fg-2); }

.home-section {
  margin-top: 64px;
}
.home-section-title {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--doc-fg-4);
  margin-bottom: 16px;
}

/* Editorial variant */
.home-hero.variant-editorial {
  padding: 72px 0 40px;
  text-align: center;
}
.home-hero.variant-editorial .home-title {
  font-size: 72px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 680px) { .home-hero.variant-editorial .home-title { font-size: 44px; } }
.home-hero.variant-editorial .home-sub { margin-left: auto; margin-right: auto; }
.home-hero.variant-editorial .home-cta-row { justify-content: center; }
.home-hero.variant-editorial .home-eyebrow { margin-left: auto; margin-right: auto; display: inline-flex; }

/* Decorative color strip used in editorial hero */
.home-color-strip {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  max-width: 720px;
  margin: 40px auto 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--doc-swatch-ring);
  height: 10px;
}
.home-color-strip span { display: block; }

/* ---------- Font download cards (Typography page) ---------- */
.font-dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  margin: 8px 0 16px;
}
.font-dl-card {
  border: 1px solid var(--doc-border);
  border-radius: 14px;
  padding: 20px;
  background: var(--doc-bg);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.font-dl-specimen {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--doc-border);
}
.font-dl-aa {
  font: 500 64px/1 var(--font-family-default);
  letter-spacing: -0.032em;
  color: var(--doc-fg);
  flex-shrink: 0;
}
.font-dl-meta { min-width: 0; }
.font-dl-title {
  font: 500 17px/1.25 var(--font-family-default);
  letter-spacing: -0.014em;
  color: var(--doc-fg);
}
.font-dl-sub {
  font: 400 13px/1.4 var(--font-family-default);
  letter-spacing: -0.014em;
  color: var(--doc-fg-3);
  margin-top: 3px;
}
.font-dl-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.font-dl-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--doc-border);
  border-radius: 10px;
  background: var(--doc-bg);
  color: var(--doc-fg);
  text-decoration: none;
  position: relative;
  transition: border-color 120ms, background 120ms, transform 120ms;
}
.font-dl-btn:hover {
  border-color: var(--doc-fg);
  background: var(--doc-bg-2);
}
.font-dl-btn:active { transform: translateY(1px); }
.font-dl-btn .font-dl-ext {
  font: 500 13px/1 var(--mono);
  color: var(--doc-fg);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.font-dl-btn .font-dl-note {
  font: 400 11px/1.3 var(--font-family-default);
  letter-spacing: -0.014em;
  color: var(--doc-fg-3);
}
.font-dl-btn .ti {
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--doc-fg-3);
}
.font-dl-btn:hover .ti { color: var(--doc-fg); }

.font-dl-bulk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border: 1px dashed var(--doc-border-2);
  border-radius: 14px;
  margin: 8px 0 24px;
  background: var(--doc-bg-2);
}
.font-dl-bulk-title {
  font: 500 15px/1.3 var(--font-family-default);
  letter-spacing: -0.014em;
  color: var(--doc-fg);
}
.font-dl-bulk-sub {
  font: 400 13px/1.4 var(--font-family-default);
  letter-spacing: -0.014em;
  color: var(--doc-fg-3);
  margin-top: 2px;
}
@media (max-width: 680px) {
  .font-dl-row { grid-template-columns: 1fr; }
  .font-dl-bulk { flex-direction: column; align-items: stretch; }
  .font-dl-bulk .od-btn { justify-content: center; }
}

@keyframes bn-spin { to { transform: rotate(360deg); } }

/* ---------- Future idea banner (unshipped components) ---------- */
.future-idea-banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border: 1px dashed var(--doc-border);
  border-radius: 10px;
  background: var(--doc-bg-2);
  color: var(--doc-fg-2);
  font: 400 13.5px/1.5 var(--font-family-default);
  letter-spacing: -0.014em;
  margin: 0 0 24px;
}
.future-idea-banner i.ti {
  font-size: 18px;
  color: var(--doc-fg-3);
  flex-shrink: 0;
  margin-top: 1px;
}
.future-idea-banner strong {
  color: var(--doc-fg);
  font-weight: 500;
}
.future-idea-banner code {
  font: 500 12.5px var(--mono);
  color: var(--doc-fg);
  background: var(--doc-bg);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--doc-border);
}

/* ---------- Figma page ---------- */
a.figma-open-btn {
  display: flex !important;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid var(--doc-border);
  border-radius: 14px;
  background: var(--doc-bg);
  color: var(--doc-fg) !important;
  text-decoration: none !important;
  margin: 12px 0 24px;
  max-width: 520px;
  transition: border-color 160ms, background 160ms, transform 160ms, box-shadow 160ms;
}
a.figma-open-btn:hover {
  border-color: var(--doc-fg-2);
  background: var(--doc-bg-2);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
[data-theme="dark"] a.figma-open-btn:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.figma-open-btn-icon { flex-shrink: 0; }
.figma-open-btn-text { flex: 1; min-width: 0; }
.figma-open-btn-title {
  display: flex; align-items: center; gap: 6px;
  font: 500 16px/1.3 var(--font-family-default);
  letter-spacing: -0.016em;
  color: var(--doc-fg);
  margin-bottom: 4px;
}
.figma-open-btn-sub {
  font: 400 13px/1.4 var(--font-family-default);
  letter-spacing: -0.006em;
  color: var(--doc-fg-3);
}
.figma-open-btn-ext { font-size: 14px; opacity: .55; }
.figma-open-btn-arrow {
  font-size: 18px;
  color: var(--doc-fg-3);
  flex-shrink: 0;
  transition: transform 160ms, color 160ms;
}
a.figma-open-btn:hover .figma-open-btn-arrow {
  color: var(--doc-fg);
  transform: translate(2px, -2px);
}

/* ---------- Bots page ---------- */
a.bot-card {
  display: flex !important;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--doc-border);
  border-radius: 14px;
  background: var(--doc-bg);
  color: var(--doc-fg) !important;
  text-decoration: none !important;
  margin: 12px 0 28px;
  max-width: 640px;
  transition: border-color 160ms, background 160ms, transform 160ms, box-shadow 160ms;
}
a.bot-card:hover {
  border-color: var(--doc-fg-2);
  background: var(--doc-bg-2);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
[data-theme="dark"] a.bot-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.bot-card-avatar {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--blue-42) 0%, #8a5cff 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 500 20px/1 var(--font-family-default);
  letter-spacing: -0.02em;
}
.bot-card-body { flex: 1; min-width: 0; }
.bot-card-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 6px;
}
.bot-card-name {
  font: 500 16px/1.3 var(--font-family-default);
  letter-spacing: -0.016em;
  color: var(--doc-fg);
}
.bot-card-role {
  font: 400 13px/1 var(--font-family-default);
  letter-spacing: -0.006em;
  color: var(--doc-fg-3);
  padding: 3px 8px;
  border-radius: 9999px;
  background: var(--doc-bg-2);
  border: 1px solid var(--doc-border);
}
[data-theme="dark"] .bot-card-role {
  background: var(--doc-bg);
}
.bot-card-desc {
  font: 400 14px/1.5 var(--font-family-default);
  letter-spacing: -0.01em;
  color: var(--doc-fg-2);
  margin-bottom: 10px;
  text-wrap: pretty;
}
.bot-card-meta {
  display: flex; align-items: center; gap: 6px;
  font: 400 12.5px/1 var(--font-family-default);
  color: var(--doc-fg-3);
}
.bot-card-meta-item {
  display: inline-flex; align-items: center; gap: 5px;
}
.bot-card-meta-item i.ti { font-size: 14px; }
.bot-card-meta-dot { opacity: .5; }
.bot-card-arrow {
  font-size: 18px;
  color: var(--doc-fg-3);
  flex-shrink: 0;
  margin-top: 4px;
  transition: transform 160ms, color 160ms;
}
a.bot-card:hover .bot-card-arrow {
  color: var(--doc-fg);
  transform: translate(2px, -2px);
}


/* ========== Contribute page ========== */
.contrib-tldr {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
  margin: 24px 0 8px;
  padding: 20px;
  background: var(--doc-bg-2);
  border: 1px solid var(--doc-border);
  border-radius: 16px;
}
.contrib-tldr-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 4px 2px;
}
.contrib-tldr-item i {
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--doc-fg-2);
  margin-top: 2px;
}
.contrib-tldr-item strong {
  display: block;
  font: 500 13.5px/1.2 var(--font-family-default);
  letter-spacing: -0.014em;
  color: var(--doc-fg);
  margin-bottom: 4px;
}
.contrib-tldr-item span {
  font: 400 12.5px/1.45 var(--font-family-default);
  letter-spacing: -0.01em;
  color: var(--doc-fg-3);
  display: block;
  text-wrap: pretty;
}
.contrib-tldr-arrow {
  display: flex; align-items: center;
  color: var(--doc-fg-4);
}
.contrib-tldr-arrow i { width: 16px; height: 16px; }
@media (max-width: 960px) {
  .contrib-tldr {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .contrib-tldr-arrow { display: none; }
}

.contrib-tests {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0 8px;
}
.contrib-test {
  padding: 16px 18px;
  background: var(--doc-bg);
  border: 1px solid var(--doc-border);
  border-radius: 12px;
}
.contrib-test-label {
  font: 500 13px/1.2 var(--font-family-default);
  letter-spacing: -0.014em;
  color: var(--doc-fg);
  margin-bottom: 6px;
}
.contrib-test-body {
  font: 400 13px/1.5 var(--font-family-default);
  letter-spacing: -0.01em;
  color: var(--doc-fg-3);
  text-wrap: pretty;
}
@media (max-width: 720px) {
  .contrib-tests { grid-template-columns: 1fr; }
}

.contrib-kinds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 20px 0 8px;
}
.contrib-kind {
  padding: 18px 20px;
  background: var(--doc-bg);
  border: 1px solid var(--doc-border);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.contrib-kind-head {
  display: flex; align-items: center; gap: 10px;
}
.contrib-kind-head i {
  width: 18px; height: 18px;
  color: var(--doc-fg-2);
}
.contrib-kind-name {
  font: 500 15px/1.2 var(--font-family-default);
  letter-spacing: -0.018em;
  color: var(--doc-fg);
}
.contrib-kind-body {
  font: 400 13.5px/1.55 var(--font-family-default);
  letter-spacing: -0.01em;
  color: var(--doc-fg-2);
  text-wrap: pretty;
  flex: 1;
}
.contrib-kind-meta {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--doc-border);
}
.contrib-kind-meta div { display: flex; flex-direction: column; gap: 2px; }
.contrib-kind-meta dt {
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--doc-fg-4);
}
.contrib-kind-meta dd {
  font: 400 12.5px/1.3 var(--font-family-default);
  letter-spacing: -0.01em;
  color: var(--doc-fg-2);
  margin: 0;
}
@media (max-width: 720px) {
  .contrib-kinds { grid-template-columns: 1fr; }
}

.contrib-steps {
  display: flex; flex-direction: column;
  gap: 0;
  margin: 20px 0 8px;
}
.contrib-step {
  display: flex; gap: 16px;
  padding: 16px 0 20px;
  border-bottom: 1px solid var(--doc-border);
}
.contrib-step:last-child { border-bottom: none; padding-bottom: 8px; }
.contrib-step-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--doc-bg-3);
  color: var(--doc-fg);
  font: 500 13px/1 var(--font-family-default);
  display: flex; align-items: center; justify-content: center;
  letter-spacing: -0.014em;
  margin-top: 2px;
}
.contrib-step-body { flex: 1; }
.contrib-step-title {
  font: 500 15px/1.3 var(--font-family-default);
  letter-spacing: -0.018em;
  color: var(--doc-fg);
  margin-bottom: 4px;
}
.contrib-step-desc {
  font: 400 14px/1.6 var(--font-family-default);
  letter-spacing: -0.01em;
  color: var(--doc-fg-2);
  text-wrap: pretty;
}
.contrib-step-meta {
  margin-top: 8px;
  font: 400 12.5px/1.4 var(--font-family-default);
  color: var(--doc-fg-3);
}

.contrib-release {
  display: flex; flex-direction: column;
  gap: 2px;
  margin: 20px 0 8px;
  border: 1px solid var(--doc-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--doc-bg);
}
.contrib-release-row {
  display: flex; gap: 16px;
  padding: 16px 20px;
  align-items: flex-start;
  border-bottom: 1px solid var(--doc-border);
}
.contrib-release-row:last-child { border-bottom: none; }
.contrib-release-row > div { flex: 1; }
.contrib-release-row > div strong {
  display: block;
  font: 500 14.5px/1.3 var(--font-family-default);
  letter-spacing: -0.014em;
  color: var(--doc-fg);
  margin-bottom: 4px;
}
.contrib-release-row > div span {
  display: block;
  font: 400 13px/1.55 var(--font-family-default);
  letter-spacing: -0.01em;
  color: var(--doc-fg-3);
  text-wrap: pretty;
}
.contrib-release-badge {
  flex-shrink: 0;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.06em;
  padding: 6px 8px;
  border-radius: 6px;
  min-width: 68px;
  text-align: center;
  margin-top: 1px;
}
.contrib-release-badge.major { background: var(--red-94); color: var(--red-43); }
.contrib-release-badge.minor { background: var(--blue-93); color: var(--blue-15); }
.contrib-release-badge.patch { background: var(--neutral-94); color: var(--neutral-24); }

.contrib-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin: 20px 0 8px;
}
.contrib-person {
  display: flex; gap: 12px; align-items: center;
  padding: 14px 16px;
  background: var(--doc-bg);
  border: 1px solid var(--doc-border);
  border-radius: 12px;
}
.contrib-person-avatar {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--doc-bg-3);
  color: var(--doc-fg);
  display: flex; align-items: center; justify-content: center;
  font: 500 12px/1 var(--font-family-default);
  letter-spacing: 0.02em;
}
.contrib-person-body { min-width: 0; }
.contrib-person-name {
  font: 500 13.5px/1.2 var(--font-family-default);
  letter-spacing: -0.014em;
  color: var(--doc-fg);
}
.contrib-person-role {
  font: 500 11.5px/1.2 var(--mono);
  letter-spacing: 0;
  color: var(--doc-fg-3);
  margin-top: 3px;
}
.contrib-person-scope {
  font: 400 12px/1.4 var(--font-family-default);
  letter-spacing: -0.01em;
  color: var(--doc-fg-3);
  margin-top: 4px;
  text-wrap: pretty;
}

/* ============================================================
   Responsive — mobile & tablet
   ============================================================ */

/* Page title & lede scale down on small screens */
@media (max-width: 680px) {
  .page-title { font-size: 28px; letter-spacing: -0.024em; }
  .page-lede  { font-size: 15px; margin-bottom: 28px; }
  h2.doc-h2   { font-size: 20px; margin-top: 40px; }
  h3.doc-h3   { font-size: 16px; }
}

/* Token tables: allow horizontal scroll on small screens */
.token-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 680px) {
  .token-table { min-width: 480px; }
  /* Wrap any bare token-table in overflow container via JS-injected class */
  .token-table th, .token-table td { padding: 10px 10px; }
}

/* Code blocks: horizontal scroll, no text overflow */
@media (max-width: 680px) {
  .codeblock pre { font-size: 12px; }
  .codeblock-tabs { overflow-x: auto; }
}

/* Previews: reduce padding, allow overflow scroll */
@media (max-width: 680px) {
  .preview { padding: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Nav: tighter on mobile (menu-btn already shown via existing rule) */
@media (max-width: 480px) {
  .nav { padding: 0 16px; gap: 12px; }
  .nav-brand .divider, .nav-brand .sys, .nav-brand .ver { display: none; }
}

/* Home hero: tighter padding, smaller art on mobile */
@media (max-width: 680px) {
  .home-hero { padding: 28px 0 48px; }
  .home-title { font-size: 36px; line-height: 1.05; }
  .home-sub   { font-size: 16px; }
  .home-cta-row { flex-direction: column; }
  .home-cta-row .od-btn { width: 100%; justify-content: center; }
  .home-hero-art { max-height: 160px; }
  .home-eyebrow  { font-size: 11px; }
}

/* Home grid: 2 cols at medium, 1 col at small */
@media (max-width: 520px) {
  .home-grid { grid-template-columns: 1fr; }
}

/* Semantic token grid on Color page */
.semantic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
@media (max-width: 480px) {
  .semantic-grid { grid-template-columns: 1fr; }
}

/* Color ramp chips: wrap on tiny screens */
@media (max-width: 480px) {
  .color-ramp { flex-wrap: wrap; }
  .color-chip  { flex: 1 1 60px; min-width: 56px; }
}

/* Page footer nav: stack on mobile */
@media (max-width: 520px) {
  .page-footer { flex-direction: column; gap: 8px; }
  .page-footer a { width: 100%; }
}

/* Doc lists: tighter on mobile */
@media (max-width: 680px) {
  .doc-ul, .doc-ol { padding-left: 20px; }
}

/* Callouts: compact on mobile */
@media (max-width: 480px) {
  .callout { padding: 12px 12px; gap: 8px; }
}

/* AI guide section: full-width on mobile */
@media (max-width: 680px) {
  .ai-guide { padding: 16px; margin: 24px 0; }
}

/* Bot cards: stack on mobile */
@media (max-width: 520px) {
  .bot-card { flex-direction: column; }
}

/* Palette (search): full width on mobile */
@media (max-width: 540px) {
  .palette { width: calc(100vw - 24px); margin: 12px; border-radius: 16px; }
  .palette-input { font-size: 15px; }
}

/* ============================================================ Design Spec markdown renderer */

.design-spec-md h2 {
  font: 500 24px/1.2 var(--font-family-default);
  letter-spacing: -0.028em;
  margin: 56px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--doc-border);
  color: var(--doc-fg);
  scroll-margin-top: 80px;
}
.design-spec-md h3 {
  font: 500 18px/1.25 var(--font-family-default);
  letter-spacing: -0.024em;
  margin: 32px 0 10px;
  color: var(--doc-fg);
  scroll-margin-top: 80px;
}
.design-spec-md h4 {
  font: 500 14px/1.3 var(--font-family-default);
  letter-spacing: -0.014em;
  margin: 20px 0 8px;
  color: var(--doc-fg-2);
}
.design-spec-md p {
  font: 400 15px/1.65 var(--font-family-default);
  letter-spacing: -0.014em;
  color: var(--doc-fg-2);
  margin: 0 0 16px;
  max-width: 680px;
}
.design-spec-md ul, .design-spec-md ol {
  font: 400 15px/1.65 var(--font-family-default);
  letter-spacing: -0.014em;
  color: var(--doc-fg-2);
  padding-left: 24px;
  margin: 0 0 16px;
}
.design-spec-md li { margin-bottom: 4px; }
.design-spec-md strong { font-weight: 500; color: var(--doc-fg); }
.design-spec-md code {
  font: 400 12.5px var(--mono);
  background: var(--doc-bg-2);
  border: 1px solid var(--doc-border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--doc-fg);
}
.design-spec-md pre {
  background: var(--doc-bg-2);
  border: 1px solid var(--doc-border);
  border-radius: 10px;
  padding: 16px 20px;
  overflow-x: auto;
  margin: 0 0 20px;
  font: 400 12.5px/1.6 var(--mono);
  color: var(--doc-fg-2);
}
.design-spec-md pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}
.design-spec-md blockquote {
  border-left: 2px solid var(--doc-accent);
  background: var(--doc-bg-2);
  border-radius: 0 8px 8px 0;
  margin: 16px 0 24px;
  padding: 12px 16px;
  color: var(--doc-fg-2);
  font-style: normal;
}
.design-spec-md hr {
  border: none;
  border-top: 1px solid var(--doc-border);
  margin: 40px 0;
}
.design-spec-md a { color: var(--doc-accent); text-decoration: underline; }