/* ===================================================================
   OptimumIntelligence Landing Page — Additional Styles
   Extends color-system.css + main.css
   =================================================================== */

/* ---- General ---- */
body {
  font-family: 'Poppins', sans-serif;
  color: var(--text-primary);
  background: var(--bg-primary);
}

a {
  color: var(--primary-purple);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--primary-dark-purple);
}

/* ---- Section base ---- */
.section {
  padding: 80px 0;
}

.section-title {
  text-align: center;
  margin-bottom: 48px;
}

.section-title h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #271645;
  margin-bottom: 12px;
  position: relative;
  display: inline-block;
}

.section-title h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: #271645;
  margin: 10px auto 0;
  border-radius: 2px;
}

.section-title p {
  color: #271645;
  font-size: 1.05rem;
  max-width: 680px;
  margin: 0 auto;
}

/* ---- Hero ---- */
.hero-section {
  background: #63537D;
  padding: 120px 0 80px;
  color: #fff;
  overflow: hidden;
  position: relative;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero-section .hero-headline {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
  color: #fff;
}

.hero-section .hero-sub {
  font-size: 1.1rem;
  opacity: 0.9;
  max-width: 600px;
  line-height: 1.7;
  margin-bottom: 36px;
}

.hero-cta-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-hero-primary {
  background: #271645;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50px;
  padding: 14px 36px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  display: inline-block;
}

.btn-hero-primary:hover {
  background: #63537D;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.btn-hero-outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 50px;
  padding: 14px 36px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  display: inline-block;
}

.btn-hero-outline:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.12);
  color: #fff;
  transform: translateY(-2px);
}

/* ---- Feedback loop graphic ---- */
.loop-graphic {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0;
  margin: 12px 0 16px;
  position: relative;
}

.loop-node {
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 50px;
  padding: 6px 12px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  transition: background 0.3s ease;
}

.loop-node:hover {
  background: rgba(255,255,255,0.28);
}

.loop-arrow {
  color: rgba(255,255,255,0.6);
  font-size: 1rem;
  padding: 0 3px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.loop-return {
  width: 100%;
  text-align: center;
  margin-top: 6px;
  color: rgba(255,255,255,0.45);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

/* Large loop for tech page */
.loop-graphic-large .loop-node {
  background: #63537D;
  border: 2px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 12px 20px;
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--shadow-purple);
}

.loop-graphic-large .loop-arrow {
  color: rgba(255,255,255,0.7);
  font-size: 1.4rem;
  flex-shrink: 0;
}

/* ---- Nav CTA pill ("Book a demo" always reachable on scroll) ---- */
.navmenu .nav-cta {
  margin-left: 6px;
}

.navmenu .nav-cta-btn {
  background: #fff;
  color: #271645 !important;
  padding: 9px 20px !important;
  border-radius: 999px;
  font-weight: 700;
  transition: background 0.2s ease, color 0.2s ease;
}

.navmenu .nav-cta-btn:hover {
  background: rgba(255,255,255,0.85);
  color: #271645 !important;
}

.navmenu .nav-cta-btn i {
  margin-left: 8px;
  color: #271645 !important;
}

.navmenu > ul > li.nav-cta > a::before {
  content: none !important;
}

@media (max-width: 1199px) {
  .navmenu .nav-cta {
    margin: 6px 20px 4px;
  }

  .navmenu .nav-cta-btn {
    background: #271645;
    color: #fff !important;
    justify-content: center !important;
    border-radius: 999px;
    padding: 12px 20px !important;
  }

  .navmenu .nav-cta-btn:hover {
    background: #63537D;
    color: #fff !important;
  }

  .navmenu .nav-cta-btn i {
    background: rgba(255,255,255,0.18) !important;
    color: #fff !important;
  }
}

/* ---- Homepage hero v2 (edge-to-edge, dark) ---- */
.home-hero {
  position: relative;
  overflow: hidden;
  background: #271645;
  padding-top: 120px;
}

.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.35;
  pointer-events: none;
}

.home-hero::after {
  content: '';
  position: absolute;
  right: -160px;
  top: -140px;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(161,88,255,0.30) 0%, rgba(39,22,69,0) 65%);
  pointer-events: none;
}

.home-hero-main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 680px) 1fr;
  gap: 56px;
  align-items: stretch;
  padding: 0 56px 40px;
  min-height: 560px;
}

.home-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 0;
}

.home-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
}

.home-eyebrow-line {
  width: 34px;
  height: 2px;
  background: #A188E8;
  display: inline-block;
}

.home-eyebrow-label {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}

.home-hero-title {
  margin: 0;
  font-size: clamp(2.2rem, 4.3vw, 3.6rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}

.home-hero-lede {
  margin: 0;
  max-width: 520px;
  font-size: 1.25rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
}

.home-hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.home-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 30px;
  border-radius: 999px;
  background: #fff;
  color: #271645;
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.home-cta-primary:hover {
  background: rgba(255,255,255,0.85);
  color: #271645;
}

.home-link-quiet {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  border-bottom: 1px solid rgba(255,255,255,0.35);
  padding-bottom: 3px;
}

.home-link-quiet:hover {
  color: #fff;
  border-bottom-color: #fff;
}

.home-hero-trust {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.home-trust-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A188E8;
  white-space: nowrap;
}

.home-trust-logo {
  background: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.home-trust-logo img {
  height: 28px;
  width: auto;
  display: block;
}

.home-hero-trust p {
  margin: 0;
  max-width: 260px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.65);
}

.home-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  margin: 24px 0 0;
}

.home-hero-loop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 18px 56px;
  background: rgba(255,255,255,0.05);
  border-top: 1px solid rgba(255,255,255,0.10);
}

.home-loop-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #A188E8;
  white-space: nowrap;
}

.home-loop-steps {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-loop-steps li {
  font-size: 0.98rem;
  font-weight: 700;
  color: #fff;
}

.home-loop-steps li::after {
  content: "\2192";
  color: rgba(255,255,255,0.4);
  margin-left: 12px;
}

.home-loop-steps li:last-child::after {
  content: none;
}

.home-loop-note {
  margin: 0 0 0 auto;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
}

@media (max-width: 1180px) {
  .home-hero-main {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 32px 32px;
    min-height: 0;
  }

  .home-hero-visual {
    width: 100%;
    margin-top: 8px;
  }

  .home-hero-trust {
    margin-top: 8px;
  }

  .home-hero-loop {
    padding: 18px 32px;
  }

  .home-loop-note {
    margin-left: 0;
    flex-basis: 100%;
  }
}

@media (max-width: 768px) {
  .home-hero {
    padding-top: 100px;
  }

  .home-hero-main {
    padding: 0 20px 28px;
  }

  .home-hero-loop {
    padding: 16px 20px;
  }

  .home-hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-hero-trust {
    flex-wrap: wrap;
  }
}

/* ---- Cards ---- */
.oi-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 2px 16px rgba(161,88,255,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  border-top: 4px solid #271645;
}

.oi-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-purple);
}

.oi-card .card-icon {
  width: 56px;
  height: 56px;
  background: #63537D;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 20px;
}

.oi-card h3,
.oi-card h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #271645;
  margin-bottom: 10px;
}

.oi-card p {
  font-size: 0.93rem;
  color: #63537D;
  line-height: 1.65;
  margin: 0;
}

/* ---- Build-up scroll reveal ("What Optimum Intelligence does") ---- */
.build-up .oi-card {
  position: relative;
  opacity: 0;
  transform: translateY(40px) scale(0.94);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.build-up .oi-card .card-icon {
  opacity: 0;
  transform: scale(0.4) rotate(-14deg);
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: opacity, transform;
}

.build-up.is-visible .oi-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.build-up.is-visible .oi-card .card-icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.build-up .col-lg-3:nth-child(1) .oi-card { transition-delay: 0.02s; }
.build-up .col-lg-3:nth-child(2) .oi-card { transition-delay: 0.16s; }
.build-up .col-lg-3:nth-child(3) .oi-card { transition-delay: 0.30s; }
.build-up .col-lg-3:nth-child(4) .oi-card { transition-delay: 0.44s; }

.build-up .col-lg-3:nth-child(1) .oi-card .card-icon { transition-delay: 0.22s; }
.build-up .col-lg-3:nth-child(2) .oi-card .card-icon { transition-delay: 0.36s; }
.build-up .col-lg-3:nth-child(3) .oi-card .card-icon { transition-delay: 0.50s; }
.build-up .col-lg-3:nth-child(4) .oi-card .card-icon { transition-delay: 0.64s; }

/* Connecting arrows between cards, reinforcing the closed-loop narrative */
@media (min-width: 992px) {
  .build-up .col-lg-3 {
    position: relative;
  }

  .build-up .col-lg-3:not(:last-child)::after {
    content: "\2192";
    position: absolute;
    top: 50%;
    right: -6px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(161,88,255,0.18);
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-purple);
    opacity: 0;
    transform: translateX(50%) scale(0.4);
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
  }

  .build-up.is-visible .col-lg-3:not(:last-child)::after {
    opacity: 1;
    transform: translateX(50%) scale(1);
  }

  .build-up .col-lg-3:nth-child(1)::after { transition-delay: 0.12s; }
  .build-up .col-lg-3:nth-child(2)::after { transition-delay: 0.26s; }
  .build-up .col-lg-3:nth-child(3)::after { transition-delay: 0.40s; }
}

@media (prefers-reduced-motion: reduce) {
  .build-up .oi-card,
  .build-up .oi-card .card-icon,
  .build-up .col-lg-3:not(:last-child)::after {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ---- Section: accent background ---- */
.section-accent {
  background: var(--bg-light);
}

.section-dark {
  background: var(--gradient-secondary);
  color: #fff;
}

.section-dark .section-title h2 {
  color: #fff;
}

.section-dark .section-title h2::after {
  background: rgba(255,255,255,0.5);
}

.section-dark .section-title p {
  color: rgba(255,255,255,0.8);
}

/* ---- Tech pillars ---- */
.tech-pillar {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 2px 16px rgba(161,88,255,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  border-top: 4px solid #271645;
}

.tech-pillar:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-purple);
}

.tech-pillar .pillar-number {
  width: 56px;
  height: 56px;
  background: #63537D;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 20px;
  -webkit-text-fill-color: #fff;
}

.tech-pillar h3,
.tech-pillar h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #271645;
  margin-bottom: 10px;
}

.tech-pillar p {
  font-size: 0.93rem;
  color: #63537D;
  line-height: 1.65;
  margin: 0;
}

/* ---- CTA strip ---- */
.cta-strip {
  background: #fff;
  padding: 72px 0;
  text-align: center;
  color: #271645;
  border: none;
  margin: 0;
}

.cta-strip h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  margin-bottom: 12px;
  color: #271645;
}

.cta-strip p {
  font-size: 1.05rem;
  color: #63537D;
  margin-bottom: 32px;
}

.cta-strip .cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-strip .btn-hero-primary,
.cta-strip .btn-hero-outline {
  min-width: 180px;
  text-align: center;
  justify-content: center;
}

.cta-strip .btn-hero-outline {
  background: #63537D;
  color: #fff;
  border-color: #63537D;
  text-decoration: none;
}

.btn-hero-outline,
.btn-hero-primary {
  text-decoration: none;
}

.cta-strip .btn-hero-outline:hover {
  background: #271645;
  border-color: #271645;
  color: #fff;
}

/* ---- Breadcrumb ---- */
.page-hero {
  /* Deep ink from the palette. Was the mid-purple #63537D, which left the
     hero a shade lighter than the header above it and the generated art
     below it. One declaration so every page-hero stays in step. */
  background: #271645;
  padding: 100px 0 60px;
  color: #fff;
}

.page-hero h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  margin-bottom: 16px;
  color: #fff;
}

.page-hero p {
  font-size: 1.1rem;
  opacity: 0.88;
  max-width: 680px;
  line-height: 1.7;
  margin: 0;
  text-align: left;
}

/* ---- Related products/domains chips ---- */
.related-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.related-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 50px;
  background: #faf8ff;
  border: 2px solid rgba(39,22,69,0.2);
  color: #271645;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.related-chip:hover {
  background: #271645;
  color: #fff;
  border-color: #271645;
  transform: translateY(-2px);
}

/* ---- Contact form ---- */
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 12px 18px;
  border: 2px solid rgba(161,88,255,0.2);
  border-radius: 10px;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.3s ease;
  font-family: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: var(--primary-purple);
  box-shadow: 0 0 0 3px rgba(161,88,255,0.12);
}

.contact-form .form-group {
  margin-bottom: 20px;
}

.contact-form label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 6px;
}

/* ---- About boxes ---- */
.about-value-box {
  text-align: center;
  padding: 28px 20px;
}

.about-value-box .value-icon {
  font-size: 2.4rem;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 14px;
  display: block;
}

.about-value-box h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 8px;
}

.about-value-box p {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.6;
}

/* ---- System map ---- */
.system-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin: 40px 0;
}

.system-map-item {
  background: var(--gradient-secondary);
  border-radius: 14px;
  padding: 24px 20px;
  text-align: center;
  color: #fff;
}

.system-map-item i {
  font-size: 2rem;
  margin-bottom: 10px;
  display: block;
}

.system-map-item .map-label {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.system-map-item .map-sub {
  font-size: 0.78rem;
  opacity: 0.8;
}

/* ---- Header ---- */
#header {
  display: flex;
  align-items: center;
}

.branding {
  width: 100%;
}

/* Header content spans edge-to-edge with fixed side padding instead of
   Bootstrap's max-width + auto-margin .container, so the logo and the
   "Book a demo" CTA stay pinned near the viewport edges on very large
   screens instead of drifting toward the center as the gutters grow. */
.branding .container {
  max-width: 100%;
  padding-left: clamp(20px, 4vw, 64px);
  padding-right: clamp(20px, 4vw, 64px);
}

.navmenu {
  display: flex;
  align-items: center;
}

.navmenu ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navmenu ul li {
  display: flex;
  align-items: center;
  position: relative;
}

.navmenu ul li a {
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}

/* On the mobile accordion menu, a dropdown <li> holds both the label <a>
   and its nested submenu <ul> as direct children. The row layout above is
   for the desktop bar (where each <li> only ever has one visible child) —
   on mobile it was putting the opened submenu beside its label instead of
   underneath it, so it's reset to a plain block stack here. */
@media (max-width: 1199px) {
  .navmenu ul li {
    display: block;
  }
}


.logo {
  display: flex;
  align-items: center;
}

.header .logo .sitename {
  margin: 0;
  display: flex;
  align-items: center;
  color: #fff !important;
}

/* Dropdown */
.navmenu .dropdown .dropdown-menu {
  border-radius: 12px;
  border: none;
  box-shadow: 0 8px 32px rgba(122,44,179,0.18);
  padding: 8px 0;
  min-width: 220px;
  margin-top: 8px;
}

.navmenu .dropdown .dropdown-item {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  padding: 8px 20px;
  transition: all 0.2s ease;
}

.navmenu .dropdown .dropdown-item:hover {
  background: var(--bg-light);
  color: var(--primary-purple);
  padding-left: 26px;
}

