/* =========================================================
   CREdocket — Design System
   Editorial "legal meets skyline" theme
   ========================================================= */

:root {
  /* Surfaces */
  --bg: #f2f3f6;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-hover: #eceff4;
  --border: #d6dae2;
  --border-soft: #e2e5eb;

  /* Text */
  --text-primary: #0b0d12;
  --text-secondary: #3d4453;
  --text-muted: #626b7d;

  /* Accent (azure) */
  --accent: #3355ff;
  --accent-bright: #6b85ff;
  --accent-deep: #1b2e99;
  --accent-wash: rgba(51, 85, 255, 0.08);

  /* Redline -- a legal-filing-stamp red, distinct from --ui-danger (that's
     generic "something failed"; this is "this is real, filed, current" --
     the mark a docket stamp or a redlined document actually uses). Spent
     in exactly one place: the homepage hero's live indicator. Not a
     status or category color, and not meant to spread beyond that. */
  --redline: #b3261e;

  /* Hero-only tokens (homepage). Kept as their own small set (rather than
     reusing --bg/--text-* directly) so the hero's precise, technical
     register (grid lines, telemetry stats, a live-tracking map) can be
     tuned independently of the rest of the site's editorial theme --
     stayed light on user feedback ("still prefer a lighter color
     palette") after a full-dark "mission control" pass read as the
     wrong register entirely, even though the underlying idea (precise,
     technical, grid-aligned, real data as the graphic) was right. */
  --hero-bg: #f4f5f8;
  --hero-panel: #ffffff;
  --hero-panel-hover: #eef0f4;
  --hero-text: #0b0d12;
  --hero-text-dim: #3d4453;
  --hero-text-faint: #7a8194;
  --hero-grid-line: #dde1e8;

  /* Category & status colors -- rebuilt in OKLCH (2026-09).
     The previous 14 values were byte-for-byte stock Tailwind swatches
     (e.g. #2563eb is exactly blue-600) sharing no perceptual relationship
     with each other or with --accent, which is why --cat-zoning and
     --status-ruling could end up identical (#16a34a, both green-600) --
     two unrelated facets (practice area vs. procedural stage) rendering
     as the same color entirely by accident.

     Method: every category sits at the SAME lightness/chroma (L=0.64,
     C=0.135 -- vivid, matched weight), every status at a DIFFERENT,
     lower lightness/chroma (L=0.60, C=0.095) -- so a category and a
     status can never collide even at a near-identical hue, because they
     occupy a different "weight class" by construction, not just a
     different hue. Hues are evenly spread (9 categories at ~35.6deg
     apart, comfortably above the ~30deg minimum for reliable
     discrimination; the 5 statuses sit at the midpoint between category
     pairs, phase-shifted so no status hue ever equals a category hue),
     and the full sweep excludes a +-20deg band around --accent's own hue
     (267.5deg) so no category/status can be mistaken for the
     interactive/link blue. Recompute with any OKLCH tool (oklch.com) if
     this ever needs to change -- keep the same L/C bands and the accent
     exclusion band when you do. */
  --cat-landlord: #00a0bc;
  --cat-zoning: #59a050;
  --cat-reit: #bf7b0f;
  --cat-construction: #d16a52;
  --cat-lending: #897dd9;
  --cat-environmental: #00a68a;
  --cat-eminent: #cc668a;
  --cat-lease: #989006;
  --cat-premises: #b36ebb;

  --status-filed: #8e71ad;
  --status-pending: #987d36;
  --status-ruling: #a76991;
  --status-settled: #b2686c;
  --status-appeal: #ad6f48;

  /* UI-semantic (generic success/error/warning feedback -- sign-in
     status, form validation, toasts). Deliberately a SEPARATE namespace
     from the --status-* litigation-taxonomy colors above: those two were
     being silently cross-used via var(--status-x, #fallback) in several
     places, which meant a successful sign-in rendered in muted "settled"
     slate and a form error rendered in "appeal" orange -- the fallback
     hex (the color actually intended) never fired because --status-settled
     and --status-appeal are always defined. These values ARE those
     original, correct fallbacks, just finally wired to their own tokens. */
  --ui-success: #1a8a5f;
  --ui-danger: #d94949;
  --ui-warning: #b45309;
  --ui-success-soft: color-mix(in srgb, var(--ui-success) 14%, transparent);
  --ui-danger-soft: color-mix(in srgb, var(--ui-danger) 12%, transparent);
  --ui-warning-soft: color-mix(in srgb, var(--ui-warning) 14%, transparent);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;

  /* Scale */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;
  /* Buttons only -- deliberately NOT --radius-full. A full-pill radius was
     previously used for every interactive control (buttons, chips, status
     pills, avatars alike), which flattened all shape hierarchy into one
     silhouette. Pill stays reserved for true tags/badges/chips; anything
     you click to navigate or submit gets this smaller, more structural
     radius instead -- also a better fit for the "blueprint/skyline" concept
     this theme is going for than an all-pill UI. */
  --radius-btn: 8px;

  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 10px 28px rgba(15, 23, 42, 0.14);
  --shadow-lg: 0 28px 72px rgba(15, 23, 42, 0.22);
  --shadow-glow: 0 0 0 1px rgba(51, 85, 255, 0.3), 0 10px 36px rgba(51, 85, 255, 0.22);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --container: 1240px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

::selection { background: var(--accent); color: #ffffff; }

/* Skip-to-content link: invisible until keyboard-focused, then jumps a
   keyboard/screen-reader user straight past the repeated nav (WCAG 2.4.1
   Bypass Blocks) to the page's actual content, which is wrapped in a
   <main id="main-content"> on every page. */
.skip-link {
  position: absolute; top: -48px; left: 12px; z-index: 2000;
  background: var(--text-primary); color: #ffffff;
  padding: 10px 18px; border-radius: 8px;
  font-size: 13.5px; font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; outline: 2px solid var(--accent); outline-offset: 2px; }

/* Background texture: faint blueprint grid */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(51, 85, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 85, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 70%);
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}
.section { padding: 120px 0; position: relative; z-index: 1; }
.section-tight { padding: 80px 0; }
@media (max-width: 900px) {
  .section { padding: 80px 0; }
  .container { padding: 0 20px; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--accent);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.25;
}
.lede {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--text-secondary);
  max-width: 640px;
  line-height: 1.65;
}
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-accent { color: var(--accent); }
.mono { font-family: var(--font-mono); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-btn);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.3s ease, border-color 0.3s ease, opacity 0.2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: #ffffff;
}
.btn-primary:hover { background: var(--accent-deep); box-shadow: var(--shadow-md); }
.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-primary);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 10px 18px; font-size: 13px; }
.btn svg { width: 16px; height: 16px; }
.btn:disabled, .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  background: var(--text-muted);
}
.btn-ghost:disabled, .btn-ghost[disabled] { background: transparent; border-color: var(--border); color: var(--text-muted); }

/* ---------- Navbar ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 0;
  transition: background 0.4s ease, border-color 0.4s ease, padding 0.4s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--border-soft);
  padding: 14px 0;
}
.nav .container { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.brand-accent { color: var(--accent); }
.brand-mark { width: 30px; height: 30px; flex-shrink: 0; }
.brand small { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--text-muted); font-weight: 500; display: block; margin-top: 1px; }

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--text-secondary); white-space: nowrap;
  position: relative; padding: 4px 0; transition: color 0.25s ease;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1px;
  background: var(--accent); transition: right 0.35s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--text-primary); }
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }
.nav-cta { display: flex; align-items: center; gap: 24px; }
.nav-toggle { display: none; }

/* ---------- Nav dropdown ---------- */
.nav-item.has-dropdown { display: inline-flex; align-items: center; position: relative; }
.nav-caret-btn {
  display: inline-flex; align-items: center; justify-content: center; margin-left: 2px;
  width: 22px; height: 22px; padding: 0; background: none; border: none; cursor: pointer;
  color: var(--text-secondary); transition: color 0.2s ease;
}
.nav-caret-btn:hover { color: var(--text-primary); }
.nav-caret { transition: transform 0.2s ease; }
.nav-item.has-dropdown:hover .nav-caret,
.nav-item.has-dropdown.open .nav-caret { transform: rotate(180deg); }

