/**
 * company: cube one GmbH
 * name: automation-pyramid.css
 * author: Thomas Schäfer
 * created: 27.08.2026
 * change log: 07.09.2026 – Thomas Schäfer – Strand label badges use diagonal
 *             cube-frame radius (--radius-sm) instead of pill form.
 * change log: 27.08.2026 – Thomas Schäfer – Interactive GxP automation pyramid
 *             for Produktionsanlagen-Qualifizierung (DE/EN shared).
 *             Mobile: constrain pyramid and header to avoid horizontal overflow.
 *             28.08.2026 – Thomas Schäfer – Saturated per-level fills so the
 *             pyramid separates from the anthracite detail cube; soft CTA uses
 *             the primary button treatment with orange hover glow.
 *             04.09.2026 – Thomas Schäfer – Dropped the .ap-soft-cta box-shadow
 *             overrides: they flattened the button by replacing the global
 *             four-layer shadow, and the global cast shadow is warm now anyway.
 *             28.08.2026 – Thomas Schäfer – Removed unused .ap-kicker; halved
 *             .ap-section padding-top (bottom padding unchanged).
 *             28.08.2026 – Thomas Schäfer – Scope PDF control (.btn-secondary)
 *             is a readable muted secondary in idle/disabled and enabled
 *             states (no UA ButtonText-on-transparent, no opacity fade).
 *             28.08.2026 – Thomas Schäfer – Pyramid layers L4–L0 are an orange
 *             peach-to-rust ramp (no teal/blue); hover fills stay AA on #F5F5F5.
 *             28.08.2026 – Thomas Schäfer – Cube-frame hover on .split-card,
 *             .ap-check and .reg-card matches site cards (accent border +
 *             1px ring + 28px --accent-glow on hover/focus-visible).
 *             28.08.2026 – Thomas Schäfer – Pyramid sides share one interpolated
 *             diagonal (no stepped silhouette); stack gap 0.35rem → 0.65rem.
 *             28.08.2026 – Thomas Schäfer – Layer hover/selection uses a
 *             clip-safe orange cube-frame (drop-shadow + inset press +
 *             scale 0.98), matching the dark glass button language.
 *             06.09.2026 – Thomas Schäfer – Colored prod-services band
 *             (pills, insight panels, strand cards) for Leistungen section.
 *             06.09.2026 – Thomas Schäfer – Unified muted regulatory pills;
 *             suppress content-main list chevrons on pill row.
 *             06.09.2026 – Thomas Schäfer – Three-column grid for ap-docs list.
 *             06.09.2026 – Thomas Schäfer – Regulatory reg-line with pipe separators.
 *             06.09.2026 – Thomas Schäfer – Regularien label and official source links.
 */

.ap-section {
  padding: clamp(1rem, 3vw, 2.5rem) 0 clamp(2rem, 6vw, 5rem);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.ap-model-note {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  padding-bottom: clamp(0.5rem, 2vw, 1.25rem);
}

.ap-header {
  max-width: 46rem;
  margin: 0 auto 2rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ap-header h2,
.ap-header p {
  overflow-wrap: anywhere;
}

.ap-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  min-width: 0;
}

@media (min-width: 1024px) {
  .ap-layout {
    grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr);
    gap: 2rem;
  }
}

.ap-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 1.25rem 1.25rem 1.5rem;
  isolation: isolate;
  overflow: visible;
}