/* ---- Language switcher ---- */
.lang-switcher {
  margin-left: 16px;
}

.lang-switcher .btn {
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.3);
  transition: all 0.3s ease;
}

.lang-switcher .btn:hover {
  background: rgba(255,255,255,0.28);
  border-color: rgba(255,255,255,0.6);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .section {
    padding: 56px 0;
  }

  .hero-section {
    padding: 100px 0 56px;
  }

  .hero-cta-group {
    flex-direction: column;
    align-items: flex-start;
  }

  .loop-graphic {
    gap: 6px;
  }

  .loop-node {
    font-size: 0.75rem;
    padding: 8px 14px;
  }

  .cta-strip {
    padding: 48px 0;
  }
}

@media (max-width: 576px) {
  .loop-graphic {
    flex-direction: column;
    align-items: center;
  }

  .loop-arrow {
    transform: rotate(90deg);
  }

  .loop-return {
    display: none;
  }
}

/* ===== Logo marquee ===== */
.logo-marquee-wrapper {
  overflow: hidden;
  position: relative;
}

.logo-marquee-wrapper::before,
.logo-marquee-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.logo-marquee-wrapper::before {
  left: 0;
  background: linear-gradient(to right, #fff 0%, transparent 100%);
}

.logo-marquee-wrapper::after {
  right: 0;
  background: linear-gradient(to left, #fff 0%, transparent 100%);
}

.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
}

.logo-marquee-track:hover {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.logo-marquee-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 40px;
}

.logo-marquee-item img {
  height: 36px;
  width: auto;
  display: block;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.logo-marquee-item.logo-lg img {
  height: 52px;
}

.logo-marquee-item.logo-xl img {
  height: 68px;
}

.logo-marquee-item.logo-xxl img {
  height: 92px;
}

.logo-marquee-item.logo-xxxl img {
  height: 120px;
}

.logo-marquee-item.logo-xxxxl img {
  height: 150px;
}

.logo-marquee-item:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

.logo-marquee-item.logo-dark-bg img {
  filter: invert(1) grayscale(1);
  opacity: 0.55;
}

.logo-marquee-item.logo-dark-bg:hover img {
  filter: invert(1);
  opacity: 1;
}

/* ===== Cookie consent banner ===== */
.oi-consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  background: #1a0a2e;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
  transform: translateY(100%);
  transition: transform 0.35s ease;
}

.oi-consent-banner.oi-consent-visible {
  transform: translateY(0);
}

/* ===================================================================
   "What Optimum Intelligence does" — scroll-driven card deck.
   4 stages stack as layers; the front card recedes to the back of the
   deck as the next comes forward. Each card's diagram animation plays
   when that card is in front. Namespaced .loop-* to avoid clashing
   with the generic .oi-card feature-card component used site-wide.
   =================================================================== */
.loop-section {
  --loop-ink:        #241A3C;
  --loop-purple:     #4A3B6B;
  --loop-purple-mid: #6B5B8E;
  --loop-lilac:      #9D8FC0;
  --loop-muted:      #8E84A8;
  --loop-line:       #E4DFEE;
  --loop-line-soft:  #EEE9F6;
  --loop-tint:       #EFEAF7;
  --loop-panel:      #FAF8FD;
  --loop-bg:         #F7F5FB;
  --loop-body:       #4A3B6B;

  /* deck geometry — tune these two to change the stacking feel */
  --loop-step-y: 30px;
  --loop-step-s: 0.05;

  background: var(--loop-bg);
  font-family: 'Montserrat', system-ui, sans-serif;
}

/* ---------- track + sticky stage ----------
   Track height controls cycling speed: taller = slower.
   Sticky top is offset by the fixed site header's height (70px). */
.loop-track { position: relative; height: 480vh; }
.loop-stage {
  position: sticky;
  top: 70px;
  height: calc(100vh - 70px);
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ---------- heading ---------- */
.loop-head {
  flex: none;
  width: 100%;
  max-width: 1240px;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.4vh, 14px);
  text-align: center;
}
.loop-head h2 {
  margin: 0;
  font-size: clamp(30px, 4.2vh, 44px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--loop-ink);
}
.loop-head hr {
  width: 56px; height: 3px;
  margin: 4px 0 2px;
  border: 0; border-radius: 2px;
  background: var(--loop-ink);
}
.loop-head p {
  margin: 0;
  max-width: 620px;
  font-size: clamp(15px, 1.9vh, 18px);
  line-height: 1.5;
  color: var(--loop-body);
  text-wrap: pretty;
}

/* ---------- body: rail + deck ---------- */
.loop-body {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 1240px;
  margin-top: clamp(18px, 3.4vh, 40px);
  padding: 0 40px;
  display: grid;
  grid-template-columns: 212px 1fr;
  gap: clamp(26px, 3.4vw, 48px);
  align-items: center;
}

.loop-rail { display: flex; flex-direction: column; gap: 2px; }
.loop-rail-title {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--loop-lilac);
  margin-bottom: 12px;
}
.loop-rail-item {
  display: flex; align-items: center; gap: 13px;
  padding: 10px 0;
  border-top: 1px solid var(--loop-line);
  opacity: 0.6;
  transition: opacity .35s ease;
}
.loop-rail-item:last-of-type { border-bottom: 1px solid var(--loop-line); }
.loop-rail-item i {
  width: 9px; height: 9px; flex: none;
  border-radius: 50%;
  background: #D3CBE4;
  transition: background .35s ease, transform .35s ease;
}
.loop-rail-item span {
  font-size: 13.5px; font-weight: 600;
  color: var(--loop-muted);
  transition: color .35s ease;
}
.loop-rail-item[data-active] { opacity: 1; }
.loop-rail-item[data-active] i { background: var(--loop-purple); transform: scale(1.5); }
.loop-rail-item[data-active] span { color: var(--loop-ink); font-weight: 700; }

.loop-rail-repeat {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px;
  font-size: 12px; font-weight: 600;
  color: var(--loop-lilac);
}

/* ---------- the deck ---------- */
.loop-deck {
  position: relative;
  height: 100%;
  max-height: 404px;
  min-height: 300px;
}
.loop-card {
  position: absolute;
  inset: 0;
  padding: 32px 36px;
  background: #FFFFFF;
  border: 1px solid var(--loop-line);
  border-radius: 20px;
  box-shadow: 0 22px 48px rgba(36, 26, 60, 0.12);
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
.loop-card-copy { display: flex; flex-direction: column; gap: 14px; }
.loop-card-top { display: flex; align-items: center; gap: 16px; }
.loop-icon {
  width: 48px; height: 48px; flex: none;
  border-radius: 12px;
  background: var(--loop-purple);
  display: flex; align-items: center; justify-content: center;
}
.loop-stage-no {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--loop-lilac);
}
.loop-card h3 {
  margin: 0;
  font-size: clamp(22px, 3.2vh, 29px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.018em;
  color: var(--loop-ink);
}
.loop-card p {
  margin: 0;
  font-size: clamp(14px, 1.8vh, 16px);
  line-height: 1.55;
  color: var(--loop-body);
  text-wrap: pretty;
}

/* ---------- diagram panel ---------- */
.loop-viz {
  position: relative;
  height: 100%;
  padding: 20px 22px;
  background: var(--loop-panel);
  border: 1px solid var(--loop-line-soft);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.loop-viz-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--loop-lilac);
}
.loop-chip {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--loop-tint);
  font-size: 10.5px; font-weight: 700;
  color: var(--loop-purple);
}