/* top:100% with zero gap + padding-top for the visual offset — a real gap here
   (via top:calc(100% + Npx) or margin-top) breaks :hover continuity, because
   the cursor crosses empty space that belongs to no element on its way down
   from the trigger to the panel, so the dropdown closes before it's reached. */
.nav-dropdown {
  position: absolute; top: 100%; left: 0; transform: translateY(4px);
  padding-top: 14px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 60;
}
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown.open .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.nav-dropdown > a {
  display: block; background: var(--bg-elevated); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg); padding: 9px 14px; font-size: 13.5px; font-weight: 500;
  color: var(--text-secondary); white-space: nowrap;
}
.nav-dropdown > a:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.nav-dropdown > a:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.nav-dropdown > a:not(:last-child) { border-bottom: none; }
.nav-dropdown > a::after { content: none; }
.nav-dropdown > a:hover { background: var(--surface); color: var(--text-primary); }
.nav-dropdown > a.active { color: var(--accent-deep); }

/* ---------- Nav dropdown group labels ----------
   Used once: inside the Tools menu, to keep the AI-powered / rule-based
   distinction (restored per user request as its own top-level "AI
   Tools" menu, then folded back in here when the 9-item nav read as
   crowded) without spending a whole extra top-level slot on it. Not an
   <a> -- :first-child/:last-child above naturally skip it, so it gets
   its own explicit corner-rounding instead. */
.nav-dropdown-label {
  display: block; background: var(--bg-elevated); border: 1px solid var(--border); border-bottom: none;
  padding: 8px 14px 4px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
}
.nav-dropdown-label:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; padding-top: 10px; }
.nav-dropdown-label:not(:first-child) { border-top: 1px solid var(--border-soft); margin-top: 4px; }

@media (max-width: 1180px) {
  .nav-item.has-dropdown { display: flex; flex-wrap: wrap; align-items: center; width: 100%; justify-content: space-between; }
  .nav-item.has-dropdown > a { flex: 1 1 auto; }
  .nav-dropdown {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    padding-top: 0; width: 100%; flex-basis: 100%;
    max-height: 0; overflow: hidden; transition: max-height 0.35s ease;
  }
  /* Was 400px -- the largest submenu (8 items, some with long labels that
     wrap to 2 lines at mobile widths) measured live at over 400px of real
     content, so its own overflow:hidden silently clipped 3 of 8 links
     with no way to reach them, independent of the outer panel's own
     scroll fix above. Raised well past any realistic submenu height. */
  .nav-item.has-dropdown.open .nav-dropdown { max-height: 900px; }
  .nav-dropdown > a {
    background: none; border: none; box-shadow: none; padding: 9px 4px 9px 18px;
    font-size: 15.5px; white-space: normal;
  }
  .nav-item.has-dropdown .nav-caret-btn { width: 36px; height: 36px; }
  .nav-dropdown-label {
    background: none; border: none; padding: 14px 4px 4px 18px; font-size: 11px;
  }
  .nav-dropdown-label:first-child { border-radius: 0; padding-top: 10px; }
  .nav-dropdown-label:not(:first-child) { border-top: none; margin-top: 6px; }
}

@media (max-width: 1180px) {
  /* BUG FIX: this panel used to center its content vertically with no
     scroll container while page scroll is locked open (see js/main.js) --
     verified live, opening the largest dropdown (8 items) pushed the last
     3-4 links entirely off-screen with no way to reach them, and on
     shorter viewports (iPhone SE) even "Home"/"Contact" could scroll out
     of view in both directions. overflow-y:auto + flex-start (growing
     downward from a fixed top, not centering and overflowing both edges)
     + a dvh-based height cap fixes this without changing anything visual
     when the content already fits. */
  .nav-links { position: fixed; top: 0; right: 0; height: 100dvh; width: min(320px, 80vw);
    background: var(--bg-elevated); border-left: 1px solid var(--border); flex-direction: column;
    justify-content: flex-start; align-items: flex-start; gap: 28px; padding: 88px 40px 40px; transform: translateX(100%);
    transition: transform 0.45s var(--ease); z-index: 99;
    overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: 18px; }
  /* 28x31px measured live -- under both Apple HIG (44x44pt) and Material
     Design (48x48dp) minimum tap targets, on the only control that opens
     mobile navigation. Padding grows to reach 44x44 without growing the
     visible three-bar icon itself. */
  .nav-toggle { display: flex; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; z-index: 101; background: none; border: none; padding: 0; }
  .nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--text-primary); transition: transform 0.3s ease, opacity 0.3s ease; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .nav-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; z-index: 98; }
  .nav-scrim.open { opacity: 1; pointer-events: auto; }

  /* The brand subtitle eats into the little width left for search/auth/
     hamburger once the wordmark is accounted for at the narrower end of
     this range -- drop it here rather than shrinking the brand itself,
     which stays the most important thing in that row. nowrap/flex-shrink
     protection for the auth widget and nav links themselves is a base
     rule now (applies at every width, not just here) since the crowding
     that caused "Sign in"/"Sign out" to wrap wasn't mobile-only -- it hit
     mid-width laptop windows above this breakpoint too. */
  .brand small { display: none; }
  .nav-cta { gap: 12px; }
}

@media (max-width: 400px) {
  /* Below ~400px even the tightened row above gets snug -- drop the email
     preview width a bit further and shave the sign-in pill's padding. */
  .auth-nav-email { max-width: 90px; }
  .auth-nav-signin { padding: 8px 12px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  padding: 148px 0 96px;
  overflow: hidden;
}

.hero-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
@media (max-width: 980px) { .hero-layout { grid-template-columns: 1fr; } }

.hero h1 { font-size: clamp(2.4rem, 3.6vw, 3.9rem); }
@media (min-width: 1400px) { .hero h1 { font-size: clamp(2.4rem, 3.2vw, 4.2rem); } }

.hero > .container { will-change: transform, opacity; }

/* ---------- Hero pills: one shared shape/size for the primary CTA and the
   "New Today" / "New: Handbook" callouts, so they read as one confident
   row of actions instead of a big button with two washed-out afterthoughts. ---------- */
.hero-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: var(--radius-btn);
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s ease, background 0.3s ease, opacity 0.2s ease;
}
.hero-pill svg { width: 15px; height: 15px; flex-shrink: 0; }
.hero-pill-primary {
  background: var(--accent);
  color: #ffffff;
}
.hero-pill-primary:hover { background: var(--accent-deep); box-shadow: var(--shadow-md); }
.hero-pill:disabled, .hero-pill[disabled] {
  opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important;
}
/* Was var(--status-ruling) -- another instance of the exact cross-
   namespace misuse the --ui-* tokens (see :root) exist to prevent: "live/
   active" needs an unambiguous green regardless of what color the
   litigation-taxonomy "Ruling Issued" status happens to be this week.
   The OKLCH rebuild above is what surfaced this one -- --status-ruling
   is no longer green at all, which would have made the "live" indicator
   read as mauve/pink instead of "go." */
