/* =========================================================================
   Platform Visualization - Hibba
   D3-inspired visual enhancements for the Platform Overview page.
   Hero constellation, workflow pipeline, grid connections, tier orbits.
   ========================================================================= */

/* ---- Tier colour tokens ---- */
:root {
  --tier-free: #2D6A4F;
  --tier-pro: #C9A84C;
  --tier-business: #2A7B6F;
  --tier-enterprise: #E0E0E0;
}

/* =======================================================================
   1. Hero Constellation Canvas
   ======================================================================= */
.page-hero--platform {
  overflow: hidden;
}

/* =======================================================================
   2. Investment Workflow Pipeline - JS-Driven Interactive Bubbles
   ======================================================================= */
.workflow-section {
  background: var(--color-cream-light);
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
}

/* Kill any canvas injected by particles or constellation - but allow pipeline's own */
.workflow-section > canvas,
.workflow-section canvas[aria-hidden] {
  display: none !important;
}

.workflow-section canvas.workflow-canvas {
  display: block !important;
}

/* Scrolling container with edge fade */
.workflow-scroll {
  overflow: hidden;
  position: relative;
  padding: var(--space-xl) 0 var(--space-2xl);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
}

.workflow-scroll--dragging {
  cursor: grabbing;
}

/* Track: taller to fit zigzag layout */
.workflow-scroll__track {
  position: relative;
  height: 240px;
}

/* Items: absolutely positioned, JS drives translate3d */
.workflow-scroll__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  cursor: pointer;
  will-change: transform, opacity;
  transition: none;
}

/* "Up" items: label on top, node on bottom */
.workflow-scroll__item--up {
  flex-direction: column-reverse;
}

/* Hovered item: gold glow on the node */
.workflow-scroll__item--hovered {
  z-index: 2;
}
.workflow-scroll__item--hovered .workflow-scroll__node {
  box-shadow: 0 4px 16px rgba(27, 67, 50, 0.25), 0 0 18px rgba(201, 168, 76, 0.4);
}

/* Click pulse feedback */
@keyframes hexPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.workflow-scroll__item--pulse .workflow-scroll__node {
  animation: hexPulse 0.5s ease-out;
}

/* Rounded-square node */
.workflow-scroll__node {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--color-green-dark) 0%, #2D6A4F 50%, var(--color-green-dark) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(27, 67, 50, 0.22);
}