/* 01 — Gantt */
.loop-gantt { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 9px; }
.loop-now {
  position: absolute; left: 38%; top: 0; bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(#B4ABC9 0 4px, transparent 4px 8px);
}
.loop-gantt-row { display: flex; align-items: center; gap: 10px; }
.loop-gantt-row > b { width: 52px; flex: none; font-size: 10.5px; font-weight: 700; color: var(--loop-muted); }
.loop-gantt-track { position: relative; flex: 1; height: 13px; border-radius: 4px; background: var(--loop-tint); overflow: hidden; }
.loop-bar {
  position: absolute; top: 0; bottom: 0;
  border-radius: 4px;
  transform-origin: left center;
}

/* 02 — capture */
.loop-capture { flex: 1; display: grid; grid-template-columns: 1fr 78px; gap: 10px; align-items: center; }
.loop-inputs { display: flex; flex-direction: column; gap: 10px; }
.loop-input { display: flex; align-items: center; gap: 9px; }
.loop-input-icon {
  width: 26px; height: 26px; flex: none;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid var(--loop-line);
  display: flex; align-items: center; justify-content: center;
}
.loop-input > b { font-size: 11.5px; font-weight: 700; color: #3B2E5A; }
.loop-wire {
  position: relative; flex: 1; height: 1px;
  background: repeating-linear-gradient(90deg, #D3CBE4 0 3px, transparent 3px 7px);
}
.loop-packet {
  position: absolute; left: 0; top: -2px;
  width: 5px; height: 5px;
  border-radius: 50%;
}
.loop-hub { position: relative; width: 78px; height: 78px; display: flex; align-items: center; justify-content: center; }
.loop-hub-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--loop-lilac); }
.loop-hub-core {
  position: relative;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--loop-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.loop-hub-core b { font-size: 13px; font-weight: 800; color: #FFFFFF; }
.loop-hub-core span { font-size: 7px; font-weight: 700; letter-spacing: 0.1em; color: var(--loop-lilac); }

/* 03 — detect */
.loop-rows { flex: 1; display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.loop-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px;
  background: #FFFFFF;
  border: 1px solid var(--loop-line-soft);
  border-radius: 8px;
}
.loop-row > b { flex: 1; font-size: 11px; font-weight: 700; color: #3B2E5A; }
.loop-pill {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.06em;
}
.loop-pill-ok   { color: #2F7A57; background: #E8F5EE; }
.loop-pill-risk { color: #8A6A22; background: #FBF2DE; }
.loop-pill-late { color: #FFFFFF; background: #C24A4A; }
.loop-row-late { background: #FDF0F0; border-color: #F0C9C9; }
.loop-row-late > b { color: #8E2F2F; }
.loop-toast {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px;
  background: var(--loop-ink);
  border-radius: 10px;
}
.loop-toast svg { flex: none; margin-top: 1px; }
.loop-toast b { display: block; font-size: 11px; font-weight: 700; color: #FFFFFF; }
.loop-toast span { display: block; margin-top: 2px; font-size: 10px; font-weight: 500; color: #C9C3DA; }

/* 04 — improve */
.loop-chart { flex: 1; display: flex; align-items: flex-end; gap: 14px; padding-bottom: 2px; }
.loop-col {
  flex: 1; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
}
.loop-col > b { font-size: 10px; font-weight: 800; color: var(--loop-muted); }
.loop-col > span { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--loop-lilac); }
.loop-col-last > b { color: var(--loop-ink); }
.loop-col-last > span { color: var(--loop-purple); }
.loop-colbar { width: 100%; max-width: 44px; border-radius: 5px 5px 0 0; transform-origin: 50% 100%; }
.loop-delta { display: flex; align-items: center; gap: 5px; color: var(--loop-purple); }
.loop-feedback { display: flex; align-items: center; gap: 9px; font-size: 10.5px; font-weight: 700; color: var(--loop-purple); }

/* ---------- progress ---------- */
.loop-progress {
  flex: none;
  width: 100%;
  max-width: 1240px;
  margin-top: clamp(14px, 2.4vh, 28px);
  padding: 0 40px;
}
.loop-progress-track { height: 2px; border-radius: 2px; background: var(--loop-line); overflow: hidden; }
.loop-progress-fill { height: 100%; width: 0%; border-radius: 2px; background: var(--loop-purple); }

/* ============================================================
   Diagram animations. Every animated element carries [data-loop-anim]
   and starts as animation:none; the script assigns its authored
   animation when the card reaches the front, and clears it again
   when the card leaves — so each stage replays from frame 0.
   ============================================================ */
@keyframes loopGrowX  { from { transform: scaleX(0) }               to { transform: scaleX(1) } }
@keyframes loopGrowY  { from { transform: scaleY(0) }               to { transform: scaleY(1) } }
@keyframes loopFadeUp { from { opacity: 0; transform: translateY(9px) }  to { opacity: 1; transform: none } }
@keyframes loopFadeIn { from { opacity: 0 }                         to { opacity: 1 } }
@keyframes loopSlideIn{ from { opacity: 0; transform: translateX(22px) } to { opacity: 1; transform: none } }
@keyframes loopRing   { from { transform: scale(0.55); opacity: .5 }     to { transform: scale(2.4); opacity: 0 } }
@keyframes loopSpin   { from { transform: rotate(0deg) }            to { transform: rotate(360deg) } }
@keyframes loopTravel {
  0%   { transform: translateX(0); opacity: 0 }
  12%  { opacity: 1 }
  82%  { opacity: 1 }
  100% { transform: translateX(var(--loop-travel, 110px)); opacity: 0 }
}
@keyframes loopFlag {
  0%, 100% { background: #FDF0F0; border-color: #F0C9C9 }
  50%      { background: #FADDDD; border-color: #E3A0A0 }
}

/* ---------- reduced motion: cards swap, diagrams sit finished ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-loop-anim] { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- narrow screens: deck becomes a normal stack ---------- */
@media (max-width: 900px) {
  .loop-track { height: auto; }
  .loop-stage { position: static; height: auto; padding: 60px 0; }
  .loop-body { grid-template-columns: 1fr; }
  .loop-rail { display: none; }
  .loop-deck { height: auto; max-height: none; display: flex; flex-direction: column; gap: 20px; }
  .loop-card {
    position: static;
    grid-template-columns: 1fr;
    transform: none !important;
    opacity: 1 !important;
  }
  .loop-viz { height: 300px; }
  .loop-progress { display: none; }
}

.oi-consent-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.oi-consent-text {
  flex: 1 1 420px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.oi-consent-text a {
  color: #fff;
  text-decoration: underline;
}

.oi-consent-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.oi-consent-btn {
  border-radius: 50px;
  padding: 10px 22px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid #fff;
  white-space: nowrap;
}

.oi-consent-btn-accept {
  background: #fff;
  color: #271645;
}

.oi-consent-btn-reject {
  background: transparent;
  color: #fff;
}

/* ===================================================================
   Shared palette for the banded dark/light page layouts (erdosP-3,
   ground handling, airports). Same ink/lilac/amber family as the
   homepage card deck and hero console.
   =================================================================== */
:root {
  --oi-ink:      #241A3C;
  --oi-ink-2:    #3B2E5A;
  --oi-ink-body: #4B3C6E;
  --oi-plum:     #6B5B8E;
  --oi-lilac:    #9D8FC0;
  --oi-body:     #D6D1E4;
  --oi-muted:    #C9C3DA;
  --oi-amber:    #F2B061;
  --oi-amber-dk: #C08A3E;
  --oi-light:    #F6F4FA;
  --oi-line:     #DFD9EC;
  --oi-mono:     ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ===================================================================
   erdosP-3 technology page. Alternating dark ink / light lilac bands,
   same rhythm as the ground handling page. Namespaced .erd-*.
   =================================================================== */
.technology-page {
  --erd-ink:      var(--oi-ink);
  --erd-lilac:    var(--oi-lilac);
  --erd-body:     var(--oi-body);
  --erd-muted:    var(--oi-muted);
  --erd-amber:    var(--oi-amber);
  --erd-amber-dk: var(--oi-amber-dk);
  --erd-plum:     var(--oi-plum);
  --erd-ink-body: var(--oi-ink-body);
  --erd-light:    var(--oi-light);
  /* Hairlines differ per band: translucent white on ink, solid on paper. */
  --erd-line:       rgba(255, 255, 255, 0.14);
  --erd-line-paper: var(--oi-line);
  --erd-mono:       var(--oi-mono);
}

.erd-hero,
.erd-dark {
  background: var(--erd-ink);
  color: #fff;
}

.erd-light {
  background: var(--erd-light);
  color: var(--erd-ink);
}

.erd-hero {
  padding: clamp(104px, 11vw, 136px) 0 clamp(72px, 8vw, 104px);
}

.erd-dark,
.erd-light {
  padding: clamp(64px, 8vw, 104px) 0;
}

.erd-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 8vw, 112px);
}

.erd-stack.is-tight {
  gap: clamp(40px, 5vw, 56px);
}

/* ---- Shared type ---- */
.erd-kicker {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--erd-lilac);
}

.erd-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--erd-lilac);
}

.erd-eyebrow-rule {
  width: 34px;
  height: 2px;
  background: var(--erd-lilac);
}

.erd-h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.028em;
  color: #fff;
}

.erd-h3 {
  margin: 0;
  font-size: clamp(1.7rem, 2.8vw, 2.25rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #fff;
  text-wrap: balance;
}

.erd-body {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--erd-body);
  text-wrap: pretty;
}

.erd-block-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---- Intro ---- */
.erd-intro {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.erd-name {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.erd-mark {
  width: clamp(72px, 7vw, 104px);
  height: auto;
  border-radius: 22px;
  display: block;
}

.erd-wordmark {
  margin: 0;
  font-size: clamp(3.2rem, 6.6vw, 5.75rem);
  line-height: 0.94;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #fff;
  white-space: nowrap;
}

.erd-tagline {
  margin: 0 0 14px;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #C9B6FF;
  text-wrap: balance;
}

.erd-lede {
  margin: 0;
  max-width: 900px;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  line-height: 1.42;
  font-weight: 500;
  color: #fff;
  text-wrap: pretty;
}

/* ---- One change, end to end ---- */
.erd-block {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.erd-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 20px;
  align-items: stretch;
}

.erd-step {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  padding: 26px;
  background: rgba(255, 255, 255, 0.03);
}

.erd-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.erd-step-no {
  font-family: var(--erd-mono);
  font-size: 0.75rem;
  color: var(--erd-lilac);
}

.erd-step-tag {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--erd-lilac);
}

.erd-step-quote {
  margin: 0;
  font-size: 1.28rem;
  line-height: 1.38;
  font-weight: 600;
  color: #fff;
  text-wrap: pretty;
}

.erd-step-note {
  margin: auto 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--erd-muted);
}

.erd-constraints {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.erd-constraint {
  font-family: var(--erd-mono);
  font-size: 0.75rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 9px 11px;
}

/* Step 03 inverts to a light card: the solved plan is the payoff. */
.erd-step-solve {
  border: 1.5px solid #fff;
  background: #fff;
  color: var(--erd-ink);
}

.erd-step-solve .erd-step-no,
.erd-step-solve .erd-step-tag,
.erd-step-solve .erd-step-note {
  color: var(--erd-plum);
}

.erd-gantt {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.erd-gantt-row {
  display: flex;
  align-items: center;
  gap: 11px;
}

.erd-gantt-label {
  width: 52px;
  flex: none;
  font-family: var(--erd-mono);
  font-size: 0.66rem;
  color: var(--erd-plum);
}

.erd-gantt-track {
  flex: 1;
  height: 13px;
  border-radius: 4px;
  background: #EDE9F5;
  position: relative;
  overflow: hidden;
}

.erd-gantt-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  background: var(--erd-muted);
}

.erd-gantt-bar.is-moved {
  background: var(--erd-amber);
}

.erd-gantt-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 63px;
  font-family: var(--erd-mono);
  font-size: 0.66rem;
  color: var(--erd-plum);
}

.erd-gantt-swatch {
  width: 14px;
  height: 8px;
  border-radius: 3px;
  background: var(--erd-amber);
}

.erd-facts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  border-top: 1px solid #E4DFEE;
  padding-top: 14px;
}

.erd-fact {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.85rem;
}

.erd-fact dt {
  font-weight: 400;
  color: var(--erd-plum);
}

.erd-fact dd {
  margin: 0;
  font-weight: 700;
  color: var(--erd-ink);
  text-align: right;
}

/* ---- Not a chatbot / the rules it holds ---- */
.erd-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 64px 80px;
  align-items: start;
}

.erd-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.erd-principle {
  margin-top: 10px;
  padding: 24px 26px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.erd-principle p {
  margin: 0;
  font-size: 1.03rem;
  line-height: 1.6;
  color: #fff;
  text-wrap: pretty;
}

.erd-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--erd-line);
  border: 1px solid var(--erd-line);
  border-radius: 14px;
  overflow: hidden;
}

.erd-rule {
  background: var(--erd-ink);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.erd-rule-name {
  font-size: 0.94rem;
  font-weight: 700;
  color: #fff;
}

.erd-rule-desc {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--erd-muted);
}

.erd-notes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.erd-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.erd-note p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--erd-body);
  text-wrap: pretty;
}

.erd-note-mono {
  font-family: var(--erd-mono);
  font-size: 0.72rem !important;
  color: var(--erd-muted) !important;
}

.erd-note-icon {
  flex: none;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--erd-lilac);
}

.erd-note-icon.is-amber {
  color: var(--erd-amber);
}

/* ---- Light band: same components, inverted for the lilac paper ---- */
.erd-light .erd-kicker,
.erd-light .erd-rule-desc,
.erd-light .erd-note-icon {
  color: var(--erd-plum);
}

.erd-light .erd-h3,
.erd-light .erd-rule-name,
.erd-light .erd-principle p {
  color: var(--erd-ink);
}

.erd-light .erd-body,
.erd-light .erd-note p {
  color: var(--erd-ink-body);
}

.erd-light .erd-principle {
  background: #fff;
  border-color: var(--erd-line-paper);
}

.erd-light .erd-rules {
  background: var(--erd-line-paper);
  border-color: var(--erd-line-paper);
}

.erd-light .erd-rule {
  background: #fff;
}

.erd-light .erd-note-mono {
  color: var(--erd-plum) !important;
}

.erd-light .erd-note-icon.is-amber {
  color: var(--erd-amber-dk);
}

/* ---- More of what you can ask ---- */
.erd-ask {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.erd-ask-stage {
  display: flex;
  flex-direction: column;
  gap: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 30px 0 34px;
}

.erd-ask-ticks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 340px;
}

.erd-ask-tick {
  height: 2px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.erd-ask-tick > span {
  display: block;
  height: 100%;
  background: var(--erd-amber);
  transform: scaleX(0);
  transform-origin: left;
  animation: oiAskTick 16.5s linear infinite;
}

/* Slides share one grid cell so the block does not resize between quotes. */
.erd-ask-slides {
  display: grid;
}

.erd-ask-slide {
  grid-area: 1 / 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 22px;
  opacity: 0;
  animation: oiAskCycle 16.5s ease-in-out infinite;
}

.erd-ask-tick:nth-child(2) > span,
.erd-ask-slide:nth-child(2),
.erd-ask-slide:nth-child(2) .erd-ask-answer { animation-delay: 5.5s; }

.erd-ask-tick:nth-child(3) > span,
.erd-ask-slide:nth-child(3),
.erd-ask-slide:nth-child(3) .erd-ask-answer { animation-delay: 11s; }

.erd-ask-quote {
  margin: 0;
  font-size: clamp(1.35rem, 2.6vw, 2.05rem);
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: pretty;
}

.erd-ask-answer {
  display: flex;
  gap: 12px;
  align-items: baseline;
  opacity: 0;
  animation: oiAskAnswer 16.5s ease-in-out infinite;
}

.erd-ask-answer p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--erd-muted);
  max-width: 660px;
}

.erd-ask-arrow {
  color: var(--erd-amber);
  font-size: 1rem;
}

/* Shared by the erdosP-3 page and the ground handling page. */
@keyframes oiAskCycle {
  0%   { opacity: 0; transform: translateY(16px); }
  3%   { opacity: 1; transform: translateY(0); }
  28%  { opacity: 1; transform: translateY(0); }
  32%  { opacity: 0; transform: translateY(-16px); }
  100% { opacity: 0; transform: translateY(-16px); }
}

@keyframes oiAskAnswer {
  0%   { opacity: 0; transform: translateY(10px); }
  5%   { opacity: 0; transform: translateY(10px); }
  9%   { opacity: 1; transform: translateY(0); }
  28%  { opacity: 1; transform: translateY(0); }
  32%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes oiAskTick {
  0%   { transform: scaleX(0); }
  30%  { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}

/* ---- Solver CTA ---- */
.erd-solver {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  padding: 30px 32px;
  background: rgba(255, 255, 255, 0.04);
}

.erd-solver-id {
  display: flex;
  align-items: center;
  gap: 20px;
}

.erd-solver-id img {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  display: block;
}

.erd-solver-title {
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
}

.erd-solver-sub {
  margin-top: 5px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--erd-muted);
}

.erd-solver-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--erd-ink);
  border-radius: 999px;
  padding: 14px 26px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease;
}

.erd-solver-btn:hover,
.erd-solver-btn:focus-visible {
  background: var(--erd-amber);
  color: var(--erd-ink);
}

/* ---- Products running on the engine ---- */
.erd-products {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 38px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.erd-product-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.erd-product-links a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.erd-product-links a:hover,
.erd-product-links a:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.erd-product-links i {
  font-size: 0.95rem;
  color: var(--erd-lilac);
}

.erd-product-all {
  border-color: transparent !important;
  background: none !important;
  color: var(--erd-muted) !important;
}

.erd-product-all:hover,
.erd-product-all:focus-visible {
  color: #fff !important;
}

@media (max-width: 575.98px) {
  .erd-rules {
    grid-template-columns: minmax(0, 1fr);
  }

  .erd-step,
  .erd-principle {
    padding: 22px 20px;
  }

  .erd-solver {
    padding: 24px 22px;
  }

  .erd-solver-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Without the cycle the slides would stay invisible on top of each
     other, so lay them out as a plain list instead. */
  .erd-ask-slides {
    display: flex;
    flex-direction: column;
    gap: 34px;
  }

  .erd-ask-slide,
  .erd-ask-answer {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .erd-ask-ticks {
    display: none;
  }
}

/* ===================================================================
   Ground handling page. Alternating dark ink / light lilac bands, with
   an illustrated turnaround board in the hero. Namespaced .gh-*.
   =================================================================== */
.ground-handling-page,
.product-optiflight-page {
  --gh-ink:      var(--oi-ink);
  --gh-lilac:    var(--oi-lilac);
  --gh-body:     var(--oi-body);
  --gh-muted:    var(--oi-muted);
  --gh-amber:    var(--oi-amber);
  --gh-amber-dk: var(--oi-amber-dk);
  --gh-plum:     var(--oi-plum);
  --gh-ink-body: var(--oi-ink-body);
  --gh-light:    var(--oi-light);
  --gh-line:     var(--oi-line);
  --gh-mono:     var(--oi-mono);
}

.gh-hero,
.gh-dark {
  background: var(--gh-ink);
  color: #fff;
}

.gh-light {
  background: var(--gh-light);
  color: var(--gh-ink);
}

.gh-hero {
  padding: clamp(104px, 11vw, 140px) 0 clamp(72px, 8vw, 96px);
}

.gh-dark,
.gh-light {
  padding: clamp(64px, 8vw, 96px) 0;
}

/* ---- Shared type ---- */
.gh-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gh-lilac);
}

.gh-kicker.is-dark {
  color: var(--gh-plum);
}

.gh-kicker.is-amber {
  color: var(--gh-amber);
}

.gh-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gh-lilac);
}

.gh-eyebrow-rule {
  width: 34px;
  height: 2px;
  background: var(--gh-amber);
}

.gh-h1 {
  margin: 0;
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.032em;
  color: #fff;
  text-wrap: balance;
}

.gh-h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--gh-ink);
  text-wrap: balance;
}

.gh-dark .gh-h2 {
  color: #fff;
}

.gh-lede {
  margin: 0;
  max-width: 560px;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.55;
  color: var(--gh-body);
  text-wrap: pretty;
}

.gh-body {
  margin: 0;
  max-width: 560px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--gh-ink-body);
  text-wrap: pretty;
}

.gh-dark .gh-body {
  color: var(--gh-body);
}

.gh-note {
  margin: 0;
  font-size: 0.88rem;
  color: var(--gh-lilac);
}

.gh-block-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
  margin-bottom: 44px;
}

.gh-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 56px 80px;
  align-items: start;
}

.gh-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---- Buttons ---- */
.gh-btn-light,
.gh-btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 15px 28px;
  font-size: 0.97rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease;
}

.gh-btn-light {
  background: #fff;
  color: var(--gh-ink);
}

.gh-btn-light:hover,
.gh-btn-light:focus-visible {
  background: var(--gh-amber);
  color: var(--gh-ink);
}

.gh-btn-dark {
  background: var(--gh-ink);
  color: #fff;
}

.gh-btn-dark:hover,
.gh-btn-dark:focus-visible {
  background: #3B2E5A;
  color: #fff;
}

.gh-btn-dark.is-large {
  padding: 18px 34px;
  font-size: 1.05rem;
}

.gh-link-quiet {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gh-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 3px;
}

.gh-link-quiet:hover,
.gh-link-quiet:focus-visible {
  color: #fff;
}

.gh-link-quiet.is-dark {
  color: var(--gh-ink-body);
  border-bottom-color: var(--gh-muted);
}

.gh-link-quiet.is-dark:hover,
.gh-link-quiet.is-dark:focus-visible {
  color: var(--gh-ink);
}

/* ---- Hero ---- */
.gh-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 64px 72px;
  align-items: center;
}

.gh-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.gh-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding-top: 6px;
}

/* ---- Turnaround board ---- */
.gh-board {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gh-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.gh-board-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}

.gh-board-state {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--gh-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--gh-amber);
  white-space: nowrap;
}

.gh-board-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gh-amber);
}

.gh-tasks {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Playhead sweeping the task chain, pinned to the bar column. */
.gh-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 108px;
  right: 0;
  pointer-events: none;
}

.gh-sweep > span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(242, 176, 97, 0.55);
  animation: ghSweep 9s linear infinite;
}

.gh-task {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gh-task-name {
  width: 96px;
  flex: none;
  font-family: var(--gh-mono);
  font-size: 0.66rem;
  color: var(--gh-lilac);
}

.gh-task-track {
  flex: 1;
  height: 11px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  position: relative;
}

.gh-task-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  background: var(--gh-muted);
}

.gh-task-bar.is-final {
  background: #fff;
}