.hero-pill-live {
  background: color-mix(in srgb, var(--ui-success) 14%, var(--bg-elevated) 86%);
  color: var(--ui-success);
  border-color: color-mix(in srgb, var(--ui-success) 45%, transparent);
}
.hero-pill-live:hover { border-color: var(--ui-success); box-shadow: 0 10px 28px color-mix(in srgb, var(--ui-success) 22%, transparent); }
.hero-pill-live .hero-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pill-pulse 1.8s ease-in-out infinite; flex-shrink: 0; }
@keyframes pill-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.7); } }
.hero-pill-new {
  background: var(--accent-wash);
  color: var(--accent-deep);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.hero-pill-new:hover { border-color: var(--accent); box-shadow: 0 10px 28px rgba(51,85,255,0.16); }
.hero-pill-ghost {
  background: transparent; border-color: var(--border); color: var(--text-primary);
  padding: 14px 22px;
}
.hero-pill-ghost:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; }
@media (max-width: 560px) {
  .hero-pill { padding: 12px 18px; font-size: 13.5px; }
}


/* ---------- Cards ---------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--accent-deep); box-shadow: var(--shadow-md); background: var(--surface-hover); }

/* Cursor-follow spotlight (set via JS custom properties --mx / --my) */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(51, 85, 255, 0.10), transparent 70%);
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.card:hover::before { opacity: 1; }
.card > * { position: relative; z-index: 1; }

.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--radius-md);
  background: var(--accent-wash); margin-bottom: 20px;
  transition: transform 0.4s var(--ease), background 0.4s ease;
}
.card-icon svg { width: 22px; height: 22px; }
.card:hover .card-icon { transform: scale(1.08) rotate(-4deg); background: color-mix(in srgb, var(--accent) 16%, transparent); }

.case-card { display: flex; flex-direction: column; gap: 16px; cursor: pointer; height: 100%; }
.case-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.case-card h3 { font-size: 1.15rem; }
.case-card .summary { font-size: 14px; color: var(--text-secondary); line-height: 1.6; flex-grow: 1; }
.case-card-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); padding-top: 14px; border-top: 1px solid var(--border-soft); }
.case-card-meta span:first-child { flex-shrink: 0; white-space: nowrap; }
.case-card-meta span:last-child { text-align: right; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
  font-family: var(--font-mono); text-transform: uppercase;
  white-space: nowrap;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; }

.badge-sample {
  background: var(--accent-wash);
  color: var(--accent-deep);
  border: 1px solid rgba(51,85,255,0.3);
}

/* Same fix as .hero-pill-live above -- this badge means "credits
   remaining," "Verified Update," "Chapter N," never the litigation
   status "Ruling Issued," so it shouldn't be tied to that token. */
.badge-live {
  background: color-mix(in srgb, var(--ui-success) 12%, transparent);
  color: var(--ui-success);
  border: 1px solid color-mix(in srgb, var(--ui-success) 40%, transparent);
}

.badge-trending {
  background: color-mix(in srgb, var(--status-pending) 14%, transparent);
  color: var(--ui-warning);
  border: 1px solid color-mix(in srgb, var(--status-pending) 45%, transparent);
}

.status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; flex-shrink: 0; }
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; }

/* ---------- Grid ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 980px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- Pricing page ---------- */
.btn-block { display: flex; width: 100%; justify-content: center; }
.pricing-card { display: flex; flex-direction: column; }
.pricing-card-featured { border-color: var(--accent); box-shadow: var(--shadow-md); }
.pricing-price { font-family: var(--font-display); font-size: 2.4rem; font-weight: 600; color: var(--text-primary); line-height: 1; }
.pricing-period { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--text-muted); }
.pricing-features { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); flex-grow: 1; }
.pricing-features li { padding-left: 22px; position: relative; }
.pricing-features li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--accent-wash);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233355ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 9px;
}
.pricing-faq-item { padding: 18px 0; border-top: 1px solid var(--border-soft); }
.pricing-faq-item:first-of-type { border-top: none; }
.pricing-faq-item h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.pricing-faq-item p { font-size: 13.5px; line-height: 1.65; }

/* ---------- Section header ---------- */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 56px; flex-wrap: wrap; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px) scale(0.985); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in-view { opacity: 1; transform: translateY(0) scale(1); }
.reveal-stagger > * { opacity: 0; transform: translateY(24px) scale(0.98); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal-stagger.in-view > * { opacity: 1; transform: translateY(0) scale(1); }
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0.02s; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.09s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.23s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.30s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.37s; }
.reveal-stagger.in-view > *:nth-child(n+7) { transition-delay: 0.42s; }

/* ---------- Divider / blueprint accents ---------- */
.rule { height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); }

/* ---------- Newsletter band (site-wide, above footer) ---------- */
/* This used to run our own "Get the litigation digest in your inbox"
   headline right beside beehiiv's embedded form -- which renders its OWN
   full branded card (title, description, subscribe button) inside the
   iframe. Two separate pitches for the same thing, stacked or side by
   side depending on viewport width, reads as broken rather than
   intentional. beehiiv's card already says what this is; our job is just
   to frame it like it belongs on the page. */
.newsletter-band { padding: 56px 0; background: var(--bg-elevated); border-top: 1px solid var(--border-soft); }
/* Block + margin:auto centering rather than flex -- as a flex item,
   .newsletter-embed's width:100% resolved against its own shrink-to-fit
   content size (beehiiv's script-managed wrapper divs) instead of the
   card's width, capping it at beehiiv's ~320px default regardless of the
   max-width set here. Block layout resolves percentage widths against the
   parent's content box unconditionally, which is what we actually want. */
.newsletter-card {
  padding: 32px; border-radius: var(--radius-lg); background: var(--accent-wash); border: 1px solid rgba(51,85,255,0.18);
}
.newsletter-embed { width: 100%; max-width: 420px; margin: 0 auto; }
/* beehiiv's own resize handshake (which is supposed to expand its wrapper
   from height:0 once the iframe reports its real content height) doesn't
   reliably fire in every context. Force a sensible fixed height instead of
   depending on it — !important is required to beat the inline styles
   beehiiv's script writes directly onto these elements. */
.newsletter-embed > div { width: 100%; }
.newsletter-embed > div > div { height: auto !important; overflow: visible !important; }
.newsletter-embed iframe {
  height: 435px !important; min-height: 435px !important; width: 100% !important;
  border-radius: 12px; box-shadow: 0 4px 16px rgba(15,23,42,0.08);
}

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border-soft); padding: 72px 0 36px; position: relative; z-index: 1; background: var(--bg-elevated); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 56px; }
.footer-col h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-family: var(--font-mono); margin-bottom: 18px; font-weight: 600;}
.footer-col a, .footer-col p { font-size: 14px; color: var(--text-secondary); display: block; margin-bottom: 12px; transition: color 0.2s ease; }
.footer-col a:hover { color: var(--accent); }

/* ---------- Legal document pages (Privacy, Terms) ---------- */
.legal-doc h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--text-primary); margin: 40px 0 14px; scroll-margin-top: 150px; }
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc p { font-size: 15px; line-height: 1.75; color: var(--text-secondary); margin-bottom: 14px; }
.legal-doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Quarterly report hero: the report's intro (title, lede,
   stats) and its "at a glance" takeaways card are companion pieces, not
   sequential reading -- side by side in the header on desktop instead
   of the takeaways card repeating the stats' job one full-width section
   further down the page. */
.qr-hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 980px) { .qr-hero-grid { grid-template-columns: 1fr; gap: 8px; } }
/* The stat row reuses .hero-telemetry-stat's number/label type (same
   treatment as the homepage hero and litigation.html), laid out as its
   own 2x2 grid instead of a bordered flex row -- a divided single row
   doesn't have the width to work with once it's sharing the header with
   the takeaways card. */
