/* =============================================================
   TransRisk v3 — product.css
   Styles specific to product.html
============================================================= */

/* ========================
   PAGE INTRO SECTION
======================== */

.prod-intro-section {
  background: var(--color-light);
  border-bottom: 1px solid var(--color-border);
}

.prod-intro-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.prod-intro-title {
  margin-bottom: 20px;
}

.prod-intro-body {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-muted);
  margin: 0;
}

/* ========================
   MODULE SUMMARY GRID
======================== */

.prod-modules-section {
  background: var(--color-white);
}

.prod-modules-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 48px;
}


.prod-modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.prod-module-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid transparent;
  border-radius: var(--radius-lg);
  padding: 24px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition:
    border-top-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
  position: relative;
}

.prod-module-card:hover {
  border-top-color: var(--color-green);
  box-shadow: 0 8px 28px rgba(34, 197, 94, 0.12), 0 2px 8px rgba(0,0,0,0.04);
  transform: translateY(-2px);
}

.prod-module-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 36px;
  margin-bottom: 4px;
}

.prod-module-icon {
  width: 38px;
  height: 38px;
  background: rgba(34, 197, 94, 0.08);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #16a34a;
  flex-shrink: 0;
  transition: background var(--transition);
}

.prod-module-icon svg {
  width: 20px;
  height: 20px;
}

.prod-module-card:hover .prod-module-icon {
  background: rgba(34, 197, 94, 0.14);
}

.prod-module-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 0;
}

.prod-module-desc {
  font-size: 13.5px;
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 900px) {
  .prod-modules-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .prod-modules-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ========================
   CAPABILITIES IN DEPTH
======================== */

.prod-capabilities-section {
  background: var(--color-light);
}

.prod-cap-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 48px;
}

/* ── Vertical tabs ─────────────────────────────────────────────
   Capability names down the left; the selected one's screenshot and
   paragraph together on the right. Replaces a 2-across grid that showed
   all eight at once and ran to 2,692px.

   A real tablist: the paragraph no longer carries a link, so tab and
   tabpanel are cleanly separated and roving tabindex applies.
   product-capabilities.js advances it on a timer. */
.prod-cap-tabs {
  /* One interval. product-capabilities.js reads the same number;
     keep them in step if either changes. */
  --cap-dur: 7s;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: start;
}

/* ── Left: the names ── */

.prod-cap-list {
  display: flex;
  flex-direction: column;
}

.prod-cap-trigger {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 20px 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--color-border);
  text-align: left;
  cursor: pointer;
  color: var(--color-muted);
  transition: color var(--transition);
  font-family: inherit;
}

.prod-cap-trigger:first-child {
  border-top: 0;
}

.prod-cap-trigger:hover,
.prod-cap-trigger.is-active {
  color: var(--color-navy);
}

.prod-cap-trigger:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.prod-cap-num {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  opacity: 0.5;
  flex-shrink: 0;
}

.prod-cap-name {
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.02em;
}

.prod-cap-trigger.is-active .prod-cap-num {
  color: var(--color-green);
  opacity: 1;
}

/* ── The timer, as a filling edge ──
   Doubles as the marker for the selected tab: it fills over one
   interval, then the next tab takes over. Paused, it simply holds. */
.prod-cap-progress {
  position: absolute;
  left: -20px;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--color-border);
  overflow: hidden;
}

.prod-cap-progress::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-green);
  transform: scaleY(0);
  transform-origin: top center;
}

.prod-cap-trigger.is-active .prod-cap-progress::after {
  animation: capProgress var(--cap-dur, 7s) linear forwards;
}

/* Held mid-fill while the reader is on it, rather than snapping back. */
.prod-cap-tabs.is-paused .prod-cap-trigger.is-active .prod-cap-progress::after {
  animation-play-state: paused;
}

/* No timer running at all: show the selected tab as simply selected. */
.prod-cap-tabs.is-stopped .prod-cap-trigger.is-active .prod-cap-progress::after {
  animation: none;
  transform: scaleY(1);
}