.gh-task-bar.is-slipping {
  animation: ghSlip 9s ease-in-out infinite;
}

.gh-board-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 14px;
  font-family: var(--gh-mono);
  font-size: 0.66rem;
}

.gh-board-note {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--gh-muted);
}

.gh-board-swatch {
  width: 14px;
  height: 8px;
  border-radius: 3px;
  background: var(--gh-amber);
  flex: none;
}

.gh-board-status {
  color: var(--gh-lilac);
}

@keyframes ghSweep {
  0%   { left: 4%; }
  100% { left: 96%; }
}

@keyframes ghSlip {
  0%, 18%   { transform: translateX(0); background: #C9C3DA; }
  28%, 100% { transform: translateX(22%); background: #F2B061; }
}

/* ---- Why it is hard ---- */
.gh-reasons {
  display: flex;
  flex-direction: column;
}

.gh-reason {
  display: grid;
  grid-template-columns: minmax(0, 92px) minmax(0, 1fr);
  gap: 20px 26px;
  padding: 22px 0;
  border-top: 1px solid var(--gh-line);
}

.gh-reason:last-child {
  border-bottom: 1px solid var(--gh-line);
}

.gh-reason-no {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--gh-ink);
  line-height: 1;
}

.gh-reason-text {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.gh-reason-text h3 {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--gh-ink);
}

.gh-reason-text p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--gh-ink-body);
}

/* ---- What we run ---- */
.gh-stages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.gh-stage {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.gh-stage-no {
  font-family: var(--gh-mono);
  font-size: 0.7rem;
  color: var(--gh-amber);
}

.gh-stage h3 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
}

.gh-stage p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--gh-muted);
}

/* ---- erdosP-3 in the tower ---- */
.gh-ask {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-left: 2px solid var(--gh-line);
  padding-left: 32px;
}

.gh-ask-ticks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 300px;
}

.gh-ask-tick {
  height: 2px;
  background: var(--gh-line);
  overflow: hidden;
}

.gh-ask-tick > span {
  display: block;
  height: 100%;
  background: var(--gh-amber);
  transform: scaleX(0);
  transform-origin: left;
  animation: oiAskTick 16.5s linear infinite;
}

.gh-ask-slides {
  display: grid;
}

.gh-ask-slide {
  grid-area: 1 / 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 0;
  animation: oiAskCycle 16.5s ease-in-out infinite;
}

.gh-ask-tick:nth-child(2) > span,
.gh-ask-slide:nth-child(2),
.gh-ask-slide:nth-child(2) .gh-ask-answer { animation-delay: 5.5s; }

.gh-ask-tick:nth-child(3) > span,
.gh-ask-slide:nth-child(3),
.gh-ask-slide:nth-child(3) .gh-ask-answer { animation-delay: 11s; }

.gh-ask-quote {
  margin: 0;
  font-size: clamp(1.28rem, 2.4vw, 1.8rem);
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--gh-ink);
  text-wrap: pretty;
}

.gh-ask-answer {
  display: flex;
  gap: 12px;
  align-items: baseline;
  opacity: 0;
  animation: oiAskAnswer 16.5s ease-in-out infinite;
}

.gh-ask-answer p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--gh-ink-body);
}

.gh-ask-arrow {
  color: var(--gh-amber-dk);
  font-size: 1rem;
}

/* ---- Proof ---- */
.gh-proof-grid {
  align-items: center;
  margin-bottom: 48px;
}

.gh-proof-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.gh-proof-mark img {
  height: 120px;
  max-width: 100%;
}

/* ---- Closing CTA ---- */
.gh-cta {
  padding: clamp(72px, 9vw, 104px) 0;
}

.gh-cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 36px 60px;
}

.gh-cta-inner > div {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 640px;
}

.gh-cta .gh-h2 {
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.032em;
}

@media (max-width: 767.98px) {
  .gh-stages {
    grid-template-columns: minmax(0, 1fr);
  }

  .gh-ask {
    border-left: none;
    padding-left: 0;
  }

  .gh-reason {
    grid-template-columns: minmax(0, 56px) minmax(0, 1fr);
    gap: 12px 18px;
  }

  .gh-board {
    padding: 22px 20px 18px;
  }

  .gh-sweep {
    left: 88px;
  }

  .gh-task-name {
    width: 76px;
  }

  .gh-btn-light,
  .gh-btn-dark {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gh-sweep,
  .gh-ask-ticks {
    display: none;
  }

  .gh-task-bar.is-slipping {
    animation: none;
    background: var(--gh-amber);
    transform: translateX(22%);
  }

  /* Same as the erdosP-3 page: stacked slides need a real layout once the
     cycle that reveals them is gone. */
  .gh-ask-slides {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .gh-ask-slide,
  .gh-ask-answer {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ===================================================================
   Banded page layout, following the ground handling page. Shared by
   the /domains/ and /products/ pages and their overviews, and by the
   domains band on the homepage. Namespaced .dm-*; each page's own hero
   board is namespaced after its subject (.ap-* airports, .lg-*
   logistics, .fm-* facility, .cl-* cleaning, .pr-* products).
   =================================================================== */
.dm-hero,
.dm-dark {
  background: var(--oi-ink);
  color: #fff;
}

.dm-light {
  background: var(--oi-light);
  color: var(--oi-ink);
}

.dm-hero {
  padding: clamp(96px, 10vw, 128px) 0 clamp(56px, 6vw, 72px);
}

.dm-dark,
.dm-light {
  padding: clamp(64px, 8vw, 96px) 0;
}

/* ---- Shared type ---- */
.dm-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oi-lilac);
}

.dm-kicker.is-dark {
  color: var(--oi-plum);
}

.dm-h1 {
  margin: 0;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.032em;
  color: #fff;
  text-wrap: balance;
}

.dm-h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--oi-ink);
  text-wrap: balance;
}

.dm-dark .dm-h2 {
  color: #fff;
}

.dm-lede {
  margin: 0;
  max-width: 560px;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  color: var(--oi-body);
  text-wrap: pretty;
}

.dm-body {
  margin: 0;
  max-width: 620px;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--oi-ink-body);
  text-wrap: pretty;
}

.dm-hero .dm-body,
.dm-dark .dm-body {
  color: var(--oi-body);
}

.dm-block-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
  margin-bottom: 40px;
}

.dm-body.is-wide {
  max-width: 820px;
}

.dm-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 48px 80px;
  align-items: start;
}

.dm-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---- Buttons and links ---- */
.dm-btn-light,
.dm-btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 15px 28px;
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease;
}

.dm-btn-light {
  background: #fff;
  color: var(--oi-ink);
}

.dm-btn-light:hover,
.dm-btn-light:focus-visible {
  background: var(--oi-amber);
  color: var(--oi-ink);
}

.dm-btn-dark {
  background: var(--oi-ink);
  color: #fff;
}

.dm-btn-dark:hover,
.dm-btn-dark:focus-visible {
  background: var(--oi-ink-2);
  color: #fff;
}

.dm-link-quiet {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--oi-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 3px;
}

.dm-link-quiet:hover,
.dm-link-quiet:focus-visible {
  color: #fff;
}

.dm-link-quiet.is-dark {
  color: var(--oi-ink-body);
  border-bottom-color: var(--oi-muted);
}

.dm-link-quiet.is-dark:hover,
.dm-link-quiet.is-dark:focus-visible {
  color: var(--oi-ink);
}

.dm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding-top: 6px;
}

/* ---- Hero ---- */
.dm-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 56px 72px;
  align-items: center;
}

.dm-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.dm-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--oi-lilac);
  width: fit-content;
}

.dm-back:hover,
.dm-back:focus-visible {
  color: #fff;
}

.dm-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oi-lilac);
}

.dm-eyebrow-icon {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: #fff;
}

.dm-eyebrow-rule {
  width: 34px;
  height: 2px;
  flex: none;
  background: var(--oi-amber);
}

/* The overview hub has no hero board, so the copy gets a column instead of
   half the grid. */
.dm-hero.is-narrow .dm-hero-copy {
  max-width: 820px;
}

/* ---- Demand board ---- */
.dm-board {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dm-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dm-board-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}

.dm-board-tag {
  font-family: var(--oi-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--oi-lilac);
}

.dm-board-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 14px;
  font-family: var(--oi-mono);
  font-size: 0.66rem;
  color: var(--oi-muted);
}

.dm-legend {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dm-swatch {
  width: 14px;
  height: 8px;
  border-radius: 3px;
  background: var(--oi-muted);
  flex: none;
}

.dm-swatch.is-line {
  height: 2px;
  background: #fff;
}

.dm-board-note {
  margin-left: auto;
  color: var(--oi-amber);
}

/* Every board marks the one thing that needs attention with this. */
@keyframes dmPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.62; }
}

/* ---- Airports: hourly demand against staffing coverage ---- */
.ap-chart {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.ap-hour {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ap-hour-track {
  position: relative;
  width: 100%;
  height: 132px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.ap-hour-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px 4px 0 0;
  background: rgba(201, 195, 218, 0.42);
}

/* Coverage marker: where staffing sits against that hour's demand. */
.ap-hour-cover {
  position: absolute;
  left: -2px;
  right: -2px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

.ap-hour.is-gap .ap-hour-bar {
  background: var(--oi-amber);
  animation: dmPulse 3.2s ease-in-out infinite;
}

.ap-hour.is-gap .ap-hour-label {
  color: var(--oi-amber);
  font-weight: 700;
}

.ap-hour-label {
  font-family: var(--oi-mono);
  font-size: 0.66rem;
  color: var(--oi-lilac);
}

/* ---- Logistics: the same route before and after a re-solve ---- */
.lg-plan {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 8px 0;
}

.lg-plan-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.lg-plan-label {
  font-family: var(--oi-mono);
  font-size: 0.64rem;
  color: var(--oi-plum);
  text-align: right;
}

.lg-route {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0;
  padding: 0;
}

.lg-stop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--oi-mono);
  font-size: 0.64rem;
  color: var(--oi-lilac);
  text-align: center;
}

/* The leg is drawn to the left of each stop, so the first one has none. */
.lg-stop::before {
  content: '';
  position: absolute;
  top: 5px;
  right: 50%;
  left: -50%;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
}

.lg-stop:first-child::before {
  display: none;
}

.lg-stop::after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--oi-ink);
  border: 2px solid var(--oi-muted);
  order: -1;
  z-index: 1;
}

.lg-stop.is-reroute::before {
  border-top-style: dashed;
  border-top-color: var(--oi-amber);
}

.lg-stop.is-reroute::after,
.lg-stop.is-reroute + .lg-stop::after {
  border-color: var(--oi-amber);
}

.lg-stop.is-reroute + .lg-stop::before {
  border-top-style: dashed;
  border-top-color: var(--oi-amber);
}

.lg-stop.is-reroute,
.lg-stop.is-reroute + .lg-stop {
  color: var(--oi-amber);
}

.lg-stop.is-depot::after {
  background: var(--oi-muted);
}

.dm-swatch.is-dashed {
  height: 0;
  border-top: 2px dashed var(--oi-amber);
  background: none;
  border-radius: 0;
}

/* ---- Facility: proof-of-execution checklist ---- */
.fm-checks {
  display: flex;
  flex-direction: column;
}

.fm-check {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
  color: #fff;
}

.fm-check:first-child {
  border-top: 0;
}

.fm-check i {
  font-size: 0.9rem;
  color: var(--oi-lilac);
}

.fm-check-meta {
  font-family: var(--oi-mono);
  font-size: 0.66rem;
  color: var(--oi-muted);
  white-space: nowrap;
}

.fm-check.is-open {
  color: var(--oi-muted);
}

.fm-check.is-open i {
  color: var(--oi-plum);
}

.fm-check.is-late i,
.fm-check.is-late .fm-check-meta {
  color: var(--oi-amber);
}

.fm-check.is-late i {
  animation: dmPulse 3.2s ease-in-out infinite;
}

/* ---- Cleaning: traffic-driven cadence ---- */
.cl-zones {
  display: flex;
  flex-direction: column;
}

.cl-zone {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px auto;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
  color: #fff;
}

.cl-zone:first-child {
  border-top: 0;
}

/* Ten 8px pips on a 12px pitch, so the fill always lands on a pip edge. */
.cl-meter {
  width: 120px;
  height: 8px;
  background: repeating-linear-gradient(to right,
    rgba(255, 255, 255, 0.14) 0 8px, transparent 8px 12px);
}

.cl-meter span {
  display: block;
  height: 100%;
  width: calc(var(--pips) * 12px);
  background: repeating-linear-gradient(to right,
    var(--oi-lilac) 0 8px, transparent 8px 12px);
}

.cl-cadence {
  font-family: var(--oi-mono);
  font-size: 0.66rem;
  color: var(--oi-muted);
  white-space: nowrap;
}

.cl-zone.is-raised .cl-meter span {
  background: repeating-linear-gradient(to right,
    var(--oi-amber) 0 8px, transparent 8px 12px);
  animation: dmPulse 3.2s ease-in-out infinite;
}

.cl-zone.is-raised .cl-cadence {
  color: var(--oi-amber);
}

/* ---- OptiControl: source systems folded into one picture ---- */
.pr-src {
  display: flex;
  flex-direction: column;
}

/* A shrink-to-fit last column ends flush right on every row; anything
   between two flexible columns would sit at a different offset per row. */
.pr-src-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
  color: #fff;
}

.pr-src-row:first-child {
  border-top: 0;
}

.pr-src-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--oi-lilac);
  align-self: center;
}

.pr-src-kind,
.pr-src-state {
  font-family: var(--oi-mono);
  font-size: 0.66rem;
  color: var(--oi-muted);
}

.pr-src-kind {
  grid-column: 2;
}

.pr-src-state {
  white-space: nowrap;
}

.pr-src-row.is-stale {
  color: var(--oi-amber);
}

.pr-src-row.is-stale .pr-src-state {
  color: var(--oi-amber);
}

.pr-src-row.is-stale .pr-src-dot {
  background: var(--oi-amber);
  animation: dmPulse 3.2s ease-in-out infinite;
}

/* ---- OptiFlight: who is qualified for this turnaround ---- */
.pr-crew {
  display: flex;
  flex-direction: column;
}

.pr-crew-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
  color: #fff;
}

.pr-crew-row:first-child {
  border-top: 0;
}

/* Name and qualifications share a cell so the row stays two columns and
   the state still ends flush right. */
.pr-crew-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.pr-crew-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pr-crew-tags span {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 2px 9px;
  font-family: var(--oi-mono);
  font-size: 0.62rem;
  color: var(--oi-muted);
}

.pr-crew-state {
  font-family: var(--oi-mono);
  font-size: 0.66rem;
  color: var(--oi-muted);
  white-space: nowrap;
}

.pr-crew-row.is-blocked {
  color: var(--oi-muted);
}

.pr-crew-row.is-blocked .pr-crew-state {
  color: var(--oi-amber);
}

.pr-crew-row.is-picked .pr-crew-tags span,
.pr-crew-row.is-picked .pr-crew-state {
  border-color: var(--oi-amber);
  color: var(--oi-amber);
}

