/* =================================================================
   ObviouslyNot Main CSS
   Common styles shared across all public-facing pages
   ================================================================= */

/* Fonts (Inter and Satoshi, self-hosted variable files) are declared in base.html, beside their
   preloads, so both name the same fingerprinted URL. */

/* Inline FontAwesome SVG icons (generated by cmd/iconbuilder).
   Mimics FA's <i>-rendered SVG defaults so existing CSS using font-size/
   color on icon containers continues to work. */
.fa-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
}

/* =================================================================
   Reset & Base Styles
   ================================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Skip to content - accessibility */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: #111111;
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 0.5rem 0.5rem;
  z-index: 9999;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-to-content:focus {
  top: 0;
}

html { 
  scroll-behavior: smooth; 
}

body { 
  font-family: 'Inter', system-ui, -apple-system, sans-serif; 
  background: #ffffff; 
  color: #111111;
  line-height: 1.6;
  min-height: 100vh;
}

/* =================================================================
   Brand Colors
   ================================================================= */
:root {
  --primary-black: #111111;
  --pure-white: #ffffff;
  --accent-cyan: #2DC5E8;
  --accent-purple: #4A3F78;
  --accent-purple-light: #BFA8FF;
  --accent-rose: #D4637A;
  --gray-light: #e5e5e5;
  --gray-bg: #F7F8FA;
  --text-muted: rgba(17, 17, 17, 0.6);
}

/* =================================================================
   Typography
   ================================================================= */
h1 {
  font-family: 'Satoshi', 'Inter', sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

h2 {
  font-family: 'Satoshi', 'Inter', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: var(--primary-black);
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--primary-black);
}

p {
  margin-bottom: 1rem;
  color: var(--primary-black);
  line-height: 1.7;
}

strong {
  font-weight: 600;
  color: var(--primary-black);
}

/* =================================================================
   Layout Components
   ================================================================= */
.container { 
  max-width: 800px; 
  margin: 0 auto; 
  padding: 0 20px; 
}

.container-wide {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  margin-bottom: 3rem;
}

.content {
  padding: 4rem 0 6rem;
}

/* =================================================================
   Header & Logo
   ================================================================= */
header {
  padding: 2rem 0;
  border-bottom: 1px solid var(--gray-light);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-family: 'Satoshi', 'Inter', sans-serif;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.5px;
  text-decoration: none;
  color: var(--primary-black);
}

/* Logo "≠" glyph. The icon is an inline <svg class="fa-icon fa-not-equal">
   expanded from <i class="fad fa-not-equal"></i> at template-parse time.
   The purple→cyan gradient lives inside the SVG file
   (internal/icons/svgs/duotone/not-equal.svg) as <linearGradient> defs,
   replacing the older FA Pro Duotone CSS pseudo-element trick that no
   longer applies once the element is a <svg> instead of an <i>. */
.logo .fa-icon.fa-not-equal {
  width: 1.1em;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.18em;
}

.back-link {
  font-size: 0.95rem;
  color: var(--primary-black);
  text-decoration: none;
  transition: color 0.2s ease;
}

.back-link:hover {
  color: var(--accent-rose);
}

/* Breadcrumb trail, resource pages. Replaces the back link there: the
   site grew a two-level hierarchy in August 2026 and a single "Back to"
   showed one level of it. Rendered from the same slice as the
   BreadcrumbList JSON-LD (partials/header-public.html). */
.crumb-trail {
  min-width: 0;
  flex: 1;
  margin-left: 1.5rem;
}
.crumb-trail ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  min-width: 0;
  font-size: 0.95rem;
}
.crumb-trail li {
  white-space: nowrap;
}
.crumb-trail li + li::before {
  content: "/";
  color: #999;
  margin: 0 0.5rem;
}
.crumb-trail a {
  color: var(--primary-black);
  text-decoration: none;
  transition: color 0.2s ease;
}
.crumb-trail a:hover {
  color: var(--accent-rose);
}
.crumb-trail-current {
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 28ch;
}

/* =================================================================
   Navigation (Public Pages)
   ================================================================= */