@keyframes capProgress {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ── Right: screenshot and paragraph ──
   All eight panels share one grid cell, so the column is as tall as the
   tallest and nothing jumps as the timer advances. */
.prod-cap-panels {
  position: relative;
  display: grid;
}

.prod-cap-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity    0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform  0.45s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.45s;
}

.prod-cap-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s, 0s, 0s;
}

/* ── The screenshot, framed as an application window ──
   A bare bordered box made these read as loose image files. The chrome
   bar and inset mat frame them as what they are — screens from the
   product — and give the pale dashboards an edge to sit against. */
.prod-cap-shot {
  position: relative;
  padding: 34px 12px 12px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(0, 133, 64, 0.05) 0%, rgba(0, 133, 64, 0) 45%),
    var(--color-white);
  box-shadow:
    0 1px 2px rgba(15, 31, 46, 0.05),
    0 10px 24px -12px rgba(15, 31, 46, 0.18),
    0 28px 60px -30px rgba(15, 31, 46, 0.22);
  transition: box-shadow var(--transition), transform var(--transition);
}

/* Window bar */
.prod-cap-shot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 34px;
  border-radius: 13px 13px 0 0;
  background: linear-gradient(180deg, #fff 0%, var(--color-light) 100%);
  border-bottom: 1px solid var(--color-border);
}

/* Three dots on it. Deliberately grey rather than the red/amber/green
   of a particular desktop OS — this is a browser-based platform. */
.prod-cap-shot::after {
  content: '';
  position: absolute;
  top: 13px;
  left: 14px;
  width: 38px;
  height: 8px;
  background-image:
    radial-gradient(circle 4px at 4px 4px, #cbd5e1 98%, transparent 100%),
    radial-gradient(circle 4px at 19px 4px, #dbe2ea 98%, transparent 100%),
    radial-gradient(circle 4px at 34px 4px, #dbe2ea 98%, transparent 100%);
  background-repeat: no-repeat;
}

/* The figure is the clickable control — lift the whole frame with it so
   the zoom-in cursor has something visible behind it. */
.prod-cap-shot:hover {
  box-shadow:
    0 1px 2px rgba(15, 31, 46, 0.06),
    0 14px 30px -12px rgba(0, 133, 64, 0.22),
    0 32px 70px -30px rgba(15, 31, 46, 0.26);
  transform: translateY(-2px);
}

.prod-cap-shot .tr-shot--cap {
  /* 16:10 matches the 1440x900 screenshots, so nothing is cropped. */
  aspect-ratio: 16 / 10;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-light);
  box-shadow: inset 0 0 0 1px rgba(15, 31, 46, 0.07);
}

.prod-cap-shot .tr-shot--cap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--color-white);
  transition: none;
}

/* shots.css lifts a lightbox image 2px on hover; the frame does that
   job here, and the image moving inside its mat looks like a fault. */
.prod-cap-shot .tr-shot--cap[data-lightbox]:hover img,
.prod-cap-shot .tr-shot--cap[data-lightbox]:focus-visible img {
  transform: none;
  box-shadow: none;
}

.prod-cap-shot .tr-shot--cap:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 3px;
}

/* The figcaption duplicates the paragraph's job now that the paragraph
   sits directly beneath. Kept in the DOM for the lightbox and for
   anyone reading the figure on its own. */
.prod-cap-shot .tr-shot--cap figcaption {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .prod-cap-shot { transition: none; }
  .prod-cap-shot:hover { transform: none; }
}

.prod-cap-caption {
  padding-top: 20px;
}

.prod-cap-caption p {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--color-muted);
  margin: 0;
}

/* ── Play / pause ──
   Auto-advancing content needs a way to stop it that does not depend on
   hovering (WCAG 2.2.2). This is that control. */
.prod-cap-playpause {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-navy);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.prod-cap-playpause:hover,
.prod-cap-playpause:focus-visible {
  background: #fff;
  border-color: var(--color-green);
  color: var(--color-green-dark);
}

.prod-cap-playpause:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
}

.prod-cap-playpause svg {
  width: 14px;
  height: 14px;
}

