@media (min-width: 540px) {
/* Brief — consumer site styles */
:root {
  /* warm cream base */
  --bg:        oklch(0.965 0.012 85);
  --bg-warm:   oklch(0.945 0.018 80);
  --surface:  oklch(0.99 0.005 85);
  --surface-2: oklch(0.975 0.008 80);
  --ink:      oklch(0.22 0.015 60);
  --ink-2:    oklch(0.36 0.014 65);
  --muted:    oklch(0.55 0.012 70);
  --muted-2:  oklch(0.68 0.010 75);
  --border:   oklch(0.88 0.012 75);
  --border-strong: oklch(0.78 0.014 75);

  /* accent — forest by default; overridden via [data-accent] */
  --accent:        oklch(0.42 0.07 160);
  --accent-ink:    oklch(0.32 0.07 160);
  --accent-tint:   oklch(0.94 0.03 160);
  --accent-on:     #fdfbf6;

  /* secondary warm accent (always ochre) */
  --ochre:    oklch(0.66 0.11 60);
  --ochre-tint: oklch(0.94 0.04 70);
  --ochre-ink:  oklch(0.42 0.11 60);

  /* type */
  --font-display: "Newsreader", "Source Serif 4", Georgia, serif;
  --font-sans:    "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, monospace;

  /* spacing */
  --pad: 16px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 0 oklch(0.78 0.014 75 / 0.4), 0 1px 2px oklch(0.22 0.015 60 / 0.04);
  --shadow-md: 0 1px 0 oklch(0.78 0.014 75 / 0.4), 0 8px 28px oklch(0.22 0.015 60 / 0.07);
  --shadow-lg: 0 1px 0 oklch(0.78 0.014 75 / 0.4), 0 28px 60px oklch(0.22 0.015 60 / 0.10);
}

[data-accent="ink"]    { --accent: oklch(0.28 0.02 60); --accent-ink: oklch(0.22 0.02 60); --accent-tint: oklch(0.93 0.012 75); --accent-on: #fdfbf6; }
[data-accent="navy"]   { --accent: oklch(0.40 0.08 240); --accent-ink: oklch(0.30 0.08 240); --accent-tint: oklch(0.94 0.025 240); --accent-on: #fdfbf6; }
[data-accent="ochre"]  { --accent: oklch(0.55 0.11 60); --accent-ink: oklch(0.42 0.11 60); --accent-tint: oklch(0.95 0.03 70); --accent-on: #fdfbf6; }
[data-accent="forest"] { --accent: oklch(0.42 0.07 160); --accent-ink: oklch(0.32 0.07 160); --accent-tint: oklch(0.94 0.03 160); --accent-on: #fdfbf6; }

[data-display="serif"]    { --font-display: "Newsreader", Georgia, serif; }
[data-display="sans"]     { --font-display: "Geist", ui-sans-serif, system-ui, sans-serif; }
[data-display="mono"]     { --font-display: "Geist Mono", ui-monospace, monospace; }

[data-density="cozy"]        { --pad: 12px; }
[data-density="comfortable"] { --pad: 16px; }
[data-density="airy"]        { --pad: 22px; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* paper grain via subtle noise */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(oklch(0.78 0.014 75 / 0.18) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
  opacity: 0.35;
  z-index: 0;
}

#app { position: relative; z-index: 1; }

button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

a { color: inherit; }

.serif { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
.mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
  font-size: 14px;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}
.btn--primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn--ghost {
  background: transparent;
  border-color: transparent;
}
.btn--ghost:hover { background: var(--surface-2); border-color: var(--border); }
.btn--lg { padding: 14px 22px; font-size: 15px; }
.btn--sm { padding: 6px 10px; font-size: 13px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.input {
  width: 100%;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  outline: none;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }

/* layout primitives */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 60px;
  border-bottom: 1px solid var(--border);
  background: oklch(0.96 0.012 85 / 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 18px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand-mark {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--ink);
  display: grid; place-items: center;
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  font-style: italic;
}
.topbar-spacer { flex: 1; }
.topbar-link {
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.topbar-link:hover { background: var(--surface-2); color: var(--ink); }

.jur-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.jur-pill:hover { border-color: var(--border-strong); }
.jur-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-ink);
  display: grid; place-items: center;
  font-weight: 500;
  font-size: 13px;
  border: 1px solid var(--border);
}

/* utility */
.row { display: flex; align-items: center; gap: var(--pad); }
.col { display: flex; flex-direction: column; gap: var(--pad); }
.muted { color: var(--muted); }
.divider { height: 1px; background: var(--border); }
.scroll { overflow: auto; }
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-thumb { background: oklch(0.78 0.014 75 / 0.5); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
.scroll::-webkit-scrollbar-thumb:hover { background: oklch(0.65 0.014 75 / 0.6); border: 2px solid transparent; background-clip: padding-box; }

/* tag chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
}
.chip--accent { background: var(--accent-tint); border-color: transparent; color: var(--accent-ink); }
.chip--ochre { background: var(--ochre-tint); color: oklch(0.42 0.11 60); border-color: transparent; }

.kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
  background: var(--surface);
  color: var(--muted);
}

/* ============= LANDING ============= */
.hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 32px 40px;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 6.4vw, 86px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 18px 0 14px;
  max-width: 16ch;
}
.hero h1 em { font-style: italic; color: var(--accent-ink); font-weight: 400; }
.hero-sub {
  font-size: 19px;
  color: var(--ink-2);
  max-width: 56ch;
  line-height: 1.45;
}

.hero-prompt {
  margin-top: 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow-md);
  max-width: 760px;
}
.hero-prompt textarea {
  width: 100%;
  border: none; outline: none; resize: none;
  background: transparent;
  font-size: 17px;
  line-height: 1.45;
  padding: 6px 4px 14px;
  font-family: inherit;
}
.hero-prompt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px dashed var(--border);
  padding-top: 12px;
}
.hero-prompt-row .left { display: flex; gap: 8px; flex-wrap: wrap; }

.hero-suggest {
  margin-top: 20px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.hero-suggest .chip { cursor: pointer; }
.hero-suggest .chip:hover { background: var(--surface); border-color: var(--border-strong); }

.hero-or {
  display: flex; align-items: center; gap: 12px;
  margin: 36px 0 18px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  max-width: 760px;
}
.hero-or::before, .hero-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.hero-cta-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* trust strip */
.trust {
  max-width: 1200px;
  margin: 16px auto 0;
  padding: 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.trust-item .num {
  font-family: var(--font-display);
  font-size: 38px;
  letter-spacing: -0.02em;
}
.trust-item .lbl { color: var(--muted); font-size: 13px; }

/* how */
.how {
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 32px;
}
.how h2 {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 36px;
  max-width: 22ch;
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.how-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  position: relative;
  min-height: 280px;
  display: flex; flex-direction: column;
}
.how-step .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.how-step h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 8px 0 8px;
}
.how-step p { color: var(--ink-2); margin: 0; }
.how-step .visual { margin-top: auto; padding-top: 20px; }

/* ============= LANDING — problem grid ============= */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 32px 0 20px;
}
.problem-tile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms, transform 120ms, box-shadow 120ms;
  min-height: 92px;
}
.problem-tile:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.problem-tile:hover .problem-arrow { color: var(--accent-ink); transform: translateX(2px); }
.problem-swatch {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--tile-hue, var(--accent-tint));
  display: grid; place-items: center;
  flex-shrink: 0;
  color: var(--ink);
  border: 1px solid oklch(from var(--tile-hue, var(--accent-tint)) calc(l - 0.06) c h);
}
.problem-swatch.federal {
  background: var(--ink);
  color: var(--bg);
  border: none;
}
.problem-body { flex: 1; min-width: 0; }
.problem-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: 4px;
}
.problem-example {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.4;
}
.problem-arrow {
  color: var(--muted-2);
  transition: color 120ms, transform 120ms;
  flex-shrink: 0;
}
.problem-tile--federal {
  grid-column: 1 / -1;
  background: linear-gradient(to right, oklch(0.96 0.012 85), oklch(0.94 0.018 80));
}

/* ============= LANDING — Browse-by-problem variants with sub-categories ============= */

/* For expand/chips variants the tile is a container, not a button — keep
   unopen tiles compact so the grid doesn't stretch around the open one. */
.problem-grid--expand,
.problem-grid--chips { align-items: start; }

/* Cards variant — all tiles have a sub-list visible, grid stays uniform.
   We use grid-auto-rows so heights normalize within each row. */
.problem-grid--cards { align-items: stretch; }

.problem-tile--card {
  display: flex;
  flex-direction: column;
  padding: 0;
  cursor: default;
  position: relative;
  min-height: auto;
  align-items: stretch;
}
.problem-tile--card:hover {
  border-color: var(--border);
  transform: none;
  box-shadow: none;
}
.problem-tile--card .problem-tile__head {
  /* Same metrics as the standalone tile so visual rhythm is preserved */
  min-height: 92px;
}
.problem-tile--card .problem-tile__rail {
  /* Card rail is always visible (no expansion state) */
  opacity: 0.65;
}
.problem-tile--card .problem-sublist {
  padding: 0 16px 14px 72px;
}
/* "+N more" line — same shape as "See all" but more compact */
.problem-tile--card .problem-sublist__all {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}
.problem-tile--card .problem-sublist__all:hover {
  color: var(--accent-ink);
}

.problem-tile--expand,
.problem-tile--chips {
  display: block;
  padding: 0;
  cursor: default;
  position: relative;
}
.problem-tile--expand:hover,
.problem-tile--chips:hover {
  border-color: var(--border);
  transform: none;
  box-shadow: none;
}

/* The head is now the clickable surface; mirrors original tile metrics. */
.problem-tile__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  width: 100%;
  min-height: 92px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 120ms;
  border: 0;
  font-family: inherit;
  color: inherit;
}
.problem-tile__head:hover { background: var(--surface-2); }
.problem-tile__head:hover .problem-arrow,
.problem-tile__head:hover .problem-caret {
  color: var(--accent-ink);
  transform: translateX(2px);
}
.problem-caret:hover { transform: translateX(2px); }

/* ----- Variant · expand (click to reveal sub-categories with rail) ----- */
.problem-caret {
  display: inline-grid;
  place-items: center;
  color: var(--muted-2);
  transition: transform .22s ease, color .22s ease;
  flex-shrink: 0;
}
.problem-caret--open {
  transform: rotate(90deg);
  color: var(--accent-ink);
}
/* When open, override the head-hover arrow translate so the caret stays rotated */
.problem-tile--expand.is-open .problem-tile__head:hover .problem-caret--open {
  transform: rotate(90deg) translateX(2px);
}

/* Rail descends from the bottom of the swatch through the drawer's sub-list.
   Rendered as a real <span> child (not a pseudo) so it reliably composites
   above the drawer in all browsers. */
.problem-tile__rail {
  position: absolute;
  left: 43px;                /* swatch center: 20 padding-left + 24 (half of 48) - 1 to center 2px rail */
  top: 68px;                 /* swatch bottom (~70) with 2px overlap */
  bottom: 26px;              /* leaves room above the "See all" link */
  width: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--row-rail-hue, var(--border-strong));
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.problem-tile--expand.is-open .problem-tile__rail { opacity: 0.85; }

.problem-drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.problem-tile--expand.is-open .problem-drawer { grid-template-rows: 1fr; }
.problem-drawer__inner { overflow: hidden; min-height: 0; }

.problem-sublist {
  position: relative;
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 0 16px 14px 72px;     /* aligned past swatch column */
}
.problem-sublist__item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 9px 10px;
  background: transparent; text-align: left;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.002em;
  cursor: pointer;
  transition: background 120ms, color 120ms;
  font-family: inherit;
}
.problem-sublist__item:hover {
  background: var(--surface-2);
  color: var(--accent-ink);
}
/* dot stop on the rail — real <span> element so it composites reliably above
   the rail (mirrors the rail's switch from ::before to <span>) */
.problem-sublist__dot {
  position: absolute;
  left: -32px;                  /* centered on the rail (rail center: tile.x + 44; dot center: item.x - 28) */
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--row-rail-hue, var(--border-strong));
  box-shadow: 0 0 0 3px var(--surface);
  transform: translateY(-4px);
  transition: transform 120ms;
  pointer-events: none;
  z-index: 3;
}
.problem-sublist__item:hover .problem-sublist__dot {
  transform: translateY(-4px) scale(1.2);
}
.problem-sublist__item .lbl { flex: 1; min-width: 0; }
.problem-sublist__item .count {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.problem-sublist__item .ch { color: var(--muted-2); flex-shrink: 0; }
.problem-sublist__item:hover .ch { color: var(--accent-ink); }
.problem-sublist__all {
  display: inline-block;
  margin: 4px 0 0;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--accent-ink);
  background: transparent;
  border: 0;
  letter-spacing: -0.002em;
  font-weight: 500;
  cursor: pointer;
  align-self: flex-start;
  white-space: nowrap;
  font-family: inherit;
}
.problem-sublist__all svg {
  vertical-align: -1px;
  margin-left: 4px;
  transition: transform 120ms;
}
.problem-sublist__all:hover svg { transform: translateX(2px); }

/* ----- Variant · chips (always-visible sub-cat chips inside the tile) ----- */
.problem-tile__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 20px 16px 84px;      /* aligned past swatch column */
}
.problem-subchip {
  font-size: 12.5px;
  line-height: 1;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  letter-spacing: -0.002em;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 120ms, color 120ms, background 120ms;
}
.problem-subchip:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--surface-2);
}
.problem-subchip--more {
  border-style: dashed;
  color: var(--muted);
}

/* ============================================================
   Variant · row-expand (3×3 compact tiles + full-width drawer)
   ============================================================ */
.problem-grid--row-expand {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
}
.problem-grid--federal-only {
  display: block;
  margin-top: 14px;
}
.problem-grid--federal-only .problem-tile--federal {
  grid-column: auto;
}

.problem-tile--compact {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 18px 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  min-height: 84px;
  transition: border-color 140ms, background 140ms, box-shadow 140ms, transform 140ms;
  position: relative;
}
.problem-tile--compact:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  transform: translateY(-1px);
}
.problem-tile--compact.is-active {
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow-md);
  transform: none;
}
.problem-tile--compact .problem-swatch {
  width: 44px; height: 44px;
  flex-shrink: 0;
  position: relative;
}
/* Notification badge — count of in-progress drafts in this category. */
.problem-swatch__badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-on);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface);
  letter-spacing: 0;
  box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 18%, transparent);
}
.problem-tile--compact.is-active .problem-swatch__badge {
  border-color: var(--surface-2);
}
.problem-tile--compact .problem-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 2px;
}
.problem-tile--compact .problem-example {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
  /* Single-line truncation keeps tiles uniform; the drawer carries the full text. */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* When drafts exist, the example line becomes a status line in accent ink.
   The parent's -webkit-box clamp doesn't play well with inline-flex children,
   so swap to a flat single-line ellipsis layout via an explicit modifier class. */
.problem-tile--compact .problem-example--draft {
  display: flex;
  align-items: center;
  white-space: nowrap;
  -webkit-line-clamp: none;
}
.problem-example__draft {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent-ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.problem-example__pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.problem-tile--compact .problem-caret {
  color: var(--muted-2);
  transition: transform 200ms ease, color 140ms;
  flex-shrink: 0;
}
.problem-tile--compact .problem-caret--open {
  transform: rotate(90deg);
  color: var(--accent-ink);
}
.problem-tile--compact:hover .problem-caret { color: var(--accent-ink); }

/* Full-width drawer below the row containing the active tile.
   Uses grid-row 1fr/0fr trick for smooth height animation. */
.problem-row-drawer {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms ease, margin 280ms ease;
  margin: 0;
}
.problem-row-drawer.is-open {
  grid-template-rows: 1fr;
  margin: -2px 0 4px;
}
.problem-row-drawer__inner {
  overflow: hidden;
  min-height: 0;
  border-radius: 14px;
  border: 1px solid var(--accent);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  position: relative;
}
.problem-row-drawer__head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px 14px;
}
.problem-row-drawer__head .problem-swatch {
  width: 48px; height: 48px;
}
.problem-row-drawer__heading { min-width: 0; }
.problem-row-drawer__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.problem-row-drawer__example {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 2px;
}
.problem-row-drawer__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* "Pick up where you left off" CTA — only renders when this category has a draft.
   Two-line card: eyebrow with pulse dot + form code/title + inline progress bar. */
.problem-row-drawer__resume {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--accent);
  background: var(--accent-tint);
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 140ms, box-shadow 140ms, transform 140ms;
}
.problem-row-drawer__resume:hover {
  background: var(--surface);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.problem-row-drawer__resume-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.problem-row-drawer__resume-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: pulse-dot 1.8s ease-out infinite;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 8px color-mix(in oklch, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 0%, transparent); }
}
.problem-row-drawer__resume-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.problem-row-drawer__resume-title {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
  max-width: 320px;
}
.problem-row-drawer__resume-title .code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.problem-row-drawer__resume-title .sep { color: var(--muted-2); }
.problem-row-drawer__resume-title .ttl {
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.problem-row-drawer__resume-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.problem-row-drawer__resume-progress .bar {
  width: 64px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--accent) 18%, var(--surface));
  overflow: hidden;
}
.problem-row-drawer__resume-progress .fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}
.problem-row-drawer__resume-progress .pct {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-ink);
  font-weight: 500;
}
.problem-row-drawer__metachip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
}
.problem-row-drawer__metachip .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.problem-row-drawer__close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  display: grid; place-items: center;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 140ms, color 140ms, background 140ms;
}
.problem-row-drawer__close:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--surface-2);
}

.problem-row-drawer__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 4px 6px 6px;
}
.problem-row-drawer__item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  border: none;
  border-right: 1px solid var(--border);
  background: transparent;
  text-align: left;
  font-size: 14.5px;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  border-radius: 0;
  transition: background 120ms, color 120ms;
}
/* Last column — no right divider */
.problem-row-drawer__item:nth-child(3n) {
  border-right: none;
}
/* Items in row 2+ get a top divider (creates row separators).
   :not(.problem-row-drawer__all) keeps the "See all" link out of this. */
.problem-row-drawer__item:nth-child(n+4):not(.problem-row-drawer__all) {
  border-top: 1px solid var(--border);
}
.problem-row-drawer__item:hover {
  background: var(--surface-2);
  color: var(--accent-ink);
}
.problem-row-drawer__item .lbl { flex: 1; min-width: 0; }
.problem-row-drawer__item .count {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-mono);
}
.problem-row-drawer__item .ch { color: var(--muted-2); flex-shrink: 0; }
.problem-row-drawer__item:hover .ch { color: var(--accent-ink); }
.problem-row-drawer__all {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 0;
  padding: 14px 16px 10px;
  background: transparent;
  border: none;
  width: calc(100% - 12px);
  margin-left: 6px;
  text-align: left;
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.problem-row-drawer__all svg {
  vertical-align: -1px;
  margin-left: 4px;
  transition: transform 120ms;
}
.problem-row-drawer__all:hover svg { transform: translateX(2px); }

/* ============================================================
   Variant · accordion-h (horizontal accordion of vertical strips)
   ============================================================ */
.problem-accordion-h {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin: 32px 0 16px;
  height: 320px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 6px;
}
.problem-strip {
  flex: 1 1 0;
  min-width: 64px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transition: flex 380ms cubic-bezier(.4,.0,.2,1), background 220ms, box-shadow 220ms;
  cursor: pointer;
}
.problem-strip:hover {
  background: var(--tile-hue, var(--surface-2));
}
.problem-strip.is-active {
  flex: 9 1 0;
  background: linear-gradient(135deg, var(--tile-hue, var(--surface-2)) 0%, var(--surface) 75%);
  box-shadow: var(--shadow-md);
}
.problem-strip__head {
  width: 100%;
  min-width: 64px;
  max-width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 8px 14px;
  background: transparent;
  border: none;
  border-right: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  flex-shrink: 0;
  transition: border-color 220ms;
}
.problem-strip.is-active .problem-strip__head {
  border-right-color: var(--border);
}
.problem-strip__swatch {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--tile-hue, var(--surface-2));
  border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--ink);
  flex-shrink: 0;
}
.problem-strip.is-active .problem-strip__swatch {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.problem-strip__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
  flex: 1;
}
.problem-strip__hint {
  color: var(--muted-2);
  transition: transform 200ms;
}
.problem-strip.is-active .problem-strip__hint {
  transform: rotate(180deg);
  color: var(--accent-ink);
}

/* Expanded panel — only displays content when strip is active. */
.problem-strip__panel {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.problem-strip.is-active .problem-strip__panel {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 240ms 120ms ease;
}
.problem-strip__panel-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 20px;
  min-width: 360px;
}
.problem-strip__meta {
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.problem-strip__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 4px;
}
.problem-strip__example {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.4;
}
.problem-strip__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 14px;
  flex: 1;
  align-content: start;
}
.problem-strip__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms, color 120ms;
}
.problem-strip__item:hover {
  background: var(--surface);
  color: var(--accent-ink);
}
.problem-strip__item .lbl { flex: 1; min-width: 0; }
.problem-strip__item .count {
  font-size: 11.5px;
  color: var(--muted);
  font-family: var(--font-mono);
}
.problem-strip__item .ch { color: var(--muted-2); flex-shrink: 0; }
.problem-strip__item:hover .ch { color: var(--accent-ink); }
.problem-strip__all {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 6px;
  padding: 6px 4px;
  background: transparent;
  border: none;
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.problem-strip__all svg {
  vertical-align: -1px;
  margin-left: 4px;
  transition: transform 120ms;
}
.problem-strip__all:hover svg { transform: translateX(2px); }

/* ============= JURISDICTION ============= */
.juris-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 32px 80px;
}
.steps {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 22px;
}
.steps .dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: grid; place-items: center;
  font-size: 11px;
  background: var(--surface);
}
.steps .dot.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.steps .dot.done { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }
.steps .seg { width: 24px; height: 1px; background: var(--border); }

.juris-page h1 {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 400;
  letter-spacing: -0.025em;
  margin: 0 0 8px;
}
.juris-page .sub {
  color: var(--ink-2);
  font-size: 17px;
  max-width: 60ch;
  margin-bottom: 32px;
}

.state-search {
  position: relative;
  max-width: 460px;
  margin-bottom: 18px;
}
.state-search input {
  width: 100%;
  padding: 14px 14px 14px 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  font-size: 15px;
}
.state-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.state-search .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }

.popular-states {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 28px;
}
.popular-states .chip { cursor: pointer; padding: 6px 12px; }
.popular-states .chip:hover { background: var(--surface); border-color: var(--border-strong); }

/* unified map stage: large map + persistent side panel */
.map-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: start;
  margin-bottom: 22px;
}
.map-stage.map-stage--solo {
  grid-template-columns: 1fr;
}
.map-stage--solo .real-map { height: 640px; min-height: 600px; }
.map-stage--solo .real-map-wrap { max-width: 1100px; margin-left: auto; margin-right: auto; }

.juris-chrome { min-height: 220px; }
.juris-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.juris-header h1 { transition: opacity 240ms ease; }
.juris-header .county-state-badge {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--accent); color: var(--bg);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  animation: fadeInBadge 320ms ease;
}
@keyframes fadeInBadge { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }
.map-stage-map { position: relative; }
.map-overlay-panel {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 340px;
  max-width: calc(100% - 32px);
  z-index: 4;
  opacity: 0;
  transform: translateX(16px);
  pointer-events: none;
  transition: opacity 320ms ease, transform 320ms ease;
}
.map-overlay-panel.is-show {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  transition-delay: 280ms;
}
.map-overlay-panel .hover-panel {
  min-height: 0;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.map-stage-map { min-width: 0; }
.map-stage-side { position: sticky; top: 80px; }
.map-stage-map .real-map-wrap { margin-bottom: 0; }
.map-stage .real-map { max-height: none; min-height: 520px; height: 560px; }

.real-map-wrap.unified.is-state .state-shape.is-canvas { fill: var(--accent-tint); stroke: var(--accent); }
.real-map-wrap.unified.is-state .state-shape.backdrop { fill: var(--bg-warm); stroke: var(--border); opacity: 0.4; pointer-events: none; }
.real-map-wrap.unified.is-state .state-shape.backdrop { vector-effect: non-scaling-stroke; }
.real-map-wrap.unified .state-outline { fill: none; stroke: var(--accent-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.hover-panel {
  width: 360px;
  height: 460px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  padding: 22px;
  display: flex; flex-direction: column;
  gap: 12px;
  min-height: 360px;
}
.hover-panel--ghost {
  background: var(--surface-2);
  border-style: dashed;
  box-shadow: none;
  color: var(--muted);
}
.hover-panel .hp-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--accent);
}
.hover-panel--ghost .hp-eyebrow { color: var(--muted-2); }
.hover-panel .hp-title {
  font-family: var(--font-display);
  font-size: 26px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.hover-panel--ghost .hp-title { color: var(--ink-2); }
.hover-panel .hp-body {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}
.hover-panel--ghost .hp-body { color: var(--muted); }

.kbd-inline {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 1px 5px;
  margin: 0 2px;
}

/* real geographic US map */
.real-map-wrap {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 18px 12px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.real-map { display: block; width: 100%; height: auto; max-height: 540px; }
.county-map-large { max-height: 620px; min-height: 480px; }
.real-map .state-shape {
  fill: var(--surface);
  stroke: var(--border-strong);
  stroke-width: 0.8;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 100ms, stroke 100ms;
}
.real-map .state-shape:hover,
.real-map .state-shape.hover { fill: var(--accent-tint); stroke: var(--accent); stroke-width: 1.2; }
.real-map .state-shape.match { fill: var(--accent); stroke: var(--accent-ink); }
.real-map .state-shape.dim { fill: var(--bg-warm); stroke: var(--border); opacity: 0.55; }
.real-map .state-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  fill: var(--ink-2);
  letter-spacing: 0.04em;
  user-select: none;
}
.real-map-wrap.county-mode .state-bg-shape { fill: var(--accent-tint); stroke: var(--accent); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.real-map-wrap.county-mode .state-outline { fill: none; stroke: var(--accent-ink); stroke-width: 1.4; pointer-events: none; vector-effect: non-scaling-stroke; }
.real-map .county-shape {
  pointer-events: fill;
  fill: var(--surface);
  stroke: var(--border-strong);
  stroke-width: 0.5;
  cursor: pointer;
  transition: fill 100ms, opacity 200ms;
  vector-effect: non-scaling-stroke;
}
.real-map .county-shape:hover,
.real-map .county-shape.hover { fill: var(--accent-tint); stroke: var(--accent); stroke-width: 1.2; }
.real-map .county-shape.focused {
  fill: var(--accent);
  stroke: var(--accent-ink);
  stroke-width: 2;
  filter: drop-shadow(0 4px 12px oklch(from var(--accent) l c h / 0.35));
}
.real-map .county-shape.dim { fill: var(--bg-warm); opacity: 0.35; }
.real-map-wrap.is-focused .county-shape:not(.focused) { pointer-events: none; }
.county-tip-bg { fill: var(--ink); }
.county-tip-text { fill: var(--bg); font-family: var(--font-sans); font-size: 11px; font-weight: 500; }

.map-legend {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 4px 0; border-top: 1px dashed var(--border);
  margin-top: 8px;
  font-size: 12.5px; color: var(--ink-2);
}
.map-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: middle; }

.map-skeleton {
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: 14px;
  color: var(--muted);
  font-size: 14px;
}
.map-skeleton-inner { display: flex; gap: 12px; align-items: center; }
.map-skeleton .spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.map-err { padding: 40px; text-align: center; color: var(--muted); }

/* county stage = full-width map with detail card overlaid on right when focused */
.county-stage {
  position: relative;
  margin-bottom: 16px;
}
.county-stage .real-map-wrap { margin-bottom: 0; }

/* county detail card slides in from right */
.county-detail {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: slide-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes slide-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.county-detail-back {
  align-self: flex-start;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px 4px 4px;
  border-radius: 6px;
  cursor: pointer;
  margin-left: -4px;
  white-space: nowrap;
}
.county-detail-back:hover { background: var(--surface-2); color: var(--ink); }
.county-detail-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 600;
}
.county-detail-name {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.county-detail-courthouse {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.county-detail-courthouse .ch-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 2px;
}
.county-detail-courthouse .ch-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.45;
}
.county-detail-courthouse .ch-row > div { min-width: 0; }
.county-detail-courthouse .ch-row > div > div { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; }
.county-detail-courthouse .ch-row > svg { color: var(--muted); flex-shrink: 0; margin-top: 2px; }
.county-detail-courthouse .ch-row .muted { font-size: 12px; }
.badge-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 500;
  font-family: var(--font-sans);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--ink-2);
  white-space: nowrap;
}
.badge-pill.ok { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-ink); }
.badge-pill.off { background: var(--bg-warm); }
.badge-pill.neutral { background: var(--surface); }
.county-detail-actions { display: flex; flex-direction: column; gap: 8px; }
.county-detail-actions .btn--full { width: 100%; justify-content: center; }
.county-detail-hint { font-size: 11.5px; text-align: center; }
.county-detail-hint kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 1px 6px;
  margin: 0 2px;
}

/* collapsible county search list under the map */
.county-list-collapse { margin-top: 12px; margin-bottom: 24px; }
.county-list-pop {
  margin-top: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.county-list-pop .state-search { margin-bottom: 12px; }
.county-pop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}
.county-pop-grid::-webkit-scrollbar { width: 8px; }
.county-pop-grid::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.county-pop-grid .county-row.hover { background: var(--accent-tint); border-color: var(--accent); }