/* Tier colour variants */
.workflow-scroll__node--free {
  background: linear-gradient(145deg, #1B4332 0%, #2D6A4F 50%, #1B4332 100%);
  box-shadow: 0 4px 14px rgba(27, 67, 50, 0.25);
}
.workflow-scroll__node--pro {
  background: linear-gradient(145deg, #a8872e 0%, #C9A84C 50%, #a8872e 100%);
  box-shadow: 0 4px 14px rgba(201, 168, 76, 0.25);
}
.workflow-scroll__node--business {
  background: linear-gradient(145deg, #1e5e54 0%, #2A7B6F 50%, #1e5e54 100%);
  box-shadow: 0 4px 14px rgba(42, 123, 111, 0.25);
}
.workflow-scroll__node--enterprise {
  background: linear-gradient(145deg, #1a1d1e 0%, #2D3436 50%, #1a1d1e 100%);
  box-shadow: 0 4px 14px rgba(45, 52, 54, 0.30);
}

.workflow-scroll__num {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
}

.workflow-scroll__label {
  font-size: 0.75rem;
  color: var(--color-charcoal);
  text-align: center;
  max-width: 110px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* =======================================================================
   3. Enhanced Tool Grid with Connection Lines
   ======================================================================= */

/* Wrapper holds the SVG overlay behind the grid */
.tool-grid-wrapper {
  position: relative;
}

.tool-grid-wrapper .connection-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.tool-grid-wrapper .tool-grid {
  position: relative;
  z-index: 1;
}

/* Connection paths */
.connection-path {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 1.5;
  opacity: 0.08;
  transition: opacity 0.3s ease;
}

.connection-path--highlight {
  opacity: 0.35;
  stroke-width: 2;
}

/* Tier glow dot on each card */
.tool-card[data-tier] {
  position: relative;
}

.tool-card[data-tier]::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  z-index: 2;
}

.tool-card[data-tier="free"]::before {
  background: var(--tier-free);
  box-shadow: 0 0 8px var(--tier-free);
}

.tool-card[data-tier="pro"]::before {
  background: var(--tier-pro);
  box-shadow: 0 0 8px var(--tier-pro);
}

.tool-card[data-tier="business"]::before {
  background: var(--tier-business);
  box-shadow: 0 0 8px var(--tier-business);
}

.tool-card[data-tier="enterprise"]::before {
  background: #636e72;
  box-shadow: 0 0 8px rgba(45, 52, 54, 0.5);
}

/* Tier hover glows */
.tool-card[data-tier="free"]:hover {
  box-shadow: 0 0 24px rgba(45, 106, 79, 0.2);
}

.tool-card[data-tier="pro"]:hover {
  box-shadow: 0 0 24px rgba(201, 168, 76, 0.25);
}

.tool-card[data-tier="business"]:hover {
  box-shadow: 0 0 24px rgba(42, 123, 111, 0.2);
}

.tool-card[data-tier="enterprise"]:hover {
  box-shadow: 0 0 24px rgba(45, 52, 54, 0.2);
}

/* Connected card highlight (on hover of another card) */
.tool-card--connected {
  border-color: var(--color-gold-light) !important;
  box-shadow: 0 0 20px rgba(201, 168, 76, 0.15) !important;
}

/* Stagger entrance - only active when JS adds .tool-grid--stagger */
@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tool-grid--stagger .tool-card[data-tool] {
  opacity: 0;
}

.tool-card--visible {
  animation: cardEntrance 0.5s ease forwards;
  animation-delay: var(--stagger-delay, 0ms);
}

/* =======================================================================
   4. Network / Pipeline Visualisation (toggle section)
   ======================================================================= */
.netpipe-section {
  overflow: visible;
  position: relative;
  background: #1c1f2e;
  padding: 5rem 0 4rem;
}

.netpipe-section .section-label {
  color: var(--color-gold);
}

.netpipe-section .section-title {
  color: #fff;
}

.netpipe-section .section-subtitle {
  color: rgba(255, 255, 255, 0.65);
}

/* Tab toggle */
.netpipe-tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 2.5rem;
}

.netpipe-tab {
  padding: 0.7rem 2rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.25s ease;
}

.netpipe-tab:first-child {
  border-radius: 100px 0 0 100px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.netpipe-tab:last-child {
  border-radius: 0 100px 100px 0;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.netpipe-tab--active {
  background: rgba(201, 168, 76, 0.15);
  border-color: var(--color-gold);
  color: #fff;
}

.netpipe-tab:hover:not(.netpipe-tab--active) {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.85);
}

/* Viz container (holds both views) */
.netpipe-canvas {
  position: relative;
  width: 100%;
  max-width: none !important;
  margin: 0;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  min-height: 520px;
  outline: none !important;
  box-shadow: none !important;
}

.netpipe-view {
  display: none;
  width: 100%;
  border: none !important;
  outline: none !important;
  background: transparent !important;
}

.netpipe-view--active {
  display: block;
}

.netpipe-view svg {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  border: none !important;
  outline: none !important;
  background: transparent !important;
}

/* Network view connection lines */
.netpipe-line {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1;
  fill: none;
  transition: stroke 0.4s ease, stroke-width 0.4s ease, opacity 0.4s ease;
}

.netpipe-line--highlight {
  stroke: var(--color-gold);
  stroke-width: 2;
  opacity: 0.6;
}

/* Network node group */
.netpipe-node {
  cursor: grab;
}

.netpipe-node--dragging {
  cursor: grabbing;
}

.netpipe-node__ring {
  fill: none;
  stroke-width: 2;
  opacity: 0.3;
  transition: opacity 0.3s ease, stroke-width 0.3s ease, filter 0.3s ease;
}

.netpipe-node:hover .netpipe-node__ring {
  opacity: 0.7;
  stroke-width: 3;
  filter: drop-shadow(0 0 10px currentColor);
}

.netpipe-node__bg {
  fill: currentColor;
  transition: filter 0.3s ease;
}

.netpipe-node__abbr {
  fill: #fff;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.netpipe-node__label {
  fill: rgba(255, 255, 255, 0.85);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-anchor: middle;
  pointer-events: none;
  transition: fill 0.3s ease;
}

.netpipe-node:hover .netpipe-node__label {
  fill: #fff;
}

/* 3-tier highlight states */
/* 3-tier glow: dragged → connections → tertiary */
.netpipe-view svg.np--active .netpipe-node { opacity: 0.08; transition: opacity 0.4s; }
.netpipe-view svg.np--active .netpipe-line { opacity: 0.02; }

/* Tier 1 - dragged node: full glow */
.netpipe-view svg.np--active .netpipe-node--tier1 { opacity: 1; }
.netpipe-view svg.np--active .netpipe-node--tier1 .netpipe-node__ring {
  opacity: 1; stroke-width: 4; filter: drop-shadow(0 0 18px currentColor);
}
.netpipe-view svg.np--active .netpipe-node--tier1 .netpipe-node__label { fill: #fff; }
.netpipe-view svg.np--active .netpipe-line--t1 { opacity: 1; stroke: rgba(255,255,255,0.4); stroke-width: 2.5; }

/* Tier 2 - direct connections: medium glow */
.netpipe-view svg.np--active .netpipe-node--tier2 { opacity: 0.7; }
.netpipe-view svg.np--active .netpipe-node--tier2 .netpipe-node__ring { opacity: 0.6; stroke-width: 2.5; filter: drop-shadow(0 0 8px currentColor); }
.netpipe-view svg.np--active .netpipe-node--tier2 .netpipe-node__label { fill: rgba(255,255,255,0.8); }

/* Tier 3 - secondary connections: soft glow */
.netpipe-view svg.np--active .netpipe-node--tier3 { opacity: 0.35; }
.netpipe-view svg.np--active .netpipe-node--tier3 .netpipe-node__ring { opacity: 0.3; filter: drop-shadow(0 0 4px currentColor); }
.netpipe-view svg.np--active .netpipe-node--tier3 .netpipe-node__label { fill: rgba(255,255,255,0.45); }
.netpipe-view svg.np--active .netpipe-line--t2 { opacity: 0.5; stroke: rgba(255,255,255,0.15); stroke-width: 1.5; }

/* Category colours - Apps page */
.netpipe-cat--scoring { color: #4ECDC4; }
.netpipe-cat--scoring .netpipe-node__ring { stroke: #6FE8DE; }

.netpipe-cat--analysis { color: #9B8FE4; }
.netpipe-cat--analysis .netpipe-node__ring { stroke: #B8AEFF; }

.netpipe-cat--management { color: #B07FE4; }
.netpipe-cat--management .netpipe-node__ring { stroke: #CA9FFF; }

.netpipe-cat--cost { color: #6BCB8B; }
.netpipe-cat--cost .netpipe-node__ring { stroke: #8EEAAA; }

/* Dark abbr text on light fills - Apps */
.netpipe-cat--scoring .netpipe-node__abbr { fill: #0a1a18; }
.netpipe-cat--cost .netpipe-node__abbr { fill: #0a1a10; }

/* Category colours - Services page */
.netpipe-cat--svc-build { color: #6BCB8B; }
.netpipe-cat--svc-build .netpipe-node__ring { stroke: #8EEAAA; }

.netpipe-cat--svc-design { color: #D4B870; }
.netpipe-cat--svc-design .netpipe-node__ring { stroke: #E8D090; }

.netpipe-cat--svc-finishes { color: #4ECDC4; }
.netpipe-cat--svc-finishes .netpipe-node__ring { stroke: #6FE8DE; }

.netpipe-cat--svc-compliance { color: #9B8FE4; }
.netpipe-cat--svc-compliance .netpipe-node__ring { stroke: #B8AEFF; }

.netpipe-cat--svc-sales { color: #E8A87C; }
.netpipe-cat--svc-sales .netpipe-node__ring { stroke: #FFBFA0; }

.netpipe-cat--svc-custom { color: rgba(255,255,255,0.4); }
.netpipe-cat--svc-custom .netpipe-node__bg { fill: transparent; }
.netpipe-cat--svc-custom .netpipe-node__ring { stroke: rgba(255,255,255,0.3); stroke-dasharray: 5 4; opacity: 0.6; }
.netpipe-cat--svc-custom .netpipe-node__abbr { fill: rgba(255,255,255,0.5); }

/* Custom App (consultancy) - center node on platform network */
.netpipe-node--custom { transition: opacity 0.3s ease; }
.netpipe-node--custom circle,
.netpipe-node--custom line { transition: all 0.3s ease; }
.netpipe-node--custom .netpipe-node__label { transition: fill 0.3s ease; }
/* Dim custom node slightly when tier highlighting is active (dragging another node) */
.netpipe-view svg.np--active .netpipe-node--custom { opacity: 0.25; }

/* Dark abbr text on light fills - Services */
.netpipe-cat--svc-build .netpipe-node__abbr { fill: #0a1a10; }
.netpipe-cat--svc-finishes .netpipe-node__abbr { fill: #0a1a18; }
.netpipe-cat--svc-design .netpipe-node__abbr { fill: #1a1200; }
.netpipe-cat--svc-sales .netpipe-node__abbr { fill: #1a0e06; }

/* Legend */
.netpipe-legend {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.netpipe-legend__item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 16px;
  border: 1px solid transparent;
  transition: all 0.25s ease;
  user-select: none;
}
.netpipe-legend__item:hover {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.06);
}
.netpipe-legend__item--active {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
.netpipe-legend--filtering .netpipe-legend__item:not(.netpipe-legend__item--active) {
  opacity: 0.4;
}

.netpipe-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.netpipe-legend__dot--scoring { background: #4ECDC4; box-shadow: 0 0 6px #4ECDC4; }
.netpipe-legend__dot--analysis { background: #9B8FE4; box-shadow: 0 0 6px #9B8FE4; }
.netpipe-legend__dot--management { background: #B07FE4; box-shadow: 0 0 6px #B07FE4; }
.netpipe-legend__dot--cost { background: #6BCB8B; box-shadow: 0 0 6px #6BCB8B; }

/* Services page legend dots */
.netpipe-legend__dot--svc-build { background: #6BCB8B; box-shadow: 0 0 6px #6BCB8B; }
.netpipe-legend__dot--svc-design { background: #D4B870; box-shadow: 0 0 6px #D4B870; }
.netpipe-legend__dot--svc-finishes { background: #4ECDC4; box-shadow: 0 0 6px #4ECDC4; }
.netpipe-legend__dot--svc-compliance { background: #9B8FE4; box-shadow: 0 0 6px #9B8FE4; }
.netpipe-legend__dot--svc-sales { background: #E8A87C; box-shadow: 0 0 6px #E8A87C; }

/* Pipeline view */
.netpipe-pipe-line {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1.5;
  fill: none;
}

.netpipe-pipe-stage-label {
  fill: #B8AEFF;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.netpipe-pipe-root-label {
  fill: #fff;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
}

.netpipe-pipe-root-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 2;
}

.netpipe-pipe-stage-ring {
  fill: none;
  stroke-width: 2;
}

.netpipe-pipe-tool-dot {
  fill: none;
  stroke-width: 2;
}

.netpipe-pipe-tool-label {
  fill: rgba(255, 255, 255, 0.7);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
}

.netpipe-pipe-tool {
  cursor: pointer;
}

.netpipe-pipe-tool:hover .netpipe-pipe-tool-label {
  fill: #fff;
}

.netpipe-pipe-tool:hover .netpipe-pipe-tool-dot {
  filter: brightness(1.4) drop-shadow(0 0 6px currentColor);
}

/* =======================================================================
   5. Tier Orbits Visualisation
   ======================================================================= */
.tier-orbits-section {
  background: var(--color-charcoal);
  overflow: hidden;
  padding: var(--space-5xl) 0;
}

.tier-orbits {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 1;
}

.tier-orbits svg {
  width: 100%;
  height: 100%;
}

.tier-orbit-ring {
  fill: none;
  stroke-dasharray: 6 4;
  transform-box: fill-box;
  transform-origin: center;
}

.tier-orbit-ring--free {
  stroke: var(--tier-free);
  stroke-width: 1.5;
  animation: orbitSpin 60s linear infinite;
}

.tier-orbit-ring--pro {
  stroke: var(--tier-pro);
  stroke-width: 1.5;
  animation: orbitSpin 80s linear infinite reverse;
}

.tier-orbit-ring--business {
  stroke: var(--tier-business);
  stroke-width: 1.5;
  animation: orbitSpin 100s linear infinite;
}

.tier-orbit-ring--enterprise {
  stroke: rgba(224, 224, 224, 0.35);
  stroke-width: 1.5;
  animation: orbitSpin 120s linear infinite reverse;
}

@keyframes orbitSpin {
  to {
    transform: rotate(360deg);
  }
}

.tier-orbit-dot {
  cursor: pointer;
}

.tier-orbit-dot circle {
  transition: r 0.2s ease, filter 0.2s ease;
}

.tier-orbit-dot:hover circle {
  filter: brightness(1.4);
}

.tier-orbit-tooltip {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
}

.tier-orbit-dot:hover .tier-orbit-tooltip {
  opacity: 1;
}

/* Centre icon */
.tier-orbits__centre {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  opacity: 0.7;
  pointer-events: none;
}

/* ---- Mobile Tier Bars (fallback for <640px) ---- */
.tier-bars {
  display: none;
}

.tier-bar {
  margin-bottom: var(--space-lg);
}

.tier-bar__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: #fff;
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tier-bar__track {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.tier-bar__tool {
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--border-radius);
  font-size: var(--text-xs);
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tier-bar__tool:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.tier-bar__tool--free { background: var(--tier-free); }
.tier-bar__tool--pro { background: var(--tier-pro); color: #1a1a1a; }
.tier-bar__tool--business { background: var(--tier-business); }
.tier-bar__tool--enterprise { background: #636e72; }

.tier-bar__label span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

/* =======================================================================
   6. Feature Tool Card (full-width hero card in tier groups)
   ======================================================================= */

.tool-card--feature {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-2xl);
  align-items: center;
  padding: var(--space-2xl);
  border-left-width: 6px;
  border-left-style: solid;
}

.tool-card--feature .tool-card__pain {
  font-size: var(--text-2xl);
  font-family: var(--font-heading);
  font-style: italic;
  line-height: 1.3;
  color: var(--color-grey-dark);
}

.tool-card--feature .tool-card__title {
  font-size: var(--text-3xl);
}

.tool-card--feature .tool-card__text {
  font-size: var(--text-base);
}

/* Feature card tier border colours */
.tool-card--feature[data-tier="free"] {
  border-left-color: var(--tier-free);
}

.tool-card--feature[data-tier="pro"] {
  border-left-color: var(--tier-pro);
}

.tool-card--feature[data-tier="business"] {
  border-left-color: var(--tier-business);
}

.tool-card--feature[data-tier="enterprise"] {
  border-left-color: var(--color-charcoal);
}


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

/* Feature card mobile */
@media (max-width: 768px) {
  .tool-card--feature {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .tool-card--feature .tool-card__pain {
    font-size: var(--text-lg);
  }
}

/* Workflow scroll on small screens */
@media (max-width: 640px) {
  .workflow-scroll__track {
    height: 190px;
  }

  .workflow-scroll__node {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }

  .workflow-scroll__num {
    font-size: 1rem;
  }

  .workflow-scroll__label {
    font-size: 0.6875rem;
    max-width: 90px;
  }

  /* Tier orbits → bars */
  .tier-orbits {
    display: none;
  }

  .tier-orbits__centre {
    display: none;
  }

  .tier-bars {
    display: block;
  }
}

/* Network / Pipeline responsive */
@media (max-width: 768px) {
  .netpipe-canvas {
    min-height: 400px;
  }

  .netpipe-tab {
    padding: 0.55rem 1.4rem;
    font-size: 0.85rem;
  }

  .netpipe-legend {
    gap: 1rem;
  }

  .netpipe-legend__item {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .netpipe-canvas {
    min-height: 320px;
  }

  .netpipe-tab {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
  }

  .netpipe-node__abbr {
    font-size: 13px;
  }

  .netpipe-node__label {
    font-size: 10.5px;
  }

  .netpipe-legend {
    gap: 0.8rem;
  }

  .netpipe-legend__item {
    font-size: 0.75rem;
  }
}

/* Connection SVG hidden on mobile / tablet */
@media (max-width: 768px) {
  .connection-svg {
    display: none !important;
  }
}

/* Small phones (414px and below) */
@media (max-width: 414px) {
  .workflow-scroll__node {
    width: 44px;
    height: 44px;
    border-radius: 10px;
  }

  .workflow-scroll__num {
    font-size: 0.875rem;
  }

  .workflow-scroll__label {
    font-size: 0.625rem;
    max-width: 72px;
  }

  .workflow-scroll__track {
    height: 170px;
    gap: 4px;
  }

  .workflow-scroll {
    -webkit-mask-image: linear-gradient(to right, transparent 3%, black 8%, black 92%, transparent 97%);
    mask-image: linear-gradient(to right, transparent 3%, black 8%, black 92%, transparent 97%);
  }

  .netpipe-canvas {
    min-height: 280px;
  }

  .netpipe-tab {
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
  }

  .netpipe-tabs {
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
  }

  .netpipe-node__abbr {
    font-size: 11px;
  }

  .netpipe-node__label {
    font-size: 9.5px;
  }

  .netpipe-legend {
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .netpipe-legend__item {
    font-size: 0.6875rem;
  }

  .tier-bar__label {
    font-size: 0.75rem;
  }

  .tier-bar__tools {
    font-size: 0.6875rem;
  }
}

/* =======================================================================
   Reduced Motion
   ======================================================================= */
@media (prefers-reduced-motion: reduce) {
  .workflow-scroll {
    -webkit-mask-image: none;
    mask-image: none;
    cursor: default;
  }

  .workflow-scroll__track {
    display: flex;
    position: static;
    height: auto;
    gap: 2.5rem;
    justify-content: center;
    flex-wrap: wrap;
  }

  .workflow-scroll__item {
    position: static;
    cursor: default;
    will-change: auto;
  }

  .workflow-section canvas.workflow-canvas {
    display: none !important;
  }

  .tier-orbit-ring--free,
  .tier-orbit-ring--pro,
  .tier-orbit-ring--business,
  .tier-orbit-ring--enterprise {
    animation: none;
  }

  .tool-card--visible {
    animation: none;
    opacity: 1 !important;
    transform: none !important;
  }

  .tool-grid--stagger .tool-card[data-tool] {
    opacity: 1;
  }

  .netpipe-node__ring,
  .netpipe-line {
    transition: none;
  }
}

/* =======================================================================
   Print
   ======================================================================= */
@media print {
  .connection-svg,
  .tier-orbits-section,
  .page-hero--platform canvas {
    display: none !important;
  }

  .tool-grid--stagger .tool-card[data-tool] {
    opacity: 1 !important;
  }

  .tool-card[data-tier]::before {
    display: none;
  }

  .netpipe-section {
    background: #fff;
  }

  .netpipe-section .section-title {
    color: #000;
  }

  .netpipe-canvas {
    border-color: #ccc;
  }
}