.prod-cap-playpause .prod-cap-icon-play { display: none; }
.prod-cap-playpause[data-state="paused"] .prod-cap-icon-pause { display: none; }
.prod-cap-playpause[data-state="paused"] .prod-cap-icon-play { display: block; }

@media (max-width: 860px) {
  .prod-cap-tabs {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Screenshot first on a phone: it is what makes the name concrete. */
  .prod-cap-panels {
    order: -1;
  }

  .prod-cap-progress {
    left: -12px;
  }

  .prod-cap-trigger {
    padding: 16px 0;
  }
}

/* No timer and no motion when motion is unwelcome — the script reads
   this same query and never starts the interval. */
@media (prefers-reduced-motion: reduce) {
  .prod-cap-panel {
    transition: none;
  }

  .prod-cap-trigger.is-active .prod-cap-progress::after {
    animation: none;
    transform: scaleY(1);
  }
}

/* ========================
   HERO
======================== */

.product-hero {
  position: relative;
  background: var(--color-navy);
  padding: 96px 40px 88px;
  text-align: center;
  overflow: hidden;
}

.product-hero-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.product-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.product-hero-title {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
}

.product-hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  color: rgba(255,255,255,0.62);
  max-width: 640px;
  line-height: 1.65;
  margin: 0;
}


/* ========================
   PLATFORM DIAGRAM
======================== */

.diagram-section {
  background: #fff;
}

.diagram-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 56px;
}

.platform-diagram {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

/* ── Row ── */
.diag-row {
  display: flex;
  align-items: stretch;
  gap: 16px;
}

.diag-row-label {
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  width: 36px;
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  text-transform: uppercase;
  padding: 12px 0;
}

.diag-row-label--green { color: var(--color-green-dark); }
.diag-row-label--dark  { color: var(--color-navy); }

.diag-boxes {
  display: flex;
  gap: 16px;
  flex: 1;
}

.diag-boxes--four {
  gap: 12px;
}

/* ── Boxes ── */
.diag-box {
  flex: 1;
  border-radius: var(--radius-lg);
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.diag-box--navy {
  background: rgba(15, 31, 46, 0.06);
  border: 1.5px solid rgba(15, 31, 46, 0.14);
  color: var(--color-text);
}

.diag-box--green {
  background: rgba(45, 122, 58, 0.09);
  border: 1.5px solid rgba(45, 122, 58, 0.28);
  color: var(--color-green-dark);
}

.diag-box--dark {
  background: rgba(15, 31, 46, 0.04);
  border: 1.5px solid rgba(15, 31, 46, 0.12);
  color: var(--color-text);
}

.diag-box strong {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
}

.diag-box span {
  font-size: 0.75rem;
  color: var(--color-muted);
  line-height: 1.45;
}

.diag-box--green span { color: rgba(34, 96, 44, 0.72); }

.diag-box-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
  opacity: 0.75;
}

.diag-box-icon svg {
  width: 24px;
  height: 24px;
}

/* Smaller output boxes */
.diag-box--sm {
  padding: 16px 14px;
}

.diag-box--sm strong {
  font-size: 0.8125rem;
}

/* ── Arrow connector ── */
.diag-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  color: var(--color-border);
}

/* Diagram responsive */
@media (max-width: 680px) {
  .diag-row {
    flex-direction: column;
    gap: 10px;
  }

  .diag-row-label {
    writing-mode: horizontal-tb;
    transform: none;
    width: auto;
    text-align: left;
    padding: 0;
    font-size: 0.625rem;
  }

  .diag-boxes {
    flex-wrap: wrap;
  }

  .diag-box {
    flex: 1 1 45%;
    min-width: 120px;
  }

  .diag-boxes--four .diag-box {
    flex: 1 1 45%;
  }
}


/* ========================
   MODULES — STICKY SIDEBAR LAYOUT
======================== */

.modules-detail-section {
  background: var(--color-light);
  padding: 80px 0 96px;
}

.product-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  align-items: start;
}