.pr-crew-row.is-picked .pr-crew-state {
  animation: dmPulse 3.2s ease-in-out infinite;
}

/* ---- OptiFleet: load against capacity, before and after a consolidation ---- */
.pr-load {
  display: flex;
  flex-direction: column;
}

/* The bar gets its own row so every vehicle's bar is the same length and
   the fills can be compared down the column. */
.pr-load-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px 14px;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
  color: #fff;
}

.pr-load-row:first-child {
  border-top: 0;
}

.pr-load-bar {
  grid-column: 1 / -1;
}

.pr-load-name {
  font-family: var(--oi-mono);
  font-size: 0.72rem;
  color: var(--oi-lilac);
}

.pr-load-bar {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.pr-load-fill,
.pr-load-add {
  position: absolute;
  top: 0;
  bottom: 0;
}

.pr-load-fill {
  left: 0;
  background: var(--oi-lilac);
}

/* The load moved over from the released vehicle. */
.pr-load-add {
  background: var(--oi-amber);
  animation: dmPulse 3.2s ease-in-out infinite;
}

.pr-load-meta {
  font-family: var(--oi-mono);
  font-size: 0.66rem;
  color: var(--oi-muted);
  white-space: nowrap;
}

.pr-load-row.is-gained .pr-load-meta {
  color: var(--oi-amber);
}

.pr-load-row.is-released {
  color: var(--oi-muted);
}

.pr-load-row.is-released .pr-load-bar {
  background: repeating-linear-gradient(135deg,
    rgba(255, 255, 255, 0.1) 0 5px, transparent 5px 10px);
}

/* ---- OptiCheck: the five building blocks of the model ---- */
.pr-model {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pr-model-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 0.85rem;
  color: #fff;
}

.pr-model-cell i {
  font-size: 1rem;
  color: var(--oi-lilac);
}

.pr-model-cell em {
  font-family: var(--oi-mono);
  font-size: 0.62rem;
  font-style: normal;
  color: var(--oi-muted);
}

/* Tasks is where the other four meet, so it spans and carries the proof. */
.pr-model-cell.is-key {
  grid-column: 1 / -1;
  border-color: var(--oi-amber);
  background: rgba(242, 176, 97, 0.08);
}

.pr-model-cell.is-key i,
.pr-model-cell.is-key em {
  color: var(--oi-amber);
}

.pr-model-cell.is-key i {
  animation: dmPulse 3.2s ease-in-out infinite;
}

/* ---- OptiScan: field events arriving on one stream ---- */
.pr-feed {
  display: flex;
  flex-direction: column;
}

.pr-feed-row {
  display: grid;
  grid-template-columns: auto 44px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
  color: #fff;
}

.pr-feed-row:first-child {
  border-top: 0;
}

.pr-feed-time,
.pr-feed-kind {
  font-family: var(--oi-mono);
  font-size: 0.66rem;
}

.pr-feed-time {
  color: var(--oi-muted);
}

.pr-feed-kind {
  color: var(--oi-lilac);
  letter-spacing: 0.06em;
}

.pr-feed-row.is-new {
  color: var(--oi-amber);
}

.pr-feed-row.is-new .pr-feed-time,
.pr-feed-row.is-new .pr-feed-kind {
  color: var(--oi-amber);
}

.pr-feed-row.is-new .pr-feed-kind {
  animation: dmPulse 3.2s ease-in-out infinite;
}

/* ---- Products overview: how the layers sit on each other ---- */
.pr-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pr-stack-row {
  display: grid;
  grid-template-columns: 190px 190px minmax(0, 1fr);
  align-items: center;
  gap: 8px 24px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.03);
}

.pr-stack-kind {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oi-lilac);
}

.pr-stack-name {
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
}

.pr-stack-note {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--oi-muted);
}

/* The engine is not a layer in the stack — it sits under all of them. */
.pr-stack-base {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--oi-amber);
  border-radius: 14px;
  padding: 18px 24px;
  margin-top: 6px;
  background: rgba(242, 176, 97, 0.08);
  font-size: 0.95rem;
  color: #fff;
}

.pr-stack-base i {
  font-size: 1.1rem;
  color: var(--oi-amber);
}

/* ---- BUD proof strip ---- */
.dm-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: clamp(48px, 6vw, 72px);
  padding: 20px 26px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.dm-proof:hover,
.dm-proof:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.3);
}

/* The BUD mark is dark navy, so it needs inverting to read on the ink band. */
.dm-proof img {
  height: 44px;
  width: auto;
  flex: none;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.dm-proof-text {
  font-size: 0.95rem;
  color: var(--oi-body);
}

.dm-proof-link {
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

/* ---- Challenges ---- */
.dm-challenges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.dm-challenges li {
  position: relative;
  padding: 16px 0 16px 30px;
  border-top: 1px solid var(--oi-line);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--oi-ink-body);
}

.dm-challenges li:last-child {
  border-bottom: 1px solid var(--oi-line);
}

.dm-challenges li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 24px;
  width: 14px;
  height: 2px;
  background: var(--oi-amber);
}

/* Product pages name the problem and then explain it, so an item can
   carry a heading and a paragraph instead of a single line. */
.dm-challenges li h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--oi-ink);
}

.dm-challenges li p {
  margin: 5px 0 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--oi-ink-body);
}

/* ---- What the system does ---- */
/* Five cards: three-up keeps the last row from stranding a single card. */
.dm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 18px;
}

@media (min-width: 992px) {
  .dm-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .dm-cards.is-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dm-card {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  padding: 26px 24px;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dm-card-icon {
  font-size: 1.3rem;
  color: var(--oi-amber);
  line-height: 1;
  margin-bottom: 4px;
}

.dm-card h3 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
}

.dm-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--oi-muted);
}

/* The same cards on a light band, for the outcomes block. */
.dm-light .dm-card {
  border-color: var(--oi-line);
  background: #fff;
}

.dm-light .dm-card-icon {
  color: var(--oi-amber-dk);
}

.dm-light .dm-card h3 {
  color: var(--oi-ink);
}

.dm-light .dm-card p {
  color: var(--oi-ink-body);
}

/* ---- Use cases ---- */
.dm-uses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 0 64px;
}

.dm-use {
  display: grid;
  grid-template-columns: minmax(0, 52px) minmax(0, 1fr);
  gap: 8px 18px;
  padding: 22px 0;
  border-top: 1px solid var(--oi-line);
}

.dm-use-no {
  font-family: var(--oi-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--oi-plum);
  padding-top: 4px;
}

.dm-use-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dm-use-text h3 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--oi-ink);
}

.dm-use-text p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--oi-ink-body);
}

/* ---- Link tiles: related products, and the domains on the homepage ---- */
.dm-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 18px;
}

/* One or two tiles would otherwise stretch across the whole band. */
.dm-tiles.is-few {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 360px));
  justify-content: start;
}

.dm-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  padding: 26px 24px;
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.dm-tile:hover,
.dm-tile:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.dm-tile > i {
  font-size: 1.3rem;
  color: var(--oi-lilac);
  line-height: 1;
}

.dm-tile h3 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
}

.dm-tile p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--oi-muted);
}

.dm-tile-more {
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--oi-amber);
}

.dm-foot {
  margin-top: 36px;
}

/* ---- Overview hub: the four domains ---- */
.dm-domains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 20px;
}

.dm-domain {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 30px;
  border: 1px solid var(--oi-line);
  border-radius: 18px;
  background: #fff;
  color: var(--oi-ink);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.dm-domain:hover,
.dm-domain:focus-visible {
  border-color: var(--oi-amber);
  transform: translateY(-2px);
  color: var(--oi-ink);
}

.dm-domain-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dm-domain-head i {
  font-size: 1.4rem;
  color: var(--oi-amber-dk);
  line-height: 1;
}

.dm-domain-head h2 {
  margin: 0;
  font-size: 1.24rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--oi-ink);
}

.dm-domain > p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--oi-ink-body);
}

.dm-domain-label {
  margin-top: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oi-plum);
}

.dm-domain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dm-domain-list li {
  padding: 6px 12px;
  border: 1px solid var(--oi-line);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--oi-ink-body);
}

.dm-domain-more {
  margin-top: auto;
  padding-top: 16px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--oi-ink);
}

/* ---- CTA ---- */
.dm-cta {
  padding: clamp(64px, 8vw, 96px) 0;
}

.dm-cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px 60px;
}

.dm-cta-inner > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 620px;
}

@media (max-width: 767.98px) {
  .ap-chart {
    gap: 6px;
  }

  .ap-hour-track {
    height: 108px;
  }

  .dm-board {
    padding: 22px 18px;
  }

  .dm-board-note {
    margin-left: 0;
  }

  .dm-uses {
    gap: 0;
  }

  .dm-btn-light,
  .dm-btn-dark {
    width: 100%;
    justify-content: center;
  }

  /* Stop labels collide well before seven columns get narrow, so the route
     keeps its shape and the labels shrink instead. */
  .lg-stop {
    font-size: 0.56rem;
  }

  .fm-check {
    gap: 8px;
    font-size: 0.8rem;
  }

  /* The meter needs its own row, but the cadence stays next to the zone. */
  .cl-zone {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 6px;
  }

  .cl-cadence {
    grid-row: 1;
    grid-column: 2;
  }

  .cl-meter {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .pr-src-row,
  .pr-crew-row,
  .pr-load-row,
  .pr-feed-row {
    font-size: 0.8rem;
  }

  /* What each source contributes is the first thing to go — the name and
     its freshness carry the point on their own. */
  .pr-src-kind {
    display: none;
  }

  .pr-feed-row {
    grid-template-columns: auto 36px minmax(0, 1fr);
    gap: 8px;
  }

  .pr-model {
    grid-template-columns: minmax(0, 1fr);
  }

  .pr-stack-row {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ap-hour.is-gap .ap-hour-bar,
  .fm-check.is-late i,
  .cl-zone.is-raised .cl-meter span,
  .pr-src-row.is-stale .pr-src-dot,
  .pr-crew-row.is-picked .pr-crew-state,
  .pr-load-add,
  .pr-model-cell.is-key i,
  .pr-feed-row.is-new .pr-feed-kind {
    animation: none;
  }
}

/* ===================================================================
   The product family tile (homepage + products overview). Four
   operational products in a 2x2 grid sitting on one full-width dark
   OptiControl card — the layout carries the "everything runs on the
   data foundation" claim, so keep OptiControl out of the grid.
   Namespaced .pfam-*.
   =================================================================== */
.pfam {
  --pfam-line: #E4DFEE;
  --pfam-tint: #EDE9F5;

  padding: clamp(64px, 8vw, 96px) 0 clamp(72px, 9vw, 104px);
  background: var(--oi-light);
  color: var(--oi-ink);
  font-family: 'Montserrat', system-ui, sans-serif;
}

.pfam-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 52px);
}

/* ---- Heading ---- */
.pfam-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 720px;
}

.pfam-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oi-plum);
}

.pfam-rule {
  width: 34px;
  height: 2px;
  background: var(--oi-amber);
}

.pfam-head h2 {
  margin: 0;
  font-size: clamp(2rem, 3.6vw, 2.875rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--oi-ink);
  text-wrap: balance;
}

.pfam-head p {
  margin: 0;
  font-size: 1.09rem;
  line-height: 1.6;
  color: var(--oi-ink-body);
  text-wrap: pretty;
}

/* ---- Kicker, shared by the light cards and the dark one ---- */
.pfam-kicker {
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oi-lilac);
}

/* ---- Product cards ---- */
.pfam-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.pfam-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 28px 30px;
  background: #fff;
  border: 1px solid var(--pfam-line);
  border-radius: 18px;
  color: var(--oi-ink);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.pfam-card:hover,
.pfam-card:focus-visible {
  border-color: var(--oi-ink);
  color: var(--oi-ink);
  transform: translateY(-2px);
}

.pfam-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--pfam-tint);
  color: var(--oi-ink-body);
}

.pfam-card-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.pfam-card-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.31rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--oi-ink);
}

.pfam-card-name svg {
  color: var(--oi-lilac);
  transition: color 0.25s ease, transform 0.25s ease;
}

.pfam-card:hover .pfam-card-name svg,
.pfam-card:focus-visible .pfam-card-name svg {
  color: var(--oi-ink);
  transform: translateX(3px);
}

.pfam-card-text {
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--oi-ink-body);
  text-wrap: pretty;
}

/* ---- OptiControl, the data foundation ---- */
.pfam-foundation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 32px 34px;
  background: var(--oi-ink);
  border-radius: 18px;
  color: #fff;
  transition: background 0.25s ease;
}

.pfam-foundation:hover,
.pfam-foundation:focus-visible {
  background: var(--oi-ink-2);
  color: #fff;
}

.pfam-foundation .pfam-kicker {
  color: var(--oi-amber);
}

.pfam-foundation-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--oi-amber);
}

.pfam-foundation-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pfam-foundation-name {
  font-size: 1.44rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}

.pfam-foundation-text {
  max-width: 640px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--oi-muted);
  text-wrap: pretty;
}

.pfam-foundation-arrow {
  color: #fff;
  transition: transform 0.25s ease;
}

.pfam-foundation:hover .pfam-foundation-arrow,
.pfam-foundation:focus-visible .pfam-foundation-arrow {
  transform: translateX(4px);
}

/* ---- Footer link ---- */
.pfam-all {
  display: inline-block;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--oi-muted);
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--oi-ink);
}

.pfam-all:hover,
.pfam-all:focus-visible {
  border-color: var(--oi-ink);
  color: var(--oi-ink);
}

@media (max-width: 767.98px) {
  .pfam-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pfam-card {
    padding: 24px 22px;
  }

  /* The arrow is decorative and the whole card is the link, so drop it
     rather than let it eat a column on a narrow screen. */
  .pfam-foundation {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 26px 22px;
  }

  .pfam-foundation-arrow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pfam-card,
  .pfam-card-name svg,
  .pfam-foundation-arrow {
    transition: none;
    transform: none;
  }
}

/* ===================================================================
   Data handling strip (ground handling + products overview). Designed
   for dark bands only — the surface is a white tint, so it inherits
   contrast from the band behind it. Namespaced .dhand-*.
   =================================================================== */
.dhand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 40px;
  padding: 22px 26px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}

.dhand.is-spaced {
  margin-top: 36px;
}

.dhand-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oi-lilac);
}

.dhand-items {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  font-size: 0.9rem;
  color: var(--oi-body);
}

/* Pushed to the trailing edge when the row has room, and falls in line
   with the claims when it does not. */
.dhand-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.dhand-link:hover,
.dhand-link:focus-visible {
  border-color: #fff;
  color: #fff;
}

/*--------------------------------------------------------------
# Resources index
--------------------------------------------------------------
   An editorial listing rather than a card grid: a dated, single-column
   list with one enlarged featured entry, category filters, and a sticky
   "what we write about" rail. Headings borrow the Newsreader serif
   (loaded only on this page) for a magazine feel that sets writing apart
   from the rest of the product-marketing site.
*/
.resources-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 64px;
  align-items: start;
}

@media (max-width: 991.98px) {
  .resources-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.resources-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(161, 88, 255, 0.14);
}