.ap-flow {
  position: absolute;
  top: 0.75rem;
  bottom: 0.75rem;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    rgba(249, 115, 22, 0) 0%,
    rgba(249, 115, 22, 0.55) 18%,
    rgba(249, 115, 22, 0.55) 82%,
    rgba(249, 115, 22, 0) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.ap-flow-dot {
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px 2px rgba(249, 115, 22, 0.65);
  animation: ap-signal 6s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.ap-flow-dot:nth-child(2) {
  animation-delay: -2s;
}

.ap-flow-dot:nth-child(3) {
  animation-delay: -4s;
}

@keyframes ap-signal {
  0% {
    top: 92%;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    top: 6%;
    opacity: 0;
  }
}

/*
 * Shared virtual trapezoid so L4–L0 sides are one straight diagonal.
 * Top T=42%, bottom B=100%, 5 equal-height bands, gap ratio g=0.13
 * (0.65rem gap / ~5rem band). H = 5 + 4g = 5.52.
 * width(y) = T + (B - T) * (y / H)
 * inset(y) = (100% - width(y)) / 2
 * Layer k from the top: y0 = k * (1 + g), y1 = y0 + 1
 */
.ap-stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 0.65rem;
  overflow: visible;
}

.ap-level {
  --ap-press-scale: 0.98;
  --ap-hover-inset: inset 0 2px 8px rgba(0, 0, 0, 0.45);
  --ap-hover-filter:
    drop-shadow(1px 0 0 var(--accent))
    drop-shadow(-1px 0 0 var(--accent))
    drop-shadow(0 1px 0 var(--accent))
    drop-shadow(0 -1px 0 var(--accent))
    drop-shadow(0 0 8px var(--accent))
    drop-shadow(0 0 22px rgba(249, 115, 22, 0.55))
    drop-shadow(0 0 28px var(--accent-glow));
  --ap-clip:
    polygon(
      var(--ap-inset-top) 0,
      calc(100% - var(--ap-inset-top)) 0,
      calc(100% - var(--ap-inset-bottom)) 100%,
      var(--ap-inset-bottom) 100%
    );
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  min-width: 0;
  padding: 0.75rem var(--ap-pad-x, 1rem);
  color: #F5F5F5;
  text-align: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  overflow: visible;
  opacity: 0;
  transform: translateY(12px);
  filter: drop-shadow(0 0 0 transparent);
  transition:
    opacity 0.4s ease,
    transform 0.35s ease,
    filter 0.2s ease;
}

/*
 * Fill lives on ::before so clip-path does not clip the layer's
 * drop-shadow. Filter on .ap-level then follows the trapezoid alpha.
 */
.ap-level::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ap-fill);
  border: 1.5px solid var(--ap-edge);
  border-radius: var(--radius-md);
  clip-path: var(--ap-clip);
  box-shadow: var(--bento-lift, 0 8px 18px rgba(0, 0, 0, 0.35));
  pointer-events: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.ap-section.is-reveal-ready .ap-level,
.ap-section.is-static .ap-level {
  opacity: 1;
  transform: none;
}

.ap-section.is-reveal-ready .ap-level[data-level="0"] {
  transition-delay: 0ms;
}

.ap-section.is-reveal-ready .ap-level[data-level="1"] {
  transition-delay: 100ms;
}

.ap-section.is-reveal-ready .ap-level[data-level="2"] {
  transition-delay: 200ms;
}

.ap-section.is-reveal-ready .ap-level[data-level="3"] {
  transition-delay: 300ms;
}

.ap-section.is-reveal-ready .ap-level[data-level="4"] {
  transition-delay: 400ms;
}

.ap-level[data-level="4"] {
  --ap-inset-top: 29%;
  --ap-inset-bottom: 23.75%;
  --ap-pad-x: 26%;
  --ap-fill: #A1520C;
  --ap-fill-bright: #AB570D;
  --ap-edge: rgba(253, 186, 116, 0.75);
}

.ap-level[data-level="3"] {
  --ap-inset-top: 23.07%;
  --ap-inset-bottom: 17.81%;
  --ap-pad-x: 20%;
  --ap-fill: #8E3F0B;
  --ap-fill-bright: #98440B;
  --ap-edge: rgba(251, 191, 36, 0.7);
}

.ap-level[data-level="2"] {
  --ap-inset-top: 17.13%;
  --ap-inset-bottom: 11.87%;
  --ap-pad-x: 14%;
  --ap-fill: #7B3709;
  --ap-fill-bright: #853B0A;
  --ap-edge: rgba(251, 146, 60, 0.75);
}

.ap-level[data-level="1"] {
  --ap-inset-top: 11.19%;
  --ap-inset-bottom: 5.94%;
  --ap-pad-x: 8%;
  --ap-fill: #722F09;
  --ap-fill-bright: #7B3309;
  --ap-edge: rgba(249, 115, 22, 0.8);
}

.ap-level[data-level="0"] {
  --ap-inset-top: 5.25%;
  --ap-inset-bottom: 0%;
  --ap-pad-x: 4%;
  --ap-fill: #5F2107;
  --ap-fill-bright: #682508;
  --ap-edge: rgba(249, 115, 22, 0.95);
}

/*
 * Fill is clipped on ::before. Filter on .ap-level follows that
 * trapezoid alpha so the orange cube-frame is not clipped. Inset
 * press stays on ::before. Scale needs higher specificity than
 * the reveal reset.
 */