/* ── Sidebar ── */
.product-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  max-height: calc(100vh - var(--nav-h) - 48px);
  overflow-y: auto;
  padding: 1.5rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.product-sidebar::-webkit-scrollbar { width: 4px; }
.product-sidebar::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }

.sidebar-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.75rem;
  padding: 0 0.75rem;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  color: var(--color-muted);
  text-decoration: none;
  border-radius: 6px;
  border-left: 2px solid transparent;
  transition: all 150ms ease;
  line-height: 1.3;
}

.sidebar-link:hover {
  color: var(--color-text);
  background: #f0f2f5;
  border-left-color: var(--color-green);
}

.sidebar-link.active {
  color: var(--color-green-dark);
  font-weight: 600;
  background: rgba(45,122,58,0.07);
  border-left-color: var(--color-green);
}

.sidebar-cta {
  display: block;
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.82rem;
}

/* ── Module detail content ── */
.modules-detail-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Each module <details> ── */
.module-detail {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition);
}

.module-detail[open] {
  box-shadow: var(--shadow-sm);
}

/* ── Summary / header ── */
.module-detail-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* Remove default marker in all browsers */
.module-detail-summary::-webkit-details-marker { display: none; }
.module-detail-summary::marker { display: none; }

.module-detail-summary:hover {
  background: rgba(0,0,0,0.015);
}

.module-detail-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(45, 122, 58, 0.08);
  border-radius: var(--radius-md);
  color: var(--color-green);
  flex-shrink: 0;
}

.module-detail-icon svg {
  width: 22px;
  height: 22px;
}

.module-detail-title-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.module-detail-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin: 0;
}

/* Chevron rotates when open */
.module-detail-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  position: relative;
  margin-left: auto;
}

.module-detail-chevron::before,
.module-detail-chevron::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 8px;
  height: 1.5px;
  background: var(--color-muted);
  border-radius: 1px;
  transition: transform 0.18s ease;
}

.module-detail-chevron::before {
  left: 2px;
  transform: translateY(-50%) rotate(45deg);
}

.module-detail-chevron::after {
  right: 2px;
  transform: translateY(-50%) rotate(-45deg);
}

.module-detail[open] .module-detail-chevron::before {
  transform: translateY(-50%) rotate(-45deg);
}

.module-detail[open] .module-detail-chevron::after {
  transform: translateY(-50%) rotate(45deg);
}

/* ── Body content ── */
.module-detail-body {
  padding: 0 24px 24px 80px; /* 40px icon + 16px gap + 24px left = 80px */
  border-top: 1px solid var(--color-border);
}

.module-bullets {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.module-bullets li {
  font-size: 0.9375rem;
  color: #374151;
  line-height: 1.6;
  padding-left: 20px;
  position: relative;
}

.module-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-green);
  flex-shrink: 0;
}

/* Key benefit callout */
.module-benefit {
  margin-top: 24px;
  background: rgba(45, 122, 58, 0.06);
  border-left: 3px solid var(--color-green);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 14px 18px;
}

.module-benefit-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-green-dark);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.module-benefit p {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-green-dark);
  line-height: 1.5;
  margin: 0;
}

/* ── NEW badge inside module title wrap ── */
.module-new-badge {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--color-green);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* ── Desktop: remove pointer cursor on summary (content always visible) ── */
@media (min-width: 960px) {
  .module-detail-summary {
    cursor: default;
    pointer-events: none; /* sidebar handles navigation */
  }

  .module-detail-chevron {
    display: none;
  }

  .module-detail-body {
    border-top-color: var(--color-border);
  }
}

/* Modules responsive */
@media (max-width: 1023px) {
  .product-layout {
    grid-template-columns: 1fr;
    padding: 0 1rem;
  }

  .product-sidebar {
    display: none;
  }
}

@media (max-width: 959px) {
  .module-detail-body {
    padding: 0 20px 20px 20px;
  }
}