.resources-filter-btn {
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  background: transparent;
  color: #63537D;
  border: 1px solid rgba(161, 88, 255, 0.25);
}

.resources-filter-btn:hover {
  border-color: rgba(161, 88, 255, 0.5);
  color: #271645;
}

.resources-filter-btn.is-active {
  background: #271645;
  color: #fff;
  border-color: #271645;
}

.resources-article {
  padding: 30px 0 28px;
  border-bottom: 1px solid rgba(161, 88, 255, 0.14);
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 28px;
}

.resources-article:last-of-type {
  border-bottom: none;
}

.resources-article.is-featured {
  padding: 40px 0 36px;
}

.resources-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.resources-date {
  font-size: 0.8rem;
  color: #9c8fb5;
  letter-spacing: 0.03em;
  padding-top: 8px;
  font-variant-numeric: tabular-nums;
}

/* Generated cover art (marketing/covers.py), shrunk to the rail width. The
   art carries no text, so it stays legible this small. */
.resources-thumb {
  display: block;
  border-radius: 4px;
  overflow: hidden;
  line-height: 0;
}

.resources-thumb img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.25s ease;
}

.resources-article:hover .resources-thumb img {
  transform: scale(1.04);
}

.resources-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.resources-eyebrow-bar {
  width: 22px;
  height: 2px;
  display: block;
  background: var(--primary-light-orange);
}

.resources-eyebrow-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-light-orange);
}

.resources-title {
  margin: 0 0 8px;
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #271645;
  line-height: 1.22;
}

.resources-title a {
  color: inherit;
  text-decoration: none;
}

.resources-title a:hover {
  color: var(--primary-purple);
}

.resources-article.is-featured .resources-title {
  font-size: 1.85rem;
  margin-bottom: 14px;
}

.resources-article:not(.is-featured) .resources-title {
  font-size: 1.3rem;
}

.resources-excerpt {
  margin: 0 0 20px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: #63537D;
  max-width: 62ch;
}

.resources-read-link {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary-purple);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.resources-read-link:hover {
  color: var(--primary-dark-purple);
}

.resources-category-tag {
  font-size: 0.78rem;
  color: #9c8fb5;
  letter-spacing: 0.02em;
}

.resources-note {
  margin: 28px 0 0;
  font-size: 0.85rem;
  color: #9c8fb5;
  line-height: 1.6;
}

.resources-empty-state {
  padding: 20px 0;
  font-size: 0.95rem;
  color: #9c8fb5;
}

.resources-sidebar {
  position: sticky;
  top: 100px;
  border-top: 2px solid #271645;
  padding-top: 20px;
}

.resources-sidebar-heading {
  margin: 0 0 20px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #271645;
}

.resources-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.resources-sidebar-item-title {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: #271645;
  margin-bottom: 6px;
}

.resources-sidebar-item-desc {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #6b6081;
}

.resources-cta {
  background: var(--bg-light);
  border-top: 1px solid rgba(161, 88, 255, 0.14);
  padding: 64px 0;
}

.resources-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.resources-cta h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #271645;
}

@media (max-width: 767.98px) {
  .resources-article {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .resources-date {
    padding-top: 0;
  }

  /* Single column: the rail's thumbnail would be a full-width banner above
     every entry, which turns the list into a card stack. Date only. */
  .resources-thumb {
    display: none;
  }
}

/*--------------------------------------------------------------
# Resources post
--------------------------------------------------------------
   Editorial article layout: light masthead, sticky contents rail, and a
   narrow serif measure. Deliberately unlike the product pages — the
   Newsreader body face and generous line height are what make a 1200-word
   argument readable rather than skimmable.

   The body HTML comes from markdown (content/resources/*.md), so it is
   plain <p>/<h2>/<blockquote> with nothing to hang inline styles on. Every
   rule below targets that bare structure.
*/

/* Reading progress ------------------------------------------------------
   Pinned directly under the site header (.header is fixed-top, 70px, z-997),
   so it reads as part of the chrome rather than scrolling away. Sticky at
   top:0 would sit *behind* that header and never be seen. */
.post-progress-track {
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  z-index: 996;
  height: 3px;
  background: rgba(161, 88, 255, 0.14);
}

.post-progress-bar {
  height: 3px;
  width: 0;
  background: var(--primary-light-orange);
  transition: width 0.1s linear;
}

/* Masthead -------------------------------------------------------------- */
.post-masthead {
  /* Clears the fixed header, matching .page-hero's 100px on other pages. */
  padding: 100px 0 0;
  border-bottom: 1px solid rgba(161, 88, 255, 0.14);
}

.post-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
  font-size: 0.88rem;
  font-weight: 500;
  color: #8B80A0;
  text-decoration: none;
}

.post-back:hover {
  color: #271645;
}

.post-headline {
  margin: 0 0 30px;
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 1.07;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #271645;
  max-width: 20ch;
  text-wrap: pretty;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 40px;
  font-size: 0.88rem;
  color: #8B80A0;
}

.post-meta-date {
  font-variant-numeric: tabular-nums;
}

.post-meta-dot {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #C9C0DA;
}

/* Layout ---------------------------------------------------------------- */
.post-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}

.post-article {
  padding: 64px 0 40px;
  max-width: 720px;
}

.post-article--wide {
  margin: 0 auto;
}

/* Contents rail --------------------------------------------------------- */
.post-toc {
  position: sticky;
  top: 96px;
  padding-top: 64px;
}

.post-toc-heading {
  margin-bottom: 18px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8B80A0;
}

.post-toc-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 18px;
  border-left: 1px solid rgba(161, 88, 255, 0.18);
}

.post-toc-list a {
  font-size: 0.88rem;
  line-height: 1.45;
  color: #8B80A0;
  text-decoration: none;
  transition: color 0.15s ease;
}

.post-toc-list a:hover {
  color: #271645;
}

.post-toc-list a.is-active {
  color: #271645;
  font-weight: 600;
}

/* Hero figure ----------------------------------------------------------- */
.post-figure {
  margin: 0 0 48px;
}

.post-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.post-figure figcaption {
  margin-top: 12px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #8B80A0;
}

/* Body ------------------------------------------------------------------ */
.post-body {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.19rem;
  line-height: 1.78;
  color: #3D3350;
  counter-reset: post-section;
}

.post-body p {
  margin: 0 0 26px;
  text-wrap: pretty;
}

/* Standfirst: the opening paragraph runs larger and darker. */
.post-body > p:first-child {
  font-size: 1.44rem;
  line-height: 1.6;
  color: #271645;
}

/* Section headings are numbered by CSS counter rather than in the markdown,
   so renumbering happens automatically when a section is added or moved. */
.post-body h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 52px 0 20px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #271645;
  scroll-margin-top: 96px;
}

.post-body h2::before {
  counter-increment: post-section;
  content: counter(post-section, decimal-leading-zero);
  font-family: 'Newsreader', Georgia, serif;
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--primary-light-orange);
}

.post-body h3 {
  margin: 34px 0 14px;
  font-size: 1.15rem;
  font-weight: 600;
  color: #271645;
  scroll-margin-top: 96px;
}

.post-body ul,
.post-body ol {
  margin: 0 0 26px;
  padding-left: 22px;
}

.post-body li {
  margin-bottom: 10px;
}

.post-body strong {
  font-weight: 600;
  color: #271645;
}

.post-body a {
  color: var(--primary-purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post-body a:hover {
  color: var(--primary-dark-purple);
}

/* Pull quote: any top-level blockquote in the markdown. */
.post-body blockquote {
  margin: 44px 0;
  padding: 0 0 0 28px;
  border-left: 3px solid var(--primary-light-orange);
}

.post-body blockquote p {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.42;
  font-style: italic;
  color: #271645;
}

/* Callout box, from the markdown admonition syntax:
     !!! note "In practice"
         Indented body. */
.post-body .admonition {
  margin: 40px 0;
  padding: 26px 30px;
  background: #F6F3FB;
  border: 1px solid rgba(161, 88, 255, 0.14);
  border-radius: 4px;
}

.post-body .admonition-title {
  margin: 0 0 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8B80A0;
}

.post-body .admonition p:last-child,
.post-body .admonition ul:last-child {
  margin-bottom: 0;
}

.post-body .admonition ul {
  list-style: none;
  padding-left: 0;
}

/* Arrow is positioned rather than laid out as a grid column. A two-column
   grid put every inline child of the <li> in its own cell, so an item that
   opened with a bold lead ("**Count the reassignments.** Every time...")
   pushed its trailing text into the 20px arrow column and wrapped it one word
   per line. Padding plus an absolute marker does not care how many inline
   children markdown produces. */
.post-body .admonition li {
  position: relative;
  padding-left: 32px;
  font-size: 1.1rem;
  line-height: 1.6;
}

.post-body .admonition li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary-light-orange);
}

.post-body code {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(161, 88, 255, 0.09);
  color: var(--primary-dark-purple);
  font-size: 0.86em;
}

.post-body hr {
  margin: 44px 0;
  border: 0;
  border-top: 1px solid rgba(161, 88, 255, 0.14);
}

/* Closing italic sign-off after the final rule. */
.post-body hr + p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: #8B80A0;
}

/* Byline ---------------------------------------------------------------- */
.post-byline {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(161, 88, 255, 0.14);
}

.post-byline-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #EDE7F8;
  font-size: 0.85rem;
  font-weight: 700;
  color: #5F5077;
}

.post-byline-name {
  display: block;
  font-size: 0.94rem;
  font-weight: 700;
  color: #271645;
}

.post-byline-role {
  display: block;
  font-size: 0.88rem;
  color: #8B80A0;
}

/* Keep reading ---------------------------------------------------------- */
.post-related {
  padding: 64px 0;
  background: #F6F3FB;
  border-top: 1px solid rgba(161, 88, 255, 0.14);
}

.post-related-heading {
  margin-bottom: 28px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8B80A0;
}

.post-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}

.post-related-card {
  display: block;
  padding: 26px 26px 28px;
  background: #fff;
  border: 1px solid rgba(161, 88, 255, 0.16);
  border-radius: 4px;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.post-related-card:hover {
  border-color: rgba(161, 88, 255, 0.55);
}

.post-related-category {
  display: block;
  margin-bottom: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-light-orange);
}

.post-related-title {
  display: block;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.28rem;
  line-height: 1.3;
  color: #271645;
}

.post-cta-buttons {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Responsive ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .post-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* The rail becomes a plain block above the article: sticky contents in a
     single column would pin a list over the text being read. */
  .post-toc {
    position: static;
    padding-top: 48px;
  }

  .post-article {
    padding-top: 40px;
  }
}

@media (max-width: 767.98px) {
  .post-masthead {
    padding-top: 88px;
  }

  .post-back {
    margin-bottom: 28px;
  }

  .post-body {
    font-size: 1.1rem;
  }

  .post-body > p:first-child {
    font-size: 1.26rem;
  }

  .post-body blockquote p {
    font-size: 1.3rem;
  }
}


/* Header language toggle: shows the other language, sits before the CTA. */
.navmenu .lang-switcher { margin-left: 4px; }

.navmenu .lang-switcher a.lang-switch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 6px 12px;
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.navmenu .lang-switcher a.lang-switch-btn:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.7);
  color: #fff;
}

@media (max-width: 1199px) {
  .navmenu .lang-switcher { margin: 8px 20px; }
  .navmenu .lang-switcher a.lang-switch-btn {
    color: #271645;
    border-color: rgba(39,22,69,0.3);
    padding: 6px 14px;
  }
  .navmenu .lang-switcher a.lang-switch-btn:hover { background: rgba(39,22,69,0.06); color: #271645; }
}

/* Non-link group label inside a nav dropdown ("By domain"). */
.navmenu .dropdown ul li.nav-dropdown-label {
  margin-top: 6px;
  /* same left edge as the dropdown item text (measured: 20px in from the panel) */
  padding: 10px 20px 4px;
  border-top: 1px solid rgba(39,22,69,0.08);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8E82AC;
  cursor: default;
}

/* ===== Home: one-line team strip under the client logos ===== */
.team-strip {
  padding: 22px 0;
  background: #F6F3FC;
  border-bottom: 1px solid rgba(161,88,255,0.08);
}

.team-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.team-strip-icon {
  font-size: 1.3rem;
  color: #7E46D6;
}

.team-strip-text {
  margin: 0;
  font-size: 0.95rem;
  color: #63537D;
  text-align: center;
}

.team-strip-text strong {
  color: #271645;
  font-weight: 700;
  margin-right: 6px;
}

.team-strip-link {
  font-size: 0.88rem;
  font-weight: 700;
  color: #7E46D6;
  white-space: nowrap;
  text-decoration: none;
}

.team-strip-link:hover { color: #271645; }

@media (max-width: 768px) {
  .team-strip-icon { display: none; }
  .team-strip-text strong { display: block; margin: 0 0 4px; }
}

/* ===== Understand card: sources -> one database -> outputs ===== */
.loop-join {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 0.9fr);
  gap: 12px;
  align-items: center;
}

.loop-src {
  flex: none;
  padding: 5px 9px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--loop-line);
  font-size: 11px;
  font-weight: 700;
  color: #3B2E5A;
  white-space: nowrap;
}

.loop-src.is-live { border-color: var(--loop-lilac); color: var(--loop-purple); }

.loop-db {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.loop-db span {
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--loop-lilac);
  text-align: center;
}

.loop-outs { display: flex; flex-direction: column; gap: 8px; }

.loop-out {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  background: #fff;
  border: 1px solid var(--loop-line-soft);
  border-radius: 9px;
}

.loop-out b { font-size: 11px; font-weight: 700; color: #3B2E5A; line-height: 1.2; }

.loop-out-bars {
  width: 26px; height: 20px; flex: none;
  display: flex; align-items: flex-end; gap: 2px;
}
.loop-out-bars i { flex: 1; border-radius: 1.5px; background: var(--loop-purple-mid); }

.loop-out-doc {
  width: 26px; height: 20px; flex: none;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--loop-tint);
}
.loop-out-doc i { height: 2px; width: 100%; border-radius: 1px; background: var(--loop-lilac); }

.loop-out-ask {
  width: 26px; height: 20px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px 10px 10px 3px;
  background: var(--loop-purple);
  font-size: 11px; font-weight: 800; color: #fff;
}

@media (max-width: 600px) {
  .loop-join { grid-template-columns: 1fr; justify-items: start; }
  .loop-join .loop-wire { display: none; }
  .loop-db { flex-direction: row; }
}

/* ===== erdosP-3: "What is erdosP-3?" band ===== */
/* White, so it doesn't merge with the lilac "not a chatbot" band below it. */
.erd-light.erd-what {
  background: #fff;
  border-bottom: 1px solid rgba(161,88,255,0.08);
}

.erd-asks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.erd-ask {
  margin: 0;
  padding: 16px 20px;
  border-radius: 14px 14px 14px 4px;
  background: var(--erd-light);
  border: 1px solid rgba(161,88,255,0.14);
  font-size: 1.02rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--erd-ink);
}

.erd-what-foot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 860px;
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid rgba(39,22,69,0.08);
}