/* hex US map */
.hex-map-wrap {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 22px 14px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.hex-map { display: block; width: 100%; height: auto; max-height: 460px; }
.hex-map .hex { cursor: pointer; transition: transform 120ms ease; transform-origin: center; transform-box: fill-box; }
.hex-map .hex .hex-shape {
  fill: var(--surface);
  stroke: var(--border-strong);
  stroke-width: 1.2;
  transition: fill 120ms, stroke 120ms;
}
.hex-map .hex .hex-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  fill: var(--ink-2);
  letter-spacing: 0.04em;
  pointer-events: none;
  user-select: none;
}
.hex-map .hex:hover .hex-shape,
.hex-map .hex.hover .hex-shape { fill: var(--accent-tint); stroke: var(--accent); stroke-width: 1.6; }
.hex-map .hex:hover .hex-label,
.hex-map .hex.hover .hex-label { fill: var(--accent-ink); }
.hex-map .hex.match .hex-shape { fill: var(--accent); stroke: var(--accent-ink); }
.hex-map .hex.match .hex-label { fill: var(--accent-on); }
.hex-map .hex.dim .hex-shape { fill: var(--bg-warm); stroke: var(--border); }
.hex-map .hex.dim .hex-label { fill: var(--muted-2); }
.hex-tip-bg { fill: var(--ink); }
.hex-tip-text { fill: var(--bg); font-family: var(--font-sans); font-size: 11px; font-weight: 500; }
.hex-map-legend {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 4px 0; border-top: 1px dashed var(--border);
  margin-top: 8px;
  font-size: 12.5px; color: var(--ink-2);
}
.hex-map-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: middle; }

.county-header {
  display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px;
}
.county-state-badge {
  width: 64px; height: 64px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--accent-on);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.tile-map {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.tile-map .tile {
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 500;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 100ms, border-color 100ms, transform 100ms;
}
.tile-map .tile:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-ink); }
.tile-map .tile.empty { background: transparent; border-color: transparent; pointer-events: none; }
.tile-map .tile.match { box-shadow: 0 0 0 2px var(--accent); }
.tile-map .tile.dim { opacity: 0.35; }

.juris-federal {
  margin-top: 18px;
  padding: 18px 20px;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}

/* county */
.county-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-height: 460px;
  overflow: auto;
  padding-right: 4px;
}
.county-row {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}
.county-row:hover { border-color: var(--accent); background: var(--accent-tint); }
.county-row .name { font-size: 14px; font-weight: 500; white-space: nowrap; min-width: 0; }
.county-row .meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.05em; }

/* ============= BROWSE ============= */
.browse-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
}
.cat-side h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 24px 0 10px;
  font-weight: 500;
}
.cat-side .cat {
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 14px;
  color: var(--ink-2);
  min-width: 0;
}
.cat-side .cat > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.cat-side .cat:hover { background: var(--surface-2); }
.cat-side .cat.active { background: var(--ink); color: var(--bg); }
.cat-side .cat.active .count { color: oklch(0.78 0.014 75); }
.cat-side .cat .count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

.browse-main h1 {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 16px 0 6px;
}
.browse-main .sub { color: var(--ink-2); font-size: 16px; margin-bottom: 22px; }

.browse-search {
  position: relative;
  margin-bottom: 24px;
}
.browse-search input {
  width: 100%;
  padding: 14px 14px 14px 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  font-size: 15px;
}
.browse-search .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.browse-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }

.subcats {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.subcat {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.subcat:hover { border-color: var(--border-strong); }
.subcat.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ===== Role pivot (filing / responding / both) ===== */
.role-pivot {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 6px 0 22px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: fit-content;
}
.role-pivot .opt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 14px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.role-pivot .opt:hover { color: var(--ink); }
.role-pivot .opt .glyph {
  width: 20px; height: 20px;
  border-radius: 5px;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  flex-shrink: 0;
}
.role-pivot .opt .tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
  margin-left: 6px;
  font-weight: 400;
}
.role-pivot .opt.active {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
  box-shadow: 0 1px 0 oklch(0 0 0 / 0.03);
}
.role-pivot .opt.active.filing .glyph {
  background: var(--accent-tint); color: var(--accent-ink); border-color: transparent;
}
.role-pivot .opt.active.responding .glyph {
  background: var(--ochre-tint); color: var(--ochre-ink); border-color: transparent;
}
.role-pivot .opt.active.both .glyph {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}

/* Reactive page header tone — responding gets a warmer cast */
.browse-main.is-responding h1 em,
.browse-main.is-responding .role-noun { color: var(--ochre-ink); font-style: italic; }

/* Deadline / urgency banner shown when "responding" is active */
.deadline-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  margin: -4px 0 22px;
  background: var(--ochre-tint);
  border: 1px solid oklch(from var(--ochre-tint) calc(l - 0.08) c h);
  border-radius: 12px;
}
.deadline-banner .icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ochre-ink);
  display: grid; place-items: center;
  flex-shrink: 0;
  border: 1px solid oklch(from var(--ochre-tint) calc(l - 0.1) c h);
}
.deadline-banner .body { flex: 1; min-width: 0; }
.deadline-banner .ttl {
  font-size: 14px;
  font-weight: 600;
  color: var(--ochre-ink);
  margin-bottom: 2px;
}
.deadline-banner .desc {
  font-size: 13px;
  color: oklch(0.36 0.06 60);
  line-height: 1.5;
}

/* Role chip on form cards */
.role-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 7px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}
.role-tag::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--muted-2);
}
.role-tag.filing    { background: var(--accent-tint); color: var(--accent-ink); border-color: transparent; }
.role-tag.filing::before    { background: var(--accent); }
.role-tag.responding { background: var(--ochre-tint); color: var(--ochre-ink); border-color: transparent; }
.role-tag.responding::before { background: var(--ochre); }
.role-tag.either     { background: var(--surface-2); color: var(--ink-2); }
.role-tag.either::before     { background: var(--muted-2); }

/* Paired-form footnote inside a card */
.form-card .pair-note {
  margin-top: 4px;
  padding: 8px 10px;
  border-top: 1px dashed var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-2);
}
.form-card .pair-note .pair-code {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--ink-2);
}
.form-card .pair-note .pair-link {
  color: var(--accent-ink);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
  background: none; border: none; padding: 0; font: inherit;
}
.form-card .pair-note .pair-link:hover { color: var(--accent); }
.form-card .pair-arrow { color: var(--muted-2); }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex; flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: border-color 120ms, transform 120ms;
  text-align: left;
}
.form-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.form-card .code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.form-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
}
.form-card p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.form-card .meta {
  display: flex; align-items: center; gap: 10px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
}
.form-card .meta > span { white-space: nowrap; }
.form-card .meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); }

/* ============= FORM DETAIL ============= */
.form-detail {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 32px 80px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 36px;
}
.form-detail .lhs h1 {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -0.022em;
  margin: 16px 0 12px;
  line-height: 1.05;
}
.form-detail .lhs .sub { color: var(--ink-2); font-size: 17px; line-height: 1.5; max-width: 52ch; }
.form-detail .lhs .meta-row { display: flex; gap: 16px; margin: 22px 0; flex-wrap: wrap; }
.meta-stat {
  display: flex; flex-direction: column;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  min-width: 120px;
}
.meta-stat .lbl { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.meta-stat { white-space: nowrap; }
.meta-stat .val { font-size: 16px; font-weight: 500; margin-top: 2px; }

.checklist {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.checklist li {
  display: flex; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 14.5px;
}
.checklist li:last-child { border-bottom: none; }
.checklist .check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-ink);
  display: grid; place-items: center;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* preview pane */
.preview-pane {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  position: sticky;
  top: 84px;
  height: fit-content;
}
.preview-doc {
  background: #fdfbf6;
  border-radius: 8px;
  padding: 36px 40px;
  min-height: 540px;
  position: relative;
  font-family: "Newsreader", Georgia, serif;
  color: oklch(0.28 0.014 60);
  font-size: 12px;
  line-height: 1.5;
  overflow: hidden;
}
.preview-doc::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px oklch(0.88 0.012 75);
  pointer-events: none;
}
.doc-stamp {
  position: absolute;
  top: 24px; right: 28px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  border: 1px solid var(--muted-2);
  padding: 4px 8px;
  border-radius: 4px;
}
.doc-court {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  padding: 0 90px;
}
.doc-court em { font-style: normal; }
.doc-title {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  margin: 16px 0 4px;
}
.doc-sub { text-align: center; font-size: 11px; color: oklch(0.45 0.014 60); margin-bottom: 28px; font-family: var(--font-mono); letter-spacing: 0.06em; }
.doc-row { display: flex; gap: 14px; margin-bottom: 10px; align-items: flex-end; }
.doc-row .lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(0.45 0.014 60); white-space: nowrap; padding-bottom: 2px; }
.doc-line {
  flex: 1;
  border-bottom: 1px solid oklch(0.5 0.014 60);
  min-height: 18px;
  padding: 0 4px 2px;
  font-family: "Newsreader", Georgia, serif;
}
.doc-line.filled { color: oklch(0.22 0.015 60); font-weight: 500; }
.doc-line.empty {}
.doc-section { margin: 22px 0 8px; font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--font-mono); border-bottom: 1px solid oklch(0.5 0.014 60); padding-bottom: 4px; }
.doc-para { margin-bottom: 12px; font-size: 12px; }
.doc-para .blank { display: inline-block; min-width: 80px; border-bottom: 1px solid oklch(0.5 0.014 60); }
.doc-check { display: inline-block; width: 12px; height: 12px; border: 1px solid oklch(0.4 0.014 60); margin-right: 6px; vertical-align: -2px; border-radius: 1px; }
.doc-check.on { background: oklch(0.4 0.014 60); }
.doc-fade-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  background: linear-gradient(to bottom, transparent, #fdfbf6);
  pointer-events: none;
}

/* ============= WORKSPACE (chat) ============= */
.workspace {
  display: grid;
  grid-template-columns: 280px 1fr 380px;
  height: calc(100vh - 60px);
}
.ws-side {
  border-right: 1px solid var(--border);
  background: var(--bg-warm);
  display: flex; flex-direction: column;
}
.ws-side-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 14px 14px 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
}
.ws-side-tabs button {
  border: none;
  background: transparent;
  padding: 7px 8px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
  white-space: nowrap;
}
.ws-side-tabs button.active { background: var(--ink); color: var(--bg); }

.ws-side-search {
  margin: 10px 14px 6px;
  position: relative;
}
.ws-side-search input {
  width: 100%;
  padding: 9px 10px 9px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}
.ws-side-search input:focus { outline: none; border-color: var(--accent); }
.ws-side-search .ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); }

.ws-side-section {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 16px 18px 6px;
}

.ws-side-list { padding: 0 8px 16px; flex: 1; overflow: auto; }
.ws-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}
.ws-item:hover { background: var(--surface); border-color: var(--border); }
.ws-item.active { background: var(--surface); border-color: var(--border); }
.ws-item .title { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ws-item .meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ws-item { min-width: 0; }
.ws-item .row2 { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.ws-item .pill {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--accent-tint);
  color: var(--accent-ink);
}
.ws-item .pill.draft { background: var(--ochre-tint); color: oklch(0.42 0.11 60); }
.ws-item .pill.done  { background: oklch(0.92 0.04 160); color: oklch(0.32 0.07 160); }

/* main chat */
.ws-main {
  display: flex; flex-direction: column;
  position: relative;
  background: var(--bg);
}
.ws-main-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  height: 56px;
  flex-shrink: 0;
  min-width: 0;
}
.ws-main-header > .bot-avatar { flex-shrink: 0; }
.ws-main-header > div:nth-child(2) { min-width: 0; flex: 1; overflow: hidden; }
.ws-main-header .ttl { font-family: var(--font-display); font-size: 18px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bot-avatar {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  font-weight: 500;
  flex-shrink: 0;
}
.ws-main-header .right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-shrink: 0; white-space: nowrap; }
.ws-main-header .progress {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; color: var(--muted);
  letter-spacing: 0.06em;
}
.ws-main-header .progress .bar { width: 120px; height: 4px; background: var(--border); border-radius: 999px; overflow: hidden; }
.ws-main-header .progress .bar > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

.ws-chat {
  flex: 1;
  overflow: auto;
  padding: 28px 0 60px;
}
.chat-stream {
  max-width: 740px;
  margin: 0 auto;
  padding: 0 28px;
}

/* opener: a docket-style header for the conversation */
.chat-opener { margin: 0 0 28px; }
.chat-opener-eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.chat-opener-rule {
  height: 1px;
  background: linear-gradient(to right, var(--ink-2) 0, var(--ink-2) 28px, var(--border) 28px, var(--border) 100%);
}

/* a single turn = a labelled paragraph in a transcript */
.turn {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  padding: 14px 0 18px;
  border-top: 1px solid transparent;
  position: relative;
}
.turn + .turn { border-top-color: var(--border); }
.turn--you + .turn--brief,
.turn--brief + .turn--you { border-top-color: var(--ink-2); border-top-style: solid; }

.turn-gutter {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 6px;
}
.turn-mark {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
  white-space: nowrap;
}
.turn--brief .turn-mark { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-tint); }

.turn-body { min-width: 0; }
.turn-said {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
.turn--brief .turn-said {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
  font-weight: 400;
}
.turn--you .turn-said {
  font-size: 16.5px;
  color: var(--ink-2);
  font-style: normal;
}
.turn--you .turn-said::before {
  content: "“";
  font-family: var(--font-display);
  color: var(--muted-2);
  margin-right: 2px;
  font-size: 1.4em;
  line-height: 0;
  vertical-align: -0.2em;
}
.turn--you .turn-said::after {
  content: "”";
  font-family: var(--font-display);
  color: var(--muted-2);
  margin-left: 2px;
  font-size: 1.4em;
  line-height: 0;
  vertical-align: -0.2em;
}

/* lettered options list — looks like a survey/intake question */
.qa-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.qa-list li { border-bottom: 1px solid var(--border); }
.qa-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 4px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 15px;
  color: var(--ink);
  font-family: inherit;
}
.qa-row:hover { background: var(--accent-tint); }
.qa-row:hover .qa-row-hint { opacity: 1; }
.qa-row-key {
  font-size: 11px;
  letter-spacing: 0.04em;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 1px solid var(--ink-2);
  border-radius: 50%;
  color: var(--ink-2);
}
.qa-row:hover .qa-row-key { border-color: var(--accent); background: var(--accent); color: var(--accent-on); }
.qa-row-label { font-size: 15.5px; line-height: 1.4; }
.qa-row-hint {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--muted);
  opacity: 0.4;
  padding-right: 6px;
}

/* a hairline form-field for date/text answers */
.qa-field {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 14px;
  margin: 20px 0 4px;
  padding: 6px 0 8px;
  border-bottom: 1px solid var(--ink-2);
}
.qa-field-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
  padding-bottom: 8px;
}
.qa-field input {
  background: transparent;
  border: none;
  outline: none;
  padding: 6px 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  width: 100%;
}
.qa-field input::placeholder { color: var(--muted-2); font-style: italic; }
.qa-field input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.45; cursor: pointer; }
.qa-field-go {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 14px 7px 16px;
  font-size: 12px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.qa-field-go .mono { color: var(--muted); font-size: 11px; }
.qa-field-go:hover { background: var(--ink); color: var(--bg); }
.qa-field-go:hover .mono { color: var(--bg); }
.qa-field-go:disabled { opacity: 0.35; cursor: not-allowed; }

.qa-asides {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.qa-asides a {
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
  padding-bottom: 1px;
  white-space: nowrap;
}
.qa-asides a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* typing indicator at the bottom of the stream */
.turn--typing { padding-top: 8px; padding-bottom: 24px; opacity: 0.6; }
.turn--typing .turn-said { display: none; }
.typing { display: inline-flex; gap: 5px; align-items: center; padding: 8px 0; }
.typing i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink-2);
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* composer — a single hairline rule, no rounded blob */
.composer--rule {
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 18px 28px 14px;
  flex-shrink: 0;
}
.composer--rule .composer-inner {
  max-width: 740px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 18px;
  align-items: end;
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--ink-2);
}
.composer-gutter {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
  text-align: right;
  padding-bottom: 12px;
}
.composer--rule textarea {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
  padding: 6px 0 8px;
  min-height: 28px;
}
.composer--rule textarea::placeholder { color: var(--muted-2); }
.composer-send {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  margin-bottom: 4px;
}
.composer-send:hover { background: var(--accent); color: var(--accent-on); }

.composer-meta {
  max-width: 740px;
  margin: 10px auto 0;
  padding-left: 82px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.composer-tools { display: inline-flex; gap: 14px; align-items: center; }
.composer-tools button {
  background: transparent;
  border: none;
  color: var(--muted);
  font: inherit;
  letter-spacing: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 0;
}
.composer-tools button:hover { color: var(--ink); }
.composer-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--ink-2);
  background: var(--surface);
  white-space: nowrap;
}
.composer-keys { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.composer-keys .dot { opacity: 0.5; }
.composer-keys .kbd { font-size: 9.5px; padding: 1px 4px; }

/* right: live form preview */
.ws-right {
  border-left: 1px solid var(--border);
  background: var(--bg-warm);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ws-right-header {
  height: 56px;
  border-bottom: 1px solid var(--border);
  padding: 0 18px;
  display: flex; align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ws-right-header .ttl { font-size: 13px; font-weight: 500; white-space: nowrap; }
.ws-right-header .meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-left: auto; white-space: nowrap; flex-shrink: 0; }
.ws-right-doc { padding: 16px; overflow: auto; flex: 1; }
.ws-right-doc .preview-doc { min-height: 0; padding: 26px 28px; font-size: 11.5px; }
.ws-right-doc .doc-fade-bottom { display: none; }

.ws-right-foot {
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  display: flex; gap: 8px;
  flex-shrink: 0;
}
.ws-right-foot .btn { white-space: nowrap; }

/* highlight a recently-filled line */
@keyframes pulse-fill {
  0%   { background: oklch(0.94 0.03 160); }
  100% { background: transparent; }
}
.doc-line.just-filled { animation: pulse-fill 1200ms ease-out; }

/* ============================================================
   EDITIONS LANDING — styles
   Uses tokens from styles.css. Everything scoped under .el-app.
   ============================================================ */

.el-app {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: clip;
  transition: background 500ms ease, color 500ms ease;
}
.el-app *, .el-app *::before, .el-app *::after { box-sizing: border-box; }
.el-app a { color: inherit; text-decoration: none; }
.el-app button { font: inherit; color: inherit; cursor: pointer; }

/* paper grain on light directions */
.el-app::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image: radial-gradient(oklch(0.72 0.014 75 / 0.14) 0.5px, transparent 0.5px);
  background-size: 3.5px 3.5px;
  opacity: 0.5;
  transition: opacity 500ms ease;
}
.el-app.dir-corpus::before {
  background-image: radial-gradient(oklch(0.72 0.02 250 / 0.10) 0.5px, transparent 0.5px);
  opacity: 0.35;
}
.el-app > * { position: relative; z-index: 1; }

/* ── Dark palette remap for The Corpus ─────────────────────── */
.el-app.dir-corpus {
  --bg:            oklch(0.185 0.008 264);
  --bg-warm:       oklch(0.225 0.010 264);
  --surface:       oklch(0.235 0.010 264);
  --surface-2:     oklch(0.285 0.011 264);
  --ink:           oklch(0.965 0.004 250);
  --ink-2:         oklch(0.80 0.006 250);
  --muted:         oklch(0.62 0.008 250);
  --muted-2:       oklch(0.48 0.008 250);
  --border:        oklch(0.34 0.010 264);
  --border-strong: oklch(0.46 0.011 264);
  --accent:        oklch(0.82 0.018 250);
  --accent-ink:    oklch(0.92 0.012 250);
  --accent-tint:   oklch(0.30 0.012 264);
  --accent-on:     oklch(0.17 0.008 264);
  --ochre:         oklch(0.78 0.05 70);
  --ochre-ink:     oklch(0.86 0.04 70);
  --ochre-tint:    oklch(0.30 0.02 70);
}

/* ── Type helpers ──────────────────────────────────────────── */
.el-app .serif { font-family: var(--font-display); }
.el-app .mono  { font-family: var(--font-mono); }
.el-app .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: 9px;
}
.el-app .eyebrow .sec { color: var(--accent-ink); }
.el-app .eyebrow .dot { width: 4px; height: 4px; border-radius: 999px; background: var(--muted-2); }

.el-app .cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font-size: 14.5px; font-weight: 500; border: none;
  transition: gap 180ms ease, background 180ms ease, transform 180ms ease;
}
.el-app .cta:hover { gap: 14px; }
.el-app .cta svg { transition: transform 180ms ease; }
.el-app .cta:hover svg { transform: translateX(3px); }
.el-app .cta--ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--border-strong);
}
.el-app .cta--ghost:hover { border-color: var(--ink); }

/* ── Fixed direction switcher ──────────────────────────────── */
.el-switch {
  position: fixed;
  bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 90;
  display: flex; align-items: center; gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface) 82%, transparent);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.el-switch .lbl {
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); padding: 0 10px 0 8px;
}
.el-switch button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px;
  border: none; background: transparent;
  color: var(--ink-2); font-size: 13px; font-weight: 500;
  white-space: nowrap; transition: background 160ms, color 160ms;
}
.el-switch button:hover { color: var(--ink); }
.el-switch button .n {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  color: var(--muted);
}
.el-switch button.active { background: var(--ink); color: var(--bg); }
.el-switch button.active .n { color: color-mix(in oklch, var(--bg) 70%, transparent); }
@media (max-width: 720px) {
  .el-switch .name { display: none; }
  .el-switch .lbl { display: none; }
}

/* ── Hero shell ────────────────────────────────────────────── */
.el-hero { position: relative; min-height: 100vh; display: flex; }

/* =====================================================================
   DIRECTION A — LIVING ANSWER
   ===================================================================== */
.dirA {
  width: 100%; max-width: 1240px; margin: 0 auto;
  padding: 132px 40px 90px;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px; align-items: center;
}
.dirA .lede { max-width: 30ch; }
.dirA h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px, 5vw, 68px); line-height: 1.0;
  letter-spacing: -0.03em; margin: 20px 0 20px; color: var(--ink);
  text-wrap: balance;
}
.dirA h1 em { font-style: italic; color: var(--accent-ink); }
.dirA .sub {
  font-size: 18px; line-height: 1.5; color: var(--ink-2);
  max-width: 42ch; margin-bottom: 30px;
}
.dirA .lede-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* console */
.la-console {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.la-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--surface-2) 60%, var(--surface));
}
.la-bar .live {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.la-bar .live .pulse {
  width: 7px; height: 7px; border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent); animation: la-pulse 1.8s ease-out infinite;
}
@keyframes la-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.la-bar .spacer { flex: 1; }
.la-bar .ed {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border);
}

.la-q {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 20px 16px;
}
.la-q .qi {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px;
  background: var(--ink); color: var(--bg);
  display: grid; place-items: center;
}
.la-q .qt {
  font-family: var(--font-display); font-size: 20px; line-height: 1.3;
  color: var(--ink); letter-spacing: -0.01em; padding-top: 2px;
}
.la-q .qt .caret {
  display: inline-block; width: 2px; height: 1em;
  background: var(--accent); margin-left: 2px; vertical-align: -2px;
  animation: la-blink 1s step-end infinite;
}
@keyframes la-blink { 50% { opacity: 0; } }

.la-body { padding: 0 20px 20px; }
.la-answer {
  font-size: 15.5px; line-height: 1.72; color: var(--ink);
  min-height: 118px;
}
.la-answer .seg { opacity: 0; }
.la-answer .seg.in { opacity: 1; transition: opacity 260ms ease; }
.la-cite {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px; margin: 0 1px;
  border-radius: 5px; transform: translateY(-2px);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  background: var(--accent-tint); color: var(--accent-ink);
  border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
  cursor: default;
  transition: background 160ms, transform 160ms, box-shadow 160ms;
}
.la-cite.lit { box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent); }

.la-sources { margin-top: 4px; border-top: 1px dashed var(--border); padding-top: 14px; }
.la-sources .sh {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.la-src {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 13px; border-radius: 11px;
  border: 1px solid var(--border); background: var(--bg);
  margin-bottom: 8px; opacity: 0; transform: translateY(6px);
  transition: opacity 300ms ease, transform 300ms ease, border-color 220ms, box-shadow 220ms, background 220ms;
}
.la-src.in { opacity: 1; transform: none; }
.la-src.lit {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent-tint) 40%, var(--surface));
  box-shadow: var(--shadow-md);
}
.la-src .idx {
  width: 18px; height: 18px; flex-shrink: 0; border-radius: 5px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  display: grid; place-items: center; margin-top: 1px;
  background: var(--accent-tint); color: var(--accent-ink);
}
.la-src .sn { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); letter-spacing: -0.01em; }
.la-src .sd { font-size: 12px; color: var(--muted); margin-top: 1px; }

.la-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.la-chips .cl {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); align-self: center; margin-right: 2px;
}
.la-chip {
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13px; color: var(--ink-2); text-align: left;
  transition: border-color 140ms, color 140ms, background 140ms;
}
.la-chip:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--surface-2); }
.la-chip.active { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-tint); }

@media (max-width: 940px) {
  .dirA { grid-template-columns: 1fr; gap: 34px; padding-top: 108px; }
  .dirA .lede { max-width: none; }
}

/* =====================================================================
   DIRECTION B — THE CORPUS (orbital)
   ===================================================================== */
.dirB { width: 100%; position: relative; display: grid; place-items: center; overflow: hidden; }
.corpus-stage {
  position: relative; width: 100%; min-height: 100vh;
  display: grid; place-items: center;
}
.corpus-ring {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  animation: corpus-spin 140s linear infinite;
}
.corpus-stage:hover .corpus-ring { animation-play-state: paused; }
@keyframes corpus-spin { to { transform: rotate(360deg); } }
.corpus-card {
  position: absolute;
  width: 190px; margin-left: -95px; margin-top: -34px;
  transform-origin: center;
  cursor: default;
}
.corpus-card .inner {
  transition: opacity 300ms ease, transform 300ms ease;
  opacity: 0.34;
}
.corpus-stage:hover .corpus-card .inner { opacity: 0.5; }
.corpus-card:hover .inner { opacity: 1 !important; transform: scale(1.06); }
.corpus-card .cc {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.corpus-card .ct {
  font-family: var(--font-display); font-size: 15px; line-height: 1.22;
  letter-spacing: -0.01em; color: var(--ink-2);
}
.corpus-card:hover .ct { color: var(--ink); }

.corpus-core {
  position: relative; z-index: 5; text-align: center;
  max-width: 540px; padding: 40px;
  pointer-events: none;
}
.corpus-core > * { pointer-events: auto; }
.corpus-core .wm {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px;
}
.corpus-core .wm img { width: 34px; height: 34px; object-fit: contain; filter: invert(1) brightness(1.6); }
.corpus-core .wm span {
  font-family: var(--font-display); font-size: 24px; letter-spacing: -0.015em; color: var(--ink);
}
.corpus-core .wm span em { font-style: italic; font-weight: 400; }
.corpus-core h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(46px, 6vw, 82px); line-height: 0.98;
  letter-spacing: -0.035em; margin: 0 0 18px; color: var(--ink);
  text-wrap: balance;
}
.corpus-core h1 em { font-style: italic; }
.corpus-core p {
  font-size: 18px; line-height: 1.5; color: var(--ink-2);
  margin: 0 auto 30px; max-width: 40ch;
}
.corpus-core .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.corpus-core .hint {
  margin-top: 26px; font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
/* soft vignette so cards fade toward the core */
.corpus-veil {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 40% 42% at 50% 50%, var(--bg) 30%, transparent 72%);
}

/* =====================================================================
   DIRECTION C — MARGINALIA (self-marking document)
   ===================================================================== */
.dirC {
  width: 100%; max-width: 1120px; margin: 0 auto;
  padding: 122px 40px 70px;
}
.dirC .lede { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.dirC .lede .eyebrow { justify-content: center; }
.dirC h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(42px, 5vw, 66px); line-height: 0.98;
  letter-spacing: -0.032em; margin: 18px 0 18px; color: var(--ink); text-wrap: balance;
}
.dirC h1 em { font-style: italic; color: var(--ochre-ink); }
.dirC .sub { font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 56ch; margin: 0 auto 26px; }
.dirC .lede-cta { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.dirC .prog {
  margin: 26px auto 0; display: flex; align-items: center; gap: 14px; justify-content: center;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.dirC .prog .track { width: 180px; height: 2px; background: var(--border); border-radius: 999px; overflow: hidden; }
.dirC .prog .fill { height: 100%; background: var(--ochre); border-radius: inherit; transition: width 500ms ease; }

/* stage = page + right note gutter */
.doc-stage { position: relative; max-width: 1040px; margin: 0 auto; }
.doc-wrap { perspective: 1800px; width: 660px; max-width: 100%; }
.doc {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  padding: 42px 48px 46px;
  transform: rotateX(1.5deg) rotateY(-2.5deg);
  transform-style: preserve-3d;
}
.doc-head { border-bottom: 2px solid var(--ink); padding-bottom: 15px; margin-bottom: 20px; }
.doc-head .dt {
  font-family: var(--font-display); font-size: 23px; letter-spacing: -0.015em; color: var(--ink);
}
.doc-head .dm { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--muted); margin-top: 6px; }
.doc-para {
  font-family: var(--font-display); font-size: 15px; line-height: 1.78;
  color: var(--ink); margin: 0 0 14px; position: relative;
}
.doc-para .mk { position: relative; border-radius: 3px; transition: background 400ms ease, box-shadow 400ms ease; padding: 1px 2px; }
.doc-para .mk.flag.on  { background: color-mix(in oklch, var(--ochre) 26%, transparent); box-shadow: 0 0 0 1px color-mix(in oklch, var(--ochre) 45%, transparent); }
.doc-para .mk.ok.on    { background: color-mix(in oklch, var(--accent) 22%, transparent); box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) 40%, transparent); }
.doc-para .mk.edit.on  { background: color-mix(in oklch, var(--ochre) 22%, transparent); box-shadow: 0 0 0 1px color-mix(in oklch, var(--ochre) 45%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in oklch, var(--ochre-ink) 70%, transparent); }