@media (max-width: 600px) {
  .modules-detail-section {
    padding: 56px 0 72px;
  }

  .module-detail-summary {
    padding: 16px 18px;
    gap: 12px;
  }

  .module-detail-icon {
    width: 34px;
    height: 34px;
  }

  .module-detail-title {
    font-size: 0.9375rem;
  }
}


/* ========================
   INSTRUMENTS
======================== */

.instruments-section {
  background: #fff;
}

.instruments-header {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
}

.instruments-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 760px;
  margin: 0 auto;
}

.instrument-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 100px;
  border: 1.5px solid rgba(34, 197, 94, 0.25);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-green);
  background: #0f1923;
  transition: border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition);
  letter-spacing: 0.01em;
}

.instrument-pill:hover {
  border-color: var(--color-green);
  background: #152030;
  color: #4ade80;
  transform: translateY(-1px);
}

.instruments-sub {
  text-align: center;
  margin-top: 28px;
  font-size: 0.875rem;
  color: var(--color-muted);
  font-style: italic;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}


/* ========================
   DELIVERY & INTEGRATION
======================== */

.delivery-section {
  background: var(--color-light);
}

.delivery-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 48px;
}

.delivery-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 880px;
  margin: 0 auto;
}

.delivery-tile {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.delivery-tile:hover {
  border-color: var(--color-green);
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.10);
}

.delivery-tile-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(45, 122, 58, 0.08);
  border-radius: var(--radius-md);
  color: var(--color-green);
}

.delivery-tile-icon svg {
  width: 24px;
  height: 24px;
}

.delivery-tile-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin: 0;
}

.delivery-tile-body {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.6;
  margin: 0;
}

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

@media (max-width: 540px) {
  .delivery-tiles {
    grid-template-columns: 1fr;
  }
}


/* ========================
   RESPONSIVE — HERO
======================== */

@media (max-width: 720px) {
  .product-hero {
    padding: 72px 24px 64px;
  }
}

@media (max-width: 480px) {
  .product-hero {
    padding: 56px 20px 52px;
  }
}

/* ========================
   SIX-MODULE STACK  (/product/#module-wise-deep-dive)
   ========================
   Replaced the 3-column, 12-card grid in August 2026. Each of the six modules
   now carries a 350-500 word first-time-visitor summary, which a narrow card
   cannot hold — so the cards became full-width blocks with the copy on the
   left and the product evidence on the right. The card tokens (border, radius,
   hover lift, icon chip) are reused unchanged so the two read as one system. */

/* ── Module progress rail ──────────────────────────────────────
   Six bars, one per module, pinned under the nav while the stack is on
   screen. They are real links, so this replaces the old chip row rather
   than sitting beside it — two navs to the same six targets would just
   be noise for keyboard and screen-reader users. product-modules.js
   marks the active one; without scripting they are still jump links. */
.prod-module-rail {
  position: sticky;
  top: var(--nav-h);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 16px 0 18px;
  margin-bottom: 8px;
  background: var(--color-light);
}

.prod-rail-bar {
  position: relative;
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 100px;
  background: var(--color-border);
  transition: background var(--transition), width var(--transition);
}

.prod-rail-bar:hover,
.prod-rail-bar:focus-visible {
  background: var(--color-green-light);
}

.prod-rail-bar.is-active {
  width: 76px;
  background: var(--color-green);
}

.prod-rail-bar:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 5px;
}

/* Name on hover/focus — the bar alone cannot say which module it is. */
.prod-rail-tip {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-navy);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 5px 10px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}

.prod-rail-bar:hover .prod-rail-tip,
.prod-rail-bar:focus-visible .prod-rail-tip {
  opacity: 1;
}

/* ── Sticky stack ──────────────────────────────────────────────
   Each card pins under the rail and the next scrolls up over it, so
   the reader sees one module at a time.

   Two rules make this work, and breaking either one is what produced
   overlapping headers before:

   1. EVERY CARD THE SAME HEIGHT. All six pin at the same offset and
      the later one in document order paints on top, so a shorter card
      cannot cover a taller one — its bottom edge shows through. The
      height is viewport-derived below; never let it go content-driven.
   2. The gap is dwell time, not a visual gap. Two pinned cards have
      identical rects, so it can never open a window onto the one
      underneath — all it does is push the next card's flow position
      further down, buying that many pixels of scrolling where the
      current card sits alone before the next begins to climb. With
      gap:0 the step equals the card height and the next card starts
      moving the instant this one lands. */