/* Combined with .hero-telemetry in the selector (not a plain descendant
   rule) so this beats .hero-telemetry's own display:flex on specificity
   rather than depending on which rule happens to sit later in the
   cascade -- both are otherwise equal, single-class selectors. */
.hero-telemetry.qr-hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 32px; margin-top: 40px; }
.qr-hero-stats .hero-telemetry-stat { padding-left: 0; border-left: none; }
/* Lift the card off the header photo instead of the flat, borderless
   look it has full-width further down the page. */
.qr-hero-aside .qr-takeaways { margin: 0; box-shadow: var(--shadow-md); }

/* ---------- Quarterly report: takeaways strip + accordion + matters ----
   v1 (a sticky "Jump to:" pill nav) only made a long page easier to
   navigate -- it never reduced how much rendered by default, so
   scrolling from topic 1 to topic 4 still meant passing every paragraph
   of 1-3. Direct feedback that it "still sucks." Two independent agent
   reviews of this page converged on the same diagnosis and the same
   fix: collapse the ~2,500-word essay by default (an at-a-glance
   takeaways strip + an accordion, one topic pre-expanded) and swap the
   matters section's heavy .case-card grid for compact, filterable
   .case-chip rows -- shrinking what's on screen at first paint instead
   of just adding a shortcut past it. */
.qr-takeaways {
  margin: 28px 0 36px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-elevated); overflow: hidden;
}
.qr-takeaways-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border-soft);
}
.qr-expand-all {
  background: none; border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: 5px 13px; font-size: 12px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; transition: all 0.2s ease;
}
.qr-expand-all:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
.qr-takeaway-row {
  display: block; padding: 14px 20px; border-bottom: 1px solid var(--border-soft);
  transition: background 0.2s ease;
}
.qr-takeaway-row:last-child { border-bottom: none; }
.qr-takeaway-row:hover { background: var(--surface-hover); }
.qr-takeaway-row-matters { background: var(--accent-wash); }
.qr-takeaway-title {
  display: block; font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
  color: var(--text-primary); margin-bottom: 3px;
}
.qr-takeaway-dek { display: block; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }

/* ---------- Accordion (native <details>/<summary> -- free keyboard
   support, and print media just shows every panel open regardless). ---------- */
.qr-topic { border-bottom: 1px solid var(--border-soft); scroll-margin-top: 96px; }
.qr-topic:last-of-type { border-bottom: none; }
.qr-topic summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; cursor: pointer; list-style: none;
}
.qr-topic summary::-webkit-details-marker { display: none; }
.qr-topic summary h2 { margin: 0; scroll-margin-top: 0; }
.qr-chevron {
  flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.25s ease;
}
.qr-chevron::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
}
.qr-topic[open] .qr-chevron { transform: rotate(180deg); }
.qr-topic-body { padding-bottom: 28px; }
.qr-topic-body p:first-child { margin-top: 0; }
.qr-related-matters { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.qr-related-matters-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }

/* ---------- Matters: filter pills + compact chip list ----------
   Replaces .grid-3 of .case-card blocks (~220-280px each) with the
   ~40px .case-chip row already used for this exact "compact reference
   list" job elsewhere on the site (judges'/companies' matters lists). */
.qr-matters-filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.qr-matters-list .case-chip { border-bottom: 1px solid var(--border-soft); }
.qr-matters-list .case-chip:last-child { border-bottom: none; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; border-top: 1px solid var(--border-soft); font-size: 13px; color: var(--text-muted); flex-wrap: wrap; gap: 12px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Disclosure banner ---------- */
.disclosure {
  display: flex; align-items: center; gap: 12px;
  background: var(--accent-wash);
  border: 1px solid rgba(51,85,255,0.25);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  font-size: 13.5px;
  color: var(--text-secondary);
}
.disclosure strong { color: var(--accent-deep); }
.disclosure svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--accent); }

/* ---------- Page header (interior pages) ----------
   Was 168px 0 64px, unchanged at every width -- on every one of the 107
   interior pages sharing this banner (tools, guides, directories alike),
   that's ~230px of pure padding before the eyebrow/h1 even starts, no
   tighter on a phone than on a desktop monitor. Direct feedback: "you
   have to scroll way down to see what you are looking at" -- true
   everywhere this banner sits above the actual tool or content someone
   came for. Tightened here and further under the mobile breakpoint. */
.page-header { padding: 128px 0 48px; position: relative; z-index: 1; }
@media (max-width: 900px) { .page-header { padding: 108px 0 36px; } }

/* ---------- Filter bar (litigation page) ---------- */
.filter-bar {
  position: sticky; top: 82px; z-index: 40;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin-bottom: 48px;
  display: flex; flex-direction: column; gap: 16px;
}
.filter-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.search-input-wrap { position: relative; flex-grow: 1; min-width: 220px; }
.search-input-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); }
.search-input {
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-full); padding: 11px 16px 11px 40px; font-size: 14px;
  color: var(--text-primary); transition: border-color 0.25s ease, background 0.25s ease;
}
.search-input:focus { outline: none; border-color: var(--accent); background: var(--surface-hover); box-shadow: 0 0 0 3px var(--accent-wash); }
.search-input::placeholder { color: var(--text-muted); }

.select-wrap { position: relative; }
.select-input {
  appearance: none; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-full); padding: 11px 36px 11px 16px; font-size: 13.5px;
  color: var(--text-primary); cursor: pointer; transition: border-color 0.25s ease;
}
.select-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.select-wrap::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px;
  border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted);
  transform: translateY(-65%) rotate(45deg); pointer-events: none;
}

.chip-row { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: transparent;
  font-size: 12.5px; font-weight: 500; color: var(--text-secondary);
  transition: all 0.25s ease;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; }
.chip:hover { border-color: var(--text-muted); color: var(--text-primary); }
.chip.active { background: var(--surface-hover); border-color: currentColor; color: var(--text-primary); }

.results-count { font-size: 13px; color: var(--text-muted); font-family: var(--font-mono); }

/* ---------- Export dropdown (litigation tracker filter bar) --------
   Click-toggled (a .open class from JS), not the nav's hover-based
   .nav-dropdown -- a hover panel doesn't work on touch, and this needs
   to stay open while the user reads the two options. */
.export-dropdown { position: relative; }
.export-dropdown > .btn svg { transition: transform 0.18s ease; }
.export-dropdown.open > .btn svg { transform: rotate(180deg); }
.export-menu-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 180px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.export-dropdown.open .export-menu-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.export-menu-panel button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 11px 14px; font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.export-menu-panel button:hover { background: var(--surface); color: var(--text-primary); }
.export-menu-panel button:not(:last-child) { border-bottom: 1px solid var(--border-soft); }

/* ---------- Tracker overview (jurisdiction map) ----------
   Used to be a side-by-side grid with an SVG "timeline by practice
   area" chart in the other column -- direct user feedback: dense,
   unreadable, and added nothing the map didn't already show better.
   Removed (js/timeline.js deleted entirely, nothing else referenced
   it); the map now runs as a single centered column. */
.timeline-section { position: relative; z-index: 1; }
.tracker-overview-col { min-width: 0; }
.tracker-overview-head { margin-bottom: 20px; }
.tracker-overview-head h2 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); margin: 6px 0 10px; }
.tracker-overview-head p { font-size: 13px; }