.ap-level:is(:hover, :focus-visible, :active, .is-active, [aria-selected="true"]) {
  z-index: 2;
  color: #F5F5F5;
  filter: var(--ap-hover-filter);
  outline: none;
}

.ap-level:is(:hover, :focus-visible, :active, .is-active, [aria-selected="true"])::before {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--ap-fill) 72%, #080808);
  box-shadow: var(--ap-hover-inset);
}

.ap-level:active::before {
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.55);
}

.ap-section.is-reveal-ready .ap-level:is(:hover, :focus-visible, :active, .is-active, [aria-selected="true"]),
.ap-section.is-static .ap-level:is(:hover, :focus-visible, :active, .is-active, [aria-selected="true"]) {
  transform: scale(var(--ap-press-scale));
  transition-delay: 0ms;
}

.ap-level-idx {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #F5F5F5;
}

.ap-level-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 1.6vw, 1.05rem);
  font-weight: 600;
  line-height: 1.3;
  color: #F5F5F5;
}

.ap-level-systems {
  display: block;
  font-size: 0.75rem;
  color: #F5F5F5;
  margin-top: 0.15rem;
  overflow-wrap: anywhere;
}

.ap-hint,
.ap-soft-cta {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
}

.ap-hint {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-align: center;
}

.ap-soft-cta {
  margin-top: 1rem;
}

.ap-soft-cta .btn {
  display: flex;
  width: 100%;
  min-height: 44px;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.ap-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  min-height: 0;
  min-width: 0;
  max-width: 100%;
}

.ap-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.ap-panel-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.ap-panel-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  margin: 0.2rem 0 0;
}

.ap-close {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.ap-close:hover,
.ap-close:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.ap-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}

.ap-toggle-btn {
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.ap-toggle-btn:hover,
.ap-toggle-btn:focus-visible {
  border-color: var(--accent);
  color: var(--text-primary);
  outline: none;
}

.ap-toggle-btn[aria-pressed="true"] {
  background: rgba(249, 115, 22, 0.16);
  border-color: var(--accent);
  color: var(--text-primary);
}

.ap-detail[hidden] {
  display: none;
}

.ap-method[hidden] {
  display: none;
}

.ap-detail p,
.ap-method p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.ap-detail h3,
.ap-v-title {
  font-size: 0.875rem;
  font-weight: 700;
  margin: 1.25rem 0 0.5rem;
}

.ap-list {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
}

.ap-list li {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.65;
  margin-bottom: 0.35rem;
}

.ap-v {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.4rem 0.5rem;
  align-items: center;
  margin: 0.75rem 0 1.25rem;
}

.ap-v-phase {
  min-height: 44px;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-muted, var(--text-secondary));
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

.ap-v-phase.is-on {
  border-color: var(--accent);
  background: rgba(249, 115, 22, 0.12);
  color: var(--text-primary);
}

.ap-v-phase--left {
  grid-column: 1;
}

.ap-v-phase--mid {
  grid-column: 2;
}

.ap-v-phase--right {
  grid-column: 3;
}

.ap-v-rail {
  grid-column: 1 / -1;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    rgba(255, 255, 255, 0.18) 50%,
    var(--accent) 100%
  );
  opacity: 0.45;
}

.ap-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.ap-cta-row .btn {
  max-width: 100%;
  white-space: normal;
}

/*
 * .btn-secondary is not defined in the global stylesheet. The reset
 * `button { background: none }` plus UA `color: ButtonText` (near-black)
 * made the PDF control disappear on --bg-card. Fill, label and border stay
 * explicit in both states so the control stays secondary to .btn-primary
 * without dropping below WCAG AA (enabled #F5F5F5 on #1E1E1E ≈ 15.5:1;
 * disabled #A3A3A3 on #1E1E1E ≈ 6.6:1).
 */
.ap-cta-row .btn-secondary {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  -webkit-text-fill-color: var(--text-primary);
  border: 1.5px solid var(--border-strong);
  text-decoration: none;
  opacity: 1;
}

.ap-cta-row .btn-secondary::after {
  animation: none;
  opacity: 0;
}

.ap-cta-row .btn-secondary:hover:not(:disabled),
.ap-cta-row .btn-secondary:focus-visible:not(:disabled) {
  background: var(--bg-card-hover);
  border-color: var(--accent);
  color: var(--text-primary);
  -webkit-text-fill-color: var(--text-primary);
  transform: translateY(-2px);
}