.prod-modules-stack {
  display: flex;
  flex-direction: column;
  gap: 260px;
  position: relative;
}

.prod-module-block {
  position: sticky;
  top: calc(var(--nav-h) + 58px);
  /* Exactly the space from the pin line to the bottom of the viewport.
     With gap:0 the next card's flow position is its predecessor's
     bottom edge, so any height short of this leaves a band the next
     card shows through the moment this one finishes pinning — there
     would be no scroll position where a card is ever alone. Deriving it
     from the viewport also keeps all six identical, which is what the
     stack needs. */
  height: calc(100vh - var(--nav-h) - 58px);
  min-height: 460px;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid transparent;
  border-radius: var(--radius-lg);
  padding: 28px 28px 32px;
  /* Casts upward onto the card it is covering. Without it the hand-off
     ends with a ~47px band of the outgoing card's eyebrow showing above
     this card's top edge, which reads as two titles colliding rather
     than as one card sliding over another. */
  box-shadow: 0 -14px 30px -12px rgba(15, 31, 46, 0.22);
  transition:
    border-top-color var(--transition),
    box-shadow var(--transition);
}

/* The first card has nothing behind it to shade. */
.prod-module-block:first-child {
  box-shadow: none;
}

/* Keeps the upward shadow in the list — this is the card doing the
   covering, so dropping it here would remove the cue precisely when it
   matters. */
.prod-module-block:hover,
.prod-module-block:focus-within,
.prod-module-block.is-active {
  border-top-color: var(--color-green);
  box-shadow:
    0 -14px 30px -12px rgba(15, 31, 46, 0.22),
    0 8px 28px rgba(34, 197, 94, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.04);
}

.prod-module-block:first-child:hover,
.prod-module-block:first-child:focus-within,
.prod-module-block:first-child.is-active {
  box-shadow: 0 8px 28px rgba(34, 197, 94, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* The shots column had its own sticky offset for when the block was a
   tall scrolling slab. The block itself pins now, so that would be a
   sticky inside a sticky, fighting for the same few pixels.

   Three full-width screenshots stacked came to 930px against ~450px of
   copy, which made the images — not the text — the thing setting the
   panel height. First shot leads, the rest drop to thumbnails beside
   it: same three images, same lightbox, about half the height. */
.prod-module-block .prod-module-shots {
  position: static;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Explicit rows, so the column is exactly as tall as its card
     whatever the screenshot count — two shots or three, the height is
     the same. The lead gets the larger share. */
  grid-template-rows: 1.75fr 1fr;
  gap: 12px;
  min-height: 0;
}

.prod-module-block .prod-module-shots figure {
  min-height: 0;
  margin: 0;
}

.prod-module-block .prod-module-shots figure:first-child {
  grid-column: 1 / -1;
}

/* Fills its grid cell rather than setting it: the cell size is what
   keeps every card the same height. */
.prod-module-block .prod-module-shots figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ── Scrolling copy column ─────────────────────────────────────
   All eight subsections stay on the panel; the column scrolls inside
   itself instead of setting the panel's height. The scroll region
   fills the column exactly, so it ends level with the screenshots
   beside it and the panel stays about one viewport.

   Sizing it needs one trick. The copy is far taller than the shots
   (~1150px against ~465px), so left to itself it would set the grid
   row height and never scroll — the reason this first carried a fixed
   max-height. Taking the scroll region out of flow with position:
   absolute drops the copy column's content contribution to zero: the
   row is then sized by the screenshots alone, the column stretches to
   that row, and inset:0 makes the scroll region fill it. No magic
   number, and no dead space under the last line. */
.prod-module-copy {
  position: relative;
  min-height: 0;
}

.prod-module-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain; /* don't hand the page a scroll at the ends */
  padding-right: 16px;
  margin-right: -4px;
  /* Fades the last line rather than guillotining it, so there is a cue
     that the column continues. */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.prod-module-scroll::-webkit-scrollbar {
  width: 6px;
}

.prod-module-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.prod-module-scroll::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 100px;
}

.prod-module-scroll:hover::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}