/* ---------- City spotlight (shown when a state is selected) ---------- */
.city-spotlight {
  margin-top: 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--bg-elevated), var(--surface));
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.5s var(--ease), opacity 0.4s ease, margin-top 0.5s var(--ease);
}
.city-spotlight.open { max-height: 320px; opacity: 1; }
.city-spotlight-inner { display: flex; align-items: center; gap: 28px; padding: 24px 28px; flex-wrap: wrap; }
.city-spotlight-svg { flex: 1 1 320px; min-width: 260px; height: 150px; }
.city-spotlight-info { flex: 0 0 auto; }
.city-spotlight-info .eyebrow { margin-bottom: 8px; }
.cityscape-caption { font-family: var(--font-display); font-size: 1.4rem; color: var(--text-primary); }
.cityscape-caption strong { color: var(--accent-deep); }
.city-spotlight-count { margin-top: 10px; font-size: 13px; color: var(--text-secondary); font-family: var(--font-mono); }

.city-spotlight-photo { position: relative; width: 100%; height: 100%; border-radius: var(--radius-md); overflow: hidden; }
.city-spotlight-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.city-spotlight-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--bg-elevated) 0%, rgba(0,0,0,0) 45%), linear-gradient(0deg, rgba(0,0,0,0.18), rgba(0,0,0,0) 60%);
  mix-blend-mode: normal;
}
.city-spotlight-photo-credit {
  position: absolute; bottom: 8px; right: 10px; font-family: var(--font-mono); font-size: 10px;
  color: rgba(255,255,255,0.85); text-shadow: 0 1px 3px rgba(0,0,0,0.6); z-index: 1; letter-spacing: 0.02em;
}

/* ---------- Markets / photo showcase (homepage) ---------- */
.market-strip { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.market-strip::-webkit-scrollbar { height: 6px; }
.market-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.market-card {
  display: block; position: relative; flex: 0 0 auto; width: 264px; height: 330px; border-radius: var(--radius-lg);
  overflow: hidden; scroll-snap-align: start; border: 1px solid var(--border);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); cursor: pointer;
}
.market-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--shadow-lg); }
.market-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  animation: kenburns 22s ease-in-out infinite alternate;
}
.market-card:nth-child(even) img { animation-name: kenburns-alt; animation-duration: 26s; }
.market-card:nth-child(3n) img { animation-duration: 19s; }
.market-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,14,26,0.85) 0%, rgba(10,14,26,0.15) 45%, rgba(10,14,26,0) 65%);
}
.market-card-label { position: absolute; left: 18px; bottom: 16px; z-index: 1; color: #fff; }
.market-card-label .city { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; display: block; }
.market-card-label .meta { font-family: var(--font-mono); font-size: 11px; opacity: 0.85; margin-top: 4px; display: block; letter-spacing: 0.03em; }
.market-card-tag {
  position: absolute; top: 12px; right: 12px; z-index: 1; font-family: var(--font-mono); font-size: 9.5px;
  color: rgba(255,255,255,0.92); background: rgba(10,14,26,0.45); padding: 4px 9px; border-radius: 20px;
  backdrop-filter: blur(2px); letter-spacing: 0.03em; text-transform: uppercase; text-align: right; max-width: 130px;
}

/* ---------- Ken Burns ambient photo motion (used site-wide) ---------- */
@keyframes kenburns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.14) translate(-2.5%, -1.5%); }
}
@keyframes kenburns-alt {
  0%   { transform: scale(1.1) translate(-2%, 0); }
  100% { transform: scale(1.22) translate(0%, -2%); }
}
@media (prefers-reduced-motion: reduce) {
  .market-card img, .page-header-photo img, .hero-photo img, .cta-photo-card img { animation: none !important; }
  .hero-glow, .hero-pill-dot { animation: none !important; }
  .reveal, .reveal-stagger > * {
    transition: opacity 0.3s ease !important;
    transform: none !important;
  }
  .card:hover, .market-card:hover, .state-pill:hover { transform: none !important; }
}

/* ---------- Decorative page-header graphic + photo backdrop ---------- */
.page-header { position: relative; overflow: hidden; }
.page-header-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.page-header-photo img {
  width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) brightness(0.96);
  animation: kenburns 30s ease-in-out infinite alternate;
}
.page-header-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, var(--bg) 0%, var(--bg) 32%, rgba(242,243,246,0.55) 55%, rgba(242,243,246,0) 78%),
    linear-gradient(180deg, rgba(242,243,246,0) 55%, var(--bg) 100%);
}
.page-header-graphic {
  position: absolute; top: 0; right: 0; width: min(60%, 640px); height: 100%;
  pointer-events: none; z-index: 1; opacity: 0.9;
}
.page-header .container { position: relative; z-index: 2; }

/* ---------- Photo-backed CTA cards ---------- */
.cta-photo-card { position: relative; overflow: hidden; isolation: isolate; }
.cta-photo-card > .cta-photo-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cta-photo-bg img {
  width: 100%; height: 100%; object-fit: cover;
  animation: kenburns 26s ease-in-out infinite alternate;
}
.cta-photo-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(10,14,26,0.9) 10%, rgba(10,14,26,0.55) 55%, rgba(10,14,26,0.3) 100%);
}
.cta-photo-card h2, .cta-photo-card p, .cta-photo-card .text-secondary { color: rgba(255,255,255,0.92); }
.cta-photo-card .btn-ghost { border-color: rgba(255,255,255,0.35); color: #fff; }

/* ---------- Hero backdrop (homepage) ----------
   v1 was a stock skyline photo under a brand-color wash with a schematic
   skyline SVG on top -- generic real-estate stock art. v2 replaced that
   with a light ruled-paper hero and a "fanned papers" card stack -- the
   fan (each card rotated a couple degrees, per direct user feedback)
   read as a rendering bug, not a deliberate look. v3: full mission-
   control register -- near-black, grid-aligned, monospace telemetry,
   nothing tilted. This product tracks litigation the way a range
   tracks a vehicle: precisely, continuously, in a straight line. */
.hero {
  position: relative; overflow: hidden;
  background: var(--hero-bg);
  color: var(--hero-text);
}
.hero-grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--hero-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--hero-grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 30%, black 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 80% 70% at 30% 30%, black 0%, transparent 72%);
}
.hero-reticle {
  position: absolute; z-index: 0; pointer-events: none;
  top: 50%; right: 6%; width: 640px; height: 640px; transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid var(--hero-grid-line);
}
.hero-reticle::before, .hero-reticle::after {
  content: ""; position: absolute; border-radius: 50%; border: 1px solid var(--hero-grid-line);
}
.hero-reticle::before { inset: 90px; }
.hero-reticle::after { inset: 190px; }
@media (max-width: 980px) { .hero-reticle { display: none; } }

.hero-layout { position: relative; z-index: 1; }

.hero-live {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  color: var(--hero-text-dim); text-transform: uppercase; letter-spacing: 0.09em;
}
.hero-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--redline); flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--redline) 22%, transparent);
  animation: pill-pulse 1.8s ease-in-out infinite;
}

.hero h1 {
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--hero-text);
  margin-top: 18px;
}
.hero .lede { color: var(--hero-text-dim); }

.hero-audience {
  margin-top: 18px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--hero-text-faint);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.hero-browse {
  margin-top: 28px; font-size: 12.5px; color: var(--hero-text-faint);
  display: flex; flex-wrap: wrap; gap: 6px 0;
}
.hero-browse a { color: var(--hero-text-dim); text-decoration: none; border-bottom: 1px solid transparent; }
.hero-browse a:hover { color: var(--hero-text); border-bottom-color: currentColor; }
.hero-browse .sep { margin: 0 8px; color: var(--hero-grid-line); }