/* margin note card — sits in the right gutter, anchored to its paragraph */
.doc-note {
  display: block;
  position: absolute; top: -6px; left: calc(100% + 66px); width: 292px;
  transform: translateX(14px); opacity: 0;
  transition: opacity 400ms ease, transform 400ms ease;
  z-index: 6;
}
.doc-note.on { opacity: 1; transform: translateX(0); }
.doc-note .card {
  display: block;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 13px 15px;
  box-shadow: var(--shadow-md);
}
.doc-note .nh { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.doc-note .nl {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
}
.doc-note.flag .nl, .doc-note.edit .nl { background: var(--ochre-tint); color: var(--ochre-ink); }
.doc-note.ok .nl { background: var(--accent-tint); color: var(--accent-ink); }
.doc-note .ni { color: var(--muted); margin-left: auto; }
.doc-note .nt { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.doc-note .nc {
  margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--border);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--accent-ink);
  display: flex; align-items: center; gap: 6px;
}
.doc-note.flag .nc, .doc-note.edit .nc { color: var(--ochre-ink); }

/* connector — short dashed run from the page edge to the note card */
.doc-connector {
  position: absolute; top: 9px; left: calc(100% + 6px); width: 54px; height: 1px; z-index: 5;
  background: repeating-linear-gradient(to right, var(--border-strong) 0 4px, transparent 4px 8px);
  opacity: 0; transition: opacity 400ms ease;
}
.doc-connector.on { opacity: 0.9; }
.doc-connector::after {
  content: ""; position: absolute; right: -3px; top: -2.5px;
  width: 6px; height: 6px; border-radius: 999px; background: var(--ochre);
}
.doc-note.ok ~ .doc-connector::after { background: var(--accent); }

@media (max-width: 1040px) {
  .doc-wrap { width: 100%; }
  .doc { padding: 36px 34px 40px; }
  .doc-note {
    position: static; left: auto; top: auto;
    width: auto; max-width: 500px; margin: 0 0 0 22px;
    max-height: 0; opacity: 0; transform: none; overflow: hidden;
    transition: max-height 440ms ease, opacity 380ms ease, margin 440ms ease;
  }
  .doc-note.on { max-height: 280px; opacity: 1; margin: 9px 0 7px 22px; }
  .doc-note .card { background: var(--surface-2); }
  .doc-connector { display: none; }
}

/* =====================================================================
   SHARED — editions comparison / switcher
   ===================================================================== */
.el-editions {
  max-width: 1240px; margin: 0 auto; padding: 40px 40px 40px;
  border-top: 1px solid var(--border);
}
.el-ed-head { text-align: center; margin-bottom: 34px; }
.el-ed-head h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4vw, 52px); line-height: 1.02;
  letter-spacing: -0.028em; margin: 14px 0 12px; color: var(--ink); text-wrap: balance;
}
.el-ed-head h2 em { font-style: italic; color: var(--accent-ink); }
.el-ed-head p { font-size: 17px; color: var(--ink-2); max-width: 54ch; margin: 0 auto; }

.el-ed-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 26px; flex-wrap: wrap; }
.el-ed-tab {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  transition: border-color 160ms, background 160ms, transform 160ms;
}
.el-ed-tab:hover { border-color: var(--border-strong); }
.el-ed-tab .badge {
  width: 24px; height: 24px; border-radius: 7px;
  display: grid; place-items: center; color: var(--bg);
}
.el-ed-tab .tn { font-family: var(--font-display); font-size: 17px; letter-spacing: -0.01em; color: var(--ink); }
.el-ed-tab .tg { font-size: 12.5px; color: var(--muted); }
.el-ed-tab.active { border-color: var(--ink); background: var(--surface-2); }

/* the three panels — grid, active one emphasized */
.el-ed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* Unified canvas — one big container holding all three edition panels */
.el-ed-canvas {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  background: var(--surface);
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--shadow-md);
}
.el-ed-panel { display: flex; flex-direction: column; }
.el-ed-panel .ec-photo {
  display: block; flex: 1; min-height: 240px; width: 100%;
  border-radius: 14px;
  background-size: cover; background-position: center;
  box-shadow: var(--shadow-md);
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.el-ed-panel:hover .ec-photo { box-shadow: var(--shadow-lg); }
.el-ed-panel .ec-photo-label {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding-left: 12px;
  font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em;
  color: var(--ink);
}
.el-ed-panel .ec-photo-label .ec-go {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 44px; height: 34px; border-radius: 10px;
  background: #FAF9F6; color: var(--ink);
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.el-ed-panel .ec-photo-label .ec-go:hover {
  background: var(--ink); color: var(--bg);
}
.el-ed-panel .ec-photo-label .ec-go svg { transition: transform 180ms ease; }
.el-ed-panel .ec-photo-label .ec-go:hover svg { transform: translateX(2px); }
.el-ed-card {
  --hue-fg: var(--accent-ink); --hue-bg: var(--accent-tint); --hue-solid: var(--accent);
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 26px 24px 24px; overflow: hidden;
  transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease, background 260ms ease;
}
.el-ed-card.active {
  border-color: var(--hue-solid);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.el-ed-card .glyph {
  position: absolute; top: -18px; right: -6px;
  font-family: var(--font-display); font-style: italic;
  font-size: 150px; line-height: 1; color: var(--hue-bg);
  opacity: 0.5; pointer-events: none; z-index: 0;
}
.el-ed-card > * { position: relative; z-index: 1; }

/* Photo edition cards (Solo, Scholar) — a photo in a rounded rectangle inside the big card container */
.el-ed-card--photo {
  display: flex; flex-direction: column;
}
.el-ed-card--photo .ec-photo {
  display: block; flex: 1; min-height: 220px; width: 100%;
  border-radius: 12px; border: 1px solid var(--border);
  background-size: cover; background-position: center;
}
.el-ed-card--photo .ec-photo-label {
  display: block; margin-top: 16px;
  font-family: var(--font-display); font-size: 26px; letter-spacing: -0.02em;
  color: var(--ink);
}
.el-ed-card .ec-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.el-ed-card .ec-badge {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  background: var(--hue-solid); color: var(--accent-on);
  display: grid; place-items: center;
}
.el-app.dir-corpus .el-ed-card .ec-badge { color: var(--bg); }
.el-ed-card .ec-name { font-family: var(--font-display); font-size: 26px; letter-spacing: -0.02em; color: var(--ink); }
.el-ed-card .ec-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.el-ed-card .ec-line {
  font-family: var(--font-display); font-size: 17.5px; line-height: 1.4;
  color: var(--ink); margin-bottom: 18px; text-wrap: pretty; min-height: 74px;
}
.el-ed-card .ec-points { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.el-ed-card .ec-points li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13.5px; color: var(--ink-2); line-height: 1.4;
}
.el-ed-card .ec-points li .ck { color: var(--hue-fg); flex-shrink: 0; margin-top: 1px; }
.el-ed-card .ec-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 16px 0; margin-top: auto;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.el-ed-card .ec-stat .v { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; color: var(--ink); }
.el-ed-card .ec-stat .k { font-size: 10.5px; color: var(--muted); line-height: 1.25; margin-top: 2px; }
.el-ed-card .ec-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.el-ed-card .ec-price { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.el-ed-card .ec-cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--hue-solid); color: var(--accent-on);
  font-size: 13.5px; font-weight: 500; border: none;
  transition: gap 160ms ease, filter 160ms ease;
}
.el-app.dir-corpus .el-ed-card .ec-cta { color: var(--bg); }
.el-ed-card .ec-cta:hover { gap: 11px; filter: brightness(1.05); }
.el-ed-card .ec-cta svg { transition: transform 160ms; }
.el-ed-card .ec-cta:hover svg { transform: translateX(2px); }

@media (max-width: 900px) {
  .el-ed-grid { grid-template-columns: 1fr; }
  .el-ed-canvas { grid-template-columns: 1fr; gap: 16px; }
  .el-ed-card .ec-line { min-height: 0; }
}

/* ============================================================
   SUNSET HERO — the provided painting as a full-bleed background,
   with a subtle Ken-Burns drift + cursor parallax, a legibility
   scrim, grain, and the nav + copy layered over it.
   ============================================================ */

.grd {
  --ink2:  #16241f;
  --cream: #f6ddb0;
  --gold:  #a8bf63;

  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #2a1608;
  font-family: var(--font-sans);
  color: #fff;
}

/* wide painting as a full-bleed cover background.
   The stage carries the cursor parallax offset (overscanned so the
   edges never show); the image itself carries the slow drift. */
.grd-stage {
  position: absolute; inset: -3%; z-index: 0;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  will-change: transform;
}
.grd-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
  opacity: 0; transition: opacity 900ms ease;
  transform-origin: 54% 46%;
}
.grd.ready .grd-photo {
  opacity: 1;
  animation: grd-drift 42s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes grd-drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(-1.4%, -0.9%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .grd.ready .grd-photo { animation: none; }
}

/* ── Legibility scrim for the copy (bottom-left) ───────────── */
.grd-scrim {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 62% at 20% 92%, rgba(20,10,4,.62) 0%, transparent 60%),
    linear-gradient(0deg, rgba(20,10,4,.45) 0%, transparent 30%),
    linear-gradient(180deg, rgba(20,10,4,.28) 0%, transparent 18%);
}

/* The skip link, header, main landmark and footer are the static site chrome in
   marketing/index.html (/site-chrome.css); this bundle styles the page body. */

/* ── Editions dropdown ─────────────────────────────────────── */
.grd-ed-menu { display: inline-flex; }
.grd-ed-trigger {
  font-family: var(--font-sans);
  font-size: 14px; color: #3a4a43; padding: 8px 14px; border-radius: 10px;
  background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background 140ms, color 140ms;
}
.grd-ed-trigger:hover, .grd-ed-trigger.active { background: rgba(22,36,31,.08); color: var(--ink2); }
.grd-ed-trigger svg { transition: transform 200ms ease; }
.grd-ed-menu.open .grd-ed-trigger svg { transform: rotate(180deg); }

.grd-ed-panel {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(-6px) scale(.99);
  transform-origin: top center;
  width: min(880px, calc(100vw - 48px));
  background: rgba(248,240,228,.96);
  border: 1px solid rgba(255,255,255,.55); border-radius: 20px;
  box-shadow: 0 20px 50px rgba(60,25,10,.28);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 16px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 180ms ease, transform 200ms cubic-bezier(.2,.7,.3,1), visibility 0s linear 180ms;
  z-index: 40;
}
.grd-ed-menu.open .grd-ed-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity 180ms ease, transform 200ms cubic-bezier(.2,.7,.3,1);
}
.grd-ed-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grd-ed-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 18px 18px 20px; border-radius: 14px;
  background: #fffaf1; border: 1px solid rgba(22,36,31,.1);
  text-decoration: none; text-align: left;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.grd-ed-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--hue-solid) 45%, transparent);
  box-shadow: 0 12px 28px rgba(60,25,10,.16);
}
.grd-ed-card .glyph {
  position: absolute; top: -6px; right: 10px;
  font-family: var(--font-display); font-size: 62px; line-height: 1;
  color: color-mix(in srgb, var(--hue-solid) 14%, transparent);
  pointer-events: none;
}
.grd-ec-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--hue-solid); color: #fff; margin-bottom: 12px;
}
.grd-ec-name {
  font-family: var(--font-display); font-size: 19px; color: var(--ink2);
  letter-spacing: -0.01em; line-height: 1.1;
}
.grd-ec-tag {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--hue-solid) 78%, #3a4a43);
  margin: 6px 0 9px;
}
.grd-ec-line { font-size: 13px; line-height: 1.45; color: #4a5751; }
@media (max-width: 720px) {
  .grd-ed-cards { grid-template-columns: 1fr; }
}

/* Solo image card */
.grd-ed-imgcard {
  padding: 0; background: none; border: none; overflow: visible;
  gap: 0;
}
.grd-ed-imgcard:hover {
  transform: translateY(-3px); box-shadow: none; border: none;
}
.grd-ec-photo {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  border-radius: 14px; border: 1px solid rgba(22,36,31,.14);
  background-size: cover; background-position: center;
  box-shadow: 0 6px 18px rgba(60,25,10,.14);
  transition: box-shadow 160ms ease;
}
.grd-ed-imgcard:hover .grd-ec-photo { box-shadow: 0 12px 28px rgba(60,25,10,.22); }
.grd-ec-label {
  display: block; margin-top: 12px;
  font-family: var(--font-display); font-size: 20px; color: var(--ink2);
  letter-spacing: -0.01em;
}
.grd-ribbon {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 7px 8px 7px 16px; border-radius: 999px;
  background: rgba(168,191,99,.85); border: 1px solid rgba(159,64,28,.5);
  font-size: 12.5px; color: #3a1c0e;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.grd-ribbon a {
  color: #3a1c0e; font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
  padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.45);
}

/* ── Hero copy (bottom-left) ───────────────────────────────── */
.grd-copy { position: absolute; z-index: 10; left: 6%; bottom: 13%; max-width: 620px; }
.grd-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream);
  margin-bottom: 18px; display: inline-flex; align-items: center; gap: 9px;
}
.grd-eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.grd-copy h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(46px, 6vw, 88px); line-height: 0.98; letter-spacing: -0.03em;
  color: #fff; margin: 0 0 18px; text-wrap: balance;
  text-shadow: 0 2px 34px rgba(20,8,4,.6);
}
.grd-copy h1 em { font-style: italic; color: var(--cream); }
.grd-copy p {
  font-size: 18px; font-weight: 500; line-height: 1.5; color: rgba(255,246,235,.95); max-width: 40ch; margin: 0 0 28px;
  text-shadow: 0 1px 18px rgba(20,8,4,.6);
}
/* live ingest counters under the hero copy */
.grd-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 22px; row-gap: 18px; margin: 30px 0 26px; max-width: 620px;
}
.grd-stats .gst { padding-top: 12px; }
.grd-stats .gst-v {
  margin: 0; display: flex; align-items: baseline; gap: 2px;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display); font-weight: 400;
  font-size: 38px; line-height: 1; letter-spacing: -0.02em;
  color: rgba(255,248,238,.96); font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 20px rgba(20,8,4,.5);
}
.grd-stats .gst-v .u { font-size: 20px; letter-spacing: 0; color: rgba(255,248,238,.8); }
.grd-stats .gst-l {
  margin: 9px 0 0; font-size: 9.5px; font-weight: 500; white-space: nowrap;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,246,235,.62);
}
@media (max-width: 900px) {
  .grd-stats { column-gap: 16px; }
  .grd-stats .gst-v { font-size: 30px; }
  .grd-stats .gst-l { font-size: 8.5px; letter-spacing: .06em; }
}

.grd-cta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.el-app .grd-cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 24px; border-radius: 14px;
  background: #f8f0e4; color: var(--ink2);
  font-size: 15px; font-weight: 500; border: none; text-decoration: none;
  transition: transform 160ms, box-shadow 160ms;
  box-shadow: 0 10px 30px rgba(20,8,4,.38);
}
.el-app .grd-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(20,8,4,.48); }
.grd-cta svg { transition: transform 160ms; }
.grd-cta:hover svg { transform: translateX(3px); }
.el-app .grd-cta--ghost {
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.45); box-shadow: none; backdrop-filter: blur(4px);
}
.el-app .grd-cta--ghost:hover { background: rgba(255,255,255,.24); box-shadow: none; }

.grd-scroll {
  position: absolute; z-index: 10; bottom: 24px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,246,235,.82); display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; cursor: pointer;
  transition: color 180ms ease;
}
.grd-scroll:hover { color: #fff; }
.grd-scroll .chev {
  display: block;
  transition: transform 260ms cubic-bezier(.6,0,.3,1);
}
.grd-scroll.up .chev { transform: rotate(180deg); }
.grd-scroll:hover .chev {
  animation: grd-chev-nudge 1100ms cubic-bezier(.6,0,.3,1) infinite;
}
.grd-scroll.up:hover .chev {
  animation: grd-chev-nudge-up 1100ms cubic-bezier(.6,0,.3,1) infinite;
}
@keyframes grd-chev-nudge {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(4px); }
}
@keyframes grd-chev-nudge-up {
  0%, 100% { transform: rotate(180deg) translateY(0); }
  30%      { transform: rotate(180deg) translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .grd-scroll:hover .chev,
  .grd-scroll.up:hover .chev { animation: none; }
}

@media (max-width: 860px) {
  .grd-copy { left: 6%; right: 6%; bottom: 11%; }
}

/* ============================================================
   OUR DATA — dark band of the sources Ella reads from, in cream,
   scrolling left; a quiet bridge between the cream trust block
   and the testimonial. Hover or focus pauses it.
   ============================================================ */
.el-app .grd-proof {
  display: flex; align-items: center; gap: 28px;
  background: #191911;
  padding: 18px 0 18px 40px;
  overflow: hidden;
}
.grd-proof .gp-label {
  flex-shrink: 0; margin: 0;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(246,221,176,.6);
}
.grd-proof .gp-marquee {
  position: relative; flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 92%, transparent);
}
.grd-proof .gp-track {
  display: flex; align-items: center; width: max-content;
  animation: gp-scroll 46s linear infinite;
}
.grd-proof .gp-marquee:hover .gp-track,
.grd-proof .gp-marquee:focus-within .gp-track { animation-play-state: paused; }
.grd-proof .gp-cell {
  flex: none; height: 36px; margin-right: 64px;
  display: flex; align-items: center; text-decoration: none;
}
.grd-proof .gp-logo { display: block; width: auto; height: 30px; opacity: .72; transition: opacity .25s ease; }
.grd-proof .gp-cell:hover .gp-logo { opacity: 1; }
.grd-proof .gp-cell--cornell .gp-logo { height: 34px; }
.grd-proof .gp-cell--courtlistener .gp-logo { height: 34px; filter: brightness(0) invert(1) sepia(.45) saturate(1.4); opacity: .68; }
.grd-proof .gp-cell--fsu .gp-logo { height: 26px; }
@keyframes gp-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .grd-proof .gp-track { animation: none; }
}
@media (max-width: 720px) {
  .el-app .grd-proof { padding: 14px 0 14px 20px; gap: 16px; }
  .grd-proof .gp-cell { margin-right: 40px; }
  .grd-proof .gp-logo { height: 24px; }
}

/* ============================================================
   PRODUCTS — a flat row of edition photos, the section title
   living in the fourth cell (no enclosing container).
   ============================================================ */
.el-app .grd-prod {
  max-width: 100%; margin: 0 auto; padding: 0;
}
.grd-prod-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  align-items: stretch;
}

/* Each photo card — full-bleed image with caption overlaid bottom-left */
.el-app .grd-prod-card {
  position: relative; display: block; overflow: hidden;
  min-height: 480px; text-decoration: none;
  isolation: isolate;
}
.grd-prod-photo {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transition: transform 700ms cubic-bezier(.2,.7,.3,1);
}
.grd-prod-card:hover .grd-prod-photo { transform: scale(1.045); }
/* darkening fade at the bottom for caption legibility */
.grd-prod-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(18,9,3,.82) 0%, rgba(18,9,3,.4) 30%, transparent 56%);
}
/* grainy noise confined to the bottom ~30% of the card, sits ABOVE
   the darkening gradient so it stays visible; dark speckles */
.grd-prod-card::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='ng'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%200%200%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23ng)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.65;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 18%, transparent 30%);
          mask-image: linear-gradient(0deg, #000 0%, #000 18%, transparent 30%);
}
.grd-prod-cap {
  position: absolute; z-index: 3; left: 26px; right: 22px; bottom: 26px;
  display: flex; flex-direction: column; gap: 4px;
}
.grd-prod-cap .nm {
  font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.015em;
  color: var(--gold); line-height: 1.08;
}
.grd-prod-cap .rl {
  font-size: 12px; color: rgba(255,246,235,.9);
  text-shadow: 0 1px 10px rgba(20,8,4,.5);
}

/* Fourth cell — the section title */
.grd-prod-title {
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px 44px; background: #000000;
  border: 1px solid #000000;
}
.grd-prod-title h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 3.4vw, 58px); line-height: 0.98; letter-spacing: -0.028em;
  color: #f6ede0; margin: 0 0 16px; text-wrap: balance;
}
.grd-prod-title p {
  font-size: 16px; line-height: 1.5; color: rgba(246,237,224,.7);
  margin: 0 0 40px; max-width: 30ch;
}
.el-app .grd-prod-more {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: #f6ede0;
  text-decoration: none; align-self: flex-start;
}
.grd-prod-more .circ {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid rgba(246,237,224,.4);
  color: #f6ede0;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.grd-prod-more:hover .circ { background: #f6ede0; color: #000; }
.grd-prod-more .circ svg { transition: transform 180ms ease; }
.grd-prod-more:hover .circ svg { transform: translateX(2px); }

@media (max-width: 1100px) {
  .grd-prod-grid { grid-template-columns: repeat(2, 1fr); }
  .el-app .grd-prod-card { min-height: 420px; }
}
@media (max-width: 620px) {
  .grd-prod-grid { grid-template-columns: 1fr; }
  .grd-prod-title { padding: 36px 26px; }
}

/* ── Scroll-in "open" motion for page sections ─────────────── */
.grd-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .72s cubic-bezier(.22,.61,.36,1),
    transform .82s cubic-bezier(.22,.61,.36,1),
    filter .72s cubic-bezier(.22,.61,.36,1);
  filter: blur(6px);
  will-change: opacity, transform;
}
.grd-reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .grd-reveal { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ── Editions gallery: rounded tiles on a cream panel ─────── */
.el-app .grd-prod.is-gallery { padding: clamp(20px, 3vw, 40px) clamp(16px, 3vw, 40px); background: #FDF8EF; }
.grd-prod.is-gallery .gedn-panel {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 40px);
  padding: clamp(22px, 2.6vw, 40px);
  background: #efebe0; border-radius: 26px;
}
.el-app .grd-prod.is-gallery .gedn-card { display: block; text-decoration: none; }
.grd-prod.is-gallery .gedn-photo {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  background-size: cover; background-position: center;
  border-radius: 12px; overflow: hidden;
  transition: transform 400ms cubic-bezier(.2,.7,.3,1), box-shadow 260ms ease;
}
.grd-prod.is-gallery .gedn-card:hover .gedn-photo {
  transform: translateY(-3px); box-shadow: 0 16px 34px rgba(9,20,14,.16);
}
.grd-prod.is-gallery .gedn-nm {
  display: block; margin-top: 18px;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(19px, 1.5vw, 25px); letter-spacing: -0.015em; color: #16241f;
}
@media (max-width: 780px) {
  .grd-prod.is-gallery .gedn-panel { grid-template-columns: 1fr; }
}

/* Banner strip: bands open one after another as the section scrolls in */
.grd-prod.is-strip.grd-reveal { filter: none; }
.grd-prod.is-strip.grd-reveal .grd-prod-card,
.grd-prod.is-strip.grd-reveal .grd-prod-title {
  opacity: 0;
  transform: translateY(22px) scale(.985);
  transition:
    opacity .66s cubic-bezier(.22,.61,.36,1),
    transform .78s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--bn-i, 0) * 110ms);
}
.grd-prod.is-strip.grd-reveal.is-in .grd-prod-card,
.grd-prod.is-strip.grd-reveal.is-in .grd-prod-title {
  opacity: 1;
  transform: none;
}
.grd-prod.is-strip .grd-prod-grid > *:nth-child(1) { --bn-i: 0; }
.grd-prod.is-strip .grd-prod-grid > *:nth-child(2) { --bn-i: 1; }
.grd-prod.is-strip .grd-prod-grid > *:nth-child(3) { --bn-i: 2; }
.grd-prod.is-strip .grd-prod-grid > *:nth-child(4) { --bn-i: 3; }
@media (prefers-reduced-motion: reduce) {
  .grd-prod.is-strip.grd-reveal .grd-prod-card,
  .grd-prod.is-strip.grd-reveal .grd-prod-title { opacity: 1; transform: none; transition: none; }
}

/* ── Rolling ticker bands (sources / models) ───────────────── */
.el-app .grd-tick {
  display: flex; align-items: center; gap: 22px;
  background: #191911;
  padding: 13px clamp(24px, 6vw, 96px);
  overflow: hidden;
}
.el-app .grd-tick.is-light {
  background: #f4f1e8;
  border-top: 1px solid rgba(25,25,17,.08);
  border-bottom: 1px solid rgba(25,25,17,.08);
}
.grd-tick .gt-label {
  flex-shrink: 0;
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(246,221,176,.6);
}
.grd-tick.is-light .gt-label { color: rgba(25,25,17,.5); }
.grd-tick .gt-marquee {
  position: relative; flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.grd-tick .gt-track {
  display: flex; align-items: center; width: max-content;
  animation: gt-scroll 40s linear infinite;
}
.grd-tick .gt-marquee:hover .gt-track { animation-play-state: paused; }
.grd-tick .gt-mark {
  display: flex; align-items: center; gap: 26px;
  padding-right: 26px;
  font-family: var(--font-display); font-size: 16.5px; letter-spacing: -0.01em;
  color: rgba(246,221,176,.62); white-space: nowrap;
}
.grd-tick.is-light .gt-mark { color: rgba(25,25,17,.62); }
.grd-tick .gt-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(246,221,176,.28); flex-shrink: 0;
}
.grd-tick.is-light .gt-dot { background: rgba(25,25,17,.2); }
@keyframes gt-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .grd-tick .gt-track { animation: none; }
}
@media (max-width: 720px) {
  .el-app .grd-tick { padding: 12px 20px; gap: 14px; }
  .grd-tick .gt-label { display: none; }
}

/* ============================================================
   VOICES — "What people are saying". Two columns, longer quotes.
   ============================================================ */