/* It is focusable so it can be scrolled from the keyboard — say so. */
.prod-module-scroll:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

.prod-module-scroll > :first-child {
  margin-top: 0;
}

.prod-module-block-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
  flex: 0 0 auto; /* the body absorbs the slack, not the header */
}

/* Takes the slack so the CTA is pushed to the corner, and shrinks
   rather than shoving it off the edge on a narrow card. */
.prod-module-block-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.prod-module-index {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 6px;
}

.prod-module-block-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0;
}

.prod-module-block-lede {
  font-size: 15px;
  color: var(--color-muted);
  line-height: 1.6;
  margin: 8px 0 0;
  max-width: 62ch;
}

.prod-module-block-body {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 32px;
  /* stretch, not start: the copy column has to fill the row so its
     scroll region knows what height to be. The shots column sets the
     row height; the copy column scrolls to match it. */
  align-items: stretch;
  /* Takes whatever the card has left under the header. The card's own
     height is viewport-derived, so this stays identical across all six
     — which is what stops a taller card showing its bottom edge from
     behind the one covering it. Never let this become content-sized. */
  flex: 1 1 auto;
  min-height: 0;
}

/* Descendant, not `.prod-module-copy > p`. Wrapping the prose in the
   scroll region made these grandchildren, so the old child selector
   silently stopped matching: the copy fell back to the 16px body
   default and — with the global `* { margin: 0 }` reset — lost every
   gap, which is what jammed each heading against the paragraph above
   it. */
.prod-module-scroll p {
  font-size: 14.5px;
  color: var(--color-muted);
  line-height: 1.75;
  margin: 0 0 18px;
}

.prod-module-scroll p:last-child {
  margin-bottom: 0;
}

/* Section labels down a long scrolling column. Uppercase and green
   rather than navy bold at near body size: seven of these go past in
   one column, and at 13px navy they read as the first line of the
   paragraph beneath rather than as a label for it. The space above is
   what separates one section from the last, so it is much larger than
   the space below, which binds the label to its own paragraph. */
.prod-module-sub {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-green-dark);
  line-height: 1.45;
  margin: 26px 0 9px;
}

.prod-module-sub:first-child {
  margin-top: 0;
}

.prod-module-explore-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-green-dark);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 100px;
  transition:
    background   var(--transition),
    color        var(--transition),
    border-color var(--transition);
}

.prod-module-explore-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.prod-module-explore-link:hover,
.prod-module-explore-link:focus-visible {
  background: rgba(34, 197, 94, 0.08);
}

.prod-module-explore-link:hover svg {
  transform: translateX(3px);
}

.prod-module-shots {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Sticks alongside the long summary on tall screens rather than running out
     of content halfway down it. */
  position: sticky;
  top: calc(var(--nav-h) + 20px);
}

/* An alias anchor for a retired module id. It carries the sticky-nav offset
   itself — style.css only offsets the section that follows a shim. */
.prod-module-block > span[id][aria-hidden="true"],
.prod-module-block[id] {
  /* Clears the sticky rail as well as the nav. */
  scroll-margin-top: calc(var(--nav-h) + 74px);
}

/* No pinning on a phone: a ~650px viewport is too short to hold a
   pinned card and its rail, and sticky fights native scroll momentum.
   The six become plain stacked blocks, so the equal-height rule that
   the desktop stack depends on no longer applies either — the body
   goes back to being content-sized. */