.ap-cta-row .btn-secondary:focus-visible {
  outline: 3px solid var(--text-primary);
  outline-offset: 3px;
}

.ap-cta-row .btn-secondary:disabled {
  background: var(--bg-card-hover);
  color: var(--text-secondary);
  -webkit-text-fill-color: var(--text-secondary);
  border-color: var(--border-strong);
  opacity: 1;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ap-scope {
  margin-top: 2.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.ap-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.25rem;
}

.ap-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  cursor: pointer;
  overflow: visible;
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.ap-check:hover,
.ap-check:focus-visible,
.ap-check:focus-within {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 28px var(--accent-glow);
}

.ap-check input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.ap-check-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ap-check-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.ap-check-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.ap-docs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem 1.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.ap-docs li {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.65;
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .ap-docs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .ap-docs {
    grid-template-columns: 1fr;
  }
}

.ap-docs-empty {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.reg-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}

.reg-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-height: 100%;
  overflow: visible;
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.reg-card:hover,
.reg-card:focus-visible,
.reg-card:focus-within {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 28px var(--accent-glow);
}

.reg-card a {
  font-weight: 600;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.reg-card p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.split-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.split-card {
  padding: 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: visible;
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.split-card:hover,
.split-card:focus-visible,
.split-card:focus-within {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 28px var(--accent-glow);
}

.split-card h3 {
  margin-top: 0;
  font-size: 1rem;
}

.split-card p {
  margin-bottom: 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

html:not(.js) .ap-detail,
html:not(.js) .ap-method,
html:not(.js) .ap-detail[hidden],
html:not(.js) .ap-method[hidden] {
  display: block;
}

@media (min-width: 768px) {
  .ap-close {
    display: none;
  }
}

@media (max-width: 767px) {
  .ap-visual {
    padding: 0;
  }

  .ap-flow,
  .ap-flow-dot {
    display: none;
  }

  .ap-stack {
    width: 100%;
    gap: 0.75rem;
  }

  .ap-level {
    width: 100%;
    --ap-pad-x: 1rem;
    --ap-clip: none;
    align-items: flex-start;
    text-align: left;
  }

  .ap-layout {
    display: flex;
    flex-direction: column;
  }

  .ap-panel {
    order: 2;
  }

  .ap-visual {
    order: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ap-level,
  .ap-flow-dot {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }

  .ap-section.is-reveal-ready .ap-level:is(:hover, :focus-visible, :active, .is-active, [aria-selected="true"]),
  .ap-section.is-static .ap-level:is(:hover, :focus-visible, :active, .is-active, [aria-selected="true"]) {
    transform: none;
  }

  .ap-flow-dot {
    display: none;
  }
}

@media print {
  .ap-flow,
  .ap-flow-dot,
  .ap-close,
  .nav-actions,
  .page-cta,
  #footer-placeholder,
  .navbar {
    display: none !important;
  }

  .ap-level,
  .ap-detail,
  .ap-method {
    display: block !important;
    opacity: 1 !important;
    position: static;
    width: 100%;
  }

  .ap-level::before {
    clip-path: none;
  }

  .ap-detail[hidden],
  .ap-method[hidden] {
    display: block !important;
  }
}

/* ── Produktionsanlagen Leistungen band (DE/EN shared) ─────────────────── */

.prod-services-chapter {
  position: relative;
  overflow: hidden;
  padding: clamp(1.35rem, 3vw, 2.15rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(115% 90% at 100% 0%, rgba(249, 115, 22, 0.11), transparent 58%),
    radial-gradient(85% 70% at 0% 100%, rgba(176, 32, 89, 0.09), transparent 52%),
    radial-gradient(60% 50% at 50% 0%, rgba(34, 211, 238, 0.05), transparent 45%),
    rgba(13, 13, 13, 0.94);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.38);
}

.prod-services-chapter::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 120px;
  height: 3px;
  background: linear-gradient(
    90deg,
    rgba(249, 115, 22, 0.95) 0%,
    rgba(251, 191, 36, 0.85) 45%,
    rgba(176, 32, 89, 0.9) 100%
  );
  content: "";
}

.prod-services-chapter > * {
  position: relative;
  z-index: 1;
}

.content-main .prod-services-reg-line,
.prod-services-reg-line {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  margin: 0 0 1.35rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-secondary);
}

.prod-services-reg-label {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.prod-services-reg-line a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.28);
  text-underline-offset: 0.15em;
}

.prod-services-reg-line a:hover {
  color: var(--text-primary);
  text-decoration-color: var(--accent-light, var(--accent));
}

.prod-services-reg-line a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.prod-services-reg-item {
  white-space: nowrap;
}

.prod-services-reg-sep {
  color: rgba(255, 255, 255, 0.28);
  user-select: none;
}

.prod-services-reg-line .abbr-tip {
  border-bottom: 0;
  cursor: inherit;
}

@media (max-width: 720px) {
  .prod-services-reg-item {
    white-space: normal;
  }
}

.prod-services-insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
  gap: 1rem;
  margin: 0 0 1.35rem;
}

.prod-insight {
  position: relative;
  overflow: hidden;
  padding: 1.1rem 1.15rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md) 0 var(--radius-md) 0;
}

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