/* ---------- Hero buttons (sharp, high-contrast -- distinct from the
   shared .hero-pill used on the guide pages' light hero banners) ---------- */
.hero-actions-mission { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; align-items: center; }
.hero-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 3px;
  font-size: 13.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform 0.25s var(--ease), background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.hero-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.hero-btn-primary { background: var(--hero-text); color: var(--hero-bg); }
.hero-btn-primary:hover { background: var(--hero-text-dim); transform: translateY(-1px); }
.hero-btn-ghost { background: transparent; border-color: var(--hero-grid-line); color: var(--hero-text); }
.hero-btn-ghost:hover { border-color: var(--hero-text-dim); }
.hero-btn-live {
  background: transparent; border-color: color-mix(in srgb, var(--redline) 45%, transparent); color: var(--redline);
}
.hero-btn-live .hero-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pill-pulse 1.8s ease-in-out infinite; }

/* ---------- Telemetry stat row ---------- */
.hero-telemetry { display: flex; gap: 40px; margin-top: 52px; flex-wrap: wrap; }
.hero-telemetry-stat { padding-left: 18px; border-left: 1px solid var(--hero-grid-line); }
.hero-telemetry-stat:first-child { padding-left: 0; border-left: none; }
.hero-telemetry-stat .num {
  font-family: var(--font-mono); font-size: 2rem; font-weight: 600; color: var(--hero-text);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.hero-telemetry-stat .label {
  margin-top: 6px; font-size: 11px; color: var(--hero-text-faint);
  font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---------- Live tracking map (hero, right column) ----------
   The actual jurisdiction map (js/usmap.js, js/us-state-paths.js --
   the same one on litigation.html, which the user singled out as
   working well) rendered right in the hero as its real graphic,
   instead of a decorative skyline or another block of text -- glowing
   accent dots over real geography reads as "slick" without inventing
   a new visual language the rest of the site doesn't have. Below it,
   3 of the most recently filed real matters, flat and grid-aligned
   (no rotation, no card shadow), each a real [data-case-id] so the
   site's existing global click handler opens its real detail panel. */
.hero-map {
  position: relative; background: var(--hero-panel);
  border: 1px solid var(--hero-grid-line); border-radius: 6px;
  box-shadow: var(--shadow-sm);
}
.hero-map::before, .hero-map::after {
  content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none;
}
.hero-map::before { top: -1px; left: -1px; border-top: 2px solid var(--hero-text); border-left: 2px solid var(--hero-text); }
.hero-map::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--hero-text); border-right: 2px solid var(--hero-text); }
.hero-feed-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 20px; border-bottom: 1px solid var(--hero-grid-line);
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
}
.hero-feed-live { display: flex; align-items: center; gap: 8px; color: var(--hero-text); font-weight: 600; }
.hero-feed-sub { color: var(--hero-text-faint); }
.hero-map-svg { padding: 22px 22px 6px; }
.hero-map-svg svg { width: 100%; height: auto; display: block; }
/* Brighter than the tracker page's own map (var(--accent)) and with a
   soft glow -- here the map IS the hero's graphic, not a supporting
   utility next to a results grid, so its active markers carry more
   visual weight. */
.hero-map-svg .state-path-active .state-path {
  fill: var(--accent-bright);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 55%, transparent));
}
.hero-map-svg .state-path-active:hover .state-path { fill: var(--accent-deep); }
.hero-feed-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 20px; border-top: 1px solid var(--hero-grid-line);
  cursor: pointer; transition: background 0.2s ease;
}
.hero-feed-row:hover { background: var(--hero-panel-hover); }
.hero-feed-row-no { flex-shrink: 0; display: flex; align-items: center; }
.hero-feed-row-no .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.hero-feed-row-title { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--hero-text); line-height: 1.4; }
.hero-feed-row-title span { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--hero-text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 3px; }
.hero-feed-row-date { flex-shrink: 0; font-family: var(--font-mono); font-size: 10.5px; color: var(--hero-text-faint); white-space: nowrap; }
@media (max-width: 980px) { .hero-map { margin-top: 12px; } .hero-reticle { display: none; } }

/* ---------- US jurisdiction map ---------- */
.usmap-wrap { max-width: 780px; margin: 0 auto; }
.usmap-wrap svg { width: 100%; height: auto; }

.state-path {
  stroke: var(--bg-elevated);
  stroke-width: 1.5;
  stroke-linejoin: round;
  transition: fill-opacity 0.25s ease, filter 0.25s ease, transform 0.25s var(--ease);
  transform-box: fill-box;
  transform-origin: center;
}
.state-path-inactive .state-path { fill: var(--border-soft); }
.state-path-active .state-path { fill: var(--accent); cursor: pointer; }
.state-path-active { cursor: pointer; }
.state-path-active:hover .state-path,
.state-path-active:focus .state-path {
  filter: brightness(0.85);
  transform: scale(1.015);
}
.state-path-active:focus { outline: none; }
.state-path-active:focus .state-path { stroke: var(--accent-deep); stroke-width: 2.5; }

.state-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  fill: #ffffff;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--accent-deep);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

.state-pill-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 32px; }
.state-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--surface);
  font-size: 12.5px; font-weight: 500; color: var(--text-secondary);
  cursor: pointer; transition: all 0.25s ease;
}
.state-pill .count { font-family: var(--font-mono); color: var(--text-muted); font-size: 11px; }
.state-pill:hover { border-color: var(--accent-deep); color: var(--text-primary); transform: translateY(-2px); }
.state-pill.active { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-deep); }

/* ---------- Detail panel (slide-over) ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,0.45);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity 0.4s ease; z-index: 200;
}
.overlay.open { opacity: 1; pointer-events: auto; }

.detail-panel {
  position: fixed; top: 0; right: 0; height: 100%;
  width: min(520px, 92vw);
  background: var(--bg-elevated);
  border-left: 1px solid var(--border);
  z-index: 201;
  transform: translateX(100%);
  transition: transform 0.5s var(--ease);
  overflow-y: auto;
  padding: 40px;
}
.detail-panel.open { transform: translateX(0); }
.detail-close {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; background: var(--surface);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.detail-close:hover { border-color: var(--accent); transform: rotate(90deg); }
.detail-panel .top-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }
.detail-panel h2 { font-size: 1.7rem; margin: 18px 0 10px; }
.byline-row { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.byline-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-deep); color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 600; flex: none; display: flex; align-items: center; justify-content: center; }
.byline-text { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.byline-text a { color: var(--accent-deep); font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent-deep) 35%, transparent); }
.byline-text a:hover { border-bottom-color: var(--accent-deep); }
.detail-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 28px 0; padding: 22px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.detail-meta-grid .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-family: var(--font-mono); margin-bottom: 5px; }
.detail-meta-grid .value { font-size: 14px; color: var(--text-primary); font-weight: 500; }
.detail-panel .body-text { font-size: 15px; color: var(--text-secondary); line-height: 1.75; margin-bottom: 20px; }
.detail-panel .tag-row, .tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.detail-tag { font-size: 11.5px; padding: 5px 12px; border-radius: var(--radius-full); background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); font-family: var(--font-mono); transition: border-color 0.2s ease, color 0.2s ease; }
.detail-tag:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Glossary term hover tooltips (in-article, replaces the old
   standalone glossary page) ---------- */
