/* A10: connected steps. Scoped to the three explanatory flows, no homepage edits. */
.detail-page .chapter-nav {
  --flow-node:44px;
  --flow-ring:64px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  padding:16px;
  gap:0;
  border:0;
  border-radius:24px;
  background:#10161e;
  box-shadow:0 16px 32px -24px #000d;
  isolation:isolate;
}
.detail-page .chapter-nav a {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  min-height:88px;
  padding:0;
  border-radius:16px;
  background:transparent;
  color:#b7c7d9;
}
.detail-page .chapter-nav a strong { font-size:15px; line-height:22px; font-weight:500; letter-spacing:.01em }
.detail-page .chapter-nav .flow-step-number {
  position:relative;
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:var(--flow-node);
  height:var(--flow-node);
  border:1px solid #4a5b70;
  border-radius:50%;
  background:#192431;
  color:#bdd0e7;
  font-size:12px;
  line-height:1;
  font-variant-numeric:tabular-nums;
  transition:transform 180ms cubic-bezier(.23,1,.32,1);
}
.detail-page .chapter-nav a[aria-current=location] { color:#e1f2ff; background:transparent }
.detail-page .chapter-nav a[aria-current=location] .flow-step-number { background:#cae8ff; color:#112c40; border-color:#cae8ff }
.flow-rail { position:absolute; left:calc(12.5% + 12px); right:calc(12.5% + 12px); top:44px; height:1px; background:#374f68; pointer-events:none }
.flow-packet { position:absolute; left:0; top:-1px; width:48px; height:3px; border-radius:2px; background:#c0e9ff; opacity:0; pointer-events:none }
.flow-focus { position:absolute; left:0; top:12px; width:var(--flow-ring); height:var(--flow-ring); border:1px solid #789fbe; border-radius:50%; background:#27435b55; opacity:0; pointer-events:none }
.flow-ready .flow-focus { opacity:1 }
.flow-motion .flow-focus { transition:transform 280ms cubic-bezier(.23,1,.32,1) }
.detail-page .product-chapter[id] { scroll-margin-top:calc(var(--sub-header) + 152px) }

/* The collaboration path is open rather than contained in another large card. */
.detail-page .collaboration-route { padding:12px 0; background:none; border-radius:0 }
.collaboration-route li { grid-template-columns:64px 1fr; gap:4px 24px; padding:16px 0 36px; min-height:124px }
.collaboration-route li>span { width:56px; height:56px; border:1px solid #4e6b87; border-radius:50%; background:#182637; color:#c1def7; font-size:13px; line-height:1 }
.collaboration-route li:not(:last-child):after { left:27px; top:80px; bottom:-8px; background:#4f6b86 }
.collaboration-route li:nth-child(2)>span { background:#c6e5fd; color:#102c42; border-color:#c6e5fd }
.collaboration-route li:nth-child(2)>strong { color:#c6e5fd }
.collaboration-route li strong { padding-top:2px; font-size:20px; font-weight:500; line-height:1.5 }
.collaboration-route li small { font-size:13px; line-height:1.8 }
.collaboration-route .text-action { margin-left:88px; margin-top:0 }

/* The four handover steps share a single route; the content stays in normal flow. */
.detail-page .journey-list { gap:32px }
.detail-page .journey-list li { position:relative; padding:0; border:0 }
.detail-page .journey-list li>span { position:relative; z-index:1; display:grid; place-items:center; width:44px; height:44px; margin:0 0 24px; border:1px solid #4e6b87; border-radius:50%; background:#192637; color:#c1def7; font-size:12px; line-height:1 }
.detail-page .journey-list li:not(:last-child):after { content:''; position:absolute; left:64px; right:-12px; top:22px; height:1px; background:#3a536c }
.detail-page .journey-list li:nth-child(3)>span { background:#c6e5fd; color:#102c42; border-color:#c6e5fd }
.detail-page .journey-list h3 { margin-bottom:12px; font-weight:500 }
.detail-page .journey-list p { max-width:34ch }
@media(hover:hover) and (pointer:fine) {
  .detail-page .chapter-nav a:hover { background:none; color:#eff7ff }
  .detail-page .chapter-nav a:hover .flow-step-number { transform:translateY(-3px) rotate(-6deg); border-color:#b9d6ef }
  .detail-page .chapter-nav a:active .flow-step-number { transform:scale(.94) }
}
@media(max-width:800px) {
  .detail-page .journey-list { grid-template-columns:1fr 1fr; gap:40px 32px }
  .detail-page .journey-list li:nth-child(2):after { display:none }
  .detail-page .chapter-nav a strong { font-size:13px }
}
@media(max-width:560px) {
  .detail-page .chapter-nav { --flow-node:36px; --flow-ring:50px; position:relative; top:auto; grid-template-columns:repeat(4,minmax(0,1fr)); padding:12px 4px; border-radius:18px }
  .detail-page .chapter-nav a { min-height:76px; padding:0; gap:8px; border-radius:12px }
  .detail-page .chapter-nav a strong { font-size:12px; line-height:18px; white-space:nowrap; letter-spacing:0 }
  .detail-page .chapter-nav .flow-step-number { font-size:11px }
  .flow-rail { left:calc(12.5% + 3px); right:calc(12.5% + 3px); top:37px }
  .flow-packet { width:24px }
  .detail-page .product-chapter[id] { scroll-margin-top:calc(var(--sub-header) + 20px) }
  .collaboration-route li { grid-template-columns:52px 1fr; gap:4px 16px; min-height:120px; padding:12px 0 28px }
  .collaboration-route li>span { width:48px; height:48px; font-size:12px }
  .collaboration-route li:not(:last-child):after { left:23px; top:68px; bottom:-4px }
  .collaboration-route li strong { font-size:18px }
  .collaboration-route li small { font-size:12px }
  .collaboration-route .text-action { margin-left:68px }
  .detail-page .journey-list { grid-template-columns:1fr; gap:32px }
  .detail-page .journey-list li { display:grid; grid-template-columns:44px 1fr; gap:20px }
  .detail-page .journey-list li>span { margin:0; flex:none }
  .detail-page .journey-list li:not(:last-child):after { display:block; left:22px; top:56px; bottom:-20px; right:auto; width:1px; height:auto }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto!important }
  .detail-page .chapter-nav .flow-focus,.detail-page .chapter-nav .flow-step-number { transition:none!important; transform:none }
  .flow-packet { display:none }
}
.keyboard-input .flow-focus,.keyboard-input .flow-step-number { transition:none!important }
.keyboard-input .detail-page .chapter-nav a:hover .flow-step-number { transform:none }