/* A single circuit board connects the four stages of the legal workflow. */
.hub-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 66px 0 48px;
  background: #090B13;
  border-top: 1px solid #70638B30;
}
.hub-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 18% 62%, #54278316, transparent 52%);
  z-index: -1;
}
.hub-section .section-label { color: #9691A9; border-color: #8C7AAB30; }
.hub-section .section-label > span:last-child { color: #C4AFE8; }
.hub-heading { display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: 60px; margin: 48px 0 25px; }
.hub-heading h2 { font-size: clamp(48px, 5.25vw, 75px); line-height: 1.04; letter-spacing: -3.9px; }
.hub-heading h2 > span { color: #B19ACF; }
.hub-intro { max-width: 375px; justify-self: end; padding-bottom: 4px; }
.hub-intro > p:first-child { font-size: 22px; line-height: 1.35; color: #ECE7F6; margin-bottom: 17px; }
.hub-intro strong { font-weight: 400; color: #BCA2E1; }
.hub-intro > p:last-child { font-size: 14px; line-height: 1.85; color: #9290A5; }
.hub-flow { display: grid; grid-template-columns: 1.38fr 1fr; gap: 53px; align-items: center; }
.hub-visual-column, .hub-steps-column { min-width: 0; }
.hub-art { position: relative; padding: 37px 18px 31px; isolation: isolate; }
.hub-board-aura { position: absolute; inset: 20% 7% 13%; background: #51169924; filter: blur(65px); z-index: -1; border-radius: 50%; }
.hub-board-tilt { transform: perspective(1800px) rotateX(13deg) rotateY(-9deg) rotateZ(-3deg); transform-style: preserve-3d; transition: transform 1.2s var(--ease); }
.hub-board {
  position: relative;
  width: 100%;
  aspect-ratio: 720 / 660;
  border: 1px solid #645674;
  border-radius: 20px;
  isolation: isolate;
  background: linear-gradient(138deg, #24202B 0%, #15151E 32%, #17131F 76%, #211A2C 100%);
  box-shadow: inset 0 1px 0 #DBCAEC35, inset 0 0 0 6px #0F0D1680, 2px 4px 0 #37303F, 3px 9px 0 #211A2C, 4px 10px 0 #82709060, 4px 38px 70px -18px #000C;
}
.hub-board::before { content: ''; position: absolute; inset: 13px; border: 1px solid #9380B21A; border-radius: 11px; pointer-events: none; }
.hub-board-grain { position: absolute; inset: 0; border-radius: inherit; opacity: .06; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); }
.hub-board-inscription, .hub-board-footer { position: absolute; left: 8%; right: 8%; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: clamp(6px, .6vw, 9px); line-height: 1.3; letter-spacing: 1.7px; color: #93879D; }
.hub-board-inscription { top: 5.8%; }
.hub-board-inscription > span:first-child { color: #C1AFD3; font-weight: 600; letter-spacing: 2.5px; }
.hub-board-footer { bottom: 5.6%; color: #72657F; font-size: clamp(5px, .52vw, 8px); letter-spacing: 1px; }
.hub-traces { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hub-trace-ambient { stroke: #A191B6; stroke-width: 1; opacity: .16; }
.hub-solder-points { stroke: #AD96BD; stroke-width: 1.3; fill: #19151F; opacity: .4; }
.hub-trace-base { stroke: #514260; stroke-width: 3; }
.hub-trace-live { stroke: #9E6AF6; stroke-width: 2; opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease), opacity .6s; filter: drop-shadow(0 0 4px #965AFF85); }
.hub-trace-spark { stroke: #F1DEFF; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: .1 .9; opacity: 0; filter: drop-shadow(0 0 5px #B57BFF); }
.hub-route.is-powered .hub-trace-live { opacity: .68; stroke-dashoffset: 0; }
.hub-route.is-current .hub-trace-live { opacity: 1; }
.hub-flow.is-playing .hub-route.is-current .hub-trace-spark { opacity: 1; animation: hub-signal-travel 2.6s linear infinite; }
.hub-board-screw { position: absolute; width: 13px; height: 13px; border-radius: 50%; border: 1px solid #827987; background: linear-gradient(135deg, #423B4A, #15111B); box-shadow: inset 1px 1px 1px #FFFFFF28, 0 2px 3px #0008; }
.hub-board-screw::before, .hub-board-screw::after { content: ''; position: absolute; width: 7px; height: 1px; background: #9C8BA663; top: 5px; left: 2px; transform: rotate(30deg); box-shadow: 0 1px 0 #0008; }
.hub-board-screw::after { transform: rotate(120deg); }
.screw-tl { left: 3%; top: 3%; }.screw-tr { right: 3%; top: 3%; }.screw-bl { left: 3%; bottom: 3%; }.screw-br { right: 3%; bottom: 3%; }
.hub-components { position: absolute; width: 9%; height: 2.6%; border-top: 2px solid #84728570; border-bottom: 2px solid #84728570; background: repeating-linear-gradient(90deg, #312A37 0 9%, #16111E 9% 14%, transparent 14% 20%); box-shadow: 0 3px 5px #0004; }
.components-left { left: 6%; top: 46%; transform: rotate(90deg); }
.components-right { right: 9%; top: 48%; transform: rotate(90deg); }
.components-bottom { left: 29%; bottom: 10.5%; width: 13%; }
.hub-cpu { position: absolute; left: 50%; top: 50%; width: 20.5%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.hub-cpu-pins { position: absolute; inset: -8%; }
.hub-cpu-pins::before, .hub-cpu-pins::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 5%, #8D769E 5% 7%, #362C46 7% 9%, transparent 9% 12%); }
.hub-cpu-pins::after { transform: rotate(90deg); }
.hub-cpu-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid transparent; border-radius: 11px; background: linear-gradient(145deg, #33253F, #141321 60%, #281F36) padding-box, linear-gradient(145deg, #BA9BD6, #504064 42%, #8B689F 72%, #30253A) border-box; box-shadow: 0 4px 0 #080712, 0 10px 18px #0008, 0 0 35px -10px #8E40FF4D, inset 0 0 0 5px #08051140; }
.hub-cpu-face::before { content: ''; position: absolute; inset: 7px; border: 1px solid #A47EC21F; border-radius: 5px; }
.hub-cpu-face img { position: relative; width: 45%; height: auto; filter: drop-shadow(0 0 10px #8E3DF55C); }
.hub-cpu-face > span { position: relative; font-size: clamp(8px, 1vw, 14px); line-height: 1; letter-spacing: 2px; color: #E7D4F9; margin-top: 7%; }
.hub-cpu-face b { font-weight: 400; color: #A284BD; }
.hub-cpu-face small { font-size: clamp(5px, .65vw, 9px); color: #8C749F; letter-spacing: 2px; margin-top: 7%; }
.hub-chip { --hub-pin: #82728E; position: absolute; width: 15.7%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.hub-chip--1 { left: 25%; top: 25%; }.hub-chip--2 { left: 75%; top: 25%; }.hub-chip--3 { left: 75%; top: 75%; }.hub-chip--4 { left: 25%; top: 75%; }
.hub-chip-core { position: absolute; inset: 0; display: grid; place-items: center; border: 1px solid #83738B66; border-radius: 7px; background: linear-gradient(135deg, #3C3344, #1D1926 42%, #282132); box-shadow: inset 0 1px 0 #C8B7D62B, inset 0 0 0 5px #0D0A114A, 0 3px 0 #080810, 0 8px 14px #000A; transition: border-color .6s, box-shadow .6s, background .6s, transform .7s var(--ease); }
.hub-chip-core::before { content: ''; position: absolute; inset: 7px; border: 1px solid #A18BAB17; border-radius: 3px; }
.hub-chip-core > .icon { width: 33%; height: 33%; color: #94839F; stroke-width: 1.1; transition: color .6s, filter .6s; }
.hub-chip-number { position: absolute; top: 10%; left: 12%; font-size: clamp(6px, .66vw, 9px); color: #93849E; letter-spacing: 1px; line-height: 1; }
.hub-chip-led { position: absolute; bottom: 12%; right: 12%; width: 5%; aspect-ratio: 1; border-radius: 50%; background: #49374F; transition: background .5s, box-shadow .5s; }
.hub-chip-label { position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%); color: #9C8FA8; font-size: clamp(7px, .68vw, 10px); line-height: 1; letter-spacing: 1.3px; text-transform: uppercase; white-space: nowrap; transition: color .6s; }
.hub-chip-pins::before, .hub-chip-pins::after { content: ''; position: absolute; transition: filter .6s; }
.pins-horizontal::before, .pins-horizontal::after { left: 12%; width: 76%; height: 8%; background: repeating-linear-gradient(90deg, var(--hub-pin) 0 3%, #3B3149 4% 5%, transparent 5% 12%); }
.pins-horizontal::before { top: -8%; }.pins-horizontal::after { bottom: -8%; }
.pins-vertical::before, .pins-vertical::after { top: 12%; height: 76%; width: 8%; background: repeating-linear-gradient(0deg, var(--hub-pin) 0 3%, #3B3149 4% 5%, transparent 5% 12%); }
.pins-vertical::before { left: -8%; }.pins-vertical::after { right: -8%; }
.hub-chip.is-powered { --hub-pin: #9E7BC1; }
.hub-chip.is-powered .hub-chip-core { border-color: #80559D; }
.hub-chip.is-powered .hub-chip-led { background: #B87FFF; box-shadow: 0 0 6px #B072FF80; }
.hub-chip.is-current { --hub-pin: #D5B9ED; }
.hub-chip.is-current .hub-chip-core { border-color: #CCA5F8; background: linear-gradient(135deg, #684D80, #33213F 46%, #372544); box-shadow: inset 0 1px 0 #F2DFFF50, inset 0 0 0 5px #230C3938, 0 3px 0 #130C21, 0 9px 15px #0008, 0 0 33px -5px #A153F77A; transform: translateY(-2px); }
.hub-chip.is-current .hub-chip-core > .icon { color: #F1DFFF; filter: drop-shadow(0 0 6px #C993FB80); }
.hub-chip.is-current .hub-chip-number { color: #D8BDEB; }
.hub-chip.is-current .hub-chip-label { color: #E4CAF9; }
.hub-chip.is-current .hub-chip-led { background: #EDCBFF; box-shadow: 0 0 9px #CB8DFF; }
.hub-sequence-tools { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 12px 10px 0; }
.hub-sequence-tools > p { display: flex; align-items: center; gap: 9px; color: #B5A3C9; font-size: 10px; line-height: 1.5; letter-spacing: .4px; }
.hub-sequence-tools > p > i { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; background: #C395F5; box-shadow: 0 0 10px #A15FDE60; }
.hub-sequence-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #63507166; border-radius: 30px; background: #1C152400; color: #B6A5C7; padding: 9px 12px; min-height: 38px; font-size: 10px; line-height: 1.4; transition: border-color .25s, background .25s; white-space: nowrap; }
.hub-sequence-toggle[hidden] { display: none; }
.hub-sequence-toggle:disabled { cursor: default; color: #7B6C8B; }
.hub-sequence-toggle:hover:not(:disabled) { border-color: #A27BC4; background: #251B30; }
.hub-play-state { width: 8px; height: 9px; border-left: 2px solid; border-right: 2px solid; }
.hub-sequence-toggle[aria-pressed=false] .hub-play-state { width: 0; height: 0; border: 5px solid transparent; border-right: 0; border-left: 7px solid currentColor; }
.hub-diagram-note { font-size: 10px; color: #73657E; margin: 10px 10px 0; }
.hub-step-instruction { display: flex; justify-content: space-between; gap: 14px; align-items: center; color: #ACA1BA; font-size: 9px; letter-spacing: 1.1px; margin-bottom: 17px; }
.hub-step-instruction > span:last-child { color: #877293; font-size: 10px; letter-spacing: 0; }
.hub-step-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #6C547C3D; }
.hub-step-list > li { margin: 0; border-bottom: 1px solid #6C547C3D; }
.hub-step { display: grid; grid-template-columns: 28px minmax(0, 1fr) 16px; gap: 15px; width: 100%; text-align: left; border: 0; padding: 24px 0 23px; background: transparent; color: #B9AEC8; position: relative; }
.hub-step::before { content: ''; position: absolute; left: -16px; top: 22px; bottom: 22px; width: 2px; background: #C793FF; opacity: 0; transform: scaleY(.35); transition: opacity .5s, transform .6s var(--ease); box-shadow: 0 0 12px #A357E98C; }
.hub-step-number { font-size: 10px; letter-spacing: 1px; color: #756182; padding-top: 5px; transition: color .4s; }
.hub-step-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.hub-step-copy > strong { font-size: clamp(17px, 1.52vw, 21px); font-weight: 400; line-height: 1.25; color: #BDAFCB; letter-spacing: -.4px; transition: color .4s; }
.hub-step-copy > span { font-size: 12px; line-height: 1.75; color: #8D829B; max-width: 365px; transition: color .4s; }
.hub-step-copy > small { font-size: 8px; color: #796285; line-height: 1.5; letter-spacing: .55px; margin-top: 3px; transition: color .4s; }
.hub-step-arrow { font-size: 18px; line-height: 1.5; color: #64526F; transition: color .4s, transform .4s; }
.hub-step.is-current::before { opacity: 1; transform: scaleY(1); }
.hub-step.is-current .hub-step-number, .hub-step.is-current .hub-step-copy > small { color: #C69DEC; }
.hub-step.is-current .hub-step-copy > strong { color: #F2E7FB; }
.hub-step.is-current .hub-step-copy > span { color: #B6A7C7; }
.hub-step.is-current .hub-step-arrow { color: #D8B8F3; transform: rotate(45deg); }
.hub-step:hover .hub-step-copy > strong { color: #F2E7FB; }
.hub-step:focus-visible { outline-offset: 5px; border-radius: 3px; }
.hub-configuration { font-size: 12px; line-height: 1.8; color: #9B8AAA; margin-top: 20px; }
.hub-configuration strong { font-weight: 400; color: #C1A6D7; }
.hub-section-footer { display: flex; justify-content: space-between; align-items: center; gap: 30px; border-top: 1px solid #6D548332; margin-top: 43px; padding-top: 28px; }
.hub-section-footer > p { display: flex; align-items: center; gap: 10px; color: #9C8EA9; font-size: 12px; }
.hub-section-footer .icon { width: 16px; height: 16px; color: #AA85C9; }
.hub-section-footer .line-link { color: #DBBEF1; font-size: 13px; border-color: #695477; }
.hub-section-footer .line-link:hover { color: #FFF; }
@keyframes hub-signal-travel { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
html[data-motion=off] .hub-trace-spark { display: none; }
html.page-is-hidden .hub-trace-spark, html.capture-is-open .hub-trace-spark { animation-play-state: paused !important; }
@media (max-width: 1150px) {
  .hub-heading { gap: 40px; }
  .hub-heading h2 { font-size: 60px; letter-spacing: -3px; }
  .hub-flow { gap: 34px; grid-template-columns: 1.15fr 1fr; }
  .hub-art { padding-inline: 9px; }
  .hub-step { gap: 11px; grid-template-columns: 21px minmax(0, 1fr) 14px; padding-block: 20px; }
  .hub-step-copy > strong { font-size: 18px; }
  .hub-step-copy > span { font-size: 12px; }
  .hub-chip-label { font-size: 8px; letter-spacing: .8px; top: calc(100% + 15px); }
  .hub-sequence-tools { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 900px) {
  .hub-section { padding-top: 53px; }
  .hub-heading { grid-template-columns: 1.25fr 1fr; gap: 33px; }
  .hub-heading h2 { font-size: 50px; letter-spacing: -2.7px; }
  .hub-intro > p:first-child { font-size: 19px; margin-bottom: 11px; }
  .hub-intro > p:last-child { font-size: 12px; }
  .hub-flow { grid-template-columns: 1fr; gap: 33px; }
  .hub-visual-column { width: min(660px, 100%); margin-inline: auto; }
  .hub-art { padding: 27px 22px 30px; }
  .hub-board-inscription { font-size: 8px; }
  .hub-board-footer { font-size: 7px; }
  .hub-cpu-face > span { font-size: 12px; }
  .hub-cpu-face small { font-size: 8px; }
  .hub-chip-number { font-size: 9px; }
  .hub-chip-label { font-size: 9px; }
  .hub-sequence-tools { flex-wrap: nowrap; }
  .hub-step { grid-template-columns: 30px minmax(0, 1fr) 18px; gap: 20px; padding-block: 23px; }
  .hub-step-copy > strong { font-size: 22px; }
  .hub-step-copy > span { font-size: 14px; max-width: 560px; }
  .hub-step-copy > small { font-size: 9px; }
  .hub-step-instruction { font-size: 10px; }
  .hub-configuration { font-size: 13px; }
  .hub-configuration br { display: none; }
}
@media (max-width: 700px) {
  .hub-section { padding: 42px 0 34px; }
  .hub-heading { display: block; margin: 32px 0 3px; }
  .hub-heading h2 { font-size: clamp(37px, 8.75vw, 57px); letter-spacing: -2.1px; }
  .hub-intro { max-width: 420px; margin-top: 23px; padding: 0; }
  .hub-intro > p:first-child { font-size: 16px; margin-bottom: 8px; }
  .hub-intro > p:first-child br { display: none; }
  .hub-intro > p:last-child { font-size: 13px; line-height: 1.75; }
  .hub-flow { gap: 29px; }
  .hub-art { padding: 27px 5px 22px; }
  .hub-board-tilt { transform: perspective(1500px) rotateX(9deg) rotateY(-5deg) rotateZ(-2deg); }
  .hub-board { border-radius: 12px; box-shadow: inset 0 1px 0 #DBCAEC30, inset 0 0 0 4px #0F0D1680, 1px 3px 0 #37303F, 2px 6px 0 #211A2C, 2px 7px 0 #82709060, 2px 26px 44px -14px #000B; }
  .hub-board::before { inset: 8px; border-radius: 7px; }
  .hub-board-inscription { font-size: 6px; letter-spacing: .7px; }
  .hub-board-inscription > span:first-child { letter-spacing: 1.1px; }
  .hub-board-footer { font-size: 5px; letter-spacing: .5px; }
  .hub-board-screw { width: 8px; height: 8px; }
  .hub-board-screw::before, .hub-board-screw::after { width: 4px; left: 1px; top: 3px; }
  .hub-cpu-face { border-radius: 7px; border-width: 1px; box-shadow: 0 3px 0 #080712, 0 7px 13px #0008, 0 0 20px -7px #8E40FF4D, inset 0 0 0 3px #08051140; }
  .hub-cpu-face::before { inset: 4px; border-radius: 3px; }
  .hub-cpu-face > span { font-size: clamp(7px, 2vw, 10px); letter-spacing: 1px; }
  .hub-cpu-face small { font-size: 5px; letter-spacing: 1px; }
  .hub-chip-core { border-radius: 4px; box-shadow: inset 0 1px 0 #C8B7D62B, inset 0 0 0 3px #0D0A114A, 0 2px 0 #080810, 0 5px 9px #000A; }
  .hub-chip-core::before { inset: 4px; border-radius: 2px; }
  .hub-chip-number { font-size: 6px; }
  .hub-chip-label { font-size: 6px; letter-spacing: .6px; top: calc(100% + 12px); }
  .hub-chip.is-current .hub-chip-core { transform: translateY(-1px); }
  .hub-sequence-tools { margin: 8px 0 0; gap: 8px; }
  .hub-sequence-tools > p { font-size: 9px; letter-spacing: 0; gap: 6px; }
  .hub-sequence-toggle { font-size: 9px; padding: 8px 10px; min-height: 36px; gap: 7px; }
  .hub-diagram-note { margin: 8px 0 0; font-size: 9px; }
  .hub-step-instruction { font-size: 8px; margin-bottom: 12px; letter-spacing: .5px; }
  .hub-step-instruction > span:last-child { font-size: 9px; }
  .hub-step { grid-template-columns: 24px minmax(0, 1fr) 14px; gap: 11px; padding-block: 21px; }
  .hub-step::before { left: -9px; top: 21px; bottom: 21px; }
  .hub-step-copy { gap: 8px; }
  .hub-step-copy > strong { font-size: 20px; letter-spacing: -.4px; }
  .hub-step-copy > span { font-size: 13px; line-height: 1.7; }
  .hub-step-copy > small { font-size: 7px; letter-spacing: .25px; }
  .hub-configuration { font-size: 12px; margin-top: 18px; }
  .hub-configuration br { display: initial; }
  .hub-section-footer { display: block; margin-top: 29px; padding-top: 23px; }
  .hub-section-footer > p { font-size: 11px; gap: 10px; align-items: flex-start; max-width: 290px; }
  .hub-section-footer .icon { margin-top: 2px; }
  .hub-section-footer .line-link { margin-top: 15px; font-size: 12px; gap: 29px; }
}
@media (max-width: 370px) {
  .hub-heading h2 { font-size: 36px; letter-spacing: -1.9px; }
  .hub-sequence-tools { flex-wrap: wrap; gap: 9px; }
  .hub-step-copy > strong { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-trace-spark { display: none; }
  .hub-board-tilt, .hub-chip-core, .hub-step-arrow { transition: none; }
}