.nav-main {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.nav-link {
  color: var(--primary-black);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
  opacity: 0.7;
}

.nav-link:hover,
.nav-link.active {
  color: var(--accent-cyan);
  opacity: 1;
}

.nav-cta {
  background: var(--primary-black);
  color: white;
  padding: 0.625rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.nav-cta:hover {
  background: var(--accent-cyan);
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(45, 197, 232, 0.3);
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  position: relative;
  width: 30px;
  height: 30px;
  z-index: 1001;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-menu-overlay.overlay-visible {
  display: block;
  opacity: 1;
}

.hamburger-line {
  display: block;
  width: 25px;
  height: 3px;
  background: var(--primary-black);
  margin: 5px 0;
  transition: all 0.3s ease;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.hamburger-line:nth-child(1) {
  top: 5px;
}

.hamburger-line:nth-child(2) {
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.hamburger-line:nth-child(3) {
  bottom: 5px;
}

/* Animate hamburger to X when open */
.mobile-menu-toggle.menu-open .hamburger-line:nth-child(1) {
  transform: translateX(-50%) translateY(8px) rotate(45deg);
  top: 50%;
}

.mobile-menu-toggle.menu-open .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.menu-open .hamburger-line:nth-child(3) {
  transform: translateX(-50%) translateY(-8px) rotate(-45deg);
  bottom: 50%;
}

/* =================================================================
   Buttons
   ================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-primary {
  background: var(--primary-black);
  color: white;
  border: none;
}

.btn-primary:hover {
  background: var(--accent-cyan);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(45, 197, 232, 0.3);
}

.btn-secondary {
  background: white;
  color: var(--primary-black);
  border: 2px solid var(--gray-light);
}

.btn-secondary:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: rgba(45, 197, 232, 0.05);
}

/* =================================================================
   Footer
   ================================================================= */
footer {
  border-top: 1px solid var(--gray-light);
  padding: 3rem 0;
  text-align: center;
}

.footer-text {
  font-size: 0.875rem;
  color: var(--primary-black);
  opacity: 0.6;
  line-height: 1.8;
}

.footer-text a,
.footer-link {
  color: var(--primary-black);
  opacity: 0.6;
  text-decoration: none;
  transition: all 0.2s ease;
}

.footer-text a:hover,
.footer-link:hover {
  color: var(--accent-rose);
  opacity: 1;
}

/* =================================================================
   Common Components
   ================================================================= */

/* Buttons */
.btn {
  display: inline-block;
  padding: 1rem 2rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--primary-black);
  color: white;
}

.btn-primary:hover {
  background: var(--accent-cyan);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(45, 197, 232, 0.3);
}

.btn-secondary {
  background: transparent;
  color: var(--primary-black);
  border: 2px solid var(--primary-black);
}

.btn-secondary:hover {
  background: var(--accent-purple);
  color: white;
  border-color: var(--accent-purple);
}

/* Cards */
.card {
  background: white;
  border: 2px solid var(--gray-light);
  border-radius: 8px;
  padding: 2rem;
  transition: all 0.2s ease;
}

.card:hover {
  border-color: var(--accent-purple-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Content Boxes */
.content-box {
  background: var(--gray-bg);
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.content-box:hover {
  border-color: var(--accent-purple-light);
}

/* Lists */
ul {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.5rem;
  color: var(--primary-black);
}

/* Links in Content */
.content a {
  color: var(--accent-cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-cyan);
  transition: all 0.2s ease;
}

.content a:hover {
  color: var(--primary-black);
  border-bottom-color: var(--primary-black);
}

/* =================================================================
   Utility Classes
   ================================================================= */
.text-center { text-align: center; }
.text-muted { opacity: 0.6; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }

/* =================================================================
   Responsive Design
   ================================================================= */

/* Tablet */
@media (max-width: 768px) {
  .content {
    padding: 3rem 0 4rem;
  }
  
  .section {
    margin-bottom: 2.5rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .content-box {
    padding: 1.5rem;
  }

  /* Show mobile menu toggle */
  .mobile-menu-toggle {
    display: block;
  }

  /* Style mobile navigation */
  .nav-main {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 5rem 2rem 2rem;
    gap: 1.5rem;
    transition: right 0.3s ease;
    z-index: 1000;
  }

  .nav-main.nav-open {
    right: 0;
  }

  .nav-link {
    font-size: 1.125rem;
    width: 100%;
    padding: 0.5rem 0;
    opacity: 1;
  }

  .nav-link:hover {
    color: var(--accent-cyan);
  }

  .nav-link.active {
    color: var(--accent-cyan);
    font-weight: 600;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .container,
  .container-wide {
    padding: 0 1.25rem;
  }

  h1 {
    font-size: 2rem;
  }

  .header-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .container,
  .container-wide {
    padding: 0 1rem;
  }

  header {
    padding: 1.5rem 0;
  }

  .back-link {
    font-size: 0.875rem;
  }

  /* Phones: one level of trail, as the back link showed. The current
     page's crumb goes (the H1 is directly below), and where there is a hub
     crumb the Resources crumb goes too, so the hub label gets the room and
     truncates rather than running under the logo. */
  .crumb-trail ol {
    font-size: 0.875rem;
    overflow: hidden;
  }
  .crumb-trail li {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .crumb-trail-current {
    display: none;
  }
  .crumb-trail li:first-child:nth-last-child(3) {
    display: none;
  }
  .crumb-trail li:first-child:nth-last-child(3) + li::before {
    content: none;
    margin: 0;
  }

  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  h3 {
    font-size: 1.125rem;
  }

  p, li {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .content {
    padding: 2rem 0 3rem;
  }

  .footer-text {
    font-size: 0.75rem;
  }

  .footer-text a,
  .footer-link {
    display: inline-block;
    padding: 0.25rem;
  }

  .btn {
    padding: 0.875rem 1.5rem;
    width: 100%;
    max-width: 300px;
  }

  .nav-cta {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
  a, button {
    -webkit-tap-highlight-color: rgba(45, 197, 232, 0.2);
    min-height: 44px;
    min-width: 44px;
  }
}

/* =================================================================
   Resource Page Components
   Shared styles for stat cards, info cards, step grids, takeaways,
   tables, and other components used across resource pages.
   ================================================================= */

/* Article Layout */
.content .container {
  max-width: 800px;
}

.section {
  margin-bottom: 3rem;
}

.article-intro {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.disclaimer {
  font-size: 0.85rem;
  color: #666;
  margin-top: 1.5rem;
}

/* Stat Grid */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 1.5rem 0;
}

.stat-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 24px 20px;
  text-align: center;
}

.stat-number {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
}

.stat-number.cyan { color: #2DC5E8; }
.stat-number.rose { color: #D4637A; }

.stat-label {
  font-size: 0.85rem;
  color: #555;
  margin-top: 8px;
  line-height: 1.4;
}

.stat-source {
  font-size: 0.75rem;
  color: #999;
  margin-top: 8px;
}

/* Card Grid & Info Cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 1.5rem 0;
}

.info-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 24px;
}

.info-card h3 {
  font-size: 1.05rem;
  margin-top: 0;
  margin-bottom: 10px;
}

.info-card h3 i {
  margin-right: 8px;
  color: #4A3F78;
}

.info-card p {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.6;
  margin-bottom: 8px;
}

.info-card p:last-child {
  margin-bottom: 0;
}

/* Step Grid */
.step-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 1.5rem 0;
}

.step-box {
  border-radius: 12px;
  padding: 24px;
}

.step-1 {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
}

.step-2 {
  background: #f8f4ff;
  border: 1px solid #e0d6f5;
}

.step-number {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  text-align: center;
  line-height: 32px;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.step-1 .step-number {
  background: #2DC5E8;
  color: #fff;
}

.step-2 .step-number {
  background: #4A3F78;
  color: #fff;
}

.step-label {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 10px;
}

.step-box p {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.6;
  margin-bottom: 8px;
}

/* Takeaway */
.takeaway {
  background: #f0f9ff;
  border-left: 4px solid #2DC5E8;
  padding: 16px 20px;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
  line-height: 1.6;
}

/* Oral-argument audio clips (public-domain court recordings) */
.oral-args {
  margin: 2rem 0 1rem;
  padding: 20px 22px;
  background: #faf9ff;
  border: 1px solid #e7e1ff;
  border-radius: 10px;
}
.oral-args-title {
  margin: 0 0 4px;
  font-size: 1.15rem;
  color: #4A3F78;
}
.oral-args-title i { color: #4A3F78; margin-right: 8px; }
.oral-args-intro { margin: 0 0 1rem; color: #555; font-size: 0.95rem; }
.oral-clip {
  margin: 0 0 1rem;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #ece7fb;
  border-left: 4px solid #4A3F78;
  border-radius: 0 8px 8px 0;
}
.oral-clip:last-of-type { margin-bottom: 0.5rem; }
.oral-clip-cap { font-size: 0.95rem; line-height: 1.55; color: #333; margin-bottom: 8px; }
.oral-clip-step {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: #4A3F78;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 8px;
  vertical-align: middle;
}
.oral-clip-quote {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  font-style: italic;
  color: #222;
  line-height: 1.5;
}
.oral-clip-quote cite {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 0.85rem;
  color: #666;
}
.oral-clip audio { width: 100%; height: 38px; }
.oral-args-src { margin: 0.75rem 0 0; font-size: 0.85rem; color: #777; }
.oral-args-src a { color: #D4637A; }

/* Data Tables */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.95rem;
}

.data-table caption {
  caption-side: top;
  text-align: left;
  font-size: 0.85rem;
  color: #666;
  padding: 0 0 0.5rem;
}

.data-table thead th {
  background: #f8f9fa;
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #e0e0e0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.data-table tbody td,
.data-table tbody th {
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
  color: #444;
  vertical-align: top;
}

/* Row headers (th scope="row"), used by the case-facts table: a label
   column, so left-aligned and no heavier than the thead style. */
.data-table tbody th {
  text-align: left;
  font-weight: 600;
  color: #333;
}

.data-table tbody tr:last-child td,
.data-table tbody tr:last-child th {
  border-bottom: none;
}

/* Risk Badges */
.risk-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.risk-badge.high { background: #fef2f2; color: #D4637A; }
.risk-badge.medium { background: #fffbeb; color: #d97706; }
.risk-badge.low { background: #f0fdf4; color: #16a34a; }

/* Callout Box */
.callout-box {
  border-radius: 12px;
  padding: 24px;
  margin: 1.5rem 0;
}

.callout-box.warning {
  background: #fffbeb;
  border: 1px solid #fde68a;
}

.callout-box h3 {
  font-size: 1.05rem;
  margin-top: 0;
  margin-bottom: 12px;
}

.callout-box p {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.6;
  margin-bottom: 0;
}

/* FAQ Section */
/* Full-bleed card: the negative margin cancels the container gutter so the
   grey panel reaches the text edge. It MUST equal .container's padding at
   every breakpoint, or the panel is wider than its parent and pushes the
   whole page sideways. It was a fixed -24px against a 20px gutter (16px
   below 480px), so every page with a FAQ block scrolled horizontally: 8px
   on a phone, 4px at most other widths. Fixed 2026-10-06. If you change
   .container's padding, change this with it. */
.faq-section {
  background: #f8f9fa;
  padding: 2rem 20px;
  margin: 0 -20px;
  border-radius: 12px;
}

@media (max-width: 480px) {
  .faq-section {
    padding: 2rem 1rem;
    margin: 0 -1rem;
  }
}

.faq-item {
  margin-bottom: 1.5rem;
}

.faq-item:last-child {
  margin-bottom: 0;
}

.faq-item h3 {
  color: #4A3F78;
  margin-bottom: 0.5rem;
  margin-top: 0;
  font-size: 1.05rem;
}

.faq-item p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.7;
}

/* Component Grid */
.component-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 1rem 0 1.5rem;
}

/* Claim Grid */
.claim-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 1.5rem 0;
}

/* Snapshot grid (donut chart + top movers side-by-side) */
.snapshot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

/* Composite Score Leaderboard
   Used on Patent Representation Index v2 page. Each row shows a rank,
   company name, composite score, and a horizontal bar showing the score
   on a 0-100 scale. */
.leaderboard {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.leaderboard-row {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding: 0.875rem 1rem;
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
}

.leaderboard-rank {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111111;
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1rem;
  align-self: center;
}

.leaderboard-rank.rank-bottom {
  background: #D4637A;
  width: auto;
  min-width: 38px;
  border-radius: 19px;
  padding: 0 12px;
  font-size: 0.85rem;
}

.leaderboard-body {
  flex: 1;
  min-width: 0;
}

.leaderboard-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
  gap: 1rem;
}

.leaderboard-company {
  font-weight: 600;
  font-size: 1rem;
  color: #111;
}

.leaderboard-score {
  font-weight: 700;
  font-size: 1.25rem;
  color: #111;
  font-variant-numeric: tabular-nums;
}

.leaderboard-bar-track {
  height: 10px;
  background: #e8e8e8;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.leaderboard-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.3s ease;
}

.leaderboard-meta {
  font-size: 0.75rem;
  color: #666;
  line-height: 1.4;
}

.leaderboard-meta strong {
  color: #111;
  font-weight: 600;
}

@media (max-width: 640px) {
  .leaderboard-row {
    padding: 0.75rem;
    gap: 0.75rem;
  }
  .leaderboard-rank {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
  }
  .leaderboard-company {
    font-size: 0.9rem;
  }
  .leaderboard-score {
    font-size: 1.1rem;
  }
  .leaderboard-meta {
    font-size: 0.7rem;
  }
}

/* Generic inline bar charts — used in the patent gender gap series for
   stat comparisons. Pure CSS, no JS, no chart library. Mirrors the
   .leaderboard-* pattern above but with generic class names so any
   page can use it. Single bar group per chart-section, color-coded
   per row via inline style on .chart-bar-fill. */
.chart-section {
  margin: 1.75rem 0;
  background: #fbfbfd;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid #2DC5E8;
}
.chart-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #4A3F78;
  margin: 0 0 0.4rem;
  line-height: 1.4;
}
.chart-subtitle {
  font-size: 0.88rem;
  color: #666;
  margin-bottom: 1rem;
  line-height: 1.5;
}
.chart-row {
  display: grid;
  grid-template-columns: 200px 1fr 60px;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.55rem;
  font-size: 0.92rem;
  line-height: 1.4;
}
.chart-row:last-of-type {
  margin-bottom: 0;
}
.chart-label {
  color: #333;
  font-weight: 500;
}
.chart-bar-track {
  height: 16px;
  background: #ececec;
  border-radius: 8px;
  overflow: hidden;
}
.chart-bar-fill {
  height: 100%;
  border-radius: 8px;
  transition: width 0.4s ease;
}
.chart-value {
  font-weight: 700;
  color: #111;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.chart-annotation {
  background: #fff;
  border-left: 4px solid #D4637A;
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  color: #333;
  line-height: 1.55;
  margin-top: 1rem;
  border-radius: 0 4px 4px 0;
}
.chart-source {
  font-size: 0.78rem;
  color: #888;
  margin-top: 0.75rem;
  text-align: right;
  font-style: italic;
}
.chart-section + .chart-section {
  margin-top: 1.25rem;
}
@media (max-width: 600px) {
  .chart-section {
    padding: 1rem 1.1rem;
  }
  .chart-row {
    grid-template-columns: 130px 1fr 50px;
    font-size: 0.84rem;
    gap: 0.5rem;
  }
  .chart-bar-track {
    height: 14px;
  }
  .chart-title {
    font-size: 0.98rem;
  }
}

/* Resource Page Mobile Responsive */
@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }

  .step-grid {
    grid-template-columns: 1fr;
  }

  .claim-grid {
    grid-template-columns: 1fr;
  }

  .component-grid {
    grid-template-columns: 1fr;
  }

  .data-table {
    font-size: 0.85rem;
    /* A table with three or more prose columns cannot fit a phone width
       without breaking words, and an overflowing table widens the whole
       page. Let the table scroll inside its own box instead. */
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .data-table thead th,
  .data-table tbody td,
  .data-table tbody th {
    padding: 8px 10px;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .snapshot-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .article-intro {
    font-size: 1.15rem;
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }

  /* Hide intermediate year labels on bar chart to prevent overlap */
  .chart-label-mid {
    display: none;
  }
}

/* =================================================================
   Page-Specific Overrides
   Add specific page styles using data attributes or classes
   ================================================================= */

/* Print styles for legal documents */
@media print {
  header, footer {
    display: none;
  }
  
  body {
    font-size: 11pt;
  }
  
  .container {
    max-width: 100%;
  }
}
/* ── Downloadable template pages (Idea Disclosure, worksheets, …) ── */
.tpl-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 1.5rem 0; }
.tpl-actions .btn { display: inline-flex; align-items: center; gap: 0.5rem; }
.template-doc { border: 1px solid #e5e5e5; border-radius: 12px; padding: 1.75rem 2rem; margin: 1.5rem 0; background: #fff; position: relative; }
.template-doc__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.template-doc__head h2 { margin: 0; }
.tpl-copy { border: 1px solid #2DC5E8; background: #fff; color: #2DC5E8; border-radius: 8px; padding: 0.4rem 0.9rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.15s ease; }
.tpl-copy:hover { background: #2DC5E8; color: #fff; }
.tpl-group { margin: 1.5rem 0 0.5rem; padding-top: 1.25rem; border-top: 1px solid #f0f0f0; }
.tpl-group:first-of-type { border-top: none; padding-top: 0; }
.tpl-group h3 { margin-bottom: 0.25rem; color: #111; }
.tpl-group > .tpl-group-note { color: #888; font-size: 0.9rem; font-style: italic; margin-bottom: 0.75rem; }
.tpl-field { margin: 0.9rem 0; }
.tpl-field h4 { margin: 0 0 0.15rem; font-size: 1rem; color: #111; }
.tpl-field p { margin: 0; color: #666; font-size: 0.92rem; line-height: 1.55; }
.tpl-field .tpl-answer { display: block; margin-top: 0.4rem; color: #bbb; font-size: 0.9rem; border-bottom: 1px dashed #ddd; padding-bottom: 0.3rem; }
.tpl-disclaimer { font-size: 0.78rem; color: #999; line-height: 1.6; margin-top: 1.5rem; }

/* ── Inventor "paper trail" workflow strip (template pages) ── */
.tpl-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.5rem; }
.tpl-trail a { color: #2DC5E8; text-decoration: none; font-size: 0.95rem; }
.tpl-trail a:hover { text-decoration: underline; }
.tpl-trail .current { color: #111; font-weight: 700; font-size: 0.95rem; }
.tpl-trail .sep { color: #bbb; font-size: 0.85rem; }
.tpl-trail-label { font-size: 0.8rem; color: #888; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.35rem; }

/* ── Framework-step pill on practitioner worksheet fields ── */
.tpl-step { display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #4A3F78; background: #efeaf7; border-radius: 999px; padding: 0.14rem 0.55rem; margin-left: 0.45rem; vertical-align: middle; white-space: nowrap; }

/* ── Comparison table (disclosure vs filings) ── */
.tpl-compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0.5rem 0 0.25rem; }
.tpl-compare { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 0.9rem; }
.tpl-compare th, .tpl-compare td { text-align: left; vertical-align: top; padding: 0.7rem 0.85rem; border-bottom: 1px solid #eee; line-height: 1.5; }
.tpl-compare thead th { background: #f2fafd; color: #111; font-weight: 700; border-bottom: 2px solid #2DC5E8; }
.tpl-compare thead th:first-child { background: transparent; border-bottom-color: #eee; }
.tpl-compare tbody th { font-weight: 600; color: #4A3F78; white-space: nowrap; width: 1%; }
.tpl-compare tbody tr:last-child th, .tpl-compare tbody tr:last-child td { border-bottom: none; }
.tpl-compare .col-highlight { background: #f7fbfe; }

/* ============================================================
   Case studies (CategoryCaseStudy). Shared by the PX4 scan page
   and its concept-profile children. Namespaced cs-* so nothing
   here can collide with page-local styles elsewhere.
   ============================================================ */

.cs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9rem;
}
.cs-table th {
  background: #f8f9fa;
  padding: 0.7rem 1rem;
  text-align: left;
  font-weight: 700;
  color: #111;
  border-bottom: 2px solid #e9ecef;
}
.cs-table td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
  line-height: 1.5;
}
.cs-table td:last-child { text-align: right; white-space: nowrap; }
.cs-table th:last-child { text-align: right; }

.cs-code {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 1.25rem 0;
}
.cs-code code { background: none; padding: 0; font-size: inherit; }

.cs-note {
  background: #f8f9fa;
  border-left: 4px solid #BFA8FF;
  border-radius: 0 8px 8px 0;
  padding: 0.9rem 1.25rem;
  margin: 1.25rem 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #555;
}

.cs-list { padding-left: 1.25rem; margin: 1rem 0; }
.cs-list li { font-size: 0.95rem; line-height: 1.65; color: #333; margin-bottom: 0.6rem; }

.cs-evidence {
  font-size: 0.82rem;
  color: #666;
  margin: -0.5rem 0 1.25rem 0;
  /* Breaks a long unbroken token (the PX4 case study puts source paths here)
     without breaking ordinary prose. word-break: break-all did the first job
     and also split three-letter words mid-character on the 40 pages that
     later reused this class for an authority line. */
  overflow-wrap: anywhere;
}
.cs-evidence code { font-size: 0.82rem; }

.cs-back {
  display: inline-block;
  margin: 2rem 0 1rem 0;
  color: #2DC5E8;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}
.cs-back:hover { color: #D4637A; }

.cs-cta {
  display: inline-block;
  background: #2DC5E8;
  color: #fff;
  padding: 0.85rem 1.75rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  margin-top: 0.5rem;
}
.cs-cta:hover { background: #4A3F78; color: #fff; }

/* Summary panel, shared with the case-study layout */
.tldr {
  background: #fafcff;
  border-left: 4px solid #2DC5E8;
  border-radius: 0 12px 12px 0;
  padding: 1.75rem 2rem;
  margin: 0 0 2.5rem 0;
}
.tldr-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #2DC5E8;
  margin-bottom: 0.85rem;
}
.tldr-lead { font-size: 1rem; line-height: 1.7; color: #333; margin: 0 0 1.25rem 0; }
.tldr-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-top: 1px solid #e0eaff;
  border-bottom: 1px solid #e0eaff;
}
.tldr-num {
  display: block;
  font-family: 'Satoshi', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  color: #4A3F78;
  line-height: 1.1;
}
.tldr-stat-accent .tldr-num { color: #2DC5E8; }
.tldr-model {
  display: block;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 0.8rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 0.4rem;
}
.tldr-cap { display: block; font-size: 0.82rem; line-height: 1.5; color: #666; }
.tldr-foot { font-size: 0.9rem; line-height: 1.65; color: #555; margin: 1.25rem 0 0 0; }

.summary-section {
  background: #fafcff;
  border: 1px solid #e0eaff;
  border-radius: 12px;
  padding: 2.5rem 2rem;
  margin: 2rem 0;
}

.resources-section h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #4A3F78;
  margin: 2rem 0 0.75rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e9ecef;
}
.resources-section h3:first-of-type { margin-top: 0; }
.resources-list { list-style: none; padding: 0; margin: 0 0 1.5rem 0; }
.resources-list li { padding: 0.6rem 0; border-bottom: 1px solid #f0f0f0; }
.resources-list li:last-child { border-bottom: none; }
.resources-list a { color: #2DC5E8; text-decoration: none; font-size: 0.9rem; }
.resources-list a:hover { color: #D4637A; }

@media (max-width: 768px) {
  .tldr-stats { grid-template-columns: 1fr; gap: 1.25rem; }
  .tldr, .summary-section { padding: 1.5rem 1.25rem; }
  .cs-table { font-size: 0.8rem; }
  .cs-table th, .cs-table td { padding: 0.5rem 0.6rem; }
}

.cs-hint { font-weight: 400; color: #888; font-size: 0.82em; }

/* ============================================================
   child-index: a hub's sub-pages, rendered from the catalog by
   partials/child-index.html. Replaces hand-written child links.
   ============================================================ */

.child-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
}

.child-index-item {
  display: flex;
  flex-direction: column;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 1.5rem;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}
.child-index-item:hover {
  border-color: #2DC5E8;
  transform: translateY(-2px);
}

.child-index-title {
  font-family: 'Satoshi', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.child-index-summary {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #555;
  flex-grow: 1;
  margin-bottom: 1rem;
}

.child-index-cta {
  font-size: 0.85rem;
  font-weight: 600;
  color: #2DC5E8;
}
.child-index-item:hover .child-index-cta { color: #D4637A; }

@media (max-width: 640px) {
  .child-index { grid-template-columns: 1fr; }
  .child-index-item { padding: 1.25rem; }
}

/* resource-links: the Related and Siblings blocks base.html appends after
   every resource page's content (partials/child-index.html). The page's own
   .content already carries 6rem of bottom padding, so this pulls itself up
   into that space rather than stacking a second .content on top of it. */
.resource-links {
  margin-top: -5rem;
  padding-bottom: 4rem;
}
.resource-links h2 {
  margin-top: 1rem;
}

/* ============================================================
   case-pair: the companion block for decisions that must not be
   read alone. Deliberately loud and placed above the holding,
   because the failure mode is a reader acting on one half.
   ============================================================ */

.case-pair {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #fff8f0;
  border: 2px solid #fcc419;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0 2rem 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #333;
}
.case-pair i {
  color: #fcc419;
  font-size: 1.15rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
}
.case-pair strong { display: block; margin-bottom: 0.35rem; color: #111; }
.case-pair a { color: #4A3F78; font-weight: 600; }
.case-pair a:hover { color: #D4637A; }