/* Open-Source Landing Design Foundation
 *
 * Shared visual language for the nric.ai open-source landing page (Leerie,
 * Barnacle, Beacon). Every section subtask composes these primitives instead
 * of inventing its own spacing or color. All colors reference theme.css
 * custom properties so both light and dark mode stay correct automatically.
 */

/* ============================================
   SECTION RHYTHM & CONTAINER
   ============================================ */

.oss-section {
  border-bottom-width: 1px;
  border-color: var(--glass-border-5);
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 768px) {

  .oss-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.oss-section:last-of-type {
  border-bottom-width: 0px;
}

.oss-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ============================================
   HEADLINE SCALE
   ============================================ */

.oss-eyebrow {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(255 88 16 / var(--tw-text-opacity, 1));
}

.oss-headline {
  margin-top: 0.5rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

@media (min-width: 768px) {

  .oss-headline {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

@media (min-width: 1024px) {

  .oss-headline {
    font-size: 3rem;
    line-height: 1;
  }
}

.oss-subheadline {
  margin-top: 1rem;
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--text-secondary);
}

/* ============================================
   CARD / GLASS SURFACES
   ============================================ */

.oss-card {
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: var(--card-border);
  background-color: var(--card-bg);
  padding: 1.5rem;
}

.oss-glass {
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: var(--glass-border-10);
  background-color: var(--glass-bg-5);
  padding: 1.5rem;
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

/* ============================================
   BADGES
   ============================================ */

.oss-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}

/* ============================================
   PER-PRODUCT ACCENTS
   Leerie, Barnacle, and Beacon each map to a distinct badge-color pair from
   theme.css so accent usage stays consistent across every section: badges,
   card border tints, and text/icon accents all pull from the same pair.
   ============================================ */

.oss-badge-leerie {
  background-color: var(--badge-indigo-bg);
  color: var(--badge-indigo-text);
}

.oss-badge-barnacle {
  background-color: var(--badge-cyan-bg);
  color: var(--badge-cyan-text);
}

.oss-badge-beacon {
  background-color: var(--badge-orange-bg);
  color: var(--badge-orange-text);
}

.oss-accent-leerie {
  color: var(--badge-indigo-text);
}

.oss-accent-barnacle {
  color: var(--badge-cyan-text);
}

.oss-accent-beacon {
  color: var(--badge-orange-text);
}

.oss-card-leerie {
  border-color: var(--badge-indigo-bg);
}

.oss-card-barnacle {
  border-color: var(--badge-cyan-bg);
}

.oss-card-beacon {
  border-color: var(--badge-orange-bg);
}

/* Open-Source Landing Header
 *
 * Sticky, auth-free header for the nric.ai open-source landing page: logo,
 * in-page product anchors, GitHub link, and theme/language switchers. Built
 * on the oss-* tokens in ./tokens.css.
 */

.oss-header {
  position: sticky;
  top: 0px;
  z-index: 50;
  width: 100%;
  border-bottom-width: 1px;
  border-color: var(--glass-border-5);
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  background-color: color-mix(in srgb, var(--bg-primary) 80%, transparent);
}

.oss-header-container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  max-width: 80rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.oss-header-brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.oss-header-nav {
  align-items: center;
  gap: 1.5rem;
}

@media (min-width: 1024px) {

  .oss-header-nav {
    display: flex;
  }
}

.oss-header-nav-open {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 100%;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  border-bottom-width: 1px;
  border-color: var(--glass-border-5);
  background-color: var(--bg-primary);
  padding: 1rem;
  --tw-shadow-color: var(--shadow-lg);
  --tw-shadow: var(--tw-shadow-colored);
}

.oss-header-link {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.oss-header-link:hover {
  color: var(--text-primary);
}

.oss-header-github {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: var(--border-primary);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--text-primary);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.oss-header-github:hover {
  background-color: var(--hover-bg);
}

.oss-header-lang {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.oss-header-toggle {
  display: flex;
  min-height: 44px;
  min-width: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

@media (min-width: 1024px) {

  .oss-header-toggle {
    display: none;
  }
}

.oss-header-toggle-bar {
  display: block;
  height: 0.125rem;
  width: 1.5rem;
  border-radius: 9999px;
  background-color: var(--text-primary);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.oss-header-toggle[aria-expanded="true"] .oss-header-toggle-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.oss-header-toggle[aria-expanded="true"] .oss-header-toggle-bar:nth-child(2) {
  opacity: 0;
}

.oss-header-toggle[aria-expanded="true"] .oss-header-toggle-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Open-Source Homepage Hero Section
 *
 * Above-the-fold positioning band for the nric.ai open-source landing page.
 * Builds on the shared design foundation in tokens.css.
 */

.oss-hero-section {
  text-align: center;
}

.oss-hero-content {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  max-width: 48rem;
  flex-direction: column;
  align-items: center;
}

.oss-hero-cta-group {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

@media (min-width: 640px) {

  .oss-hero-cta-group {
    flex-direction: row;
    justify-content: center;
  }
}

.oss-hero-cta-primary {
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 88 16 / var(--tw-bg-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--text-inverse);
}

.oss-hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border-width: 1px;
  border-color: var(--card-border);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.oss-hero-trust {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-secondary);
}

.oss-hero-stats {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (min-width: 640px) {

  .oss-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.oss-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.oss-hero-stat dt {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-secondary);
}

.oss-hero-stat dd {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Project Triad Section
 *
 * Card grid presenting Leerie, Barnacle, and Beacon side by side. Builds on
 * the shared open-source design foundation in tokens.css.
 */

.oss-triad-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 1rem;
}

.oss-triad-card-name {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
}

.oss-triad-card-tagline {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-secondary);
}

.oss-triad-card-highlights {
  display: flex;
  flex: 1 1 0%;
  list-style-type: none;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-secondary);
}

.oss-triad-card-highlights li {
  display: flex;
  gap: 0.5rem;
}

.oss-triad-card-highlights li::before {
  content: "✓";
  --tw-text-opacity: 1;
  color: rgb(255 88 16 / var(--tw-text-opacity, 1));
}

.oss-triad-card-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.oss-triad-card-stack span {
  border-radius: 9999px;
  border-width: 1px;
  border-color: var(--card-border);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.oss-triad-card-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.oss-triad-card-anchor-link {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

.oss-triad-card-anchor-link:hover {
  text-decoration-line: underline;
}

.oss-triad-card-repo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

.oss-triad-card-repo-link:hover {
  text-decoration-line: underline;
}

/* Leerie Deep-Dive Section
 *
 * Layout for the Leerie product deep-dive on the nric.ai open-source
 * landing page. Composes the shared oss- primitives from tokens.css and
 * adds the pipeline-step and differentiator-bullet markup unique to this
 * section.
 */

.leerie-description {
  margin-top: 1rem;
  max-width: 48rem;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--text-secondary);
}

@media (min-width: 768px) {

  .leerie-description {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

/* ============================================
   PIPELINE STEPS
   ============================================ */

.leerie-pipeline {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.5rem;
  display: grid;
  max-width: 80rem;
  list-style-type: none;
  gap: 1rem;
}

@media (min-width: 640px) {

  .leerie-pipeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {

  .leerie-pipeline {
    margin-top: 3.5rem;
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {

  .leerie-pipeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.leerie-pipeline-step-item {
  display: contents;
}

.leerie-pipeline-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: var(--glass-border-10);
  background-color: var(--glass-bg-5);
  padding: 1.5rem;
}

.leerie-pipeline-step-number {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: var(--badge-indigo-bg);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: var(--badge-indigo-text);
}

.leerie-pipeline-step-title {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
}

.leerie-pipeline-step-description {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-secondary);
}

.leerie-pipeline-connector {
  position: absolute;
  right: -1rem;
  top: 50%;
  display: none;
  height: 0.125rem;
  width: 2rem;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  background-color: var(--badge-indigo-bg);
}

@media (min-width: 1024px) {

  .leerie-pipeline-connector {
    display: block;
  }
}

/* ============================================
   DIFFERENTIATOR BULLETS
   ============================================ */

.leerie-differentiators {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.5rem;
  display: flex;
  max-width: 48rem;
  list-style-type: none;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 768px) {

  .leerie-differentiators {
    margin-top: 3rem;
  }
}

.leerie-differentiator {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.leerie-differentiator-mark {
  margin-top: 0.25rem;
  flex-shrink: 0;
  font-weight: 700;
}

.leerie-differentiator-text {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-secondary);
}

@media (min-width: 768px) {

  .leerie-differentiator-text {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

/* ============================================
   CTA
   ============================================ */

.leerie-cta {
  margin-top: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border-width: 1px;
  border-color: var(--glass-border-10);
  background-color: var(--glass-bg-5);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.leerie-cta:hover {
  background-color: var(--glass-bg-10);
}

@media (min-width: 768px) {

  .leerie-cta {
    margin-top: 3rem;
  }
}

/* Barnacle Deep-Dive Section
 *
 * Narrative section explaining the recon -> codify -> direct-HTTP pipeline.
 * The pipeline phases render as a grid table on desktop and degrade to
 * stacked cards on mobile, both driven from the same message-count-derived
 * list so neither view can drift out of sync with the other.
 */

.barnacle-section {
  position: relative;
}

.barnacle-animation-div {
  width: 100%;
}

.barnacle-title-holder {
  margin-left: auto;
  margin-right: auto;
  max-width: 48rem;
  text-align: center;
}

.barnacle-phase-wrapper {
  margin-top: 3rem;
}

/* ============================================
   DESKTOP GRID VIEW
   ============================================ */

.barnacle-phase-grid {
  display: none;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {

  .barnacle-phase-grid {
    display: flex;
  }
}

.barnacle-phase-row {
  display: grid;
  grid-template-columns: auto 1fr 2fr;
  align-items: flex-start;
  gap: 1.5rem;
  border-color: var(--badge-cyan-bg);
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: var(--card-border);
  background-color: var(--card-bg);
  padding: 1.5rem;
}

.barnacle-phase-row .barnacle-phase-number {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  background-color: var(--badge-cyan-bg);
  color: var(--badge-cyan-text);
}

.barnacle-phase-row .barnacle-phase-title {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: var(--text-primary);
}

.barnacle-phase-row .barnacle-phase-description {
  color: var(--text-secondary);
}

/* ============================================
   MOBILE STACKED CARD VIEW
   ============================================ */

.barnacle-phase-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {

  .barnacle-phase-cards {
    display: none;
  }
}

.barnacle-phase-card {
  border-color: var(--badge-cyan-bg);
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: var(--card-border);
  background-color: var(--card-bg);
  padding: 1.5rem;
}

.barnacle-phase-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.barnacle-phase-card-header .barnacle-phase-number {
  display: flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  background-color: var(--badge-cyan-bg);
  color: var(--badge-cyan-text);
}

.barnacle-phase-card-header .barnacle-phase-title {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
}

.barnacle-phase-card .barnacle-phase-description {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-secondary);
}

/* ============================================
   SOURCE LINK
   ============================================ */

.barnacle-source-link {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.5rem;
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-decoration-line: none;
}

.barnacle-source-link:hover {
  opacity: 0.8;
}

/* Beacon Deep-Dive Section
 *
 * Narrative section explaining the AST-aware, cognitive-mode loop Beacon
 * runs to route work to small language models. The repository isn't public
 * yet, so this section surfaces a "coming soon" status badge in place of
 * the outbound repo link/CTA that the Leerie and Barnacle sections render.
 */

.beacon-section {
  position: relative;
}

.beacon-animation-div {
  width: 100%;
}

.beacon-title-holder {
  margin-left: auto;
  margin-right: auto;
  max-width: 48rem;
  text-align: center;
}

.beacon-status-badge {
  margin-bottom: 0.5rem;
}

.beacon-description {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--text-secondary);
}

@media (min-width: 768px) {

  .beacon-description {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

/* ============================================
   CAPABILITY GRID
   ============================================ */

.beacon-capability-grid {
  margin-left: auto;
  margin-right: auto;
  margin-top: 3rem;
  display: grid;
  max-width: 80rem;
  gap: 1rem;
}

@media (min-width: 768px) {

  .beacon-capability-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.beacon-capability-title {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: var(--text-primary);
}

.beacon-capability-description {
  margin-top: 0.5rem;
  color: var(--text-secondary);
}

/* Competitive Comparison Section
 *
 * Groups the comparison rows by product (Leerie, Barnacle, Beacon) into a
 * desktop grid per group, degrading to stacked cards on mobile. Both views
 * render from the same message-count-derived row list so neither can drift
 * out of sync with the other.
 */

.comparison-section {
  position: relative;
}

.comparison-animation-div {
  width: 100%;
}

.comparison-title-holder {
  margin-left: auto;
  margin-right: auto;
  max-width: 48rem;
  text-align: center;
}

.comparison-groups {
  margin-left: auto;
  margin-right: auto;
  margin-top: 3rem;
  display: flex;
  max-width: 64rem;
  flex-direction: column;
  gap: 2.5rem;
}

.comparison-group {
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: var(--card-border);
  background-color: var(--card-bg);
  padding: 1.5rem;
}

.comparison-group-heading {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
}

/* ============================================
   DESKTOP GRID VIEW
   ============================================ */

.comparison-grid {
  display: none;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 768px) {

  .comparison-grid {
    display: flex;
  }
}

.comparison-header {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.comparison-header-cell {
  border-radius: 0.5rem;
  background-color: var(--glass-bg-5);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.comparison-header-cell-enric {
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: currentColor;
  background-color: var(--glass-bg-5);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
}

.comparison-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.comparison-feature-cell {
  display: flex;
  align-items: center;
  border-radius: 0.5rem;
  background-color: var(--glass-bg-5);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--text-primary);
}

.comparison-value-cell {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border-radius: 0.5rem;
  background-color: var(--glass-bg-5);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-secondary);
}

.comparison-enric-cell {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: currentColor;
  background-color: var(--glass-bg-5);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

/* ============================================
   MOBILE CARD VIEW
   ============================================ */

.comparison-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 768px) {

  .comparison-cards {
    display: none;
  }
}

.comparison-card {
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: var(--glass-border-10);
  background-color: var(--glass-bg-5);
  padding: 1rem;
}

.comparison-card + .comparison-card {
  margin-top: 0.75rem;
}

.comparison-card-feature {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
}

.comparison-card-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.comparison-card-row + .comparison-card-row {
  border-top-width: 1px;
  border-color: var(--glass-border-10);
}

.comparison-card-label {
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--text-secondary);
}

.comparison-card-value {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-primary);
}

.comparison-card-enric .comparison-card-value {
  font-weight: 600;
}

/* ============================================
   STATUS ICONS
   ============================================ */

.comparison-icon-positive {
  margin-top: 0.125rem;
  display: flex;
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  --tw-text-opacity: 1;
  color: rgb(18 183 106 / var(--tw-text-opacity, 1));
}

.comparison-icon-negative {
  margin-top: 0.125rem;
  display: flex;
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.comparison-icon-neutral {
  margin-top: 0.125rem;
  display: flex;
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  --tw-text-opacity: 1;
  color: rgb(247 144 9 / var(--tw-text-opacity, 1));
}

/* ============================================
   SUMMARY STATS
   ============================================ */

.comparison-summary {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.5rem;
  display: grid;
  max-width: 64rem;
  gap: 1rem;
}

@media (min-width: 640px) {

  .comparison-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.comparison-summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: var(--card-border);
  background-color: var(--card-bg);
  padding: 1.5rem;
  text-align: center;
}

.comparison-summary-value {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
}

@media (min-width: 768px) {

  .comparison-summary-value {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

.comparison-summary-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-secondary);
}

/* Differentiators Section
 *
 * Portfolio-level thesis grid tying Leerie, Barnacle, and Beacon together.
 * Builds on the shared open-source design foundation in tokens.css.
 */

.oss-differentiators-grid {
  margin-top: 2.5rem;
  display: grid;
  list-style-type: none;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (min-width: 640px) {

  .oss-differentiators-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {

  .oss-differentiators-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.oss-differentiator-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: var(--card-border);
  background-color: var(--card-bg);
  padding: 1.5rem;
}

.oss-differentiator-title {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
}

.oss-differentiator-description {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-secondary);
}

/* Community CTA + Landing Footer
 *
 * Closing unit for the nric.ai open-source landing page: a CTA band linking
 * out to the Leerie/Barnacle repos (Beacon renders a "coming soon" card
 * instead, since its repo isn't public yet) and a slim footer carrying only
 * brand, legal, and social links. Built on the oss-* tokens in ./tokens.css.
 */

/* ============================================
   COMMUNITY CTA SECTION
   ============================================ */

.community-cta-section {
  position: relative;
}

.community-cta-animation-div {
  width: 100%;
}

.community-cta-title-holder {
  margin-left: auto;
  margin-right: auto;
  max-width: 48rem;
  text-align: center;
}

.community-cta-repo-grid {
  margin-left: auto;
  margin-right: auto;
  margin-top: 3rem;
  display: grid;
  max-width: 64rem;
  gap: 1rem;
}

@media (min-width: 768px) {

  .community-cta-repo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.community-cta-repo-card {
  display: flex;
  min-height: 120px;
}

.community-cta-repo-link,
.community-cta-repo-pending {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.community-cta-repo-link {
  color: var(--text-primary);
}

.community-cta-repo-link:hover {
  --tw-text-opacity: 1;
  color: rgb(255 88 16 / var(--tw-text-opacity, 1));
}

.community-cta-repo-pending {
  color: var(--text-secondary);
}

.community-cta-coming-soon {
  font-size: 0.75rem;
  line-height: 1rem;
}

.community-cta-button {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.5rem;
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 88 16 / var(--tw-bg-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--text-inverse);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.community-cta-button:hover {
  opacity: 0.9;
}

/* ============================================
   OPEN-SOURCE LANDING FOOTER
   ============================================ */

.oss-footer {
  border-top-width: 1px;
  border-color: var(--glass-border-5);
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.oss-footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.oss-footer-brand {
  display: flex;
  align-items: center;
}

.oss-footer-logo {
  height: auto;
}

.oss-footer-tagline {
  max-width: 28rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-secondary);
}

.oss-footer-social {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.oss-footer-github {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: var(--border-primary);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--text-primary);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.oss-footer-github:hover {
  background-color: var(--hover-bg);
}

.oss-footer-social-link {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--text-secondary);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.oss-footer-social-link:hover {
  color: var(--text-primary);
}

.oss-footer-social-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}

.oss-footer-bottom {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  border-top-width: 1px;
  border-color: var(--glass-border-5);
  padding-top: 1.5rem;
  text-align: center;
}

@media (min-width: 768px) {

  .oss-footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.oss-footer-copyright {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--text-muted);
}

.oss-footer-legal {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.oss-footer-legal-link {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--text-secondary);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.oss-footer-legal-link:hover {
  color: var(--text-primary);
}