.glossary-term {
  border-bottom: 1px dotted var(--text-muted);
  cursor: help;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.glossary-term:hover, .glossary-term:focus-visible, .glossary-term.is-active {
  border-bottom-color: var(--accent); color: var(--accent-deep); outline: none;
}
.glossary-tooltip-bubble {
  position: fixed; z-index: 300; width: min(320px, calc(100vw - 32px));
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 16px 18px;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.glossary-tooltip-bubble.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.glossary-tooltip-bubble .term { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.glossary-tooltip-bubble .definition { font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.glossary-tooltip-bubble .close-btn {
  display: none; position: absolute; top: 10px; right: 10px; width: 22px; height: 22px;
  align-items: center; justify-content: center; border-radius: 50%; color: var(--text-muted);
}
@media (hover: none) {
  .glossary-tooltip-bubble .close-btn { display: flex; }
  .glossary-tooltip-bubble .term { padding-right: 20px; }
}

/* ---------- Auth: nav widget ---------- */
.auth-nav-slot { display: flex; align-items: center; flex-shrink: 0; position: relative; }
.auth-nav-signin {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--text-primary);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: 8px 16px; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap; flex-shrink: 0;
}
.auth-nav-signin:hover { border-color: var(--accent); color: var(--accent); }

/* Signed-in state used to show the full raw email address inline in the
   nav at all times -- ~150-200px of extra width on every single page,
   which combined with a page-specific CTA (litigation.html's "Talk to
   us") could genuinely overflow the viewport in the ~1180-1260px window
   between the mobile breakpoint and where that much content actually
   fits. A small avatar button + click-to-reveal dropdown holds the
   email/sign-out behind ~36px instead, the same pattern virtually every
   SaaS nav uses for this exact reason. */
.auth-nav-account { position: relative; flex-shrink: 0; }
.auth-nav-avatar-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; text-transform: uppercase;
  color: var(--accent-deep); background: var(--accent-wash); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  cursor: pointer; transition: border-color 0.2s ease;
}
.auth-nav-avatar-btn:hover, .auth-nav-avatar-btn[aria-expanded="true"] { border-color: var(--accent); }
.auth-nav-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.14); padding: 14px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.auth-nav-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
.auth-nav-dropdown-email {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary);
  overflow-wrap: break-word; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft);
}
.auth-nav-signout {
  width: 100%; font-family: var(--font-body); font-size: 12.5px; color: var(--text-secondary);
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: 6px 12px; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.auth-nav-signout:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Auth: sign-in modal ---------- */
.auth-modal-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(11,13,18,0.5);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease; padding: 20px;
}
.auth-modal-overlay.open { opacity: 1; pointer-events: auto; }
.auth-modal {
  position: relative; width: 100%; max-width: 400px; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 32px; transform: translateY(8px); transition: transform 0.25s ease;
}
.auth-modal-overlay.open .auth-modal { transform: translateY(0); }
.auth-modal-close {
  position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); display: flex; align-items: center;
  justify-content: center; color: var(--text-secondary); cursor: pointer;
}
.auth-modal-close:hover { border-color: var(--accent); color: var(--accent); }
.auth-modal .auth-modal-input {
  width: 100%; padding: 11px 14px; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-primary); font-size: 14px; font-family: var(--font-body);
}
.auth-modal .auth-modal-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.auth-modal-status { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--text-muted); min-height: 1em; }
.auth-modal-status.is-success { color: var(--ui-success); }
.auth-modal-status.is-error { color: var(--ui-danger); }

.auth-modal-tabs { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 3px; margin-bottom: 4px; }
.auth-modal-tab {
  flex: 1; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--text-muted);
  background: transparent; border: none; border-radius: var(--radius-full); padding: 7px 10px; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.auth-modal-tab.active { background: var(--bg-elevated); color: var(--text-primary); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06)); }
.auth-modal-switch { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; }
.auth-modal-link {
  background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: var(--accent);
  cursor: pointer; text-decoration: underline;
}

/* ---------- Paywall gate card ---------- */
.gate-card {
  padding: 24px; border-radius: var(--radius-md); background: var(--surface);
  border: 1px dashed var(--border); margin-bottom: 24px;
}
.gate-card.is-loading { color: var(--text-muted); font-size: 13.5px; text-align: center; padding: 32px 24px; }

.primary-source-link {
  display: flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 10px 14px;
  background: var(--accent-wash); border: 1px solid rgba(51,85,255,0.25); border-radius: var(--radius-md);
  color: var(--accent-deep); font-size: 13px;
}
.primary-source-link svg { flex-shrink: 0; color: var(--accent); }
.primary-source-link a { color: var(--accent-deep); font-weight: 600; }

.detail-cta {
  margin-top: 28px; padding: 20px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent-soft, rgba(51,85,255,0.06)), var(--bg-elevated));
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.detail-cta-text { display: flex; flex-direction: column; gap: 3px; }
.detail-cta-text strong { font-size: 14.5px; color: var(--text-primary); }
.detail-cta-text span { font-size: 13px; color: var(--text-secondary); }

/* ---------- Case timeline (detail panel) ---------- */
.case-timeline { position: relative; padding-left: 4px; }
.timeline-event { position: relative; padding: 0 0 20px 24px; }
.timeline-event:last-child { padding-bottom: 4px; }
.timeline-event::before {
  content: ""; position: absolute; left: 4.5px; top: 14px; bottom: -6px; width: 1.5px;
  background: var(--border);
}
.timeline-event:last-child::before { display: none; }
.timeline-event-dot {
  position: absolute; left: 0; top: 3px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg-elevated); border: 2px solid var(--border);
}
.timeline-event.is-current .timeline-event-dot { border-color: var(--accent); background: var(--accent); }
.timeline-event.is-upcoming .timeline-event-dot { border-style: dashed; border-color: var(--text-muted); background: transparent; }
.timeline-event-when { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); letter-spacing: 0.02em; display: flex; align-items: center; gap: 8px; }
.timeline-event.is-current .timeline-event-when { color: var(--accent-deep); font-weight: 600; }
.timeline-event-label { font-size: 14px; color: var(--text-secondary); margin-top: 3px; line-height: 1.5; }
.timeline-event.is-current .timeline-event-label { color: var(--text-primary); }
.timeline-upcoming-tag {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--status-pending); background: color-mix(in srgb, var(--status-pending) 14%, transparent);
  padding: 2px 7px; border-radius: var(--radius-full);
}

/* ---------- Toast (window.RELAW_UTILS.showToast, js/main.js) ---------- */
.toast-host {
  position: fixed; bottom: 24px; right: 24px; z-index: 400;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(360px, calc(100vw - 32px));
}
.toast {
  background: var(--bg-elevated); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 14px 18px; font-size: 13.5px; line-height: 1.5; color: var(--text-primary);
  cursor: pointer; opacity: 0; transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.in-view { opacity: 1; transform: translateY(0); }
.toast.is-error { border-left-color: var(--ui-danger); }

/* ---------- Case chip (window.RELAW_UTILS.caseChipHtml, js/main.js) ----
   Compact single-line reference to a matter -- category dot + status dot
   + title + date -- used wherever a case is referenced from outside the
   tracker grid itself (a judge's or company's matters list, a court's
   docket), so those never degrade to a bare colorless text link again. */
.case-chip {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; padding: 7px 0; font-size: 13px; color: var(--text-secondary);
  transition: color 0.2s ease;
}
.case-chip:hover { color: var(--accent-deep); }
.case-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.case-chip-title { flex: 1 1 auto; min-width: 0; }
.case-chip-date { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 80px 20px; color: var(--text-muted); }
.empty-state svg { width: 48px; height: 48px; margin: 0 auto 20px; opacity: 0.5; }

/* ---------- Global search ---------- */
.nav-search-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-secondary);
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.nav-search-toggle:hover { border-color: var(--accent-deep); color: var(--accent-deep); transform: translateY(-1px); }
.nav-search-toggle svg { width: 16px; height: 16px; }