.prod-insight__kicker {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.prod-insight h3 {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-primary);
}

.prod-insight--csa {
  border-left: 3px solid rgba(249, 115, 22, 0.65);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(249, 115, 22, 0.14), transparent 55%),
    rgba(255, 255, 255, 0.02);
}

.prod-insight--csa .prod-insight__kicker {
  color: #fb923c;
}

.prod-insight--ki {
  border-left: 3px solid rgba(34, 211, 238, 0.55);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(34, 211, 238, 0.1), transparent 55%),
    rgba(255, 255, 255, 0.02);
}

.prod-insight--ki .prod-insight__kicker {
  color: #22d3ee;
}

.prod-services-strands-title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-light, var(--accent));
}

.prod-strand-badge {
  display: inline-block;
  margin-bottom: 0.55rem;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-sm);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.sw-dev-page .feature-item--strand {
  border-radius: var(--radius-md) 0 var(--radius-md) 0;
}

.sw-dev-page .feature-item--strand-equipment {
  border-left: 3px solid rgba(249, 115, 22, 0.65);
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(255, 255, 255, 0.02));
}

.sw-dev-page .feature-item--strand-equipment::before {
  width: 88px;
  background: #f97316;
}

.sw-dev-page .feature-item--strand-equipment .prod-strand-badge {
  color: #fdba74;
  border: 1px solid rgba(249, 115, 22, 0.45);
  background: rgba(249, 115, 22, 0.14);
}

.sw-dev-page .feature-item--strand-equipment .feature-item-watermark {
  color: #f97316;
  opacity: 0.2;
}

.sw-dev-page .feature-item--strand-process {
  border-left: 3px solid rgba(251, 191, 36, 0.6);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.09), rgba(255, 255, 255, 0.02));
}

.sw-dev-page .feature-item--strand-process::before {
  width: 88px;
  background: #fbbf24;
}

.sw-dev-page .feature-item--strand-process .prod-strand-badge {
  color: #fde68a;
  border: 1px solid rgba(251, 191, 36, 0.42);
  background: rgba(251, 191, 36, 0.12);
}

.sw-dev-page .feature-item--strand-process .feature-item-watermark {
  color: #fbbf24;
  opacity: 0.2;
}

.sw-dev-page .feature-item--strand-systems {
  border-left: 3px solid rgba(176, 32, 89, 0.6);
  background: linear-gradient(135deg, rgba(176, 32, 89, 0.1), rgba(255, 255, 255, 0.02));
}

.sw-dev-page .feature-item--strand-systems::before {
  width: 88px;
  background: var(--accent, #b02059);
}

.sw-dev-page .feature-item--strand-systems .prod-strand-badge {
  color: var(--accent-light, #e85a8a);
  border: 1px solid rgba(176, 32, 89, 0.42);
  background: rgba(176, 32, 89, 0.14);
}

.sw-dev-page .feature-item--strand-systems .feature-item-watermark {
  color: var(--accent, #b02059);
  opacity: 0.2;
}

@media (hover: hover) and (pointer: fine) {
  .sw-dev-page .feature-item--strand:hover .feature-item-watermark {
    opacity: 0.28;
  }

  .prod-insight:hover {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
  }
}

.prod-services-cta {
  border-color: rgba(249, 115, 22, 0.28);
  background:
    linear-gradient(135deg, rgba(249, 115, 22, 0.06), rgba(255, 255, 255, 0.02));
}

@media (prefers-reduced-motion: reduce) {
  .prod-insight:hover {
    box-shadow: none;
  }
}