.el-app .grd-say {
  position: relative;
  background: radial-gradient(120% 100% at 20% 10%, #fbf5e9 0%, #f2e7d3 78%);
  padding: clamp(56px, 9vh, 110px) clamp(24px, 6vw, 96px);
}
.grd-say .gs-kicker {
  display: inline-block; font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #5d6b2f;
  margin-bottom: 16px;
}
.grd-say h2 {
  margin: 0 0 46px; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(32px, 3.2vw, 48px); line-height: 1.08; letter-spacing: -0.015em;
  color: #16241f;
}
.grd-say h2 em { font-style: italic; font-weight: 400; }
.grd-say .gs-cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
}
.grd-say .gs-col { display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 48px); }
.grd-say .gs-q {
  margin: 0; padding-top: 22px; border-top: 1px solid rgba(22,36,31,.2);
  opacity: 0; transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(.22,.61,.36,1), transform 620ms cubic-bezier(.22,.61,.36,1), filter 620ms ease;
  transition-delay: calc(var(--gs-i, 0) * 110ms);
}
.grd-say.gs-in .gs-q { opacity: 1; transform: none; }
.grd-say.gs-in .gs-q.is-out {
  opacity: 0; transform: translateY(-14px); filter: blur(3px);
  transition-delay: 0ms;
}
@media (prefers-reduced-motion: reduce) {
  .grd-say .gs-q { opacity: 1; transform: none; filter: none; transition: none; }
}
.grd-say .gs-q blockquote {
  margin: 0 0 20px; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; letter-spacing: -0.011em;
  color: #22322b; text-wrap: pretty;
}
.grd-say .gs-cite { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.grd-say .gs-who { font-size: 14px; font-weight: 600; color: #16241f; }
.grd-say .gs-role { font-size: 13.5px; color: #6c7a70; }
.grd-say .gs-ed {
  margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: #8a7a5e;
}
@media (max-width: 760px) {
  .grd-say .gs-cols { grid-template-columns: 1fr; gap: clamp(28px, 3.4vw, 48px); }
  .grd-say h2 { margin-bottom: 34px; }
  .grd-say .gs-ed { margin-left: 0; }
}

/* Banner-strip variant of the products row: same four cells, one
   band tall, title condensed to a single line + demo link. */
.el-app .grd-prod.is-strip .grd-prod-card { min-height: 168px; border: 0; border-top: 6px solid #191911; border-bottom: 6px solid #191911; }
.grd-prod.is-strip .grd-prod-title { border: 0; border-top: 6px solid #191911; border-bottom: 6px solid #191911; }
.grd-prod.is-strip .grd-prod-card::after {
  background: linear-gradient(0deg, rgba(18,9,3,.88) 0%, rgba(18,9,3,.5) 46%, rgba(18,9,3,.12) 100%);
}
.grd-prod.is-strip .grd-prod-cap { left: 20px; right: 16px; bottom: 18px; gap: 2px; }
.grd-prod.is-strip .grd-prod-cap .nm { font-size: 17px; }
.grd-prod.is-strip .grd-prod-cap .rl { font-size: 11.5px; }
.grd-prod.is-strip .grd-prod-title { padding: 22px 26px; justify-content: center; }
.grd-prod.is-strip .grd-prod-title h2 { font-size: clamp(21px, 1.6vw, 26px); margin: 0 0 5px; }
.grd-prod.is-strip .grd-prod-title p { font-size: 13px; margin: 0 0 14px; }
.grd-prod.is-strip .grd-prod-more { font-size: 10.5px; gap: 12px; }
.grd-prod.is-strip .grd-prod-more .circ { width: 30px; height: 30px; }
@media (max-width: 1100px) {
  .el-app .grd-prod.is-strip .grd-prod-card { min-height: 130px; }
}

/* ── Banner strip as a demo toggle ─────────────────────────── */
.grd-prod.is-strip .grd-prod-grid { transition: grid-template-columns 620ms cubic-bezier(.2,.75,.25,1); }
.grd-prod.is-strip .grd-prod-card--btn {
  border: 0; border-top: 6px solid #191911; border-bottom: 6px solid #191911; padding: 0; cursor: pointer; text-align: left;
  font: inherit; color: inherit; background: none;
}
.grd-prod.is-strip .grd-prod-sig {
  position: absolute; z-index: 5; left: 20px; bottom: 18px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255,246,235,.62);
  opacity: 0; transition: opacity 240ms ease;
}
.grd-prod.is-strip .grd-prod-card:hover .grd-prod-sig,
.grd-prod.is-strip .grd-prod-card.is-active .grd-prod-sig { opacity: 1; }
.grd-prod.is-strip .grd-prod-card:hover .grd-prod-cap,
.grd-prod.is-strip .grd-prod-card.is-active .grd-prod-cap { transform: translateY(-16px); }
.grd-prod.is-strip .grd-prod-cap { transition: transform 300ms cubic-bezier(.2,.75,.25,1); }

/* active cell: photo brightens, others recede */
.grd-prod.is-strip .grd-prod-card.is-active { border-color: var(--gold); }
.grd-prod.is-strip .grd-prod-card.is-active::after {
  background: linear-gradient(0deg, rgba(18,9,3,.8) 0%, rgba(18,9,3,.34) 52%, transparent 100%);
}
.grd-prod.is-strip .grd-prod-card.is-small .grd-prod-photo { filter: saturate(.55) brightness(.66); }
.grd-prod.is-strip .grd-prod-card.is-small .grd-prod-cap .rl { opacity: 0; }
.grd-prod.is-strip .grd-prod-card.is-small .grd-prod-cap .nm { font-size: 15px; }
.grd-prod.is-strip .grd-prod-title.is-small p,
.grd-prod.is-strip .grd-prod-title.is-small .grd-prod-more { display: none; }
.grd-prod.is-strip .grd-prod-title.is-small h2 { font-size: clamp(18px, 1.3vw, 22px); margin: 0; }

/* the demo panel, opened beneath the strip */
.grd-prod-demo { position: relative; animation: gp-open 520ms cubic-bezier(.2,.75,.25,1) both; }
@keyframes gp-open { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .grd-prod.is-strip .grd-prod-grid { grid-template-columns: 1fr !important; }
  .grd-prod.is-strip .grd-prod-card.is-small .grd-prod-photo { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .grd-prod-demo { animation: none; }
}

/* CTA revealed on the active banner card */
.grd-prod.is-strip .grd-prod-hit {
  position: absolute; inset: 0; z-index: 4; width: 100%;
  border: none; padding: 0; background: none; cursor: pointer; text-align: left;
}
.el-app .grd-prod-go {
  position: absolute; z-index: 6; right: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px; text-decoration: none;
  background: var(--gold); color: #191911;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: -0.005em;
  animation: gp-open 380ms cubic-bezier(.2,.75,.25,1) both;
  transition: background 160ms, transform 160ms;
}
.el-app .grd-prod-go:hover { background: #f6ddb0; transform: translateY(-1px); }

/* ── Banner contrast pass ──────────────────────────────────── */
/* Captions sit on a decisively dark base, not a mid-tone photo. */
.grd-prod.is-strip .grd-prod-card::after {
  background: linear-gradient(0deg, rgba(10,7,4,.94) 0%, rgba(10,7,4,.78) 38%, rgba(10,7,4,.3) 72%, transparent 100%);
}
.grd-prod.is-strip .grd-prod-card.is-active::after {
  background: linear-gradient(0deg, rgba(10,7,4,.92) 0%, rgba(10,7,4,.62) 46%, rgba(10,7,4,.18) 82%, transparent 100%);
}
.grd-prod.is-strip .grd-prod-card.is-small .grd-prod-photo { filter: saturate(.5) brightness(.5); }

.grd-prod.is-strip .grd-prod-cap .nm { color: #F3E7B4; text-shadow: 0 1px 12px rgba(10,7,4,.9); }
.grd-prod.is-strip .grd-prod-card.is-active .grd-prod-cap .nm { color: #FBEDBE; }
.grd-prod.is-strip .grd-prod-cap .rl {
  color: rgba(255,250,240,.96); font-size: 12px; text-shadow: 0 1px 10px rgba(10,7,4,.9);
}
.grd-prod.is-strip .grd-prod-card.is-small .grd-prod-cap .rl { opacity: .85; }
.grd-prod.is-strip .grd-prod-sig {
  font-size: 10px; color: rgba(255,250,240,.92);
  text-shadow: 0 1px 10px rgba(10,7,4,.9);
}

/* CTA: the gold token wasn't in scope here, so it was rendering
   dark-on-dark. Pin the values. */
.el-app .grd-prod-go,
.el-app .grd-prod-go:visited {
  background: #a8bf63; color: #17110A;
  box-shadow: 0 6px 20px rgba(10,7,4,.4);
  font-weight: 700; font-size: 13px; padding: 10px 16px;
}
.el-app .grd-prod-go:hover { background: #FBC46B; color: #17110A; }
.el-app .grd-prod-go svg { color: #17110A; }

/* CTA, restyled: a quiet underlined link on the dark scrim
   rather than a filled pill. */
.el-app .grd-prod-go,
.el-app .grd-prod-go:visited {
  background: none; box-shadow: none; border-radius: 0; padding: 0;
  right: 22px; bottom: 20px;
  color: rgba(255,250,240,.96); font-weight: 600; font-size: 13.5px;
  gap: 9px; letter-spacing: -0.005em;
  border-bottom: 1px solid rgba(255,250,240,.4);
  padding-bottom: 3px;
  text-shadow: 0 1px 10px rgba(10,7,4,.9);
}
.el-app .grd-prod-go:hover {
  background: none; color: #fff; border-bottom-color: #fff;
}
.el-app .grd-prod-go span { transition: transform 200ms cubic-bezier(.2,.75,.25,1); }
.el-app .grd-prod-go:hover span { transform: translateX(4px); }

/* keep the caption clear of the CTA on the active card */
.grd-prod.is-strip .grd-prod-card.is-active .grd-prod-cap { right: 140px; }
@media (max-width: 1100px) {
  .grd-prod.is-strip .grd-prod-card.is-active .grd-prod-cap { right: 130px; }
}

/* active card: caption drops back down now the label is gone,
   and sits on a soft pool of shadow for legibility */
.grd-prod.is-strip .grd-prod-card.is-active .grd-prod-cap { transform: none; }
.grd-prod.is-strip .grd-prod-card.is-active::after {
  background:
    radial-gradient(90% 130% at 8% 108%, rgba(10,7,4,.82) 0%, rgba(10,7,4,.4) 44%, transparent 72%),
    linear-gradient(0deg, rgba(10,7,4,.8) 0%, rgba(10,7,4,.44) 44%, rgba(10,7,4,.12) 78%, transparent 100%);
}

/* ============================================================
   SECURE AND COMPLIANT
   ============================================================ */
.el-app .grd-sec {
  background: #f4f1e8;
  border-top: 1px solid rgba(25,25,17,.08);
  border-bottom: 1px solid rgba(25,25,17,.08);
  padding: clamp(56px, 8vh, 104px) clamp(24px, 6vw, 96px);
}
.grd-sec .gsec-kicker {
  display: block; font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #5d6b2f;
  margin-bottom: 16px;
}
.grd-sec .gsec-sub {
  margin: 0 0 clamp(30px, 3.4vw, 44px); max-width: 58ch;
  font-size: 15.5px; line-height: 1.6; color: #22322b; text-wrap: pretty;
}
.grd-sec .gsec-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; max-width: 1240px;
}
.grd-sec .gsec-card {
  display: flex; flex-direction: column; gap: 13px;
  min-height: 0; padding: 18px 18px 20px;
  border: 1px solid rgba(25,25,17,.12); border-radius: 18px;
  background: rgba(255,255,255,.42);
  transition: background 180ms ease, border-color 180ms ease;
}
.grd-sec .gsec-card:hover { background: rgba(255,255,255,.8); border-color: rgba(25,25,17,.22); }
.grd-sec .gsec-card h3 {
  margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 500;
  letter-spacing: -0.015em; color: #16241f;
}
.grd-sec .gsec-card p {
  margin: 0; font-size: 13.5px; line-height: 1.5; color: #6c7a70; text-wrap: pretty;
}
.grd-sec .gsec-glyph { margin-top: 14px; color: #5d6b2f; }
.grd-sec .gsec-glyph svg { width: 46px; height: 46px; display: block; }
.grd-sec .gsec-glyph-txt {
  font-family: var(--font-mono); font-size: 6.6px; letter-spacing: .03em;
  fill: currentColor; stroke: none;
}
@media (max-width: 820px) {
  .grd-sec .gsec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .grd-sec .gsec-grid { grid-template-columns: 1fr; }
}
.grd-sec .gsec-ast { font-size: .85em; color: #5d6b2f; }
.grd-sec .gsec-foot {
  max-width: 78ch; margin: clamp(20px, 2.4vw, 28px) 0 0;
  font-size: 12.5px; line-height: 1.6; color: #5c6a60; text-wrap: pretty;
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.el-app .grd-faq {
  background: #FDF8EF;
  padding: clamp(55px, 6.8vw, 95px) clamp(16px, 3vw, 40px) clamp(40px, 5vw, 68px);
}
.grd-faq h2 {
  margin: 0 0 clamp(34px, 3.8vw, 51px);
  text-align: center;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(24px, 2.2vw, 32px); line-height: 1.05;
  letter-spacing: -0.02em; color: #16241f;
}
.grd-faq .gfaq-sub {
  margin: -22px auto clamp(30px, 3.4vw, 44px); max-width: 56ch;
  text-align: center; font-size: clamp(14px, 1.1vw, 15.5px); line-height: 1.6;
  color: rgba(22,36,31,.72); text-wrap: pretty;
}
.grd-faq .gfaq-list {
  max-width: 880px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 13px;
}
.grd-faq .gfaq-item {
  border: 1px solid rgba(22,36,31,.16);
  border-radius: 16px;
  background: rgba(255,255,255,.28);
  transition: border-color 160ms ease, background 160ms ease;
}
.grd-faq .gfaq-item:hover { border-color: rgba(22,36,31,.3); }
.grd-faq .gfaq-item.is-open { border-color: rgba(22,36,31,.26); }
.el-app .grd-faq .gfaq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 27px 24px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.4;
  font-weight: 500; color: #16241f;
}
.grd-faq .gfaq-mark {
  position: relative; flex: 0 0 auto; width: 15px; height: 15px;
}
.grd-faq .gfaq-mark::before,
.grd-faq .gfaq-mark::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px;
  background: #16241f; transform: translateY(-50%);
  transition: transform 200ms ease, opacity 200ms ease;
}
.grd-faq .gfaq-mark::after { transform: translateY(-50%) rotate(90deg); }
.grd-faq .is-open .gfaq-mark::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.grd-faq .gfaq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 240ms ease;
}
.grd-faq .is-open .gfaq-a { grid-template-rows: 1fr; }
.grd-faq .gfaq-a > p {
  overflow: hidden; margin: 0;
  padding: 0 76px 0 26px;
  font-size: 15px; line-height: 1.6; color: #4a564e; text-wrap: pretty;
  opacity: 0; transition: opacity 200ms ease, padding 240ms ease;
}
.grd-faq .is-open .gfaq-a > p { opacity: 1; padding-bottom: 30px; }
@media (max-width: 780px) {
  .el-app .grd-faq .gfaq-q { padding: 18px 20px; gap: 16px; }
  .grd-faq .gfaq-a > p { padding-left: 20px; padding-right: 24px; }
}

/* ============================================================
   CLOSING CTA BAND
   ============================================================ */
.el-app .grd-cta-band {
  background: #FDF8EF;
  padding: 3px 0 clamp(16px, 2vw, 24px);
}
.grd-cta-band .gcta-plate {
  position: relative; display: flex; align-items: flex-end;
  width: 99%; margin-inline: auto;
  min-height: clamp(380px, 46vw, 620px);
  border-radius: 22px; overflow: hidden;
  background-size: cover; background-position: center 62%;
  /* WebP derivatives (scripts/optimize_marketing_images.py); the original JPEG
     stays the fallback for browsers without image-set() type(). */
  background-image: url("/assets/garden/cta-monet-bassin.jpg");
  background-image: -webkit-image-set(url("/assets/opt/cta-monet-bassin-1600.webp") 1x, url("/assets/opt/cta-monet-bassin-2233.webp") 2x);
  background-image: image-set(url("/assets/opt/cta-monet-bassin-1600.webp") type("image/webp") 1x, url("/assets/opt/cta-monet-bassin-2233.webp") type("image/webp") 2x, url("/assets/garden/cta-monet-bassin.jpg") type("image/jpeg") 1x);
  padding: 0 0 clamp(46px, 7vw, 96px);
}
.grd-cta-band .gcta-card {
  position: relative; width: 90%; max-width: none; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(230px, .65fr);
  gap: clamp(24px, 4vw, 72px); align-items: start;
  background: #f8f5ee; border-radius: 18px;
  padding: clamp(28px, 3.2vw, 46px) clamp(26px, 3.4vw, 52px);
  box-shadow: 0 26px 60px rgba(9,20,14,.28);
}
.grd-cta-band .gcta-card h2 {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(30px, 3.4vw, 50px); line-height: 1.04; letter-spacing: -0.025em;
  color: #16241f; text-wrap: balance;
}
.grd-cta-band .gcta-side { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.grd-cta-band .gcta-side p {
  margin: 0; font-size: 15px; line-height: 1.55; color: #22322b; text-wrap: pretty;
}
.el-app .grd-cta-band .gcta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 12px;
  background: #4f6b25; color: #f8f5ee;
  font-size: 15px; font-weight: 500; text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}
.el-app .grd-cta-band .gcta-btn:hover { background: #3f571d; transform: translateY(-1px); }
.grd-cta-band .gcta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.el-app .grd-cta-band .gcta-btn--quiet {
  background: transparent; color: #16241f; border: 1px solid rgba(22,36,31,.14);
}
.el-app .grd-cta-band .gcta-btn--quiet:hover { background: transparent; }
@media (max-width: 780px) {
  .grd-cta-band .gcta-card { grid-template-columns: 1fr; }
  .grd-cta-band .gcta-plate { background-position: center 70%; padding-bottom: 28px; }
}

/* ============================================================
   V2 — FRAMED HERO. The painting is cropped into a contained
   rounded panel; the live counters move to the cream band below,
   where the numbers read sharp instead of fighting the brushwork.
   ============================================================ */
.grd.grd--framed {
  min-height: 100vh; box-sizing: border-box; overflow: visible;
  display: flex; flex-direction: column;
  background: #FDF8EF;
  color: var(--ink2);
  padding: var(--site-header-h, 62px) 0 0;
}
/* The site art card (/site-chrome.css): side gutter + rounded bottom. */
.grd--framed .grd-frame {
  position: relative; flex: 1 1 auto;
  width: auto; max-width: none; margin: 0 var(--site-frame-gutter, max(6px, .5vw));
  aspect-ratio: auto; min-height: 300px;
  border-radius: 0 0 var(--site-frame-radius, 24px) var(--site-frame-radius, 24px); overflow: hidden;
  background: #2a1608; color: #fff;
  box-shadow: none;
}
.grd--framed .grd-trust { flex: 0 0 auto; }
.grd--framed .grd-photo { object-position: 50% 50%; }

/* tighter scrim — just enough behind the headline */
.grd--framed .grd-scrim {
  background:
    radial-gradient(ellipse 55% 78% at 14% 82%, rgba(16,22,12,.72) 0%, transparent 66%),
    linear-gradient(0deg, rgba(16,22,12,.38) 0%, transparent 42%);
}

/* Painting credit (same look as the About page's .ab-credit: a small blurred
   blob behind it instead of a box). Bottom-left under the copy, because the
   composer's privacy pill hangs into the bottom-right corner. */
.grd-credit {
  position: absolute; z-index: 9; left: 5.5%; bottom: 12px; isolation: isolate;
  font-size: 11px; letter-spacing: .04em; color: rgba(255,248,238,.86);
}
.grd-credit::before {
  content: ""; position: absolute; z-index: -1; inset: 2px 0; border-radius: 50%; pointer-events: none;
  background: rgba(8,12,10,.5); filter: blur(12px);
}

.grd--framed .grd-copy { left: 5.5%; bottom: 13%; max-width: 560px; }
.grd--framed .grd-copy h1 {
  font-size: clamp(44px, 4.8vw, 68px); font-weight: 500; line-height: 1; letter-spacing: -1.8px;
  margin-bottom: 6px;
}
.grd--framed .grd-copy p { font-size: 17px; margin-bottom: 0; max-width: none; }
.grd-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  letter-spacing: 0.01em; text-decoration: none;
  padding: 12px 24px; border-radius: 11px; border: 1px solid transparent;
  transition: background .18s, color .18s, border-color .18s;
}
.grd--framed .grd-copy .grd-btn-primary { background: #4A641F; color: #f8f0e4; }
.grd--framed .grd-copy .grd-btn-primary:hover { background: #3B5119; color: #fff; }
.grd--framed .grd-copy .grd-btn-ghost { color: #fff6eb; }
.grd-btn-ghost {
  color: rgba(255,246,235,.95); border-color: rgba(255,246,235,.55);
  backdrop-filter: blur(4px);
}
.grd-btn-ghost:hover { border-color: #fff6eb; background: rgba(255,246,235,.12); color: #fff; }
.grd--framed .grd-scroll { display: none; }

/* Hero row: copy on the left, the Ask composer (/hero-composer.css) on the
   right. They share one bottom line, so the composer card ends level with
   the subtitle; the privacy pill hangs below that line. */
.grd-hero-row {
  position: absolute; z-index: 10; left: 5.5%; right: 5.5%; bottom: 13%;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
}
.grd--framed .grd-hero-row .grd-copy {
  position: static; flex: 0 1 auto; min-width: 0; max-width: 560px;
}
.grd-hero-composer { flex: 0 0 auto; width: 580px; }
.grd-hero-composer .hc-pill {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin: 14px 0 0; white-space: nowrap;
}
@media (max-width: 1240px) {
  .grd-hero-row { gap: 32px; }
  .grd-hero-composer { width: min(580px, 52%); }
}
/* Narrow windows: copy above composer, in a taller card so both fit. */
@media (max-width: 900px) {
  .grd--framed .grd-frame { min-height: 600px; }
  .grd-hero-row {
    left: 7%; right: 7%; bottom: calc(9% + 44px);
    flex-direction: column; align-items: flex-start; gap: 22px;
  }
  .grd-hero-composer { width: min(580px, 100%); }
  .grd-credit { left: 7%; }
}

/* Entrance, once per page view (.hc-intro is never set for reduced motion):
   headline rises and the subtitle fades; the composer lands with them. */
html.hc-intro:not(.hc-intro-done) .grd-hero-row .grd-copy h1 {
  animation: grd-hero-rise .6s cubic-bezier(.2,.7,.3,1) .2s both;
}
html.hc-intro:not(.hc-intro-done) .grd-hero-row .grd-copy p {
  animation: grd-hero-fade .6s ease .25s both;
}
@keyframes grd-hero-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes grd-hero-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.hc-intro .grd-hero-row .grd-copy h1,
  html.hc-intro .grd-hero-row .grd-copy p { animation: none; }
}

/* counters on the cream band */
.grd--framed .grd-stats {
  max-width: 1180px; margin: 0 auto; padding: 34px 28px 44px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px;
}
.grd--framed .grd-stats .gst { padding-top: 0; }
.grd--framed .grd-stats .gst-v {
  font-size: 44px; color: var(--ink2); text-shadow: none;
}
.grd--framed .grd-stats .gst-v .u { color: rgba(22,36,31,.6); }
.grd--framed .grd-stats .gst-l {
  font-size: 10.5px; color: rgba(22,36,31,.55); letter-spacing: .12em;
}

@media (max-width: 900px) {
  .grd.grd--framed { min-height: 0; display: block; }
  .grd--framed .grd-frame { aspect-ratio: 1.15; min-height: 0; }
  .grd--framed .grd-copy { left: 7%; right: 7%; bottom: 9%; }
  .grd--framed .grd-stats { column-gap: 18px; padding: 26px 4px 34px; }
  .grd--framed .grd-stats .gst-v { font-size: 30px; }
}

/* Voices as a compact strip inside the framed hero band: three short quotes
   on the counters' grid, so hero + numbers + voices read as one screen. */
.el-app .grd-say.is-strip {
  background: none;
  max-width: 1180px; margin: 0 auto;
  padding: 0 28px 40px;
  display: grid; gap: 16px;
}
.grd-say.is-strip .gs-kicker { margin: 0; font-size: 10.5px; letter-spacing: .12em; color: rgba(22,36,31,.5); }
.grd-say.is-strip .gs-cols {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.grd-say.is-strip .gs-q { padding-top: 16px; border-top: 1px solid rgba(22,36,31,.16); }
.grd-say.is-strip .gs-q blockquote {
  margin: 0 0 12px; font-size: 15px; line-height: 1.45;
}
.grd-say.is-strip .gs-who { font-size: 12.5px; }
.grd-say.is-strip .gs-role { font-size: 12px; }

/* source-logo row on the cream band */
.grd-trust {
  max-width: 1180px; margin: 0 auto; padding: 18px 28px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.grd-trust .gtr-label {
  margin: 0;
  font-size: 10.5px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(22,36,31,.63);
}
.grd-trust { position: relative; height: 336px; width: 100%; box-sizing: border-box; }
.grd-trust .gtr-sources {
  position: absolute; top: 40px; left: 28px; right: 28px;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  opacity: 1; transition: opacity .3s ease;
}
.grd-trust.is-expanded .gtr-sources { opacity: 0; pointer-events: none; }
.grd-trust .gtr-stack {
  position: absolute; top: 162px; left: 28px; right: 28px;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  transform: none; transition: transform .42s cubic-bezier(.22,.61,.36,1);
}
.grd-trust.is-expanded .gtr-stack { transform: translateY(-89px); }
.grd-trust .gtr-label-2 { margin-top: 0; }
.grd-trust .gtr-sec {
  width: 100%; max-width: 1180px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
  text-align: center;
}
.grd-trust .gtr-seccard { display: flex; flex-direction: column; align-items: center; }
.grd-trust .gtr-secbtn {
  appearance: none; border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; font: inherit; color: inherit;
  transition: opacity .25s ease;
}
.grd-trust.is-expanded .gtr-seccard .gtr-secbtn { opacity: 1; }
.grd-trust .gtr-secbtn:hover { opacity: 1; }
.grd-trust .gtr-seccard h3 {
  margin: 10px 0 0; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em;
  color: #545750; transition: color .25s ease;
}
.grd-trust .gtr-secbtn:hover h3,
.grd-trust.is-expanded .gtr-seccard h3 { color: #454A44; }
.grd-trust .gtr-secdetail {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .42s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
.grd-trust .gtr-secdetail > p { overflow: hidden; }
.grd-trust.is-expanded .gtr-secdetail {
  grid-template-rows: 1fr; opacity: 1;
}
.grd-trust .gtr-seccard p {
  margin: 6px 0 0; max-width: 32ch; font-size: 11.5px; line-height: 1.5;
  color: #6c7a70; text-wrap: pretty;
}
.grd-trust .gtr-seal { margin-top: 0; color: #62655E; --seal-plate: #FDF8EF;
  transition: color .25s ease; }
.grd-trust .gtr-secbtn:hover .gtr-seal,
.grd-trust.is-expanded .gtr-seal { color: #454A44; }
.grd-trust .gtr-seal svg { width: 52px; height: 52px; display: block; stroke-width: 2.1; }
.gtr-seal-txt {
  font-family: var(--font-mono); font-size: 7.2px; letter-spacing: .02em;
  fill: currentColor; stroke: none;
}
@media (max-width: 900px) {
  .grd-trust { height: auto; padding: 24px 18px 30px; gap: 14px;
    display: flex; flex-direction: column; align-items: center; }
  .grd-trust .gtr-sources { position: static; left: auto; right: auto; width: 100%; }
  .grd-trust.is-expanded .gtr-sources { display: none; }
  .grd-trust .gtr-stack { position: static; left: auto; right: auto; width: 100%; transform: none; }
  .grd-trust.is-expanded .gtr-stack { transform: none; }
  .grd-trust .gtr-label-2 { margin-top: 10px; }
  .grd-trust .gtr-sec { grid-template-columns: 1fr; gap: 28px; }
}

/* counters tighten so the whole first screen fits */
.grd--framed .grd-stats { padding: 26px 28px 26px; }
.grd--framed .grd-frame { max-height: none; }

@media (max-width: 900px) {
  .el-app .grd-say.is-strip { padding: 0 4px 36px; }
  .grd-say.is-strip .gs-cols { grid-template-columns: 1fr; gap: 22px; }
  .grd--framed .grd-frame { max-height: none; }
}

/* Citation graph + benchmark share one painting */
.gcombo-art { display: flex; flex-direction: column; gap: clamp(28px, 3.5vw, 64px); }
.gcombo-art > .ggm-artbg { background-position: 50% 50%; }

/* ══ Pricing — Free / Pro / Team ══ */
.gpr-art {
  position: relative; overflow: hidden; background: #FDF8EF;
  padding: clamp(48px, 5vw, 84px) clamp(14px, 3vw, 48px);
}
.gpr-artbg {
  position: absolute; inset: 12px; border-radius: 26px;
  background-size: cover; background-position: 50% 50%;
  animation: ggm-artdrift 58s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .gpr-artbg { animation: none; } }
.grd-show--pricing {
  position: relative; z-index: 2;
  width: 100%; max-width: 1360px; margin: 0 auto;
  padding: clamp(30px, 3.4vw, 52px) clamp(14px, 2vw, 34px);
}
.grd-show--pricing h2 {
  margin: 0 0 22px; text-align: center; color: #fff8ee;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(30px, 3.2vw, 46px); line-height: 1.04; letter-spacing: -0.025em;
  text-shadow: 0 2px 18px rgba(18,9,3,.45);
}
.grd-show--pricing .gpr-toggle {
  display: flex; justify-content: center; gap: 4px;
  width: max-content; margin: 0 auto clamp(30px, 3.4vw, 46px);
  padding: 4px; border-radius: 999px;
  background: rgba(253,248,239,.96); border: 1px solid rgba(22,36,31,.12);
  box-shadow: 0 12px 30px rgba(18,9,3,.2);
}
.el-app .grd-show--pricing .gpr-toggle button {
  border: 0; cursor: pointer; background: none;
  padding: 9px 20px; border-radius: 999px;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; color: #6c7a70;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.el-app .grd-show--pricing .gpr-toggle button:hover { color: #16241f; }
.el-app .grd-show--pricing .gpr-toggle button.is-on {
  background: rgba(22,36,31,.08); color: #16241f;
}
.grd-show--pricing .gpr-save { color: #5d6b2f; font-weight: 600; }
.grd-show--pricing .gpr-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; max-width: 1240px; margin: 0 auto;
}
.grd-show--pricing .gpr-card {
  display: flex; flex-direction: column;
  border-radius: 20px; border: 1px solid rgba(255,248,238,.22);
  background: rgba(253,248,239,.96);
  box-shadow: 0 20px 46px rgba(18,9,3,.26);
  overflow: hidden;
}
.grd-show--pricing .gpr-card.is-feature { background: #fff; }
.grd-show--pricing .gpr-top {
  position: relative;
  padding: clamp(24px, 2.4vw, 32px);
  border-bottom: 1px solid rgba(22,36,31,.12);
}
.grd-show--pricing .gpr-flag {
  position: absolute; top: clamp(24px, 2.4vw, 32px); right: clamp(24px, 2.4vw, 32px);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #5d6b2f;
}
.grd-show--pricing .gpr-card h3 {
  margin: 0 0 6px; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(24px, 2.1vw, 30px); letter-spacing: -0.02em; color: #16241f;
}
.grd-show--pricing .gpr-sub { margin: 0 0 26px; font-size: 14px; line-height: 1.5; color: #6c7a70; }
.grd-show--pricing .gpr-price {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  min-height: 46px; margin-bottom: 22px;
}
.grd-show--pricing .gpr-amt {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 3.2vw, 46px); line-height: 1; letter-spacing: -0.03em;
  color: #16241f; font-variant-numeric: tabular-nums;
}
.grd-show--pricing .gpr-unit { font-size: 12.5px; line-height: 1.4; color: #6c7a70; max-width: 15ch; }
.el-app .grd-show--pricing .gpr-cta {
  display: flex; align-items: center; justify-content: center;
  padding: 13px 20px; border-radius: 12px; text-decoration: none;
  background: #16241f; color: #FDF8EF; border: 1px solid #16241f;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  transition: background 160ms ease, color 160ms ease;
}
.el-app .grd-show--pricing .gpr-cta:hover { background: #22322b; color: #fff; }
.el-app .grd-show--pricing .gpr-cta.is-ghost {
  background: none; color: #16241f; border-color: rgba(22,36,31,.28);
}
.el-app .grd-show--pricing .gpr-cta.is-ghost:hover { background: rgba(22,36,31,.06); color: #16241f; }
.grd-show--pricing .gpr-list { padding: clamp(22px, 2.2vw, 30px) clamp(24px, 2.4vw, 32px); }
.grd-show--pricing .gpr-listhead { margin: 0 0 16px; font-size: 13.5px; color: #16241f; font-weight: 500; }
.grd-show--pricing .gpr-list ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.grd-show--pricing .gpr-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; line-height: 1.45; color: #3a4a43; text-wrap: pretty;
}
.grd-show--pricing .gpr-check { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; color: #5d6b2f; }
.grd-show--pricing .gpr-foot {
  max-width: 70ch; margin: clamp(26px, 3vw, 38px) auto 0; text-align: center;
  font-size: 12.5px; line-height: 1.6; color: rgba(255,248,238,.78);
}
@media (max-width: 1000px) { .grd-show--pricing .gpr-grid { grid-template-columns: 1fr; max-width: 520px; } }

.grd-show--pricing .gpr-toggle--sm {
  margin: -12px 0 20px; width: max-content;
}
.el-app .grd-show--pricing .gpr-toggle--sm button { padding: 7px 14px; font-size: 12.5px; }

.grd-show--pricing .gpr-toggle--corner {
  position: absolute; top: clamp(20px, 2vw, 26px); right: clamp(20px, 2vw, 26px);
  margin: 0; padding: 3px; z-index: 2;
}
.el-app .grd-show--pricing .gpr-toggle--corner button { padding: 5px 10px; font-size: 11px; }

.grd-show--pricing .gpr-card:last-child .gpr-amt { font-size: clamp(26px, 2.3vw, 34px); }

.grd-show--pricing { color: #16241f; }

/* Citation graph block — pricing-style head above the graph card */
.el-app .grd-graph-block {
  background: #FDF8EF;
  padding: clamp(70px, 8vw, 120px) 0 clamp(30px, 4vw, 56px);
}
.el-app .grd-graph-block .gp2-head {
  width: calc(100% - clamp(14px, 3vw, 48px) - clamp(14px, 3vw, 48px));
  margin-bottom: clamp(8px, 1vw, 14px);
}

.el-app .grd-graph-block { padding-bottom: 0; }
.el-app .grd-graph-block + .gp2-hero.is-embedded { padding-top: clamp(28px, 3vw, 48px); }

.grd-trust .gtr-sec {grid-template-columns:repeat(4,minmax(0,1fr));}
.gtr-aws-mark {font:600 30px/1.4 Arial,sans-serif;letter-spacing:-1px;}
@media(max-width:780px){.grd-trust .gtr-sec{grid-template-columns:1fr;}}

.gtr-zdr-mark {display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1.4px solid currentColor;border-radius:12px;font-size:12px;font-weight:600;letter-spacing:.06em;}

/* Match the understated source row while retaining the unified glyphs. */
.grd-trust .gtr-seal svg {width:52px;height:52px;}

/* ============================================================
   TRUSTED BY — schools by their short names, which grow into the
   full name on hover or keyboard focus (the rest of each word
   is tucked between the initials), then the firm's logo.
   ============================================================ */
.grd-trust .gtr-who {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 18px clamp(56px, 7vw, 96px); list-style: none; margin: 0; padding: 0;
}
.grd-trust .gtr-who > li { display: flex; align-items: center; }
.grd-trust .gtr-school {
  appearance: none; border: 0; background: none; padding: 0; margin: 0; cursor: default;
  font-family: var(--font-display); font-weight: 600; font-size: 38px; line-height: 1;
  letter-spacing: .02em; color: #6b685f; white-space: nowrap; transition: color .2s ease;
}
.grd-trust .gtr-school-rest {
  display: inline-block; max-width: 0; opacity: 0; overflow: hidden;
  vertical-align: bottom; white-space: pre; font-weight: 500;
  transition: max-width .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
.grd-trust .gtr-school:hover,
.grd-trust .gtr-school:focus { color: #3f3c36; }
.grd-trust .gtr-school:hover .gtr-school-rest,
.grd-trust .gtr-school:focus .gtr-school-rest { max-width: 9em; opacity: 1; }
.grd-trust .gtr-school:focus { outline: none; }
.grd-trust .gtr-school:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 6px; border-radius: 4px; }
.grd-trust .gtr-firm { display: block; width: auto; height: 60px; }
@media (prefers-reduced-motion: reduce) {
  .grd-trust .gtr-school-rest { transition: none; }
}
@media (max-width: 900px) {
  .grd-trust .gtr-school { font-size: 30px; }
  .grd-trust .gtr-firm { height: 48px; }
}

/* ============================================================
   CITATION GRAPH SECTION — Obsidian-style corpus graph.
   ============================================================ */
.ggm {
  position: relative;
  min-height: 92vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; isolation: isolate;
  font-family: var(--font-sans);
}
.ggm-stage { position: absolute; inset: 0; z-index: 1; }
.ggm-canvas { display: block; width: 100%; height: 100%; }
.ggm-layer { position: absolute; inset: 0; animation: ggm-layer-in .9s ease both; }
.ggm-layer.out { animation: ggm-layer-out 1.1s ease both; pointer-events: none; }
@keyframes ggm-layer-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ggm-layer-out { from { opacity: 1; } to { opacity: 0; } }
.ggm-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* copy overlaid top-left */
.ggm-copy {
  position: absolute; top: clamp(48px, 9vh, 96px); left: clamp(24px, 6vw, 96px);
  z-index: 3; max-width: 560px; pointer-events: none;
}
.ggm-kicker {
  display: inline-block; font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 16px;
}
.ggm-copy h2 {
  margin: 0 0 16px; font-family: var(--font-display);
  font-size: clamp(34px, 3.4vw, 50px); line-height: 1.08;
  font-weight: 500; letter-spacing: -0.015em;
}
.ggm-copy h2 em { font-style: italic; font-weight: 400; }
.ggm-copy p { margin: 0; font-size: 15.5px; line-height: 1.6; max-width: 46ch; }

/* state switcher */
.ggm-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; pointer-events: auto; }
.ggm-switch button {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  padding: 7px 15px; border-radius: 999px; border: 1px solid transparent;
  background: transparent; cursor: pointer; letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color .18s, background .18s, border-color .18s;
}

/* count-up stats along the bottom */
.ggm-stats {
  position: relative; z-index: 3; pointer-events: none;
  display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 80px);
  padding: 0 clamp(24px, 6vw, 96px) clamp(36px, 6vh, 60px);
  max-width: 62%;
}
.ggm-stat { display: flex; flex-direction: column; gap: 4px; }
.ggm-stat .n {
  font-family: var(--font-display); font-size: clamp(30px, 2.8vw, 42px);
  font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.ggm-stat .l { font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; }

/* mock chrome */
.ggm-badge {
  position: absolute; top: 18px; left: 18px; z-index: 5;
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 8px;
}
.ggm-note {
  position: absolute; top: 22px; right: 22px; z-index: 5;
  font-size: 12.5px; font-weight: 500; opacity: 0.75;
}

/* ── Themes ────────────────────────────────────────────────── */
.ggm.th-dark {
  background: radial-gradient(120% 90% at 70% 20%, #131c1e 0%, #0b100f 70%);
  color: #f0e9d8;
}
.ggm.th-dark .ggm-kicker { color: #f5c76a; }
.ggm.th-dark .ggm-copy p { color: #b9c6bd; }
.ggm.th-dark .ggm-stat .l { color: #8fa398; }
.ggm.th-dark .ggm-scrim {
  background:
    radial-gradient(ellipse 52% 55% at 22% 24%, rgba(6,10,9,.72) 0%, transparent 68%),
    linear-gradient(0deg, rgba(6,10,9,.55) 0%, transparent 26%);
}
.ggm.th-dark .ggm-badge { background: #f5c76a; color: #0b100f; }
.ggm.th-dark .ggm-note { color: #8fa398; }
.ggm.th-dark .ggm-switch button { color: #b9c6bd; border-color: rgba(200,215,205,.28); }
.ggm.th-dark .ggm-switch button:hover { color: #f0e9d8; border-color: rgba(245,199,106,.55); }
.ggm.th-dark .ggm-switch button.on { background: #f5c76a; border-color: #f5c76a; color: #0b100f; }

.ggm.th-parchment {
  background: radial-gradient(120% 90% at 30% 15%, #fdf7ec 0%, #f4e9d6 75%);
  color: #16241f;
}
.ggm.th-parchment .ggm-kicker { color: #5d6b2f; }
.ggm.th-parchment .ggm-copy p { color: #4a564e; }
.ggm.th-parchment .ggm-stat .l { color: #6c7a70; }
.ggm.th-parchment .ggm-scrim {
  background:
    radial-gradient(ellipse 52% 55% at 22% 24%, rgba(252,246,235,.85) 0%, transparent 68%),
    linear-gradient(0deg, rgba(250,243,229,.8) 0%, transparent 26%);
}
.ggm.th-parchment .ggm-badge { background: #16241f; color: #f8f0e4; }
.ggm.th-parchment .ggm-note { color: #6c7a70; }
.ggm.th-parchment .ggm-switch button { color: #4a564e; border-color: rgba(22,36,31,.28); }
.ggm.th-parchment .ggm-switch button:hover { color: #16241f; border-color: rgba(93,107,47,.6); }
.ggm.th-parchment .ggm-switch button.on { background: #16241f; border-color: #16241f; color: #f8f0e4; }

.ggm.th-forest {
  background: radial-gradient(120% 90% at 70% 20%, #1c3028 0%, #12211b 70%);
  color: #f2ecdc;
}
.ggm.th-forest .ggm-kicker { color: #a8bf63; }
.ggm.th-forest .ggm-copy p { color: #c2d2c4; }
.ggm.th-forest .ggm-stat .l { color: #97ab9b; }
.ggm.th-forest .ggm-scrim {
  background:
    radial-gradient(ellipse 52% 55% at 22% 24%, rgba(10,20,15,.7) 0%, transparent 68%),
    linear-gradient(0deg, rgba(10,20,15,.55) 0%, transparent 26%);
}
.ggm.th-forest .ggm-badge { background: #a8bf63; color: #12211b; }
.ggm.th-forest .ggm-note { color: #97ab9b; }
.ggm.th-forest .ggm-switch button { color: #c2d2c4; border-color: rgba(207,224,213,.26); }
.ggm.th-forest .ggm-switch button:hover { color: #f2ecdc; border-color: rgba(168,191,99,.55); }
.ggm.th-forest .ggm-switch button.on { background: #a8bf63; border-color: #a8bf63; color: #12211b; }

/* hover-pill sub switcher — pinned top-right, out of the copy column */
.ggm-switch-sub {
  position: absolute; z-index: 4;
  top: clamp(48px, 9vh, 96px); right: clamp(24px, 6vw, 96px);
  margin-top: 0; align-items: center; gap: 6px; justify-content: flex-end; max-width: 320px;
}
.ggm-switch-sub button { font-size: 11.5px; padding: 5px 11px; font-weight: 500; }
.ggm-switch-lab { font-family: var(--font-sans); font-size: 11.5px; opacity: .6; margin-right: 4px; }
.ggm-switch-sub .ggm-replay { margin-left: 10px; opacity: .85; }

@media (max-width: 760px) {
  .ggm { min-height: 78vh; }
  .ggm-switch-sub { position: static; margin: 0 clamp(24px,6vw,96px) 0; justify-content: flex-start; max-width: none; padding-top: 18px; }
  .ggm-copy { max-width: calc(100vw - 48px); }
  .ggm-stats { gap: 22px 34px; }
}

/* ── Jurisdiction index — bottom-right, reads as a list not pills ── */
.ggm-juris {
  position: absolute; z-index: 4;
  right: clamp(24px, 6vw, 96px); bottom: clamp(34px, 6vh, 58px);
  pointer-events: auto;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 1px; min-width: 248px; width: max-content; text-align: right;
}
.ggm-juris-lab {
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  opacity: .5; margin-bottom: 10px;
}
.ggm-juris button {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 14px;
  font-family: var(--font-sans); background: transparent;
  border: 0; border-top: 1px solid currentColor;
  padding: 9px 0 8px; cursor: pointer; color: inherit;
  opacity: .42; transition: opacity .18s ease, padding .18s ease;
}
.ggm-juris button:last-of-type { border-bottom: 1px solid currentColor; }
.ggm-juris button.fed .nm { font-style: italic; }
.ggm-juris button.fed { padding-right: 11px; }
.ggm-juris-search {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; padding: 7px 10px;
  border: 1px solid currentColor; border-radius: 3px; opacity: .55;
  transition: opacity .18s ease;
}
.ggm-juris-search:focus-within { opacity: .95; }
.ggm-juris-search svg { width: 13px; height: 13px; flex-shrink: 0; opacity: .8; }
.ggm-juris-search input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
  color: inherit; font-family: var(--font-sans); font-size: 12.5px;
  letter-spacing: 0.01em;
}
.ggm-juris-search input::placeholder { color: currentColor; opacity: .55; }
.ggm-juris-empty {
  font-family: var(--font-sans); font-size: 12px; opacity: .5;
  padding: 10px 0 0;
}
.ggm-juris button:hover { opacity: .8; }
.ggm-juris button.on { opacity: 1; }
.ggm-juris button .nm {
  font-family: var(--font-display); font-size: 17px; letter-spacing: -0.01em;
  white-space: nowrap;
}
.ggm-juris button.on .nm { font-weight: 500; }
.ggm-juris button .ct {
  font-family: var(--font-mono); font-size: 10.5px; opacity: .65;
  min-width: 74px; text-align: right; font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .ggm-stats { max-width: none; }
  .ggm-juris { position: relative; right: auto; bottom: auto; margin: 0 clamp(24px,6vw,96px) 22px auto; }
}

/* scrolling state list under the pinned federal row */
.ggm-juris-scroll {
  display: flex; flex-direction: column; gap: 1px;
  max-height: 168px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: currentColor transparent;
  scrollbar-gutter: stable;
  padding-bottom: 2px;
}
.ggm-juris-scroll::-webkit-scrollbar { width: 3px; }
.ggm-juris-scroll::-webkit-scrollbar-thumb { background: currentColor; opacity: .3; }
.ggm-juris-scroll button:last-of-type { border-bottom: 1px solid currentColor; }

/* stats block, bottom-left, kicker above the numbers */
.ggm-statblock {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; gap: 16px;
  max-width: 62%;
}
.ggm-statblock .ggm-kicker { padding: 0 clamp(24px, 6vw, 96px); }
.ggm-statblock .ggm-stats { max-width: none; }
.ggm-kicker { transition: opacity .2s ease; }

/* secondary, state-specific detail row under the big numbers */
.ggm-statmeta {
  position: relative; z-index: 3; pointer-events: none; margin: 0;
  padding: 0 clamp(24px, 6vw, 96px) clamp(36px, 6vh, 60px);
  display: flex; flex-wrap: wrap; gap: 10px clamp(22px, 3.4vw, 46px);
}
.ggm-statmeta > div { display: flex; align-items: baseline; gap: 8px; }
.ggm-statmeta dt {
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.02em; opacity: .62;
}
.ggm-statmeta dd {
  margin: 0; font-family: var(--font-mono); font-size: 12px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .ggm-statmeta { gap: 8px 24px; }
}

/* big numbers left, chart right */
.ggm-statblock-wide { max-width: min(70%, 900px); gap: 10px; }
.ggm-statblock-wide .ggm-stats {
  align-items: flex-end; gap: clamp(22px, 3.4vw, 54px);
}
.ggm-stat .n { display: inline-flex; align-items: baseline; }
.ggm-statblock-wide .ggm-stat .n {
  font-size: clamp(42px, 4.6vw, 76px); font-weight: 400; line-height: .92;
}
.ggm-stat .n em {
  font-style: normal; font-size: .46em; font-weight: 500;
  margin-left: .12em; opacity: .72; letter-spacing: 0;
}
.ggm-statblock-wide .ggm-stat .l {
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .72;
}

@media (max-width: 900px) { .ggm-statblock-wide { max-width: none; } }

/* A · rail */
.ggm-rail {
  position: relative; z-index: 3; pointer-events: none;
  padding: 6px clamp(24px, 6vw, 96px) clamp(34px, 5.5vh, 58px);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0 clamp(14px, 2vw, 34px);
}
.ggm-rail-i {
  display: grid; grid-template-rows: auto auto; align-content: start; gap: 4px; padding-top: 4px;
  min-width: 0;
  transition: opacity .7s ease;
}
.ggm-rail-n {
  font-family: var(--font-serif, var(--font-sans)); font-size: clamp(20px, 1.9vw, 29px);
  line-height: .95; font-weight: 400; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline;
}
.ggm-rail-n em { font-style: normal; font-size: .44em; margin-left: .1em; opacity: .7; }
.ggm-rail-l {
  font-family: var(--font-sans); font-size: 9.5px; font-weight: 500; white-space: nowrap;
  letter-spacing: .05em; text-transform: uppercase; opacity: .58;
}

/* B · rank */
.ggm-rank {
  position: relative; z-index: 3; pointer-events: none; max-width: 480px;
  padding: 16px clamp(24px, 6vw, 96px) clamp(30px, 5vh, 52px);
  display: flex; flex-direction: column; gap: 11px;
}
.ggm-rank-head, .ggm-span-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.ggm-rank-t, .ggm-span-t {
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; opacity: .55;
}
.ggm-rank-p, .ggm-span-x { font-family: var(--font-mono); font-size: 10.5px; opacity: .5; }
.ggm-rank-rows { display: grid; gap: 6px; }
.ggm-rank-r {
  display: grid; grid-template-columns: 92px 1fr 46px; align-items: center; gap: 12px;
  opacity: .5; transition: opacity .35s ease;
}
.ggm-rank-r.on { opacity: 1; }
.ggm-rank-l { font-family: var(--font-sans); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ggm-rank-bar { height: 4px; background: color-mix(in oklch, currentColor 15%, transparent); display: block; }
.ggm-rank-bar i { display: block; height: 4px; background: currentColor; transition: width 1s cubic-bezier(.22,.8,.2,1); }
.ggm-rank-v { font-family: var(--font-mono); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
.ggm-rank-v em { font-style: normal; opacity: .6; }

/* C · span */
.ggm-span {
  position: relative; z-index: 3; pointer-events: none; max-width: 520px;
  padding: 16px clamp(24px, 6vw, 96px) clamp(30px, 5vh, 52px);
  display: flex; flex-direction: column; gap: 9px;
}
.ggm-span-bars { display: flex; align-items: flex-end; gap: 3px; height: 62px; }
.ggm-span-b {
  flex: 1; display: block; height: 2px;
  background: color-mix(in oklch, currentColor 16%, transparent);
  transition: height .8s cubic-bezier(.22,.8,.2,1);
}
.ggm-span-b.on { background: currentColor; }
.ggm-span-axis {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px; opacity: .42;
}
@media (max-width: 900px) { .ggm-rank, .ggm-span, .ggm-rail { max-width: none; } }

/* D · figures annotated onto the graph */
.ggm-inline { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ggm-inline-a {
  position: absolute; display: flex; align-items: center; gap: 0;
  transition: opacity .8s ease;
}
.ggm-inline-dot {
  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in oklch, currentColor 14%, transparent);
  flex: none;
}
.ggm-inline-lead {
  width: clamp(28px, 4vw, 58px); height: 1px;
  background: color-mix(in oklch, currentColor 42%, transparent); flex: none;
}
.ggm-inline-txt { display: flex; flex-direction: column; gap: 3px; padding-left: 10px; }
.ggm-inline-n {
  font-family: var(--font-serif, var(--font-sans)); font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1; font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline;
}
.ggm-inline-n em { font-style: normal; font-size: .44em; margin-left: .1em; opacity: .7; }
.ggm-inline-l {
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; opacity: .6;
}
@media (max-width: 900px) { .ggm-inline { display: none; } }


/* ══ Reserved column — selector owns a full-height right column ══ */
.ggm[data-layout="column"] .ggm-juris {
  top: clamp(64px, 11vh, 118px); bottom: clamp(34px, 6vh, 58px);
  width: 250px; min-width: 0;
}
.ggm[data-layout="column"] .ggm-juris-scroll {
  max-height: none; flex: 1;
  overflow-x: hidden; scrollbar-gutter: stable; padding-right: 10px;
}
.ggm[data-layout="column"] .ggm-statblock-wide { max-width: min(58%, 720px); }

/* the stage wrapper is transparent in the overlay layouts */
.ggm-card { position: absolute; inset: 0; z-index: 1; }

/* ══ Card layout — graph inside a rounded panel, selector and stats outside ══ */
.ggm[data-layout="card"] {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 30px clamp(32px, 4vw, 64px);
  align-items: start;
  width: 99%; max-width: none; margin: 3px auto;
  box-sizing: border-box;
  background: #FFFDF8;
  border: 0; border-radius: 0;
  padding: clamp(26px, 3vh, 40px) clamp(24px, 4vw, 72px);
}
.ggm[data-layout="card"] .ggm-card {
  position: relative; inset: auto; grid-column: 1; grid-row: 1;
  height: clamp(420px, 72vh, 820px);
  border-radius: 0; overflow: visible;
  background: none;
  border: 0;
}
.ggm[data-layout="card"] .ggm-scrim { display: none; }
.ggm[data-layout="card"] .ggm-juris {
  position: static; grid-column: 2; grid-row: 1;
  width: auto; min-width: 0; padding-top: 4px;
  height: clamp(420px, 72vh, 820px);
  display: flex; flex-direction: column;
}
.ggm[data-layout="card"] .ggm-juris-scroll { flex: 1; min-height: 0; max-height: none; padding-right: 8px; }
.ggm[data-layout="card"] .ggm-statblock {
  grid-column: 1 / -1; grid-row: 2; max-width: none;
}
.ggm[data-layout="card"] .ggm-statblock .ggm-kicker { padding: 0; }
.ggm[data-layout="card"] .ggm-rail { padding: 0; }
.ggm[data-layout="card"] .ggm-switch-sub { top: clamp(20px, 3vh, 34px); }
@media (max-width: 900px) {
  .ggm[data-layout="card"] { grid-template-columns: minmax(0, 1fr); }
  .ggm[data-layout="card"] .ggm-juris { grid-column: 1; grid-row: 2; text-align: left; }
  .ggm[data-layout="card"] .ggm-juris button { justify-content: space-between; }
  .ggm[data-layout="card"] .ggm-statblock { grid-row: 3; }
}

/* card layout sits on plain white; only the graph panel is cream */
.ggm.th-parchment[data-layout="card"] { background: #FFFDF8; }

/* selector — flat rounded rows */
.ggm[data-layout="card"] .ggm-juris { text-align: left; gap: 6px; }
.ggm[data-layout="card"] .ggm-juris-lab { opacity: .45; margin-bottom: 4px; }
.ggm[data-layout="card"] .ggm-juris-search {
  border-radius: 12px; border: 1px solid rgba(22,36,31,.12);
  background: #FDF8EF; opacity: 1; padding: 9px 12px; margin-bottom: 6px;
}
.ggm[data-layout="card"] .ggm-juris-search:focus-within { border-color: rgba(22,36,31,.3); }
.ggm[data-layout="card"] .ggm-juris button {
  justify-content: space-between; text-align: left;
  border: 1px solid transparent; border-radius: 12px;
  padding: 9px 12px; opacity: 1; color: rgba(22,36,31,.62);
  transition: background .16s ease, color .16s ease;
}
.ggm[data-layout="card"] .ggm-juris button:last-of-type { border-bottom: 1px solid transparent; }
.ggm[data-layout="card"] .ggm-juris button:hover { background: #F7F2E8; color: #16241f; }
.ggm[data-layout="card"] .ggm-juris button.on {
  background: #F1E7D3; color: #16241f; border-color: rgba(22,36,31,.10);
}
.ggm[data-layout="card"] .ggm-juris button .nm { font-size: 15px; }
.ggm[data-layout="card"] .ggm-juris button .ct { font-size: 11px; opacity: .6; }
.ggm[data-layout="card"] .ggm-juris-scroll { gap: 3px; }

/* stat rail — flat rounded tiles under the card */
.ggm[data-layout="card"] .ggm-rail {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.ggm[data-layout="card"] .ggm-rail-i {
  padding: 18px 20px; border-radius: 16px;
  background: #FAF6EE; border: 1px solid rgba(22,36,31,.08);
  gap: 5px;
}
.ggm[data-layout="card"] .ggm-rail-n { font-size: clamp(21px, 1.7vw, 27px); }
.ggm[data-layout="card"] .ggm-rail-l { opacity: .5; letter-spacing: .08em; }
.ggm[data-layout="card"] .ggm-statblock { gap: 14px; }
@media (max-width: 900px) {
  .ggm[data-layout="card"] .ggm-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* stats overlaid inside the card, bottom-left; selector hugs the right edge */
.ggm[data-layout="card"] .ggm-card .ggm-statblock {
  position: absolute; z-index: 3; left: 26px; right: 26px; bottom: 22px;
  grid-column: auto; grid-row: auto; pointer-events: none; gap: 12px;
}
.ggm[data-layout="card"] .ggm-card .ggm-rail {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.ggm[data-layout="card"] .ggm-card .ggm-rail-i {
  padding: 12px 16px; border-radius: 14px;
  background: rgba(255,255,255,.72); border: 1px solid rgba(22,36,31,.08);
  backdrop-filter: blur(6px); gap: 6px;
}
.ggm[data-layout="card"] .ggm-card .ggm-rail-n { font-size: clamp(20px, 1.7vw, 28px); }
.ggm[data-layout="card"] .ggm-card .ggm-statblock .ggm-kicker { padding: 0; margin: 0; }
.ggm[data-layout="card"] .ggm-juris { justify-self: end; width: 250px; }

/* voices: no mid-sentence clamp */

/* compact one-row stat chips so they never cover the constellation */
.ggm[data-layout="card"] .ggm-card .ggm-statblock { gap: 8px; bottom: 0; }
.ggm[data-layout="card"] .ggm-card .ggm-rail { flex-wrap: nowrap; gap: 8px; }
.ggm[data-layout="card"] .ggm-card .ggm-rail-i {
  padding: 9px 12px; border-radius: 12px; gap: 3px; min-width: 0;
}
.ggm[data-layout="card"] .ggm-card .ggm-rail-n { font-size: 19px; line-height: 1; }
.ggm[data-layout="card"] .ggm-card .ggm-rail-l { font-size: 8.5px; letter-spacing: .06em; }
.ggm[data-layout="card"] .ggm-card .ggm-statblock .ggm-kicker { font-size: 10px; letter-spacing: .12em; }

/* state name sits top-left in the card; stat numbers run bare, no chips */
.ggm[data-layout="card"] .ggm-card-name {
  position: absolute; z-index: 3; top: 22px; left: 26px;
  animation: ggm-name-in .7s ease both;
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  letter-spacing: -0.01em; color: #16241f;
}
@keyframes ggm-name-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ggm[data-layout="card"] .ggm-card .ggm-rail-i {
  padding: 0; border: 0; background: none; backdrop-filter: none;
  border-radius: 0;
}
.ggm[data-layout="card"] .ggm-card .ggm-rail { gap: 26px; }
.ggm[data-layout="card"] .ggm-card .ggm-rail-n { font-size: 22px; }

.ggm[data-layout="card"] .ggm-juris-scroll { scrollbar-width: thin; scrollbar-color: rgba(22,36,31,.18) transparent; }
.ggm[data-layout="card"] .ggm-juris-scroll::-webkit-scrollbar { width: 4px; }
.ggm[data-layout="card"] .ggm-juris-scroll::-webkit-scrollbar-track { background: transparent; }
.ggm[data-layout="card"] .ggm-juris-scroll::-webkit-scrollbar-thumb { background: rgba(22,36,31,.18); border-radius: 999px; }

/* jurisdiction picker on the left, graph card on the right */
.ggm[data-layout="card"] { grid-template-columns: 250px minmax(0, 1fr); }
.ggm[data-layout="card"] .ggm-card { grid-column: 2; }
.ggm[data-layout="card"] .ggm-juris { grid-column: 1; grid-row: 1; justify-self: start; }
.ggm[data-layout="card"] .ggm-statblock { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .ggm[data-layout="card"] { grid-template-columns: minmax(0, 1fr); }
  .ggm[data-layout="card"] .ggm-card { grid-column: 1; }
  .ggm[data-layout="card"] .ggm-card .ggm-statblock { left: 0; }
}

/* picker chrome picks up the card's sage */
.ggm[data-layout="card"] .ggm-juris-search { background: transparent; border-color: rgba(22,36,31,.14); }

/* section title, matching the benchmark cards' kicker */
.ggm[data-layout="card"] .ggm-title {
  grid-column: 1 / -1; grid-row: 1;
  font-family: var(--font-sans); font-size: 18px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: #5d6b2f;
  margin-bottom: 4px;
}
.ggm[data-layout="card"] .ggm-card,
.ggm[data-layout="card"] .ggm-juris { grid-row: 2; }
.ggm[data-layout="card"] .ggm-juris button:hover { background: #eaefdb; }
.ggm[data-layout="card"] .ggm-juris button.on { background: #dde5c6; border-color: transparent; }

/* ── Height compression, same recipe as the benchmark cards:
      shrink the chrome ~20%, tighten the card, shorter graph panel.
      Canvas is left unzoomed so its pointer math stays exact. ── */
.ggm[data-layout="card"] {
  gap: 26px clamp(28px, 3.6vw, 58px);
  padding: clamp(22px, 2.6vh, 34px) clamp(22px, 3.6vw, 64px);
  grid-template-columns: 228px minmax(0, 1fr);
}
.ggm[data-layout="card"] .ggm-card,
.ggm[data-layout="card"] .ggm-juris { height: clamp(390px, 62vh, 710px); }
.ggm[data-layout="card"] .ggm-juris { width: auto; zoom: .92; }
.ggm[data-layout="card"] .ggm-title {
  font-size: 18px; margin-bottom: 0;
}
.ggm[data-layout="card"] .ggm-card-name { top: 16px; left: 20px; font-size: 19px; }
.ggm[data-layout="card"] .ggm-card .ggm-statblock { left: 20px; right: 20px; zoom: .9; }
.ggm[data-layout="card"] .ggm-card .ggm-rail { gap: 22px; }
.ggm[data-layout="card"] .ggm-card .ggm-rail-n { font-size: 20px; }

/* Band behind the citation-graph card. */
.ggm[data-layout="card"] { box-shadow: 0 0 0 100vmax #FDF8EF; clip-path: inset(0 -100vmax); }

/* ══ Art frame — the painting inset behind a floating card,
      matching the showcase treatment (inset 12px, radius 26px). ══ */
.ggm-art {
  position: relative; overflow: hidden;
  padding: clamp(48px, 5vw, 84px) clamp(14px, 3vw, 48px);
  background: #FDF8EF;
}
.ggm-artbg {
  position: absolute; inset: 12px; border-radius: 26px;
  background-size: cover; background-position: 50% 55%;
  animation: ggm-artdrift 58s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes ggm-artdrift {
  from { background-position: 49% 50%; }
  to   { background-position: 51% 60%; }
}
@media (prefers-reduced-motion: reduce) { .ggm-artbg { animation: none; } }
.ggm-art .ggm[data-layout="card"] {
  position: relative; z-index: 2;
  width: 100%; max-width: 1560px; margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 50px 110px rgba(12,14,34,.5), 0 4px 14px rgba(12,14,34,.3);
  clip-path: none;
}

/* card layout without a jurisdiction selector: single centred column,
   stats sit above the map */
.ggm[data-layout="card"][data-sel="0"] { grid-template-columns: minmax(0, 1fr); }
.ggm[data-layout="card"][data-sel="0"] .ggm-statblock {
  grid-column: 1; grid-row: 1; margin: 0 auto 6px; max-width: none;
}
.ggm[data-layout="card"][data-sel="0"] .ggm-statblock .ggm-rail {
  display: grid; grid-template-columns: repeat(4, max-content);
  justify-content: center; gap: clamp(26px, 4vw, 60px);
}
.ggm[data-layout="card"][data-sel="0"] .ggm-statblock .ggm-rail-i {
  background: none; border: 0; padding: 0; text-align: center; align-items: center;
}
.ggm[data-layout="card"][data-sel="0"] .ggm-statblock .ggm-rail-n { font-size: clamp(20px, 1.7vw, 26px); }
.ggm[data-layout="card"][data-sel="0"] .ggm-statblock .ggm-rail-l { font-size: 9.5px; }
.ggm[data-layout="card"][data-sel="0"] .ggm-rail-i { text-align: center; align-items: center; }
.ggm[data-layout="card"][data-sel="0"] .ggm-card { grid-column: 1; grid-row: 2; }

/* citation-graph card sits on the page band, no panel fill */
.ggm.th-parchment[data-layout="card"][data-sel="0"] { background: transparent; }

/* tighten the graph card so the constellation doesn't leave dead space below */
.ggm[data-layout="card"][data-sel="0"] .ggm-card { height: clamp(380px, 56vh, 700px); }
.ggm[data-layout="card"][data-sel="0"] { margin-bottom: 0; padding-bottom: 0; }

/* ============================================================
   BENCHMARK SECTIONS — "why we're better", light cream theme
   matching the site palette (ink #16241f, cream #f8f0e4,
   gold #a8bf63). Ported from Benchmark Mocks 4a (interactive
   quadrant) and 2a (comparison matrix with embedded bars).
   All rules scoped under .gbm.
   ============================================================ */

.gbm > * { max-width: 1653px; margin-left: auto; margin-right: auto; zoom: .75; }
.gbm {
  position: relative; overflow: hidden;
  width: 99%; max-width: none; margin: 3px auto;
  background: #FFFDF8;
  border: 0; border-radius: 32px;
  color: #16241f; font-family: var(--font-sans);
  padding: clamp(26px, 3vh, 40px) clamp(24px, 4vw, 72px);
}
.gbm + .gbm { margin-top: 0; }
.gbm .bm-lede:empty, .gbm h2:empty { display: none; }
.gbm .bm-kicker {
  display: inline-block; font-size: 24px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: #5d6b2f;
  margin-bottom: 16px;
}
.gbm h2 {
  margin: 0 0 16px; font-family: var(--font-display);
  font-size: clamp(32px, 3.2vw, 48px); line-height: 1.08;
  font-weight: 500; letter-spacing: -0.015em;
}
.gbm h2 em { font-style: italic; font-weight: 400; }
.gbm .bm-lede { margin: 0; font-size: 15.5px; line-height: 1.6; color: #55635a; max-width: 52ch; }
.gbm .bm-src { margin: 20px 0 0; font-size: 12px; line-height: 1.55; color: #6c7a70; max-width: none; zoom: .875; }
.gbm .bm-src .mono { font-family: var(--font-mono); font-size: 11px; color: #5f6d63; }
.gbm .tag-ill {
  display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: #5d6b2f; border: 1px dashed rgba(93,107,47,.5);
  border-radius: 999px; padding: 2px 9px; vertical-align: 2px;
}

/* ── interactive quadrant ── */
.gbm .pnl { margin-top: 6px; position: relative; max-width: 1653px; zoom: .875; }  /* net 0.875 */
.gbm .pnl-body { position: relative; }
.gbm .pnl-cap { margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: #6c7a70; max-width: none; }
.gbm .pnl svg { display: block; width: 100%; height: auto; }
.gbm .ax { font-family: var(--font-sans); font-size: 11px; font-variant-numeric: tabular-nums; fill: #6c7a70; }
.gbm .axlab { font-family: var(--font-sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; }
.gbm .dotlab { font-family: var(--font-sans); font-size: 11.5px; fill: #3a4a43; }
.gbm .youlab { font-family: var(--font-sans); font-size: 12px; font-weight: 600; fill: #5d6b2f; }

.gbm .pt { pointer-events: none; }
.gbm .pt .hit { pointer-events: all; cursor: pointer; fill: #fff; fill-opacity: 0; stroke: none; }
.gbm .pt.on rect:not(.hit):not(.chip), .gbm .pt.on circle { fill: #5d6b2f; stroke: #5d6b2f; }
.gbm .pt.on .chip { stroke: #5d6b2f; stroke-width: 2; }
.gbm .tip {
  position: absolute; z-index: 20; pointer-events: none; display: none;
  background: #fffaf1; border: 1px solid rgba(93,107,47,.45); border-radius: 4px;
  padding: 10px 13px; min-width: 190px; box-shadow: 0 10px 30px rgba(60,25,10,.18);
}
.gbm .tip .t-name { font-size: 12.5px; font-weight: 600; color: #16241f; margin-bottom: 7px; letter-spacing: 0.02em; }
.gbm .tip .t-row { display: flex; justify-content: space-between; gap: 18px; font-size: 11.5px; color: #6c7a70; padding: 1.5px 0; }
.gbm .tip .t-row b { font-family: var(--font-mono); font-weight: 500; color: #5d6b2f; font-variant-numeric: tabular-nums; }

/* ── comparison matrix ── */
.gbm .mx-wrap { overflow-x: auto; zoom: .875; }  /* overrides the card .75 — net 0.875 */
.gbm .mx { margin-top: 24px; display: grid; grid-template-columns: 190px repeat(3, 1fr); border-top: 1px solid rgba(22,36,31,.26); min-width: 620px; }
.gbm .mx.mx-4 { grid-template-columns: 190px repeat(4, 1fr); min-width: 720px; }
.gbm .mx > div { padding: 12px 18px 12px 0; border-bottom: 1px solid rgba(22,36,31,.12); }
.gbm .mx .colhead { padding-top: 10px; padding-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #6c7a70; border-bottom: 1px solid rgba(22,36,31,.26); }
.gbm .mx .colhead.you { color: #5d6b2f; }
.gbm .mx .rowlab2 { color: #16241f; font-weight: 500; font-size: 14.5px; }
.gbm .mx .rowsub2 { display: block; font-size: 12px; font-weight: 400; color: #6c7a70; margin-top: 3px; line-height: 1.4; }
.gbm .mx .cell { font-size: 13px; color: #4a564e; line-height: 1.5; }
.gbm .mx .cell.you { background: linear-gradient(90deg, rgba(168,191,99,.16), rgba(168,191,99,.04)); padding-left: 18px; margin-left: -18px; }
.gbm .mx .bignum { font-family: var(--font-mono); font-size: 17px; font-variant-numeric: tabular-nums; color: #16241f; display: block; margin-bottom: 5px; }
.gbm .mx .cell.you .bignum { color: #5d6b2f; }
.gbm .mx .bar { display: block; height: 8px; border-radius: 3px; background: rgba(22,36,31,.1); position: relative; overflow: hidden; margin-bottom: 6px; max-width: 150px; }
.gbm .mx .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: #8d9a90; }
.gbm .mx .cell.you .bar i { background: repeating-linear-gradient(-45deg, #a8bf63 0 7px, #6e7f38 7px 14px); }
.gbm .mx .glyphline { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.gbm .mx .g { font-size: 14px; line-height: 1; }
.gbm .mx .g.full { color: #5d6b2f; }
.gbm .mx .g.part { color: #6c7a70; }
.gbm .mx .g.none { color: #b6bfb4; }
.gbm .mx .gl { font-weight: 600; font-size: 13px; color: #16241f; }
.gbm .mx .cell .note { font-size: 12.5px; color: #6c7a70; }

.gbm .mlogo { opacity: .92; }
.gbm .mlogo.own { opacity: 1; }
.gbm .mmono { font-family: var(--font-sans); font-size: 11px; font-weight: 700; fill: #5d6b2f; letter-spacing: 0.02em; }

/* ── Scroll-in motion: plots populate, bars scale, rows settle ── */
.gbm.bm-anim .pt {
  opacity: 0;
  transform: translateY(10px) scale(.82);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .5s ease, transform .62s cubic-bezier(.2,.9,.3,1.2);
  transition-delay: calc(var(--i, 0) * 55ms + 120ms);
}
.gbm.bm-anim.bm-in .pt { opacity: 1; transform: none; }

.gbm.bm-anim .trend {
  stroke-dasharray: 400; stroke-dashoffset: 400;
  transition: stroke-dashoffset 1.1s ease .1s;
}
.gbm.bm-anim.bm-in .trend { stroke-dashoffset: 0; }

.gbm.bm-anim .mx .bar i {
  transform: scaleX(0); transform-origin: left center;
  transition: transform .95s cubic-bezier(.22,.61,.36,1) .15s;
}
.gbm.bm-anim.bm-in .mx .bar i { transform: scaleX(1); }

.gbm.bm-anim .mx .cell {
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.gbm.bm-anim.bm-in .mx .cell { opacity: 1; transform: none; }
.gbm.bm-anim .mx .cell:nth-of-type(4n+1) { transition-delay: .05s; }
.gbm.bm-anim .mx .cell:nth-of-type(4n+2) { transition-delay: .13s; }
.gbm.bm-anim .mx .cell:nth-of-type(4n+3) { transition-delay: .21s; }
.gbm.bm-anim .mx .cell:nth-of-type(4n)   { transition-delay: .29s; }

.gbm.bm-anim .mx .g {
  opacity: 0; transform: scale(.6);
  transition: opacity .4s ease .35s, transform .5s cubic-bezier(.2,.9,.3,1.4) .35s;
}
.gbm.bm-anim.bm-in .mx .g { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .gbm.bm-anim .pt, .gbm.bm-anim .mx .cell, .gbm.bm-anim .mx .g { opacity: 1; transform: none; transition: none; }
  .gbm.bm-anim .mx .bar i { transform: none; transition: none; }
  .gbm.bm-anim .trend { stroke-dashoffset: 0; }
}


/* Each benchmark block is its own card now — no joining hairline. */
.gbm.bm-joined-cont::before { content: none; }
.gbm.bm-joined-cont .mx { margin-top: 24px; }

/* Merged benchmark card — view toggle in the header row. */
.gbm .bm-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.gbm .bm-head .bm-kicker { margin-bottom: 0; }
.gbm .bm-tabs {
  display: flex; gap: 4px; padding: 3px;
  border: 1px solid rgba(22,36,31,.16); border-radius: 999px;
  background: rgba(255,255,255,.4);
}
.el-app .gbm .bm-tab {
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500; color: #6c7a70;
  padding: 7px 16px; border-radius: 999px;
  transition: background 160ms ease, color 160ms ease;
  white-space: nowrap;
}
.el-app .gbm .bm-tab:hover { color: #16241f; }
.el-app .gbm .bm-tab.is-on { background: #16241f; color: #f4f1e8; }

/* Side-by-side view stretches to the height of the chart view. */
.gbm.bm-joined-cont { display: flex; flex-direction: column; }
.gbm.bm-joined-cont .mx-wrap { flex: 1 1 auto; min-height: 0; display: flex; }
.gbm.bm-joined-top { display: flex; flex-direction: column; }
.gbm.bm-joined-top .pnl { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.gbm.bm-joined-cont .mx { flex: 1 1 auto; grid-template-rows: auto repeat(4, 1fr); }

/* Band behind the benchmark card. */
.gbm { box-shadow: 0 0 0 100vmax #FDF8EF; clip-path: inset(0 -100vmax); }

/* ══ Art frame — the painting inset behind a floating card,
      matching the showcase treatment (inset 12px, radius 26px). ══ */
.gbm-art {
  position: relative; overflow: hidden;
  padding: clamp(48px, 5vw, 84px) clamp(14px, 3vw, 48px);
  background: #FDF8EF;
}
.gbm-artbg {
  position: absolute; inset: 12px; border-radius: 26px;
  background-size: cover; background-position: 50% 45%;
  animation: gbm-artdrift 58s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes gbm-artdrift {
  from { background-position: 49% 40%; }
  to   { background-position: 51% 50%; }
}
@media (prefers-reduced-motion: reduce) { .gbm-artbg { animation: none; } }
.gbm-art .gbm {
  position: relative; z-index: 2;
  width: 100%; max-width: 1560px; margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 50px 110px rgba(30,22,8,.45), 0 4px 14px rgba(30,22,8,.28);
  clip-path: none;
}

/* ============================================================
   SHOWCASE — a floating app window resting on a full-bleed
   painting, running an unattended play-by-play of a review.
   ============================================================ */

.grd-show {
  position: relative; overflow: hidden;
  padding: clamp(52px, 6vw, 92px) clamp(14px, 3vw, 48px) clamp(60px, 7vw, 104px);
  background: #f4f1ea;
  color: #fff;
}
.grd-show .gsw-bg {
  position: absolute; inset: 12px;
  border-radius: 26px;
  background-size: 108% auto; background-position: 50% 46%;
  animation: gsw-drift 54s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes gsw-drift {
  from { background-position: 48% 44%; }
  to   { background-position: 52% 50%; }
}

.gsw-in { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; }

.gsw-head { max-width: 700px; margin: 0 auto clamp(28px, 3.4vw, 46px); text-align: center; }
.gsw-kick {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.gsw-kick .dot {
  width: 6px; height: 6px; border-radius: 50%; background: #cfe08a;
  animation: gsw-pulse 2.4s ease-in-out infinite;
}
@keyframes gsw-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.gsw-head h2 {
  margin: 14px 0 10px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -0.02em;
  text-shadow: 0 2px 22px rgba(14,14,40,.5);
}
.gsw-head p {
  margin: 0 auto; max-width: 54ch; font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55; color: rgba(255,255,255,.9); text-wrap: pretty;
  text-shadow: 0 1px 14px rgba(14,14,40,.55);
}

/* ── window ───────────────────────────────────────────────── */
.gsw-win {
  border-radius: 16px; overflow: hidden;
  background: #f4f1ea;
  box-shadow: 0 50px 110px rgba(12,10,34,.55), 0 4px 14px rgba(12,10,34,.34);
  color: #16241f;
}
.gsw-title {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; background: #e9e5dc; border-bottom: 1px solid rgba(22,36,31,.1);
}
.gsw-lights { display: flex; gap: 7px; }
.gsw-lights i { width: 11px; height: 11px; border-radius: 50%; background: #cfc9bd; }
.gsw-lights i:nth-child(1) { background: #e0a09a; }
.gsw-lights i:nth-child(2) { background: #e3c58f; }
.gsw-lights i:nth-child(3) { background: #a9c58c; }
.gsw-title .nm {
  position: absolute; left: 0; right: 0; text-align: center;
  font-size: 13px; color: rgba(22,36,31,.72); pointer-events: none;
}

.gsw-body { display: grid; grid-template-columns: minmax(0,1fr) 348px; min-height: 720px; }

/* document pane */
.gsw-doc { padding: 26px clamp(18px, 2.6vw, 44px) 30px; background: #efece4; }
.gsw-page {
  max-width: 620px; margin: 0 auto; padding: 34px 38px 40px;
  background: #fff; border: 1px solid rgba(22,36,31,.1);
  box-shadow: 0 8px 26px rgba(9,20,14,.07);
  font-family: var(--font-display); font-size: 13px; line-height: 1.75; color: #1b2a24;
}
.gsw-page h4 { margin: 0 0 16px; text-align: center; font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.gsw-grid { border: 1px solid rgba(22,36,31,.35); display: grid; grid-template-columns: 1fr 1fr; font-size: 12px; }
.gsw-grid > div { padding: 7px 10px; border-right: 1px solid rgba(22,36,31,.22); border-bottom: 1px solid rgba(22,36,31,.22); }
.gsw-grid > div:nth-child(2n) { border-right: none; }
.gsw-grid > div.full { grid-column: 1 / -1; border-right: none; }
.gsw-grid > div:nth-last-child(-n+1) { border-bottom: none; }
.gsw-grid b { font-weight: 600; }
.gsw-page p { margin: 15px 0 0; text-align: justify; }
.gsw-page .sig { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; font-size: 12px; }
.gsw-page .sig b { font-weight: 600; }
.gsw-page .sig .rule { height: 1px; background: rgba(22,36,31,.45); margin: 14px 0 6px; }

mark.gsw-hl {
  background: transparent; color: inherit; border-radius: 3px;
  box-shadow: 0 0 0 0 rgba(207,224,138,0);
  transition: background 420ms ease, box-shadow 420ms ease;
}
mark.gsw-hl.on { background: #dcecab; box-shadow: 0 0 0 2px #dcecab; }
mark.gsw-hl.risk.on { background: #f3d3ce; box-shadow: 0 0 0 2px #f3d3ce; }

/* review panel */
.gsw-panel {
  display: flex; flex-direction: column;
  padding: 22px 22px 22px; background: #faf8f3;
  border-left: 1px solid rgba(22,36,31,.1);
}
.gsw-ph { display: flex; align-items: center; gap: 9px; padding-bottom: 16px; }
.gsw-ph .lg { font-family: var(--font-display); font-size: 17px; letter-spacing: -0.01em; }
.gsw-ph .st {
  margin-left: auto; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(22,36,31,.5);
}

.gsw-fields { border: 1px solid rgba(22,36,31,.12); border-radius: 12px; background: #fff; }
.gsw-f {
  display: flex; align-items: center; gap: 10px; padding: 13px 14px;
  border-bottom: 1px solid rgba(22,36,31,.08); font-size: 13px;
}
.gsw-f:last-child { border-bottom: none; }
.gsw-f .lb { color: rgba(22,36,31,.66); }
.gsw-f .vl { margin-left: auto; text-align: right; max-width: 62%; }
.gsw-f .vl .sk { display: block; width: 84px; height: 11px; border-radius: 6px; background: rgba(22,36,31,.09); }
.gsw-f .vl .tx {
  display: block; color: #16241f; animation: gsw-in 360ms cubic-bezier(.2,.7,.3,1) both;
}
.gsw-f .vl .tx.pill {
  display: inline-block; padding: 2px 8px; border-radius: 6px; background: #e6f0c4;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 11.5px;
}
@keyframes gsw-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.gsw-run {
  margin-top: 16px; padding: 13px; border-radius: 12px; text-align: center;
  font-size: 13.5px; position: relative; overflow: hidden;
  background: rgba(22,36,31,.08); color: rgba(22,36,31,.45);
  transition: background 260ms ease, color 260ms ease;
}
.gsw-run.armed { background: #16241f; color: #f6f4ee; }
.gsw-run.busy { background: #16241f; color: #f6f4ee; }
.gsw-run .prog {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--rp, 0%);
  background: rgba(207,224,138,.28);
}
.gsw-run span { position: relative; }

.gsw-find { margin-top: 18px; min-height: 330px; display: flex; flex-direction: column; gap: 10px; }
.gsw-find-t {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: rgba(22,36,31,.5);
}
.gsw-item {
  border: 1px solid rgba(22,36,31,.12); border-radius: 11px; padding: 11px 13px; background: #fff;
  animation: gsw-in 420ms cubic-bezier(.2,.7,.3,1) both;
}
.gsw-item .top { display: flex; align-items: center; gap: 8px; }
.gsw-item .sev {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px; background: rgba(22,36,31,.08); color: rgba(22,36,31,.65);
}
.gsw-item.high .sev { background: #f3d3ce; color: #7d3a31; }
.gsw-item.med .sev { background: #f2e2b8; color: #7a5a1c; }
.gsw-item .hd { font-size: 13px; font-weight: 500; }
.gsw-item .bd { margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: rgba(22,36,31,.66); }
.gsw-item .ref {
  margin-top: 7px; display: inline-block;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; color: rgba(22,36,31,.5);
}

/* play-by-play caption strip */
.gsw-caption {
  margin-top: 18px; display: flex; align-items: center; gap: 16px;
  padding: 14px 18px; border-radius: 14px;
  background: rgba(18,18,44,.52); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.16);
}
.gsw-cap-n {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px;
  padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,.14); color: #fff;
}
.gsw-cap-t { font-size: 14px; color: #fff; }
.gsw-cap-t em { font-style: normal; color: rgba(255,255,255,.66); }
.gsw-dots { margin-left: auto; display: flex; gap: 7px; }
.gsw-dots button {
  appearance: none; border: none; padding: 0; cursor: pointer;
  width: 26px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.24);
  position: relative; overflow: hidden;
}
.gsw-dots button.done { background: rgba(255,255,255,.5); }
.gsw-dots button.on::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: #cfe08a;
}

@media (max-width: 940px) {
  .gsw-body { grid-template-columns: 1fr; min-height: 0; }
  .gsw-panel { border-left: none; border-top: 1px solid rgba(22,36,31,.1); }
  .gsw-doc { padding: 18px; }
  .gsw-page { padding: 24px 22px 28px; }
  .gsw-caption { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .grd-show .gsw-bg, .gsw-kick .dot { animation: none; }
  .gsw-item, .gsw-f .vl .tx { animation-duration: 1ms; }
}

/* ============================================================
   DEMO — "How it works". A full-screen mini Scholar workspace:
   the real three-pane chrome (threads rail · conversation ·
   research rail) at landing scale. Palette, type and geometry
   lifted from src/scholar.css — Manuscript light:
   table #F3EBDF, floating rails #FAF4E8, ochre marker.
   ============================================================ */

.grd-demo { position: relative; }

/* ── App shell: full-bleed, rails floating on the table ────── */
.grd-demo .gd-app {
  --tbl:   #F3EBDF;
  --rail:  #FAF4E8;
  --ink:   #34302A;
  --ink2:  #524C43;
  --muted: #8E877C;
  --muted2:#A9A29A;
  --line:  #DFD5C4;
  --hl:    oklch(0.66 0.11 60);
  --hl-ink:#8A5A1C;
  --rail-l-w: 280px;
  --rail-r-w: 420px;

  width: 100%;
  height: min(88vh, 820px);
  background: var(--tbl);
  color: var(--ink);
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0 0 20px 20px;
}

/* ── Shell: rails float over the table ─────────────────────── */
.grd-demo .gd-shell {
  position: relative;
  flex: 1; min-height: 0;
  --rail-pad-x: 10px;
  --rail-pad-y: 14px;
  --rail-gap: 14px;
  background: var(--tbl);
}
/* Main is the full-width canvas — it blends straight into the table, no card */
.grd-demo .gd-main {
  position: relative; z-index: 1;
  height: 100%; min-height: 0;
  padding-left:  calc(var(--rail-l-w) + var(--rail-pad-x) + var(--rail-gap));
  padding-right: calc(var(--rail-r-w) + var(--rail-pad-x) + var(--rail-gap));
  overflow: hidden;
  display: flex; flex-direction: column;
}
/* Rails are the only cards: absolutely positioned, floating on the table */
.grd-demo .gd-rail-l,
.grd-demo .gd-rail-r {
  position: absolute; z-index: 5;
  top: var(--rail-pad-y); bottom: var(--rail-pad-y);
  background: var(--rail);
  border-radius: 18px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow:
    0 1px 0 oklch(0.78 0.014 75 / 0.45),
    0 10px 24px oklch(0.22 0.015 60 / 0.10),
    0 32px 70px oklch(0.22 0.015 60 / 0.10);
}

/* ── Left rail: threads ────────────────────────────────────── */
.grd-demo .gd-profile {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 10px 10px 6px;
}
.grd-demo .gd-profile-pill {
  flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 8px; border: none; border-radius: 10px; background: none; cursor: default;
  font-family: inherit; font-size: 13px; text-align: left;
}
.grd-demo .gd-profile-pill .av {
  width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in oklch, oklch(0.66 0.11 60), transparent 82%);
  color: var(--hl-ink); font-family: var(--font-display); font-style: italic; font-size: 13px;
}
.grd-demo .gd-profile-pill .name { font-weight: 500; color: var(--ink); }
.grd-demo .gd-profile-pill .sep { color: var(--muted2); }
.grd-demo .gd-profile-pill .plan {
  color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grd-demo .gd-profile-pill .caret { margin-left: auto; color: var(--muted); flex: none; }

.grd-demo .gd-new {
  display: inline-flex; align-items: center; gap: 6px; width: calc(100% - 20px);
  margin: 2px 10px 8px; padding: 8px 10px; border: none; border-radius: 10px;
  background: none; cursor: pointer; font-family: inherit; font-size: 13.5px;
  color: var(--ink2); transition: background 140ms, color 140ms;
}
.grd-demo .gd-new:hover { background: rgba(52,48,42,.06); color: var(--ink); }
.grd-demo .gd-new .plus { font-family: var(--font-display); font-size: 16px; color: var(--hl-ink); }

.grd-demo .gd-rail-head {
  display: flex; align-items: center; gap: 8px; padding: 4px 16px 8px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted2);
}
.grd-demo .gd-rail-head .sort { margin-left: auto; color: var(--muted2); font-size: 12px; }

.grd-demo .gd-rail-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 12px; }
.grd-demo .gd-rail-scroll::-webkit-scrollbar { width: 8px; }
.grd-demo .gd-rail-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, #A9A29A, transparent 65%); border-radius: 6px;
}

.grd-demo .gd-thread {
  position: relative; display: block; width: 100%; text-align: left;
  padding: 10px 12px; border: none; border-radius: 10px; background: none;
  cursor: pointer; font-family: inherit; transition: background 140ms;
}
.grd-demo .gd-thread + .gd-thread { margin-top: 1px; }
.grd-demo .gd-thread:hover { background: rgba(52,48,42,.06); }
.grd-demo .gd-thread.is-active { background: color-mix(in oklch, oklch(0.66 0.11 60), transparent 86%); }
.grd-demo .gd-thread[disabled] { opacity: .5; pointer-events: none; }
.grd-demo .gd-thread .ttl {
  display: block; font-family: var(--font-display); font-size: 14.5px; line-height: 1.34;
  letter-spacing: -0.008em; color: var(--ink); margin-bottom: 4px;
}
.grd-demo .gd-thread .snip {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12px; line-height: 1.45; color: var(--muted);
}
.grd-demo .gd-thread .meta {
  display: flex; align-items: center; gap: 7px; margin-top: 7px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted2);
}
.grd-demo .gd-thread .meta .juris {
  padding: 1px 6px; border-radius: 4px; white-space: nowrap;
  background: color-mix(in oklch, oklch(0.66 0.11 60), transparent 86%); color: var(--hl-ink);
}
.grd-demo .gd-thread .meta .pip { width: 3px; height: 3px; border-radius: 50%; background: var(--muted2); }

/* ── Conversation pane ─────────────────────────────────────── */
.grd-demo .gd-rail-l { left:  var(--rail-pad-x); width: var(--rail-l-w); }
.grd-demo .gd-rail-r { right: var(--rail-pad-x); width: var(--rail-r-w); }
.grd-demo .gd-main {
  background:
    radial-gradient(ellipse at top, color-mix(in oklch, oklch(0.66 0.11 60), transparent 96%) 0%, transparent 55%),
    var(--tbl);
}
.grd-demo .gd-convo-head {
  flex: none; display: flex; align-items: baseline; gap: 14px;
  padding: 20px 26px 13px; border-bottom: 1px dashed var(--line);
}
.grd-demo .gd-convo-head .ttl {
  font-family: var(--font-display); font-size: 21px; font-weight: 500;
  letter-spacing: -0.01em; line-height: 1.15; color: var(--ink);
}
.grd-demo .gd-convo-head .ttl em { font-style: italic; color: var(--hl-ink); }
.grd-demo .gd-convo-head .sub {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.grd-demo .gd-head-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.grd-demo .gd-icon-btn {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent;
  background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms;
}
.grd-demo .gd-icon-btn:hover { background: #FFFCF4; border-color: var(--line); color: var(--ink); }

.grd-demo .gd-stream { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 28px 26px 20px; }
.grd-demo .gd-stream::-webkit-scrollbar { width: 9px; }
.grd-demo .gd-stream::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, #A9A29A, transparent 65%); border-radius: 6px;
}
.grd-demo .gd-stream-inner {
  max-width: 660px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px;
}
.grd-demo .gd-stream.is-empty { display: flex; flex-direction: column; }
.grd-demo .gd-stream.is-empty .gd-stream-inner { margin: auto; gap: 18px; }

/* Manuscript (empty state) */
.grd-demo .gd-manuscript { display: flex; align-items: center; gap: 16px; }
.grd-demo .gd-manuscript img { height: 34px; width: auto; display: block; }
.grd-demo .gd-manuscript .h {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink);
}
.grd-demo .gd-manuscript .h em { font-style: italic; color: var(--hl-ink); }
.grd-demo .gd-lede {
  margin: -6px 0 0; font-family: var(--font-display); font-size: 16px; line-height: 1.5;
  color: var(--ink2); max-width: 52ch; text-wrap: pretty;
}

/* Messages */
.grd-demo .gd-msg { display: flex; flex-direction: column; gap: 10px; }
.grd-demo .gd-msg--user { align-items: flex-end; animation: gd-rise 340ms cubic-bezier(.22,.61,.36,1) both; }
.grd-demo .gd-who {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: 8px;
}
.grd-demo .gd-who .mark {
  width: 14px; height: 14px; border-radius: 4px; display: grid; place-items: center;
  background: color-mix(in oklch, oklch(0.66 0.11 60), transparent 80%);
  color: var(--hl-ink); font-family: var(--font-display); font-style: italic;
  font-size: 11px; letter-spacing: 0;
}
.grd-demo .gd-bubble {
  display: inline-block; max-width: 92%; padding: 12px 16px;
  border-radius: 18px 18px 4px 18px; background: var(--ink); color: #F7F1E5;
  font-size: 14.5px; line-height: 1.5; letter-spacing: -0.002em;
}
.grd-demo .gd-msg--sch { gap: 14px; animation: gd-rise 340ms cubic-bezier(.22,.61,.36,1) both; }

/* Retrieval steps */
.grd-demo .gd-steps { display: flex; flex-direction: column; gap: 7px; }
.grd-demo .gd-step {
  display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted);
  animation: gd-rise 260ms cubic-bezier(.22,.61,.36,1) both;
}
.grd-demo .gd-step.is-live { color: var(--hl-ink); }
.grd-demo .gd-step .n {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; color: var(--muted2);
}
.grd-demo .gd-spin {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid color-mix(in oklch, oklch(0.66 0.11 60), transparent 72%);
  border-top-color: var(--hl); animation: gd-spin 680ms linear infinite;
}
.grd-demo .gd-tick { color: var(--hl); font-size: 11px; line-height: 1; }

/* Paragraph with gutter cite numbers */
.grd-demo .gd-para {
  display: grid; grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px; align-items: baseline; margin-bottom: 14px;
}
.grd-demo .gd-para:last-child { margin-bottom: 0; }
.grd-demo .gd-gutter {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding-top: 4px;
}
.grd-demo .gd-citenum {
  background: transparent; border: 1px solid color-mix(in oklch, oklch(0.66 0.11 60), transparent 70%);
  border-radius: 5px; color: var(--hl-ink);
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .04em; padding: 1px 5px; cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms;
}
.grd-demo .gd-citenum:hover, .grd-demo .gd-citenum.is-active {
  background: var(--hl); border-color: var(--hl); color: #FAF4E8;
}
.grd-demo .gd-text {
  font-family: var(--font-display); font-size: 17px; line-height: 1.55;
  letter-spacing: -0.002em; color: var(--ink); text-wrap: pretty;
}
.grd-demo .gd-cite {
  font-family: var(--font-display); font-style: italic; color: var(--hl-ink);
  border-bottom: 1px dotted var(--hl); padding: 0 1px; cursor: pointer;
  transition: background 140ms, color 140ms;
}
.grd-demo .gd-cite:hover { background: color-mix(in oklch, oklch(0.66 0.11 60), transparent 80%); color: var(--ink); }
.grd-demo .gd-caret {
  display: inline-block; width: 2px; height: 1em; margin-left: 2px;
  background: var(--hl); vertical-align: -0.14em; animation: gd-blink 900ms steps(1) infinite;
}

/* Composer */
.grd-demo .gd-composer { flex: none; padding: 0 26px 16px; }
.grd-demo .gd-composer-inner {
  max-width: 660px; margin: 0 auto;
  background: #FAF4E8; border: 1px solid color-mix(in oklch, oklch(0.66 0.11 60), transparent 45%);
  border-radius: 20px; padding: 13px 15px 11px;
  box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 10px 26px rgba(52,40,20,.07);
}
.grd-demo .gd-field { font-size: 14.5px; line-height: 1.45; color: var(--ink); min-height: 58px; }
.grd-demo .gd-field.is-empty { color: var(--muted2); font-family: var(--font-display); font-style: italic; }
.grd-demo .gd-crow {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line);
}
.grd-demo .gd-add {
  width: 32px; height: 32px; flex: none; border-radius: 9px; border: none;
  background: rgba(52,48,42,.05); color: var(--muted);
  display: grid; place-items: center;
}
.grd-demo .gd-sel {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 4px;
  font-size: 13.5px; color: var(--ink2); white-space: nowrap;
}
.grd-demo .gd-sel b { font-weight: 500; color: var(--hl-ink); }
.grd-demo .gd-sel svg { color: var(--muted2); }
.grd-demo .gd-sel--r { margin-left: auto; }
.grd-demo .gd-disclaim {
  max-width: 660px; margin: 9px auto 0; text-align: center;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted2);
}
.grd-demo .gd-disclaim .lk { border-bottom: 1px solid var(--muted2); }
.grd-demo .gd-ctag {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px;
  border-radius: 9px; font-size: 12.5px; color: var(--muted); white-space: nowrap;
  background: rgba(52,48,42,.045);
}
.grd-demo .gd-send {
  width: 34px; height: 32px; border-radius: 9px; border: none; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hl-ink); color: #FBF5EA;
}
.grd-demo .gd-hint {
  max-width: 660px; margin: 8px auto 0; display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted2);
}
.grd-demo .gd-hint .kbd {
  font-family: var(--font-mono); font-size: 9.5px; padding: 1px 5px; border-radius: 4px;
  border: 1px solid var(--line); color: var(--muted);
}

/* Suggestion cards (empty state) */
.grd-demo .gd-suggest { display: grid; gap: 8px; }
.grd-demo .gd-sug {
  text-align: left; font-family: inherit; cursor: pointer;
  background: #FFFCF4; border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 5px;
  transition: border-color 140ms, transform 140ms, background 140ms;
}
.grd-demo .gd-sug:hover { border-color: var(--hl); transform: translateY(-1px); }
.grd-demo .gd-sug[disabled] { opacity: .45; pointer-events: none; }
.grd-demo .gd-sug .eb {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--hl-ink);
}
.grd-demo .gd-sug .lbl {
  font-family: var(--font-display); font-size: 15px; line-height: 1.35;
  letter-spacing: -0.008em; color: var(--ink); text-wrap: pretty;
}

/* ── Right rail: research ──────────────────────────────────── */
.grd-demo .gd-tabs {
  flex: none; display: flex; align-items: stretch; gap: 0;
  padding: 0 6px; border-bottom: 1px solid var(--line);
}
.grd-demo .gd-tab {
  position: relative; background: none; border: none; cursor: pointer;
  padding: 14px 11px 12px; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.grd-demo .gd-tab:hover { color: var(--ink); }
.grd-demo .gd-tab.is-on { color: var(--ink); }
.grd-demo .gd-tab.is-on::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: -1px;
  height: 2px; border-radius: 2px 2px 0 0; background: var(--hl);
}
.grd-demo .gd-tab .ct {
  font-family: var(--font-mono); font-size: 9.5px; padding: 1px 5px; border-radius: 4px;
  background: rgba(52,48,42,.06); color: var(--muted);
}
.grd-demo .gd-tab.is-on .ct {
  background: color-mix(in oklch, oklch(0.66 0.11 60), transparent 78%); color: var(--hl-ink);
}

.grd-demo .gd-rail-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 14px 14px 18px; display: flex; flex-direction: column; gap: 9px;
}
.grd-demo .gd-rail-body::-webkit-scrollbar { width: 8px; }
.grd-demo .gd-rail-body::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, #A9A29A, transparent 65%); border-radius: 6px;
}
.grd-demo .gd-filter {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 11px; background: #FFFCF4;
  font-size: 13px; color: var(--muted2);
}
.grd-demo .gd-filter svg { color: var(--muted2); flex: none; }
.grd-demo .gd-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.grd-demo .gd-chip {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 9px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.grd-demo .gd-chip.is-on {
  background: color-mix(in oklch, oklch(0.66 0.11 60), transparent 88%);
  border-color: color-mix(in oklch, oklch(0.66 0.11 60), transparent 60%); color: var(--hl-ink);
}
.grd-demo .gd-rail-empty {
  margin: 4px 2px 0; font-family: var(--font-display); font-style: italic;
  font-size: 14.5px; line-height: 1.5; color: var(--muted2);
}
.grd-demo .gd-src {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 13px; border-radius: 13px; background: #FFFCF4;
  border: 1px solid var(--line);
  animation: gd-rise 320ms cubic-bezier(.22,.61,.36,1) both;
  transition: border-color 140ms, transform 140ms;
}
.grd-demo .gd-src:hover, .grd-demo .gd-src.is-on { border-color: var(--hl); }
.grd-demo .gd-src .head { display: flex; align-items: baseline; gap: 9px; }
.grd-demo .gd-src .badge {
  flex: none; width: 26px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 5px; background: oklch(0.97 0.012 80);
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .02em; color: #3A342C;
}
.grd-demo .gd-src .badge.pdf { background: var(--ink); border-color: var(--ink); color: #F7F1E5; }
.grd-demo .gd-src .ttl {
  font-family: var(--font-display); font-style: italic; font-size: 15px;
  line-height: 1.25; letter-spacing: -0.005em; color: var(--ink);
}
.grd-demo .gd-src .cite {
  display: block; margin-top: 3px; font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .02em; color: var(--muted);
}
.grd-demo .gd-src .meta-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted2);
}
.grd-demo .gd-src .meta-row .ok { color: var(--hl-ink); display: inline-flex; align-items: center; gap: 4px; }
.grd-demo .gd-src .meta-row .ok::before { content: "✓"; font-family: var(--font-display); }
.grd-demo .gd-rail-note {
  flex: none; margin: 0; padding: 11px 14px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted2); line-height: 1.6;
}

@keyframes gd-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes gd-spin { to { transform: rotate(360deg); } }
@keyframes gd-blink { 50% { opacity: 0; } }

/* Collapsed left rail — the icon strip from Scholar's focus layout */
.grd-demo .gd-strip { display: none; }

@media (max-width: 1320px) {
  .grd-demo .gd-app { --rail-l-w: 252px; --rail-r-w: 348px; }
  .grd-demo .gd-stream-inner, .grd-demo .gd-composer-inner, .grd-demo .gd-hint { max-width: 580px; }
}
@media (max-width: 1060px) {
  /* left rail collapses to the icon strip; conversation keeps the floor */
  .grd-demo .gd-app { --rail-l-w: 54px; --rail-r-w: 300px; }
  .grd-demo .gd-rail-l { display: none; }
  .grd-demo .gd-strip {
    position: absolute; z-index: 5;
    left: var(--rail-pad-x); top: var(--rail-pad-y); bottom: var(--rail-pad-y);
    width: var(--rail-l-w);
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 12px 0; min-height: 0;
    background: var(--rail); border-radius: 18px;
    box-shadow: 0 1px 0 oklch(0.78 0.014 75 / 0.45), 0 10px 24px oklch(0.22 0.015 60 / 0.10);
  }
  .grd-demo .gd-strip .av {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: color-mix(in oklch, oklch(0.66 0.11 60), transparent 82%);
    color: var(--hl-ink); font-family: var(--font-display); font-style: italic; font-size: 13px;
  }
  .grd-demo .gd-strip .gl {
    width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
    font-family: var(--font-display); font-size: 15px; color: var(--muted2);
  }
  .grd-demo .gd-strip .gl.is-on {
    background: color-mix(in oklch, oklch(0.66 0.11 60), transparent 86%); color: var(--hl-ink);
  }
  .grd-demo .gd-convo-head { padding: 16px 18px 12px; }
  .grd-demo .gd-convo-head .ttl { font-size: 18px; }
  .grd-demo .gd-stream { padding: 22px 18px 16px; }
  .grd-demo .gd-composer { padding: 0 18px 14px; }
  .grd-demo .gd-text { font-size: 16px; }
  .grd-demo .gd-para { grid-template-columns: 28px minmax(0, 1fr); }
}
@media (max-width: 780px) {
  .grd-demo .gd-app { height: auto; }
  .grd-demo .gd-rail-r { display: none; }
  .grd-demo .gd-main { padding-right: calc(var(--rail-pad-x) + var(--rail-gap)); }
  .grd-demo .gd-stream { min-height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .grd-demo .gd-msg--user, .grd-demo .gd-msg--sch,
  .grd-demo .gd-step, .grd-demo .gd-src { animation: none; }
  .grd-demo .gd-spin { animation-duration: 2s; }
}

/* ============================================================
   DEMO · SOLO — mini Consumer Home. Photo hero, glass composer,
   situation chips. Palette and type lifted from
   src/consumer-home.css (.chA): sunset cream + gold on garden.
   ============================================================ */

.grd-demo2 { position: relative; }
.grd-demo2 .gs2-head { display: none; }
.grd-demo2 .gs2-kicker {
  display: inline-block; font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #b4651e;
  margin-bottom: 16px;
}
.grd-demo2 h2 {
  margin: 0 0 14px; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(32px, 3.2vw, 48px); line-height: 1.08; letter-spacing: -0.015em;
  color: #16241f;
}
.grd-demo2 h2 em { font-style: italic; font-weight: 400; }
.grd-demo2 .gs2-sub {
  margin: 0; font-size: 16.5px; line-height: 1.55; color: #55655c; text-wrap: pretty;
}

/* ── Photo hero shell ──────────────────────────────────────── */
.grd-demo2 .gs2-hero {
  --cream: #f6ddb0;
  --gold:  #f5a233;
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; min-height: min(88vh, 820px);
  border-radius: 0;
  background: #1c2b1a; color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.grd-demo2 .gs2-hero > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 40% 60%;
  transition: filter .6s ease, transform .6s ease;
}
.grd-demo2 .gs2-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to top, rgba(12,20,10,.86) 0%, rgba(12,20,10,.5) 38%, rgba(12,20,10,.12) 68%, transparent 100%),
    linear-gradient(180deg, rgba(12,20,10,.3) 0%, transparent 22%);
  transition: background .6s ease;
}
.grd-demo2 .gs2-hero.is-chatting > img { filter: blur(14px) brightness(.68); transform: scale(1.05); }
.grd-demo2 .gs2-hero.is-chatting .gs2-scrim { background: rgba(12,20,10,.52); }

.grd-demo2 .gs2-copy {
  position: relative; z-index: 10;
  margin: 0 clamp(24px, 6vw, 96px) clamp(40px, 6vh, 76px);
  padding-top: clamp(64px, 12vh, 150px);
  max-width: 720px;
  transition: padding-top .5s cubic-bezier(.2,.8,.2,1);
}
.grd-demo2 .gs2-hero.is-chatting .gs2-copy { padding-top: clamp(40px, 7vh, 80px); }

.grd-demo2 .gs2-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--cream);
}
.grd-demo2 .gs2-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.grd-demo2 .gs2-copy h3 {
  margin: 0 0 12px; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 3.6vw, 52px); line-height: .99; letter-spacing: -0.03em;
  color: #fff; text-shadow: 0 2px 34px rgba(8,14,6,.6);
}
.grd-demo2 .gs2-copy h3 em { font-style: italic; color: var(--cream); }
.grd-demo2 .gs2-copy .lede {
  margin: 0 0 22px; max-width: 44ch;
  font-size: 16.5px; line-height: 1.5; font-weight: 500; color: rgba(255,250,240,.94);
}

/* intro copy collapses once the demo starts */
.grd-demo2 .gs2-intro {
  overflow: hidden; max-height: 360px;
  transition: opacity .34s ease, max-height .5s cubic-bezier(.2,.8,.2,1),
    margin .5s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1);
}
.grd-demo2 .gs2-hero.is-chatting .gs2-intro {
  opacity: 0; max-height: 0 !important; margin: 0 !important;
  transform: translateY(-10px); pointer-events: none;
}

/* ── Thread ────────────────────────────────────────────────── */
.grd-demo2 .gs2-thread {
  display: flex; flex-direction: column; gap: 11px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease, margin-bottom .4s ease;
}
.grd-demo2 .gs2-hero.is-chatting .gs2-thread {
  max-height: 420px; opacity: 1; margin-bottom: 12px; padding: 2px;
}
.grd-demo2 .gs2-msg {
  max-width: 84%; padding: 11px 15px; border-radius: 17px;
  font-size: 15px; line-height: 1.5;
  animation: gs2-pop .32s cubic-bezier(.2,.8,.2,1) both;
}
.grd-demo2 .gs2-msg--user {
  align-self: flex-end; background: rgba(255,252,246,.97); color: #34302A;
  border-bottom-right-radius: 5px; box-shadow: 0 10px 26px rgba(8,14,6,.32);
}
.grd-demo2 .gs2-msg--bot {
  align-self: flex-start; background: rgba(18,28,16,.62); color: rgba(255,250,240,.96);
  border: 1px solid rgba(255,255,255,.15); border-bottom-left-radius: 5px;
  backdrop-filter: blur(8px);
}
.grd-demo2 .gs2-typing { display: inline-flex; gap: 5px; align-items: center; }
.grd-demo2 .gs2-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255,250,240,.7);
  animation: gs2-blink 1.2s infinite ease-in-out;
}
.grd-demo2 .gs2-typing span:nth-child(2) { animation-delay: .18s; }
.grd-demo2 .gs2-typing span:nth-child(3) { animation-delay: .36s; }

/* form card the answer hands back */
.grd-demo2 .gs2-card {
  align-self: flex-start; max-width: 88%;
  display: flex; align-items: center; gap: 13px;
  padding: 13px 15px; border-radius: 15px;
  background: rgba(255,252,246,.96); color: #34302A;
  box-shadow: 0 12px 30px rgba(8,14,6,.3);
  animation: gs2-pop .34s cubic-bezier(.2,.8,.2,1) both;
}
.grd-demo2 .gs2-card .ic {
  width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: rgba(245,162,51,.18); color: #8a5a1c;
}
.grd-demo2 .gs2-card .nm {
  font-family: var(--font-display); font-size: 15.5px; letter-spacing: -0.01em; color: #16241f;
}
.grd-demo2 .gs2-card .mt { display: block; margin-top: 2px; font-size: 12.5px; color: #6c7a70; }
.grd-demo2 .gs2-card .go {
  margin-left: auto; flex: none; padding: 8px 14px; border-radius: 10px;
  background: #16241f; color: #f6ddb0; font-size: 13px; font-weight: 600;
}

/* ── Composer + chips ──────────────────────────────────────── */
.grd-demo2 .gs2-composer {
  position: relative; max-width: 660px;
  background: rgba(255,252,246,.96); border: 1px solid rgba(255,255,255,.6);
  border-radius: 18px; padding: 13px 14px;
  box-shadow: 0 18px 44px rgba(8,14,6,.34);
}
.grd-demo2 .gs2-field {
  font-size: 16px; line-height: 1.45; color: #34302A; min-height: 24px; padding: 4px 6px 8px;
}
.grd-demo2 .gs2-field.is-empty { color: #8E877C; }
.grd-demo2 .gs2-crow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px dashed rgba(52,48,42,.16); padding-top: 11px;
}
.grd-demo2 .gs2-crow .hint { font-size: 12px; line-height: 1.45; color: #8E877C; max-width: 46ch; }
.grd-demo2 .gs2-send {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 12px; border: none;
  background: rgba(52,48,42,.12); color: #6c7a70;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  transition: background 160ms, color 160ms;
}
.grd-demo2 .gs2-hero.is-chatting .gs2-send { background: #16241f; color: #f6ddb0; }

.grd-demo2 .gs2-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.grd-demo2 .gs2-chip {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 9px 15px 9px 12px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.36);
  color: rgba(255,250,240,.95);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  backdrop-filter: blur(4px);
  transition: background 140ms, border-color 140ms, transform 140ms;
}
.grd-demo2 .gs2-chip:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.62); transform: translateY(-1px); }
.grd-demo2 .gs2-chip.is-on { background: rgba(246,221,176,.9); border-color: var(--cream); color: #16241f; }
.grd-demo2 .gs2-chip[disabled] { opacity: .45; pointer-events: none; }
.grd-demo2 .gs2-chip svg { color: var(--cream); }
.grd-demo2 .gs2-chip.is-on svg { color: #8a5a1c; }

.grd-demo2 .gs2-reset {
  margin-top: 14px; padding: 0; border: none; background: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  color: rgba(255,250,240,.6); text-decoration: underline; text-underline-offset: 3px;
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s ease, opacity .3s ease;
}
.grd-demo2 .gs2-hero.is-chatting .gs2-reset { max-height: 30px; opacity: 1; }
.grd-demo2 .gs2-reset:hover { color: #fff; }

.grd-demo2 .gs2-disclaimer {
  margin: 14px 0 0; font-size: 12px; line-height: 1.5;
  color: rgba(255,250,240,.66); max-width: 660px;
}

@keyframes gs2-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes gs2-blink { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

@media (max-width: 760px) {
  .grd-demo2 .gs2-hero { min-height: 600px; }
  .grd-demo2 .gs2-crow .hint { display: none; }
  .grd-demo2 .gs2-msg, .grd-demo2 .gs2-card { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .grd-demo2 .gs2-msg, .grd-demo2 .gs2-card { animation: none; }
  .grd-demo2 .gs2-typing span { animation-duration: 3s; }
}

/* ============================================================
   DEMO · NEXUS — the third banner card opens a request-a-demo
   form instead of a product walkthrough. Lighthouse hero with
   the cream form card lifted from src/contact-us.jsx.
   window.GardenDemoNexus
   ============================================================ */

.grd-demo3 { position: relative; }
.grd-demo3 .gn-hero {
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; min-height: min(88vh, 820px);
  background: #141C26; color: #fff;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: clamp(28px, 4vw, 64px); align-items: center;
  padding: clamp(56px, 9vh, 104px) clamp(24px, 6vw, 96px);
}
.grd-demo3 .gn-hero > img { display: none; }
.grd-demo3 .gn-live { position: relative; z-index: 3; min-width: 0; }
.grd-demo3 .gn-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(176,185,204,.05) 0%, transparent 46%);
}

/* ── Copy ──────────────────────────────────────────────────── */
.grd-demo3 .gn-copy { position: relative; z-index: 3; max-width: 520px; }
.grd-demo3 .gn-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: #B0B9CC;
}
.grd-demo3 .gn-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: #B0B9CC; }
.grd-demo3 .gn-copy h3 {
  margin: 0 0 16px; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(32px, 3.4vw, 50px); line-height: 1.02; letter-spacing: -0.028em;
  color: #fff; text-shadow: 0 2px 30px rgba(4,8,14,.6);
}
.grd-demo3 .gn-copy h3 em { font-style: italic; color: #CDD6E6; }
.grd-demo3 .gn-copy .lede {
  margin: 0 0 26px; max-width: 44ch;
  font-size: 16.5px; line-height: 1.58; color: rgba(240,245,255,.92); text-wrap: pretty;
}
.grd-demo3 .gn-facts { display: flex; flex-direction: column; gap: 0; max-width: 420px; }
.grd-demo3 .gn-facts .row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-top: 1px solid rgba(255,255,255,.16);
}
.grd-demo3 .gn-facts .row:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.grd-demo3 .gn-facts .k {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(240,245,255,.6);
}
.grd-demo3 .gn-facts .v { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.96); }

/* ── Form card ─────────────────────────────────────────────── */
.grd-demo3 .gn-card {
  position: relative; z-index: 3;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 22px; padding: 32px 32px 30px;
  box-shadow: 0 30px 80px -30px rgba(20,8,4,.6), 0 8px 24px rgba(20,8,4,.14);
  color: #34302A;
}
.grd-demo3 .gn-dir {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 32px;
  margin-top: 24px; padding-top: 6px; border-top: 1px solid var(--border);
}
.grd-demo3 .gn-dir .row {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 13px 0;
}
.grd-demo3 .gn-dir .k {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.grd-demo3 .gn-dir .v { font-size: 14px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink); }
.grd-demo3 .gn-card-title {
  margin: 0 0 22px; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(26px, 2.6vw, 32px); line-height: 1.04; letter-spacing: -0.025em;
  color: var(--ink);
}
.grd-demo3 .gn-card-sub { margin: 0 0 22px; font-size: 14px; line-height: 1.5; color: #6c7a70; }

.grd-demo3 .gn-form { display: flex; flex-direction: column; gap: 22px; }
.grd-demo3 .gn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grd-demo3 .gn-field { display: flex; flex-direction: column; gap: 7px; }
.grd-demo3 .gn-label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.grd-demo3 .gn-input, .grd-demo3 .gn-textarea {
  background: var(--surface); border: 1px solid var(--border); border-radius: 11px;
  color: var(--ink); font-family: var(--font-sans); font-size: 15px;
  padding: 11px 13px; outline: none; width: 100%; box-sizing: border-box;
  transition: border-color 180ms, box-shadow 180ms;
}
.grd-demo3 .gn-input::placeholder, .grd-demo3 .gn-textarea::placeholder { color: var(--muted-2); }
.grd-demo3 .gn-input:focus, .grd-demo3 .gn-textarea:focus {
  border-color: var(--ink); box-shadow: 0 0 0 3px rgba(22,36,31,.1);
}
.grd-demo3 .gn-textarea { resize: vertical; min-height: 96px; line-height: 1.55; }

.grd-demo3 .gn-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 2px; }
.grd-demo3 .gn-submit {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: 11px; border: none; cursor: pointer;
  background: var(--ink); color: var(--bg);
  font-family: var(--font-sans); font-size: 15px; font-weight: 500;
  transition: gap 180ms ease, opacity 160ms;
}
.grd-demo3 .gn-submit:hover { gap: 14px; }
.grd-demo3 .gn-submit:disabled { opacity: .55; cursor: progress; }
.grd-demo3 .gn-fine { margin: 0; font-size: 12px; line-height: 1.5; color: #8E877C; max-width: 26ch; }

.grd-demo3 .gn-sent { animation: gn-in 360ms ease; }
@keyframes gn-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.grd-demo3 .gn-sent-title {
  margin: 0 0 12px; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(23px, 2.2vw, 28px); line-height: 1.1; letter-spacing: -0.02em; color: #16241f;
}
.grd-demo3 .gn-sent-sub { margin: 0 0 20px; font-size: 15.5px; line-height: 1.6; color: #524C43; text-wrap: pretty; }
.grd-demo3 .gn-sent-ref {
  margin-bottom: 22px; padding: 12px 0; font-size: 13px; color: #6c7a70;
  border-top: 1px solid rgba(22,36,31,.14); border-bottom: 1px solid rgba(22,36,31,.14);
}
.grd-demo3 .gn-sent-ref b { color: #16241f; font-weight: 600; }
.grd-demo3 .gn-again {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px;
  background: none; border: 1px solid rgba(22,36,31,.24); cursor: pointer;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: #16241f;
  transition: border-color 160ms, background 160ms;
}
.grd-demo3 .gn-again:hover { border-color: #16241f; background: rgba(22,36,31,.05); }

@media (max-width: 1040px) {
  .grd-demo3 .gn-hero { grid-template-columns: 1fr; gap: 34px; }
  .grd-demo3 .gn-card { max-width: 560px; }
}
@media (max-width: 560px) {
  .grd-demo3 .gn-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .grd-demo3 .gn-sent { animation: none; }
}

@media (max-width: 560px) { .grd-demo3 .gn-dir { grid-template-columns: 1fr; } }

/* ══ App windows — the looping case workspace (tab 3 of the Ask demo)
   and the answered-question replays (tabs 1–2) share these styles ══ */


.grp-card {
  display: flex; flex-direction: column;
  border-radius: 20px; overflow: hidden;
  background: #fbf3e7; border: 1px solid rgba(72,49,27,.15);
  box-shadow:
    0 2px 4px rgba(14,20,16,.04),
    0 6px 12px rgba(14,20,16,.05),
    0 14px 28px rgba(14,20,16,.06),
    0 28px 56px rgba(14,20,16,.07),
    0 56px 110px rgba(14,20,16,.09),
    0 100px 190px rgba(14,20,16,.10);
}

.grp-card-head {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 18px; border-bottom: 1px solid rgba(65,47,30,.09);
  background: #f5ebdd;
  font-size: 12px; color: rgba(65,47,30,.62);
}
.grp-card-head .spacer { flex: 1; }
.grp-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 7px;
  background: #8a4708; color: #FDF8EF; font-size: 12px;
}
.grp-thread { color: #291f16; font-weight: 500; }
.grp-pip { width: 3px; height: 3px; border-radius: 50%; background: rgba(65,47,30,.28); }
.grp-live {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(138,71,8,.1); color: #8a4708;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
}
.grp-live::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  animation: grpPulse 1.3s ease-in-out infinite;
}
.grp-live.is-idle::before { animation: none; }
@keyframes grpPulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.grp-body {
  padding: 22px clamp(18px, 3vw, 34px) 26px;
  height: clamp(480px, 56vw, 620px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #cabdad transparent;
  scroll-behavior: smooth;
}

.grp-msg { display: block; }
.grp-msg + .grp-msg { margin-top: 22px; }
.grp-who {
  display: block; margin-bottom: 8px;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(65,47,30,.42);
}
.grp-who b { font-weight: 600; color: rgba(65,47,30,.62); letter-spacing: .1em; }
.grp-msg--user { animation: grpIn 420ms ease both; }
.grp-bubble {
  display: inline-block; max-width: 52ch;
  padding: 12px 16px; border-radius: 18px 18px 5px 18px;
  background: #241c14; color: #f9f0e4;
  font-size: 14.5px; line-height: 1.5;
}
@keyframes grpIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.grp-steps { display: grid; gap: 7px; }
.grp-step {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: rgba(65,47,30,.55);
  animation: grpIn 300ms ease both;
}
.grp-step .n { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; color: rgba(65,47,30,.35); }
.grp-step .tick { color: #8a4708; font-size: 11px; }
.grp-step.is-live { color: #291f16; }
.grp-step .spin {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid rgba(65,47,30,.18); border-top-color: #8a4708;
  animation: grpSpin 700ms linear infinite;
}
@keyframes grpSpin { to { transform: rotate(360deg); } }

.grp-answer { margin-top: 16px; }
.grp-para { display: block; }
.grp-para + .grp-para { margin-top: 14px; }
.grp-gutter { display: flex; gap: 4px; padding-top: 4px; }
.grp-citenum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 5px;
  background: rgba(65,47,30,.06); color: rgba(65,47,30,.5);
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px;
}
.grp-text { font-family: var(--font-display); font-size: 18px; line-height: 1.55; color: rgba(65,47,30,.86); text-wrap: pretty; }
.grp-cite {
  display: inline; padding: 1px 6px; border-radius: 5px;
  background: rgba(138,71,8,.1); color: #804000;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 11.5px;
  white-space: normal;
}
.grp-caret {
  display: inline-block; width: 2px; height: 1.05em; margin-left: 2px;
  vertical-align: -0.16em; background: #8a4708;
  animation: grpBlink 900ms steps(2) infinite;
}
@keyframes grpBlink { 50% { opacity: 0; } }

.grp-srcs { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(65,47,30,.09); }
.grp-srcs-head {
  display: block; margin-bottom: 11px;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(65,47,30,.42);
}
.grp-src {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 0; font-size: 12.5px; color: rgba(65,47,30,.6);
  animation: grpIn 380ms ease both;
}
.grp-src + .grp-src { border-top: 1px dashed rgba(65,47,30,.14); }
.grp-src .badge {
  flex: none; padding: 3px 7px; border-radius: 5px;
  background: rgba(65,47,30,.06); color: rgba(65,47,30,.6);
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 9.5px; letter-spacing: .04em;
}
.grp-src .ttl { color: #291f16; }
.grp-src .cite { font-size: 11.5px; color: rgba(65,47,30,.45); }
.grp-src .ok { margin-left: auto; flex: none; color: #8a4708; font-size: 11px; }

.grp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 18px; border-top: 1px solid rgba(65,47,30,.09);
  background: #f5ebdd;
}
.grp-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.el-app .grp-tabs button {
  border: 0; background: none; cursor: pointer; font: inherit;
  padding: 6px 12px; border-radius: 999px; font-size: 11.5px; color: rgba(65,47,30,.55);
  transition: background 160ms ease, color 160ms ease;
}
.el-app .grp-tabs button:hover { color: #291f16; }
.el-app .grp-tabs button.is-on { background: #fbf3e7; color: #291f16; box-shadow: 0 1px 3px rgba(18,26,20,.12); }
.el-app a.grp-go {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; font-size: 12.5px; font-weight: 500; color: #804000;
}
.el-app a.grp-go:hover { color: #291f16; }

@media (max-width: 780px) {
  .grp-body { height: auto; max-height: 460px; }
  .grp-foot { flex-direction: column; align-items: flex-start; }
}

/* Match the warm Scholar conversation surface. */
.grp-card { border-radius: 24px; }
.grp-msg--user { text-align: right; margin-left: 8%; }
.grp-msg--user .grp-who { display: none; }
.grp-bubble { text-align: left; max-width: 58ch; }
.grp-src { flex-wrap: wrap; gap: 6px 10px; padding: 12px; background: #f8efe2; border: 1px solid #dfd3c3; border-radius: 12px; }
.grp-src + .grp-src { margin-top: 8px; border-top: 1px solid #dfd3c3; }
.grp-src .ttl { font-family: var(--font-display); font-size: 16px; }
.grp-window-controls { display: flex; gap: 6px; margin-right: 8px; flex: none; }
.grp-window-controls i { display: block; width: 9px; height: 9px; border-radius: 50%; background: #ed6a5e; }
.grp-window-controls i:nth-child(2) { background: #f4bf50; }
.grp-window-controls i:nth-child(3) { background: #61c454; }
.grp-foot { background: #f8efe2; }
.el-app .grp-tabs button:focus-visible, .el-app a.grp-go:focus-visible { outline: 2px solid #8a4708; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .grp-live::before, .grp-caret, .grp-step .spin, .grp-msg--user, .grp-step, .grp-src { animation: none; }
  .grp-body { scroll-behavior: auto; }
}

/* Document workflow: approval remains pending until the viewer acts. */
.grp-upload { display:block; padding:10px 12px; margin-bottom:12px; border:1px solid #695342; border-radius:10px; }
.grp-upload small { display:block; opacity:.7; font-size:11px; margin-top:5px; }
.grp-approval { margin:20px 0 0; padding:20px; background:#f8efe2; border:1px solid #dfd3c3; border-radius:16px; color:#291f16; }
.grp-approval > div { display:flex; flex-direction:column; gap:5px; margin:14px 0; font-size:14px; }
.grp-approval p { font-size:13px; line-height:1.5; }
.grp-approval button { background:#804000; color:#fff8ef; border:0; padding:12px 16px; border-radius:10px; cursor:pointer; font:inherit; font-size:13px; }
.grp-approval button:disabled { opacity:.7; cursor:default; }
.grp-approval button:focus-visible { outline:2px solid #804000; outline-offset:4px; }
.grp-approval > small { display:block; margin-top:12px; font-size:11px; color:#756553; }
.grp-tabs { flex-wrap:wrap; }


.grp-card { box-shadow:0 24px 55px rgba(45,48,30,.24),0 3px 10px rgba(45,48,30,.1); }
.gft-animation .grp-card { border-radius:18px; }
.gft-animation .grp-card-head { padding:12px; font-size:11px; }
.gft-animation .grp-thread { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gft-animation-body { padding:20px; }
.gft-animation .grp-bubble {font-size:13px;line-height:1.5;padding:12px 14px;}
.gft-animation .grp-msg {margin-bottom:20px;}
.gft-animated-answer { font-family:var(--font-display); font-size:17px; line-height:1.55; min-height:212px; margin:12px 0; color:#291f16; }
.gft-authority { font-size:11px; color:#804000; }
.gft-animation .grp-foot {padding:10px 14px;font-size:10px;gap:10px;}
.gft-replay {border:0;background:transparent;color:#804000;cursor:pointer;font:inherit;padding:6px;}
.gft-replay:focus-visible {outline:2px solid #804000;outline-offset:2px;}
.gft-accessible-answer {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
@media(max-width:780px) {.gft-animated-answer{font-size:16px;min-height:230px;}}

.gft-tool-steps { min-height:68px; margin:10px 0 12px; }
.gft-tool-steps .grp-step {font-size:11px;}
.gft-animated-answer {min-height:0;}
.gft-source-card {display:flex;flex-direction:column;gap:7px;margin-top:18px;padding:14px 16px;border:1px solid #dfd3c3;border-radius:12px;background:#f8efe2;color:#756553;text-decoration:none;font-size:11px;line-height:1.5;animation:grpIn 420ms ease both;}
.gft-source-card strong {font-family:var(--font-display);font-size:17px;font-weight:500;color:#291f16;}
.gft-source-type,.gft-source-open {color:#804000;font-weight:600;}
.gft-source-card:focus-visible {outline:2px solid #804000;outline-offset:3px;}
@media(prefers-reduced-motion:reduce){.gft-source-card {animation:none;}}

/* Reserve the completed layout while the tool steps and answer appear. */
.gft-animation .grp-card { height:453.6px; }
.gft-animation-body { flex:1; min-height:0; display:flex; flex-direction:column; overflow-y:auto; scrollbar-width:thin; }
.gft-animation .grp-card-head,.gft-animation .grp-foot { flex-shrink:0; }
.gft-tool-steps { flex-shrink:0; }
.gft-animated-answer { margin:8px 0 14px; }
.gft-source-card { margin-top:0; padding:10px 12px; gap:3px; flex-shrink:0; }
.gft-source-card strong { font-size:14px; }
.gft-source-card > span:not(.gft-source-open) { display:none; }
.gft-source-open { font-size:10px; font-weight:400; }
@media(max-width:780px) { .gft-animation .grp-card {height:469.8px;} }

.gft-animation--response .grp-card { height:476.28px; }
@media(max-width:780px) { .gft-animation--response .grp-card {height:493.29px;} }

.gft-sources { margin-top:4px; }
.gft-sources .grp-srcs-head {margin-bottom:8px;font-size:9px;}
.gft-sources .grp-src {text-decoration:none;padding:10px;gap:6px;}
.gft-sources .grp-src .ttl {font-size:14px;}
.gft-sources .grp-src .cite,.gft-sources .grp-src .ok {font-size:10px;}
.gft-sources .grp-src .badge {font-size:9px;}
.gft-sources .grp-src:focus-visible {outline:2px solid #804000;outline-offset:3px;}


.grp-agenda {margin-top:18px;}
.grp-agenda-head {display:flex;justify-content:space-between;margin-bottom:12px;font-size:11px;color:#847463;letter-spacing:.06em;}
.grp-agenda-event {display:flex;gap:18px;padding:16px 18px;margin-top:10px;border:1px solid #dfd3c3;border-radius:14px;background:#f8efe2;animation:grpIn 420ms ease both;}
.grp-agenda-day {width:48px;flex-shrink:0;text-align:center;font-size:11px;letter-spacing:.12em;color:#804000;padding-top:4px;}
.grp-agenda-day span {display:block;margin-top:10px;font-size:21px;}
.grp-agenda-detail {border-left:1px solid #dfd3c3;padding-left:18px;}
.grp-agenda-type {font-size:10px;color:#804000;letter-spacing:.06em;}
.grp-agenda-detail h3 {font-family:var(--font-display);font-size:20px;font-weight:500;color:#291f16;margin:4px 0 5px;}
.grp-agenda-detail strong {font-size:12px;font-weight:500;color:#695646;}
.grp-agenda-detail p {font-size:12px;line-height:1.5;color:#847463;margin:5px 0 0;}
@media(prefers-reduced-motion:reduce){.grp-agenda-event{animation:none;}}

/* ══ Landing v2 — "Ask anything" demo stage + "Less chatting,
   More acting." feature grid, and the header row they share ══ */

.el-app .grd-voice,
.el-app .grd-reviews,
.el-app .grd-ask,
.el-app .grd-acts {
  --gl-gutter: clamp(16px, 3.2vw, 48px);
  --gl-ink: #16241f;
  background: #FDF8EF;
}
.el-app .grd-ask { padding: clamp(72px, 7.4vw, 112px) 0 0; }
.el-app .grd-acts { padding: clamp(80px, 8vw, 120px) 0 0; }

/* ── Header row: headline left, body + link right, bottom-aligned ── */
.gsh {
  width: min(1344px, calc(100% - 2 * var(--gl-gutter)));
  margin: 0 auto;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 48px;
}
.gsh h2 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: 44px; line-height: 1.08; letter-spacing: -0.5px;
  color: var(--gl-ink);
}
.gsh-side { flex: 0 0 400px; max-width: 400px; }
.gsh-side p {
  margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.5;
  color: #16241fc2; text-wrap: pretty;
}
.el-app a.gsh-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-size: 15px; font-weight: 500; color: var(--gl-ink); text-decoration: none;
  border-bottom: 1px solid rgba(22,36,31,.3); padding-bottom: 3px;
  transition: border-color 160ms ease;
}
.el-app a.gsh-link:hover { border-color: var(--gl-ink); color: var(--gl-ink); }
.el-app a.gsh-link:focus-visible { outline: 2px solid var(--gl-ink); outline-offset: 4px; border-radius: 2px; }
@media (max-width: 860px) {
  .gsh { flex-direction: column; align-items: flex-start; gap: 20px; }
  .gsh-side { flex: none; max-width: none; width: 100%; }
  .gsh h2 { font-size: clamp(34px, 5.4vw, 44px); }
}

/* ── Testimonial: no card — photo column left, the quote vertically
   centred beside it, the pair capped and centred on the page; stacks
   photo-over-text when narrow ── */
.el-app .grd-voice { padding: clamp(56px, 5.6vw, 80px) 0 0; }
.gv-card {
  width: min(1080px, calc(100% - 2 * var(--gl-gutter)));
  margin: 0 auto;
  display: grid; grid-template-columns: 320px minmax(0, 1fr); column-gap: clamp(36px, 4.4vw, 56px);
}
.el-app .gv-photo {
  display: block; width: 100%; height: 100%; min-height: 400px;
  border-radius: 16px; object-fit: cover; object-position: 50% 40%; background: #efe7d6;
}
.gv-quote { margin: 0; align-self: center; max-width: 760px; }
.gv-eyebrow {
  margin: 0; font-family: var(--font-sans); font-size: 15px; font-weight: 500;
  color: #4f6b25;
}
.gv-quote blockquote { margin: 26px 0 0; font-family: var(--font-display); color: var(--gl-ink); }
.gv-lead {
  margin: 0; font-size: clamp(28px, 2.66vw, 36px); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em;
  text-wrap: pretty;
}
.gv-body {
  margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: #3d4944;
  text-wrap: pretty;
}
.gv-cite {
  display: flex; flex-direction: column; gap: 3px;
  margin-top: 26px; padding-top: 18px; border-top: 1px solid #e6dfd0;
}
.gv-name { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--gl-ink); }
.gv-role { font-family: var(--font-sans); font-size: 13.5px; color: #696860; }
/* narrow desktop: a slimmer photo column first, then photo over text */
@media (max-width: 960px) {
  .gv-card { grid-template-columns: 240px minmax(0, 1fr); column-gap: 32px; }
  .el-app .gv-photo { min-height: 320px; }
  .gv-lead { font-size: 26px; }
  .gv-body { font-size: 16.5px; }
}
@media (max-width: 700px) {
  .gv-card { grid-template-columns: minmax(0, 1fr); width: min(420px, calc(100% - 2 * var(--gl-gutter))); }
  .el-app .gv-photo { height: auto; min-height: 0; aspect-ratio: 4 / 5; max-height: 440px; }
  .gv-quote { margin-top: 22px; padding: 0 6px; }
}

/* ── Reviewers: everyone who isn't an attorney, under the attorney quote.
   Shared header row on the testimonial's 1080px column, one short line level
   with the title; cards copy the feature-grid card (.gact-card). Two cards
   take two columns, three or more take three. ── */
.el-app .grd-reviews { padding: clamp(72px, 7.4vw, 112px) 0 0; }
.grd-reviews .gsh { width: min(1080px, calc(100% - 2 * var(--gl-gutter))); align-items: baseline; }
.grd-reviews .gsh-side { flex: 0 1 auto; max-width: none; min-width: 0; }
.grv-grid {
  width: min(1080px, calc(100% - 2 * var(--gl-gutter)));
  margin: 44px auto 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.grv-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grv-card {
  margin: 0; min-width: 0; display: flex; flex-direction: column;
  background: #fffdf8; border: 1px solid rgba(22,36,31,.08); border-radius: 20px;
  padding: 28px 28px 26px;
}
.grv-tag { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: #4f6b25; }
.grv-card blockquote {
  margin: 16px 0 0; flex: 1; font-family: var(--font-display); font-size: 20px; line-height: 1.45;
  color: var(--gl-ink); text-wrap: pretty; text-indent: -0.42em;
}
.grv-card blockquote p { margin: 0; }
.grv-cite {
  display: flex; align-items: center; gap: 12px;
  margin-top: 28px; padding-top: 16px; border-top: 1px solid #e6dfd0;
}
.el-app .grv-pic {
  flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #efe7d6;
}
.grv-pic--initials {
  display: grid; place-items: center;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: #4f6b25;
  background: #eef0e2;
}
.grv-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.grv-name { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--gl-ink); }
.grv-role { font-family: var(--font-sans); font-size: 13.5px; color: #696860; }
.grv-more {
  width: min(1080px, calc(100% - 2 * var(--gl-gutter)));
  margin: 28px auto 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  font-family: var(--font-sans); font-size: 16px; color: #16241fc2;
}
.el-app .grv-more a.gsh-link { margin-top: 0; }
@media (max-width: 1000px) {
  .grv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grv-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .grd-reviews .gsh { align-items: flex-start; }
}
@media (max-width: 700px) {
  .grv-grid, .grv-grid:has(> :nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); }
  .grv-grid > :last-child:nth-child(odd) { grid-column: auto; }
  .grv-card blockquote { font-size: 18.5px; }
}

/* ── Demo stage: a painted panel inset like the hero and CTA ── */
.grd-ask .gsh { margin-bottom: 44px; }
.gask-stage {
  position: relative; isolation: isolate; overflow: hidden;
  box-sizing: border-box;
  width: 99%; margin: 0 auto;
  min-height: 640px; border-radius: 22px;
  display: flex; flex-direction: column; align-items: center;
  padding: 32px 0 56px;
  background: #3a3226;
}
.gask-paint {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* the spec tint, deepened behind the tab bar only so the inactive tab
   labels keep >= 4.5:1 contrast over bright sky in the painting */
.gask-stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(28,20,12,.56) 0, rgba(28,20,12,.56) 96px, rgba(28,20,12,0) 230px),
    rgba(28,20,12,.35);
}

/* one joined segmented control, same glass as the hero "Explore" button */
.gask-tabs {
  display: inline-flex; gap: 2px; max-width: calc(100% - 32px);
  padding: 4px; border-radius: 13px;
  border: 1px solid #fff6eb8c; background: #fff6eb14;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.el-app .gask-tab {
  appearance: none; border: 0; margin: 0; cursor: pointer;
  padding: 11px 22px; border-radius: 9px; background: transparent;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: 0.14px; line-height: 1.2;
  color: #fff6ebcc; white-space: nowrap;
  transition: background 180ms ease, color 180ms ease;
}
.el-app .gask-tab:hover { color: #fff6eb; background: #fff6eb14; }
.el-app .gask-tab.is-on { color: #fff6eb; background: #fff6eb33; }
.el-app .gask-tab:focus-visible { outline: 2px solid #fff6eb; outline-offset: 2px; }

/* windows share one grid cell: the stage keeps the tallest one's height */
.gask-windows {
  display: grid; margin-top: 36px;
  width: min(620px, 100% - 32px);
}
.gask-panel {
  grid-area: 1 / 1; min-width: 0;
  transition: opacity 320ms ease, visibility 320ms;
}
.gask-panel:not(.is-on) { opacity: 0; visibility: hidden; pointer-events: none; }
.gask-panel .grp-card { box-shadow: 0 30px 70px rgba(20,14,8,.38), 0 4px 14px rgba(20,14,8,.16); }
.gask-panel .gft-animation .grp-card { border-radius: 18px; }

/* the case workspace window, trimmed to sit with the other two */
.gask-panel .gws-window .grp-card { border-radius: 18px; height: 476px; }
.gask-panel .gws-window .grp-card-head { padding: 12px; font-size: 11px; flex-shrink: 0; }
.gask-panel .gws-window .grp-body { flex: 1; min-height: 0; height: auto; padding: 20px; }
.gask-panel .gws-window .grp-bubble { font-size: 13px; padding: 12px 14px; }
.gask-panel .gws-window .grp-text { font-size: 17px; }
.gask-panel .gws-window .grp-foot { flex-shrink: 0; padding: 10px 14px; }
.gask-panel .gws-window .grp-juris { white-space: nowrap; }

.gask-note {
  margin: 18px auto 0; padding: 0 16px; text-align: center;
  font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: rgba(22,36,31,.63);
}
@media (max-width: 720px) {
  .el-app .gask-tab { padding: 10px 14px; font-size: 13px; }
  .gask-panel .gws-window .grp-card { height: 500px; }
}
@media (prefers-reduced-motion: reduce) {
  .gask-panel { transition: none; }
}

/* ── Feature grid: two wide cards, then three ── */
.grd-acts .gsh { margin-bottom: 44px; }
.gact-grid {
  width: min(1344px, calc(100% - 2 * var(--gl-gutter)));
  margin: 0 auto;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px;
}
.gact-card {
  grid-column: span 2; min-width: 0;
  display: flex; flex-direction: column;
  background: #fffdf8; border: 1px solid rgba(22,36,31,.08);
  border-radius: 20px; overflow: hidden;
}
.gact-card.is-wide { grid-column: span 3; }
.gact-visual {
  position: relative; isolation: isolate; overflow: hidden;
  flex: none; height: 255px; background: #5b5140;
}
.gact-card.is-wide .gact-visual { height: 315px; }
.gact-paint {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.gact-visual::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(28,20,12,.35);
}
.gact-window {
  position: absolute; top: 32px; left: 32px; right: 32px; bottom: -24px;
  overflow: hidden; border-radius: 12px;
  border: 1px solid rgba(22,36,31,.14); background: #fffdf8;
  box-shadow: 0 18px 44px rgba(20,14,8,.26);
}
.gact-window img { display: block; width: 100%; height: auto; }
.gact-text { flex: 1; padding: 24px 26px 26px; }
.gact-eyebrow {
  display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: 1.6px; text-transform: uppercase; color: #16241fa6;
}
.gact-text h3 {
  margin: 12px 0 0; font-family: var(--font-display); font-weight: 400;
  font-size: 25px; line-height: 1.15; letter-spacing: -0.2px; color: var(--gl-ink);
  text-wrap: balance;
}
@media (max-width: 1000px) {
  .gact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gact-card, .gact-card.is-wide { grid-column: span 1; }
  .gact-card:last-child { grid-column: 1 / -1; }
  .gact-card .gact-visual, .gact-card.is-wide .gact-visual { height: 280px; }
  .gact-card:last-child .gact-visual { height: 315px; }
  .gact-card:last-child .gact-window { left: 50%; right: auto; width: min(440px, calc(100% - 64px)); transform: translateX(-50%); }
}
@media (max-width: 720px) {
  .gact-grid { grid-template-columns: 1fr; }
  .gact-card .gact-visual, .gact-card.is-wide .gact-visual,
  .gact-card:last-child .gact-visual { height: 300px; }
  .gact-window { top: 24px; left: 24px; right: 24px; }
  .gact-card:not(.is-wide) .gact-window,
  .gact-card:last-child .gact-window {
    left: 50%; right: auto; width: min(440px, calc(100% - 48px)); transform: translateX(-50%);
  }
}

/* ══ Pricing v2 — plate-topped plan cards ══ */

.gp2-hero {
  position: relative; z-index: 1;
  background: #FDF8EF;
  padding: clamp(96px, 10vw, 150px) clamp(14px, 3vw, 48px) clamp(48px, 6vw, 90px);
}
.gp2-head { max-width: min(1000px, 100%); margin: 0 auto; text-align: center; }
.gp2-head h1 {
  margin: 0 auto 18px; max-width: 17ch; color: #16241f;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(38px, 5.2vw, 74px); line-height: 1.04; letter-spacing: -0.03em;
  text-wrap: balance;
}
.gp2-hero.is-embedded { padding-top: clamp(80px, 8vw, 116px); padding-bottom: clamp(64px, 6vw, 96px); }
.el-app .gp2-hero.is-embedded + .grd-faq { padding-top: clamp(24px, 3vw, 44px); }
.gp2-hero.is-embedded + .grd-faq h2 {
  margin-bottom: clamp(24px, 2.6vw, 34px);
  font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; letter-spacing: -0.015em; font-weight: 500;
}
.gp2-head h2 {
  margin: 0 auto 10px; max-width: 26ch; color: #16241f;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(30px, 2.8vw, 40px); line-height: 1.12; letter-spacing: -0.015em;
  text-wrap: balance;
}
.gp2-head h2 + p { font-size: clamp(14px, 1.1vw, 15.5px); max-width: 56ch; }
.gp2-head p {
  margin: 0 auto; max-width: 48ch;
  font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6;
  color: rgba(22,36,31,.72); text-wrap: pretty;
}

/* billing toggle — a rounded square, not a pill */
.gp2-bill {
  display: flex; justify-content: center; gap: 2px;
  width: max-content; margin: clamp(30px, 3.2vw, 44px) auto 0;
  padding: 4px; border-radius: 13px;
  background: #f1e9dc; border: 1px solid rgba(22,36,31,.08);
}
.el-app .gp2-bill button {
  border: 0; cursor: pointer; background: none;
  padding: 9px 20px; border-radius: 9px;
  font: inherit; font-size: 13.5px; color: #5f6b63;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.el-app .gp2-bill button:hover { color: #16241f; }
.el-app .gp2-bill button.is-on { background: #fffdf8; color: #16241f; box-shadow: 0 1px 3px rgba(18,26,20,.12); }
.el-app .gp2-bill button:focus-visible { outline: 2px solid #556b2f; outline-offset: 2px; }
.gp2-save { color: inherit; font-weight: inherit; }

/* grid: three equal light cards */
.gp2-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px; max-width: 1120px;
  margin: clamp(30px, 3.4vw, 42px) auto 0;
  align-items: stretch;
}

/* card shell */
.gp2-card {
  display: flex; flex-direction: column; min-width: 0;
  border-radius: 22px; overflow: hidden;
  background: #fffdf8; border: 1px solid rgba(22,36,31,.1);
}
.gp2-card.is-rec { border: 2px solid #556b2f; }

/* painting plate across the top */
.gp2-plate {
  position: relative; flex: none; height: 180px; overflow: hidden;
  background: #e8e2d6;
}
.gp2-plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp2-flag {
  position: absolute; top: 14px; right: 14px;
  padding: 6px 12px; border-radius: 999px;
  background: #556b2f; color: #fdf8ef;
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}

.gp2-body { padding: 26px 28px 24px; display: flex; flex-direction: column; flex: 1; }
.gp2-body h3 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; color: #16241f;
}
.gp2-desc {
  margin: 8px 0 0; font-size: 13.5px; line-height: 1.6;
  color: rgba(22,36,31,.68); text-wrap: pretty;
}

/* price: big amount, small period beside it, one billing line under */
.gp2-price { display: flex; align-items: baseline; gap: 10px; margin-top: 20px; }
.gp2-amt {
  font-family: var(--font-display); font-weight: 400;
  font-size: 52px; line-height: 1; letter-spacing: -0.02em; color: #16241f;
  font-variant-numeric: lining-nums;
}
.gp2-per { font-size: 15px; color: rgba(22,36,31,.6); }
.gp2-billing { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: rgba(22,36,31,.6); }

/* feature list */
.gp2-list { margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(22,36,31,.1); }
.gp2-listhead { margin: 0 0 12px; font-size: 12.5px; font-weight: 500; color: #16241f; }
.gp2-list ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.gp2-list li {
  display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start;
  font-size: 14px; line-height: 1.45; color: rgba(22,36,31,.82);
}
.gp2-check { width: 14px; height: 14px; margin-top: 3px; color: #556b2f; }

/* the spacer pushes every CTA onto one row across the three cards */
.gp2-spacer { flex: 1; min-height: 28px; }
.el-app a.gp2-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; box-sizing: border-box; border-radius: 10px; text-decoration: none;
  font-size: 14px; font-weight: 500;
  border: 1px solid transparent;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.el-app .gp2-card--free a.gp2-cta { background: transparent; color: #16241f; border-color: rgba(22,36,31,.22); }
.el-app .gp2-card--free a.gp2-cta:hover { border-color: #16241f; background: rgba(22,36,31,.04); }
.el-app .gp2-card--plus a.gp2-cta { background: #556b2f; color: #fdf8ef; }
.el-app .gp2-card--plus a.gp2-cta:hover { background: #45591f; color: #fff; }
.el-app .gp2-card--max a.gp2-cta { background: #16241f; color: #fdf8ef; }
.el-app .gp2-card--max a.gp2-cta:hover { background: #0c1612; color: #fff; }
.el-app a.gp2-cta:focus-visible { outline: 2px solid #556b2f; outline-offset: 3px; }
.gp2-credit { margin: 14px 0 0; font-size: 11px; font-style: italic; color: rgba(22,36,31,.5); }

.gp2-note {
  max-width: 70ch; margin: clamp(34px, 4vw, 56px) auto 0;
  padding: 0 clamp(14px, 3vw, 48px);
  text-align: center; font-size: 12.5px; line-height: 1.6; color: #6c7a70;
}

@media (max-width: 900px) {
  .gp2-grid { grid-template-columns: 1fr; max-width: 520px; }
}

/* Side by side, the three cards share one set of rows (subgrid), so the
   titles, prices, lists and CTA buttons line up across cards however long
   each description runs. Stacked, or without subgrid, the flex column and
   its spacer above the CTA keep each card's button at the bottom. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .gp2-grid { row-gap: 0; }
    .gp2-card { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; }
    .gp2-body { display: contents; }
    .gp2-card .gp2-body > * { margin-left: 28px; margin-right: 28px; }
    .gp2-card .gp2-body > h3 { margin-top: 26px; }
    .gp2-desc { align-self: start; }
    .gp2-price { align-self: end; }
    .gp2-list { align-self: start; }
    .gp2-spacer { display: none; }
    .el-app a.gp2-cta { margin-top: 28px; }
    .gp2-credit { margin-bottom: 24px; }
  }
}

  html, body { margin: 0; padding: 0; background: #FDF8EF; }
  html { scroll-behavior: smooth; }
  a { color: var(--accent-ink); }
  a:hover { color: var(--ink); }
}