.search-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 20px 20px;
}
.search-overlay.open { opacity: 1; pointer-events: auto; }

.search-panel {
  width: 100%; max-width: 640px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(-16px);
  opacity: 0;
  transition: transform 0.3s var(--ease), opacity 0.3s ease;
}
.search-overlay.open .search-panel { transform: translateY(0); opacity: 1; }

.search-input-row {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-soft);
}
.search-input-row svg.icon { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.search-input-row input {
  flex-grow: 1; border: none; outline: none; background: transparent;
  font-size: 16px; color: var(--text-primary); font-family: var(--font-body);
}
.search-input-row input::placeholder { color: var(--text-muted); }
.search-hint { font-size: 11px; font-family: var(--font-mono); color: var(--text-muted); border: 1px solid var(--border); border-radius: 5px; padding: 3px 6px; flex-shrink: 0; }
.search-close-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-secondary); transition: border-color 0.2s ease; }
.search-close-btn:hover { border-color: var(--accent-deep); }
.search-close-btn svg { width: 14px; height: 14px; }

.search-results { max-height: 60vh; overflow-y: auto; }
.search-result-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 20px; cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.15s ease;
}
.search-result-row:last-child { border-bottom: none; }
.search-result-row:hover, .search-result-row.active-result { background: var(--surface-hover); }
.search-result-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.search-result-body h4 { font-size: 14.5px; font-weight: 600; margin-bottom: 4px; }
.search-result-body p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.search-result-body mark { background: var(--accent-wash); color: var(--accent-deep); font-weight: 600; border-radius: 2px; }
.search-result-meta { font-size: 11px; font-family: var(--font-mono); color: var(--text-muted); margin-top: 6px; }

.search-empty, .search-placeholder { padding: 48px 20px; text-align: center; color: var(--text-muted); font-size: 14px; }
.search-view-all { display: block; text-align: center; padding: 14px; font-size: 13px; font-weight: 600; color: var(--accent-deep); background: var(--accent-wash); cursor: pointer; }
.search-view-all:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* ---------- Updates feed (chronological) ---------- */
.sort-toggle { display: flex; gap: 4px; padding: 4px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-full); margin: 0 auto 20px; max-width: 780px; width: fit-content; }
.sort-toggle-btn { border: none; background: transparent; padding: 8px 16px; border-radius: var(--radius-full); font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; white-space: nowrap; }
.sort-toggle-btn:hover { color: var(--text-primary); }
.sort-toggle-btn.is-active { background: var(--accent); color: #fff; }
.updates-feed { position: relative; max-width: 780px; margin: 0 auto; }
.updates-feed::before {
  content: "";
  position: absolute;
  left: 84px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border);
}
@media (max-width: 640px) {
  .updates-feed::before { left: 6px; }
}

.update-row {
  position: relative;
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 28px;
  padding: 28px 0;
  cursor: pointer;
}
.update-row:not(:last-child) { border-bottom: 1px solid var(--border-soft); }
@media (max-width: 640px) {
  .update-row { grid-template-columns: 1fr; gap: 10px; padding-left: 24px; }
}

.update-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
  padding-top: 3px;
  line-height: 1.5;
}
@media (max-width: 640px) { .update-date { text-align: left; } }

.update-dot {
  position: absolute;
  left: 92px;
  top: 32px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--border);
  transition: transform 0.25s var(--ease);
}
@media (max-width: 640px) { .update-dot { left: 0; } }
.update-row:hover .update-dot { transform: scale(1.25); }

.update-content h3 { font-size: 1.05rem; margin-bottom: 8px; transition: color 0.2s ease; }
.update-row:hover .update-content h3 { color: var(--accent-deep); }
.update-content .summary { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 12px; }
.update-meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); }
.update-read-cue { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 600; font-size: 12.5px; opacity: 0; transform: translateX(-4px); transition: all 0.25s ease; }
.update-row:hover .update-read-cue { opacity: 1; transform: translateX(0); }

/* ---------- About page ---------- */
.value-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 860px) { .value-row { grid-template-columns: 1fr; } }
.value-item { padding: 28px 0; border-top: 1px solid var(--border-soft); }
.value-item .num { font-family: var(--font-mono); color: var(--accent); font-size: 13px; margin-bottom: 14px; display: block; }

/* ---------- Contact page ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.form-field { margin-bottom: 22px; }
.form-field label { display: block; font-size: 12.5px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 9px; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px 16px; font-size: 14.5px; color: var(--text-primary); transition: border-color 0.25s ease;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.form-field textarea { resize: vertical; min-height: 120px; }

.contact-info-item { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--border-soft); }
.contact-info-item .icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--accent-wash); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent); }
.contact-info-item .icon svg { width: 18px; height: 18px; }

/* ---------- Utility ---------- */
.flex { display: flex; }
.items-center { align-items: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.hidden { display: none !important; }

/* ---------- Print (downloadable briefing, item 17) ---------- */
@media print {
  .nav, .nav-scrim, .newsletter-band, .footer, .no-print,
  .page-header-graphic, .auth-modal-overlay, #detail-panel, .overlay,
  .search-overlay { display: none !important; }
  body { background: #fff; }
  .page-header { padding-top: 20px; }
  .page-header-photo { display: none; }
  .card, .gate-card, .legal-doc { box-shadow: none !important; border: 1px solid #ccc !important; }
  a { text-decoration: underline; color: #000 !important; }
  .container { max-width: 100% !important; }
  /* Preserve category/status dot colors -- without this, Chrome/Safari
     drop CSS background-colors by default when printing, so every
     colored dot (case-chip, status-pill, badge) would print as a blank
     white circle: real information silently missing from the page. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Belt-and-suspenders for the quarterly report's <details> accordion --
     the download-briefing button already forces every panel open via JS
     before calling window.print(), but a visitor using the browser's own
     Cmd/Ctrl+P directly would otherwise get a PDF with 6 of 7 topics
     silently collapsed (a <details> without [open] hides its content via
     the UA stylesheet regardless of print context). Force it visible
     here too, independent of the JS path. */
  .qr-topic-body { display: block !important; }
  .qr-chevron, .qr-expand-all, .qr-matters-filterbar { display: none !important; }
  /* The "Jump to a section" strip only makes sense as an on-screen
     navigation aid -- clickable topic links are dead weight on paper,
     and by the time this prints every topic is already unfolded below
     it anyway. Drop it so the printed report opens straight into the
     actual content. */
  .qr-takeaways { display: none !important; }
  /* With the takeaways card gone, its column is dead space -- collapse
     the hero back to one column instead of leaving the report's title
     and lede stranded in a half-width strip on paper. */
  .qr-hero-grid { display: block !important; }
  .qr-hero-aside { display: none !important; }
  /* .card/.legal-doc above puts a 1px border around anything with that
     class, which is fine for a normal single-page card but actively
     breaks on these two: with every accordion topic force-expanded
     (#qr-accordion, several thousand px) and the full matter list
     force-expanded (.qr-matters-list, 80+ rows), each is one bordered
     box spanning many printed pages. A border wrapping a box that long
     is exactly the kind of thing browser print/PDF engines render
     badly -- this was producing garbled trailing borders and several
     fully blank pages at the end of the download. Strip the card
     treatment from just these two (still boxed on-screen; nothing
     else with the shared .card/.legal-doc class is affected).  */
  #qr-accordion, .qr-matters-list {
    border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important;
  }
  /* Keep a single filed-report row from splitting across a page break
     mid-line -- each row is short enough (~40px) that this never
     forces an awkward oversized element onto its own page the way it
     would on the two large containers above. */
  .case-chip { break-inside: avoid; }
}