/* ===== Product family: pyramid beside the four cards ===== */
.pfam-body {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.pfam-pyr { display: flex; justify-content: center; }

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

/* ===== Stack slabs (partials/stack_pyramid.html, design C) =====
   Floating isometric slabs, Optimize on top, labels on the right.
   Rail (homepage deck): the layer in front is highlighted via [data-active].
   Build (product family): slabs rise bottom to top, then Optimize turns purple. */
.sp { display: block; width: 100%; max-width: 300px; height: auto; overflow: visible; }
.sp-shadow { fill: rgba(39,22,69,0.10); }
.sp-top  { fill: #ECE6F7; stroke: #ECE6F7; stroke-width: 8; stroke-linejoin: round; transition: fill .35s ease, stroke .35s ease; }
.sp-side { fill: #D5CBEA; stroke: #D5CBEA; stroke-width: 8; stroke-linejoin: round; transition: fill .35s ease, stroke .35s ease; }
.sp-lead { stroke: #DFD9EC; stroke-width: 1.5; }
.sp-label { font-family: 'Montserrat', system-ui, sans-serif; font-size: 16px; font-weight: 800; fill: #241A3C; transition: fill .35s ease; }
.sp-sub { font-family: 'Montserrat', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; fill: #6B5B8E; }

/* highlighted layer: brand purple slab, purple label */
.sp-slab[data-active] .sp-top, .sp-build.is-built .sp-slab[style*="--sp-i:3"] .sp-top { fill: #4A3B6B; stroke: #4A3B6B; }
.sp-slab[data-active] .sp-side, .sp-build.is-built .sp-slab[style*="--sp-i:3"] .sp-side { fill: #271645; stroke: #271645; }
.sp-slab[data-active] .sp-label, .sp-build.is-built .sp-slab[style*="--sp-i:3"] .sp-label { fill: #6E4FCF; }

/* rail: dim the layers that are not in front */
.sp-rail .sp-slab { opacity: 0.7; transition: opacity .35s ease; }
.sp-rail .sp-slab[data-active] { opacity: 1; }

/* build-up */
.sp-build .sp-slab {
  opacity: 0;
  transform: translateY(14px);
  transform-box: view-box;
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--sp-i) * 0.2s);
}
.sp-build.is-built .sp-slab { opacity: 1; transform: none; }
.sp-build.is-built .sp-slab[style*="--sp-i:3"] .sp-top,
.sp-build.is-built .sp-slab[style*="--sp-i:3"] .sp-side,
.sp-build.is-built .sp-slab[style*="--sp-i:3"] .sp-label { transition-delay: 1.1s; }

/* homepage rail: slabs about 1.5x the card-section size, filling the space left of the card */
.loop-body { grid-template-columns: 360px 1fr; gap: clamp(20px, 2.2vw, 32px); }
.loop-rail .sp-rail { max-width: 360px; }
@media (max-width: 1180px) {
  .loop-body { grid-template-columns: 290px 1fr; }
  .loop-rail .sp-rail { max-width: 290px; }
}
@media (max-width: 900px) {
  .loop-body { grid-template-columns: 1fr; } /* phone/tablet: rail hidden, cards full width */
}

@media (prefers-reduced-motion: reduce) {
  .sp-build .sp-slab { opacity: 1; transform: none; transition: none; }
}

/* ===== Home: "How we start" as one connected timeline =====
   One white card; three numbered nodes on a line that fills in brand purple
   left to right (top to bottom on phones). "day one · baseline" marks where it starts. */
.hws {
  position: relative;
  margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(48px, 5vw, 60px) clamp(20px, 3vw, 40px) clamp(24px, 3vw, 36px);
  background: #fff;
  border: 1px solid var(--oi-line);
  border-radius: 20px;
  box-shadow: 0 18px 44px -28px rgba(39,22,69,0.35);
  --hws-node: 64px;
}

.hws-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the line runs through the node centres */
.hws-track {
  position: absolute;
  left: calc(clamp(20px, 3vw, 40px) + var(--hws-node) / 2);
  right: calc(clamp(20px, 3vw, 40px) + 33.33% - var(--hws-node) / 2);
  top: calc(clamp(48px, 5vw, 60px) + var(--hws-node) / 2 - 2px);
  height: 4px;
  border-radius: 4px;
  background: #ECE6F7;
  overflow: hidden;
}
.hws-fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #6E4FCF, #A158FF);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.8s cubic-bezier(.4,0,.2,1) .2s;
}
.hws.is-on .hws-fill { transform: scaleX(1); }

.hws-step { position: relative; display: flex; flex-direction: column; gap: 18px; }

.hws-node {
  position: relative;
  z-index: 1;
  display: grid; place-items: center;
  width: var(--hws-node); height: var(--hws-node);
  border-radius: 50%;
  background: #fff;
  border: 2px solid #DDD3F3;
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
  transition-delay: calc(0.3s + var(--hws-i) * 0.75s);
}
.hws-num {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em;
  color: #6B5B8E;
  transition: color .4s ease;
  transition-delay: calc(0.3s + var(--hws-i) * 0.75s);
}
.hws.is-on .hws-node { background: #271645; border-color: #271645; box-shadow: 0 10px 24px -10px rgba(39,22,69,0.6); }
.hws.is-on .hws-num { color: #fff; }

/* "day one" baseline label above node 01, where the line starts; out of the flow so all three columns align */
.hws-base {
  position: absolute;
  top: -26px;
  left: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: #6E4FCF;
  white-space: nowrap;
}
.hws-base i { width: 8px; height: 8px; border-radius: 50%; background: #6E4FCF; display: inline-block; }

.hws-copy h3 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 8px;
  font-size: 1.2rem; font-weight: 800; color: var(--oi-ink);
}
.hws-copy h3 i { font-size: 1.05rem; color: #6E4FCF; }
.hws-copy p { margin: 0 0 14px; font-size: 0.98rem; line-height: 1.6; color: var(--oi-ink-body); }
.hws-tag {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  background: #F3EEFF;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: #6E4FCF;
}

/* phones: vertical timeline, line on the left */
@media (max-width: 768px) {
  .hws { --hws-node: 52px; }
  .hws-steps { grid-template-columns: 1fr; gap: 26px; }
  .hws-step { flex-direction: row; gap: 16px; align-items: flex-start; }
  .hws-track {
    left: calc(clamp(20px, 3vw, 40px) + var(--hws-node) / 2 - 2px);
    right: auto;
    width: 4px; height: auto;
    top: calc(clamp(28px, 4vw, 44px) + var(--hws-node) / 2);
    bottom: calc(clamp(24px, 3vw, 36px) + 60px);
  }
  .hws-fill { transform: scaleY(0); transform-origin: center top; }
  .hws.is-on .hws-fill { transform: scaleY(1); }
  .hws-node { flex: none; }
  .hws { padding-top: 48px; }
  .hws-track { top: calc(48px + var(--hws-node) / 2); }
  .hws-base { top: -24px; font-size: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hws-fill { transition: none; transform: none !important; }
  .hws-node, .hws-num { transition: none; }
}

/* Product family: hovering a card highlights its slab; the default Optimize highlight steps aside */
.sp-build.has-hover .sp-slab { transition: opacity .2s ease; }
.sp-build.has-hover .sp-slab:not([data-active]) { opacity: 0.55; }
.sp-build.is-built.has-hover .sp-slab:not([data-active]) .sp-top { fill: #ECE6F7; stroke: #ECE6F7; transition-delay: 0s; }
.sp-build.is-built.has-hover .sp-slab:not([data-active]) .sp-side { fill: #D5CBEA; stroke: #D5CBEA; transition-delay: 0s; }
.sp-build.is-built.has-hover .sp-slab:not([data-active]) .sp-label { fill: #241A3C; transition-delay: 0s; }
.sp-build.has-hover .sp-slab[data-active] .sp-top,
.sp-build.has-hover .sp-slab[data-active] .sp-side,
.sp-build.has-hover .sp-slab[data-active] .sp-label { transition-duration: .2s; transition-delay: 0s; }

/* Hero: team line under "Live at" */
.home-hero-team {
  display: flex;
  gap: 10px;
  margin: 14px 0 0;
  max-width: 560px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.65);
}
.home-hero-team > i { color: #A188E8; font-size: 1rem; line-height: 1.3; }
.home-hero-team a { color: #fff; font-weight: 600; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,0.35); margin-left: 4px; }
.home-hero-team a:hover { border-bottom-color: #fff; }

/* How we start: equal columns; the tags share one baseline */
.hws-copy { display: flex; flex-direction: column; flex: 1; }
.hws-copy p { flex: 1; }
.hws-tag { align-self: flex-start; margin-top: auto; }

/* Hero: two white proof cards under the buttons (replaces the thin "Live at" row + team line) */
.home-proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
  max-width: 680px;
}
.home-proof-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 40px -22px rgba(10,4,24,0.6);
  color: #241A3C;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
a.home-proof-card:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -22px rgba(10,4,24,0.7); color: #241A3C; }
.home-proof-eyebrow { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #6E4FCF; }
.home-proof-row { display: flex; align-items: flex-start; gap: 12px; }
.home-proof-logo { width: 64px; height: auto; flex: none; }
.home-proof-icon {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 10px;
  background: #F3EEFF; color: #6E4FCF; font-size: 1.1rem;
}
.home-proof-text { font-size: 0.86rem; line-height: 1.45; color: #4B3C6E; }
.home-proof-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 2px; font-size: 0.86rem; font-weight: 700; color: #6E4FCF; white-space: nowrap; align-self: flex-start; }
.home-proof-link:hover { color: #271645; }

.home-proof { grid-template-columns: minmax(0, 1fr); max-width: 400px; }

/* About hero: "We are <rotating word>" above the H1 (about-rotator.js).
   All words share one grid cell, so the box keeps the longest word's width: no layout shift. */
.about-rotator { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.35em; margin: 0 0 14px; font-family: var(--heading-font); font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 700; opacity: 1 !important; max-width: none !important; color: rgba(255,255,255,0.85); }
.about-rotator-words { display: inline-grid; overflow: hidden; height: 1.3em; line-height: 1.3em; }
.about-rotator-words span { grid-area: 1 / 1; white-space: nowrap; color: #C9B6FF; transform: translateY(110%); opacity: 0; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
.about-rotator-words span.is-on { transform: none; opacity: 1; }
.about-rotator-words span.is-out { transform: translateY(-110%); opacity: 0; }
.about-rotator-note { margin-top: 10px !important; font-size: 0.92rem !important; opacity: 0.65 !important; }
@media (prefers-reduced-motion: reduce) {
  .about-rotator-words { display: inline; height: auto; }
  .about-rotator-words span { display: inline; transform: none; opacity: 1; transition: none; }
  .about-rotator-words span:not(:last-child)::after { content: ', '; color: rgba(255,255,255,0.85); }
}

/* Domain cards: photo across the top (homepage tiles + /domains/ overview) */
.dm-tile-media, .dm-domain-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #1C1131;
}
.dm-tile-media { margin: -26px -24px 8px; border-radius: 15px 15px 0 0; }
.dm-domain-media { margin: -32px -30px 10px; border-radius: 17px 17px 0 0; }
.dm-tile-media img, .dm-domain-media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.dm-tile:hover .dm-tile-media img, .dm-tile:focus-visible .dm-tile-media img,
.dm-domain:hover .dm-domain-media img, .dm-domain:focus-visible .dm-domain-media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .dm-tile-media img, .dm-domain-media img { transition: none; }
}

/* Home hero: the /technology/ use-case carousel in the right column */
.home-hero-carousel { width: 100%; background: transparent !important; }
/* keep the hero's purple corner glow (::after) behind the console, not washed over it */
.home-hero-carousel { position: relative; z-index: 1; }
.home-hero-visual:has(.home-hero-carousel) { align-items: center; }
.home-hero-carousel .cr-tab { padding: 5px 8px; font-size: 11.5px; }
.home-hero-carousel .cr-tab-list { gap: 2px; padding: 2px 6px; }
@media (min-width: 1181px) {
  .home-hero-main:has(.home-hero-carousel) { gap: 40px; }
}
/* let the hero grid column shrink to the phone width instead of the console's content width */
.home-hero-visual:has(.home-hero-carousel), .home-hero-carousel, .home-hero-carousel .cr-carousel { min-width: 0; max-width: 100%; }

/* Home hero: short punchy subheadline, a step up from the paragraph lede */
.home-hero-lede.is-punchy { font-size: clamp(1.3rem, 1.9vw, 1.6rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: #fff; max-width: none; }
@media (max-width: 1199px) {
  .navmenu .dropdown ul li.nav-dropdown-label { padding-left: 16px; padding-right: 16px; } /* mobile item text is 16px in */
}

/* tables in insight posts (e.g. the case study results) */
.post-body table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 0.98rem; }
.post-body th, .post-body td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--oi-line); vertical-align: top; }
.post-body th { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oi-plum); border-bottom-width: 2px; }
.post-body td:first-child { font-weight: 700; color: var(--oi-ink); white-space: nowrap; }
@media (max-width: 560px) { .post-body td:first-child { white-space: normal; } }

/* ===== Ground handling page: deck-based sections (flat shifts, cost lines, planning, SLA) ===== */
.gh-stages.is-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gh-stages.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gh-stages.is-light .gh-stage, .gh-light .gh-sla .gh-stage { background: #fff; border-color: var(--oi-line); box-shadow: 0 14px 34px -26px rgba(39,22,69,0.35); }
.gh-stages.is-light .gh-stage h3 { color: var(--oi-ink); }
.gh-stages.is-light .gh-stage p { color: var(--oi-ink-body); }
.gh-stages.is-light .gh-stage-no { color: var(--oi-amber-dk); }

.gh-flat { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.gh-flat-chart { margin: 0; padding: 22px 22px 16px; background: #fff; border: 1px solid var(--oi-line); border-radius: 16px; }
.gh-flat-chart img { display: block; width: 100%; height: auto; }
.gh-flat-label { font-size: 0.82rem; font-weight: 600; color: var(--oi-plum); margin-bottom: 10px; }
.gh-flat-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.78rem; color: var(--oi-plum); }
.gh-flat-axis b { color: var(--oi-ink); font-weight: 700; }
.gh-flat-chart figcaption { margin-top: 12px; font-size: 0.76rem; color: var(--oi-lilac); }
.gh-flat-side { display: flex; flex-direction: column; gap: 28px; }
.gh-flat-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.gh-flat-legend li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; line-height: 1.5; color: var(--oi-ink-body); }
.gh-flat-legend b { color: var(--oi-ink); margin-right: 4px; }
.gh-flat-legend i { flex: none; width: 18px; height: 14px; margin-top: 4px; border-radius: 3px; }
.gh-flat-legend i.is-work { background: #D2CDDA; }
.gh-flat-legend i.is-staff { height: 4px; margin-top: 9px; background: #271645; }
.gh-flat-legend i.is-idle { background: repeating-linear-gradient(45deg, #958CA3 0 3px, #F7F6FA 3px 7px); }
.gh-flat-legend i.is-gap { background: #F2A81D; }
.gh-flat-why p { margin: 8px 0 0; font-size: 0.98rem; line-height: 1.55; color: var(--oi-ink-body); }

.gh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gh-stat { display: flex; flex-direction: column; gap: 6px; padding: 26px 24px; background: #fff; border-radius: 16px; box-shadow: 0 18px 40px -24px rgba(10,4,24,0.6); }
.gh-stat-no { font-family: var(--heading-font); font-size: clamp(2rem, 3.4vw, 2.7rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #271645; }
.gh-stat-unit { font-size: 0.82rem; font-weight: 700; color: #6E4FCF; margin-bottom: 10px; }
.gh-stat h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--oi-ink); }
.gh-stat p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--oi-ink-body); }
.gh-scale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; border: 1px solid rgba(255,255,255,0.16); border-radius: 16px; }
.gh-scale div { display: flex; align-items: baseline; gap: 12px; padding: 16px 22px; }
.gh-scale div + div { border-left: 1px solid rgba(255,255,255,0.16); }
.gh-scale b { font-family: var(--heading-font); font-size: 1.5rem; font-weight: 800; color: #fff; }
.gh-scale span { font-size: 0.9rem; color: var(--gh-muted); }
.gh-source { margin: 14px 0 0; font-size: 0.78rem; color: var(--gh-muted); opacity: 0.8; }
.gh-source.is-dark { color: var(--oi-plum); }

.gh-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.gh-notes > div { padding: 18px 22px; border-left: 3px solid #6E4FCF; background: rgba(110,79,207,0.06); border-radius: 0 12px 12px 0; }
.gh-notes p { margin: 6px 0 0; font-size: 0.95rem; line-height: 1.55; color: var(--oi-ink-body); }
.gh-notes.is-dark > div { border-left-color: var(--gh-amber); background: rgba(255,255,255,0.04); }
.gh-notes.is-dark p { color: var(--gh-muted); }

.gh-sla { display: grid; grid-template-columns: 2fr 3fr; gap: 28px; }
.gh-sla-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-content: start; }
.gh-sla-group.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gh-sla-head { grid-column: 1 / -1; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gh-amber); padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.16); }

.gh-proof-stats { display: flex; gap: 14px; margin: 6px 0 4px; }
.gh-proof-stats div { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; background: #fff; border: 1px solid var(--oi-line); border-radius: 14px; }
.gh-proof-stats b { font-family: var(--heading-font); font-size: 1.6rem; font-weight: 800; color: #271645; letter-spacing: -0.02em; }
.gh-proof-stats span { font-size: 0.84rem; color: var(--oi-ink-body); }

@media (max-width: 1199.98px) {
  .gh-stages.is-five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gh-sla { grid-template-columns: 1fr; }
}
@media (max-width: 991.98px) {
  .gh-flat { grid-template-columns: 1fr; }
  .gh-stats { grid-template-columns: 1fr; }
  .gh-stages.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .gh-stages.is-five, .gh-stages.is-four { grid-template-columns: minmax(0, 1fr); }
  .gh-scale { grid-template-columns: 1fr; }
  .gh-scale div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,0.16); }
  .gh-notes { grid-template-columns: 1fr; }
  .gh-sla-group, .gh-sla-group.is-3 { grid-template-columns: minmax(0, 1fr); }
  .gh-flat-axis { font-size: 0.66rem; }
  .gh-proof-stats { flex-wrap: wrap; }
}

/* ===== OptiFlight page: screen-by-screen cards, locked console, layers ===== */
.of-no { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oi-amber); }
.of-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.of-list li { font-size: 0.92rem; line-height: 1.5; color: var(--oi-muted); padding-left: 14px; position: relative; }
.of-list li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: #A188E8; }
.of-list b { color: #fff; font-weight: 700; margin-right: 4px; }
.of-list.is-light { margin-top: 18px; gap: 12px; }
.of-list.is-light li { font-size: 0.98rem; color: var(--oi-ink-body); }
.of-list.is-light b { color: var(--oi-ink); }
.of-list.is-light li::before { background: #6E4FCF; }
.of-replan { align-items: center; }
.of-console { min-width: 0; }
.of-console .cr-tabs { display: none; }
.of-console .cr-console { box-shadow: 0 24px 50px -28px rgba(39,22,69,0.45); border: 1px solid var(--oi-line); }
.of-demo { margin: 10px 0 0; font-size: 0.76rem; color: var(--oi-lilac); text-align: right; }

.of-layers { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.of-layer { display: grid; grid-template-columns: 120px 130px minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px 22px; background: #fff; border: 1px solid var(--oi-line); border-radius: 14px; box-shadow: 0 12px 28px -24px rgba(39,22,69,0.4); }
.of-layer:nth-child(1) { width: min(100%, 760px); }
.of-layer:nth-child(2) { width: min(100%, 820px); }
.of-layer:nth-child(3) { width: min(100%, 880px); }
.of-layer:nth-child(4) { width: min(100%, 940px); }
.of-layer span { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #6E4FCF; }
.of-layer b { font-family: var(--heading-font); font-size: 1.05rem; color: var(--oi-ink); }
.of-layer p { margin: 0; font-size: 0.92rem; line-height: 1.45; color: var(--oi-ink-body); }
.of-layer.is-top { background: #271645; border-color: #271645; }
.of-layer.is-top span { color: #C9B6FF; }
.of-layer.is-top b, .of-layer.is-top p { color: #fff; }
.of-integration { margin: 28px auto 0; max-width: 940px; padding: 20px 24px; border-left: 3px solid #6E4FCF; background: rgba(110,79,207,0.06); border-radius: 0 12px 12px 0; }
.of-integration ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 0.96rem; color: var(--oi-ink-body); }

.gh-stats.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.of-proof-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 24px; }
.of-proof-foot .gh-source { margin: 0; }
.of-runs { padding-top: 0; }

@media (max-width: 991.98px) {
  .gh-stats.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .of-layer { grid-template-columns: 1fr; gap: 4px; width: 100% !important; }
  .gh-stats.is-four { grid-template-columns: 1fr; }
}

.dm-dark .dm-challenges li { border-color: rgba(255,255,255,0.16); }
.dm-dark .dm-challenges li h3 { color: #fff; }
.dm-dark .dm-challenges li p { color: var(--oi-muted); }

/* Ground handling: BUD proof + cost lines, directly under the hero */
.gh-bud-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-bottom: clamp(32px, 4vw, 48px); }
.gh-bud-photo { position: relative; margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 24px 50px -30px rgba(39,22,69,0.5); }
.gh-bud-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }
.gh-bud-badge { position: absolute; left: 16px; bottom: 16px; display: inline-flex; padding: 10px 14px; background: #fff; border-radius: 12px; box-shadow: 0 10px 24px -14px rgba(10,4,24,0.6); }
.gh-bud-badge img { display: block; height: 34px; width: auto; }
.gh-bud .gh-stat { border: 1px solid var(--oi-line); box-shadow: 0 16px 36px -28px rgba(39,22,69,0.45); }
.gh-scale.is-light { border-color: var(--oi-line); background: #fff; }
.gh-scale.is-light div + div { border-color: var(--oi-line); }
.gh-scale.is-light b { color: #271645; }
.gh-scale.is-light span { color: var(--oi-ink-body); }
.gh-white { background: #fff; }
.gh-data { padding-top: 0 !important; }
@media (max-width: 991.98px) {
  .gh-bud-top { grid-template-columns: 1fr; }
}

/* Ground handling: Plan / Re-plan switch with stepped highlight (gh-flow.js) */
.gh-flow-switch { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 22px; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; background: rgba(255,255,255,0.04); }
.gh-flow-switch button { border: 0; background: transparent; color: rgba(255,255,255,0.75); font: 600 0.92rem/1 var(--nav-font, inherit); padding: 10px 20px; border-radius: 999px; cursor: pointer; transition: background .25s ease, color .25s ease; }
.gh-flow-switch button:hover { color: #fff; }
.gh-flow-switch button.is-on { background: #fff; color: #271645; }
.gh-flow-panels { display: grid; }
.gh-flow-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s; }
.gh-flow-panel.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .45s ease, visibility 0s; }
.gh-flow .gh-stage { position: relative; overflow: hidden; cursor: pointer; transition: transform .35s ease, border-color .35s ease, background .35s ease; }
.gh-flow .gh-stage::before { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--gh-amber); transform: scaleX(0); transform-origin: left; }
.gh-flow .gh-stage.is-done::before { transform: scaleX(1); opacity: 0.45; }
.gh-flow .gh-stage.is-active { transform: translateY(-4px); border-color: rgba(242,176,97,0.6); background: rgba(255,255,255,0.07); }
.gh-flow .gh-stage.is-active::before { transform: scaleX(1); transition: transform 2.8s linear; }
.gh-flow.is-paused .gh-stage.is-active::before { transition: none; }
.gh-flow .gh-stage.is-active .gh-stage-no { color: #fff; }
.gh-flow .gh-stage.is-active h3 { color: var(--gh-amber); }
@media (prefers-reduced-motion: reduce) {
  .gh-flow-panel, .gh-flow .gh-stage, .gh-flow .gh-stage::before { transition: none !important; }
}
@media (min-width: 992px) { .dm-cards.of-features.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dm-hero .of-console { align-self: center; }
.dm-hero .of-demo { color: rgba(255,255,255,0.5); }

/* Security: the four claims as white cards inside the hero (replaces the dark trust band) */
.sec-hero { padding-bottom: clamp(56px, 7vw, 88px); }
.sec-claims { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
.sec-claim { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 24px; background: #fff; border-radius: 16px; box-shadow: 0 18px 40px -24px rgba(10,4,24,0.6); }
.sec-claim-eb { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #6E4FCF; }
.sec-claim h2 { margin: 0 0 4px; font-size: 1.12rem; font-weight: 800; color: #241A3C; }
.page-hero .sec-claim p { margin: 0; max-width: none; opacity: 1; font-size: 0.92rem; line-height: 1.55; color: #4B3C6E; }
@media (max-width: 1199.98px) { .sec-claims { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .sec-claims { grid-template-columns: 1fr; } }
.sec-claim-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 10px; border-radius: 12px; background: #F3EEFF; color: #6E4FCF; font-size: 1.3rem; }

/* Homepage: "Trusted by" as a thin band right under the hero */
.home-trusted { background: #fff; border-bottom: 1px solid rgba(161,88,255,0.08); padding: 14px 0; }
.home-trusted-row { display: flex; align-items: center; gap: 28px; }
.home-trusted-label { flex: none; margin: 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: #63537D; }
.home-trusted .logo-marquee-wrapper { flex: 1 1 auto; min-width: 0; }
.home-trusted .logo-marquee-wrapper::before, .home-trusted .logo-marquee-wrapper::after { width: 60px; }
.home-trusted .logo-marquee-track { gap: 0; } /* spacing via item padding only, so -50% is exactly one set */
.home-trusted .logo-marquee-item { padding: 0 32px; }
.home-trusted .logo-marquee-item img { height: 24px; }
.home-trusted .logo-marquee-item.logo-lg img { height: 28px; }
.home-trusted .logo-marquee-item.logo-xl img { height: 34px; }
.home-trusted .logo-marquee-item.logo-xxl img { height: 44px; }
.home-trusted .logo-marquee-item.logo-xxxxl img { height: 52px; }
@media (max-width: 575.98px) {
  .home-trusted-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .home-trusted-label { text-align: center; }
}
/* hero + Trusted-by band fill the first screen on desktop */
@media (min-width: 992px) and (min-height: 700px) {
  .home-trusted { height: 112px; padding: 0; display: flex; align-items: center; }
  .home-trusted > .container { width: 100%; }
  .home-trusted .logo-marquee-item img { height: 30px; }
  .home-trusted .logo-marquee-item.logo-lg img { height: 34px; }
  .home-trusted .logo-marquee-item.logo-xl img { height: 42px; }
  .home-trusted .logo-marquee-item.logo-xxl img { height: 54px; }
  .home-trusted .logo-marquee-item.logo-xxxxl img { height: 64px; }
  .home-hero { min-height: calc(100vh - 112px); min-height: calc(100svh - 112px); display: flex; flex-direction: column; justify-content: center; }
  .home-hero > .home-hero-main { width: 100%; }
}
.home-trusted .logo-marquee-track { animation-duration: 56s; }

/* References: partner universities show their logo above the name */
.ref-partner-logo { display: block; height: 44px; width: auto; max-width: 100%; margin-bottom: 16px; object-fit: contain; object-position: left center; }
.ref-partners { padding-top: 0; }

/* References: all client logos at the top; Budapest Airport and Liwo larger */
.ref-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px 56px; margin-bottom: clamp(40px, 5vw, 64px); }
.ref-logo { display: inline-flex; align-items: center; }
.ref-logo img { display: block; height: 40px; width: auto; max-width: 180px; object-fit: contain; filter: grayscale(100%); opacity: 0.7; transition: filter .3s, opacity .3s; }
.ref-logo:hover img { filter: none; opacity: 1; }
.ref-logo.is-main img { height: 76px; max-width: 260px; }
.ref-logo.is-tall img { height: 56px; }
.ref-logo.is-dark img { filter: grayscale(100%) invert(1); }
.ref-logo.is-dark:hover img { filter: none; }
.ref-logos .ref-logo.is-main + .ref-logo.is-main { margin-right: 24px; }
@media (max-width: 575.98px) {
  .ref-logos { gap: 22px 32px; }
  .ref-logo img { height: 32px; max-width: 130px; }
  .ref-logo.is-main img { height: 56px; max-width: 200px; }
}
.ref-logos-break { flex-basis: 100%; height: 0; }
.ref-logo.is-main img { height: 104px; max-width: 320px; }
.ref-logo.is-main.is-wide img { height: 54px; max-width: 340px; }
.ref-logos .ref-logo.is-main + .ref-logo.is-main { margin-right: 0; margin-left: 40px; }
@media (max-width: 575.98px) {
  .ref-logo.is-main img { height: 72px; max-width: 220px; }
  .ref-logo.is-main.is-wide img { height: 38px; max-width: 240px; }
  .ref-logos .ref-logo.is-main + .ref-logo.is-main { margin-left: 0; }
}
.ref-logo.is-main img { height: 132px; max-width: 360px; margin: -14px 0; }
.ref-logo.is-main.is-wide img { height: 50px; margin: 0; }
@media (max-width: 575.98px) { .ref-logo.is-main img { height: 92px; margin: -10px 0; } .ref-logo.is-main.is-wide img { height: 34px; margin: 0; } }
/* References: the two main references carry their logo in the card */
.ref-main { margin-bottom: clamp(36px, 4vw, 56px); }
.ref-main-card { height: 100%; }
.ref-main-card .ref-logo { display: flex; align-items: center; height: 104px; margin-bottom: 14px; }
.ref-main-card .ref-logo.is-main img { height: 120px; margin: 0 0 0 -8px; }
.ref-main-card .ref-logo.is-main.is-wide img { height: 54px; margin: 0; }
.ref-logos { margin-bottom: 0; }
@media (max-width: 575.98px) {
  .ref-main-card .ref-logo { height: 80px; }
  .ref-main-card .ref-logo.is-main img { height: 92px; }
  .ref-main-card .ref-logo.is-main.is-wide img { height: 40px; }
}