@media (max-width: 900px) {
  .prod-module-rail {
    position: static;
    gap: 8px;
    padding: 10px 0 14px;
    background: transparent;
  }

  .prod-rail-bar { width: 34px; }
  .prod-rail-bar.is-active { width: 56px; }

  .prod-modules-stack { gap: 20px; }

  .prod-module-block {
    position: static;
    height: auto;
    min-height: 0;
    display: block;
  }

  .prod-module-block-body {
    height: auto;
  }

  .prod-module-block .prod-module-shots {
    grid-template-rows: none;
  }

  .prod-module-block .prod-module-shots figure img {
    height: auto;
    object-fit: fill;
  }

  .prod-module-block > span[id][aria-hidden="true"],
  .prod-module-block[id] {
    scroll-margin-top: calc(var(--nav-h) + 16px);
  }

  /* Back into flow: single column here, so there is no screenshot
     column to match and nothing to gain from a scrollport inside an
     already-scrolling page. product-modules.js drops the tabindex to
     match. */
  .prod-module-copy {
    position: static;
  }

  .prod-module-scroll {
    position: static;
    inset: auto;
    overflow: visible;
    max-height: none;
    min-height: 0;
    padding-right: 0;
    margin-right: 0;
    mask-image: none;
    -webkit-mask-image: none;
  }
}

/* No pinning and no width animation when motion is unwelcome. */
@media (prefers-reduced-motion: reduce) {
  .prod-module-block {
    position: static;
    height: auto;
    min-height: 0;
    display: block;
  }
  .prod-module-block-body { height: auto; }
  .prod-modules-stack { gap: 20px; }
  .prod-rail-bar,
  .prod-rail-tip { transition: none; }
}

@media (max-width: 900px) {
  .prod-module-block-body {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .prod-module-shots {
    position: static;
  }
}

@media (max-width: 520px) {
  .prod-module-block {
    padding: 22px 18px 26px;
  }

  .prod-module-block-head {
    flex-direction: column;
    gap: 12px;
  }

  .prod-module-block-title {
    font-size: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prod-module-explore-link svg { transition: none; }
  .prod-module-explore-link:hover svg { transform: none; }
}

/* ── Deep-dive CTA ────────────────────────────────────────────
   Sits in the card's top-right corner, out of the copy column. It is
   still the gate trigger — access-gate.js intercepts the click — but it
   no longer announces itself as locked: the padlock chip and the "Email
   access required" note are gone, so it reads as an invitation rather
   than a barrier. The link text is the same six words on every card, so
   the module name lives in aria-label to keep them distinguishable. */

.prod-module-explore-link {
  flex-shrink: 0;
  align-self: flex-start;
  margin-left: auto; /* pins it right regardless of heading width */
  white-space: nowrap;
  border: 1px solid var(--color-border);
  background: var(--color-white);
}

.prod-module-explore-link:hover,
.prod-module-explore-link:focus-visible {
  border-color: var(--color-green);
  background: rgba(34, 197, 94, 0.08);
}

.prod-module-explore-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.prod-module-explore-link:hover .prod-module-explore-arrow {
  transform: translateX(3px);
}

/* Must come after the margin-left:auto above, not in the earlier 520px
   block — same specificity, so source order decides. The header is a
   column at this width, where auto would push the pill to the far right
   on a line of its own. */
@media (max-width: 520px) {
  .prod-module-explore-link {
    margin-left: 0;
    align-self: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prod-module-explore-arrow { transition: none; }
  .prod-module-explore-link:hover .prod-module-explore-arrow { transform: none; }
}

/* ── Instruments coverage — the companion card ────────────────
   Deliberately *not* a seventh entry in .prod-modules-stack. The
   section heading counts six, and a card inside that stack with the
   same styling would read as a seventh module however it was labelled.
   It gets its own heading, a reference eyebrow in place of the
   "Module n of 6" index, and a tinted ground, so the difference is
   visible before the label is read. */

.prod-modules-companion {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--color-border);
}

.prod-companion-eyebrow {
  margin: 0 0 18px;
}

.prod-module-block--reference {
  background: #f8fafc;
  border-top-color: var(--color-border);
}

.prod-module-block--reference:hover,
.prod-module-block--reference:focus-within {
  border-top-color: var(--color-border);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

.prod-module-index--reference {
  color: var(--color-green-dark);
}