/*
 * Pull People — 06 / FRONTEND V2
 * B9.4 — Cómo trabajamos · Crystal Process Circuit PILOT
 *
 * ROOT + 01 + 02 only. 03/04 stay in source pending pilot approval.
 * Native scroll, IntersectionObserver, transform/opacity/SVG stroke.
 */

.section-method {
  --method-bg: #020914;
  --method-bg-deep: #010711;
  --method-ice: #eef9ff;
  --method-text: rgba(211, 228, 244, .78);
  --method-line-hot: rgba(181, 231, 255, .90);
  position: relative;
  isolation: isolate;
  overflow: clip;
  margin-top: 0;
  padding: clamp(4.5rem, 6vw, 6.4rem) 0 clamp(5rem, 7vw, 7rem);
  background:
    linear-gradient(180deg,
      rgba(2, 8, 17, 0) 0,
      rgba(2, 9, 20, .54) 4rem,
      var(--method-bg) 8.5rem,
      #03101d 58%,
      var(--method-bg-deep) 100%);
}

.section-method::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60rem 23rem at 50% 1%, rgba(60, 151, 255, .095), rgba(38, 105, 185, .026) 44%, transparent 74%),
    radial-gradient(ellipse 36rem 24rem at 23% 63%, rgba(48, 127, 225, .055), transparent 75%),
    radial-gradient(ellipse 34rem 22rem at 82% 77%, rgba(79, 183, 255, .045), transparent 76%);
}

.section-method::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8rem 0 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(106, 189, 255, .018) 1px, transparent 1px),
    linear-gradient(rgba(106, 189, 255, .014) 1px, transparent 1px);
  background-size: 5rem 5rem;
  -webkit-mask-image: radial-gradient(ellipse at 50% 54%, #000 0 22%, rgba(0,0,0,.52) 48%, transparent 77%);
  mask-image: radial-gradient(ellipse at 50% 54%, #000 0 22%, rgba(0,0,0,.52) 48%, transparent 77%);
}

.section-method > .container {
  width: min(88rem, calc(100% - 3rem));
}

.section-method .method-intro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(20rem, .86fr) minmax(22rem, 1.14fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: end;
  margin: 0 0 clamp(2.8rem, 4vw, 4rem);
  padding-top: 1.4rem;
}

.section-method .method-intro::before {
  content: "PROCESS / 04";
  position: absolute;
  top: 0;
  left: 0;
  color: rgba(119, 198, 255, .72);
  font-size: .64rem;
  font-weight: 820;
  letter-spacing: .17em;
}

.section-method .method-intro::after {
  content: "";
  position: absolute;
  top: 1.25rem;
  bottom: .35rem;
  left: calc(50% - 1px);
  width: 1px;
  background: linear-gradient(180deg, rgba(189, 232, 255, .10), rgba(121, 202, 255, .40) 30%, rgba(67, 149, 243, .12) 78%, transparent);
  box-shadow: 0 0 1rem rgba(80, 170, 255, .07);
}

.section-method .method-intro h2 {
  max-width: 8.4ch;
  margin: 0;
  color: #f8fbff;
  font-size: clamp(3.2rem, 4.8vw, 5.65rem);
  font-weight: 790;
  line-height: .92;
  letter-spacing: -.058em;
  text-wrap: balance;
}

.section-method .method-lead {
  position: relative;
  max-width: 40rem;
  margin: 0 0 .35rem;
  padding: .1rem 0 .1rem 1.4rem;
  color: var(--method-text);
  font-size: clamp(1rem, 1vw, 1.08rem);
  line-height: 1.72;
}

.section-method .method-lead::before {
  content: "";
  position: absolute;
  inset: .1rem auto .1rem 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(144, 218, 255, .84), rgba(72, 155, 245, .20), transparent);
}

.section-method .method-circuit {
  position: relative;
  min-height: clamp(35rem, 43vw, 39rem);
  margin-top: clamp(1rem, 2vw, 2rem);
  border-top: 1px solid rgba(127, 205, 255, .055);
}

.section-method .method-circuit::before,
.section-method .method-circuit::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.section-method .method-circuit::before {
  top: 3.5rem;
  left: 50%;
  width: min(58rem, 78%);
  height: 24rem;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 34%, rgba(72, 159, 255, .07), rgba(33, 91, 161, .018) 47%, transparent 74%);
}

.section-method .method-circuit::after {
  inset: 1.5rem 5% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(107, 194, 255, .06) 20%, rgba(154, 219, 255, .18) 50%, rgba(107, 194, 255, .06) 80%, transparent);
}

.section-method .method-circuit__root {
  position: absolute;
  z-index: 5;
  top: 1.65rem;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: .75rem;
  transform: translateX(-50%);
  opacity: .38;
  transition: opacity 420ms ease, transform 520ms cubic-bezier(.2,.8,.2,1);
}

.section-method .method-circuit__root-shell {
  position: relative;
  display: grid;
  place-items: center;
  width: 5rem;
  aspect-ratio: 1;
  border: 1px solid rgba(189, 231, 255, .28);
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 32% 20%, rgba(230, 249, 255, .15), transparent 28%),
    linear-gradient(145deg, rgba(32, 91, 151, .86), rgba(5, 25, 50, .97) 60%, rgba(11, 45, 81, .92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(86, 177, 255, .06),
    0 1rem 2.2rem rgba(0,0,0,.17),
    0 0 1.4rem rgba(74, 164, 255, .08);
  transform: rotate(45deg);
}

.section-method .method-circuit__root-shell::before,
.section-method .method-circuit__root-shell::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(157, 217, 255, .12);
  border-radius: inherit;
  pointer-events: none;
}

.section-method .method-circuit__root-shell::before { inset: .42rem; }
.section-method .method-circuit__root-shell::after { inset: -.42rem; opacity: .34; }

.section-method .method-circuit__root-core {
  display: grid;
  place-items: center;
  width: 2rem;
  aspect-ratio: 1;
  border-radius: .6rem;
  background: radial-gradient(circle at 35% 28%, rgba(229, 249, 255, .90), rgba(102, 192, 255, .86) 28%, rgba(42, 113, 205, .86) 70%);
  color: rgba(3, 18, 34, .88);
  font-size: .72rem;
  font-weight: 900;
  box-shadow: 0 0 1rem rgba(112, 201, 255, .18);
  transform: rotate(-45deg);
}

.section-method .method-circuit__root-label {
  color: rgba(141, 207, 246, .54);
  font-size: .58rem;
  font-weight: 780;
  letter-spacing: .18em;
}

.section-method .method-circuit__map {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.section-method .method-circuit__wire {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.section-method .method-circuit__wire--ghost {
  stroke: rgba(92, 174, 247, .095);
  stroke-width: 1;
}

.section-method .method-circuit__wire--root,
.section-method .method-circuit__wire--01,
.section-method .method-circuit__wire--02 {
  stroke: rgba(178, 229, 255, .86);
  stroke-width: 1.45;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: .78;
  transition: stroke-dashoffset 760ms cubic-bezier(.2,.75,.2,1), opacity 360ms ease;
}

.section-method .method-circuit__wire--01 { transition-duration: 900ms, 360ms; }
.section-method .method-circuit__wire--02 { transition-duration: 980ms, 360ms; }

.section-method .method-circuit__junction {
  fill: rgba(2, 13, 25, .92);
  stroke: rgba(172, 226, 255, .22);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: .25;
  transition: opacity 360ms ease, fill 360ms ease, stroke 360ms ease;
}

.section-method .method-circuit__junction--root { opacity: .42; }

.section-method .method-sequence {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.section-method .method-step,
.section-method .method-step:nth-child(1),
.section-method .method-step:nth-child(2),
.section-method .method-step:nth-child(3),
.section-method .method-step:nth-child(4) {
  position: absolute;
  display: block;
  width: min(30rem, 40%);
  margin: 0;
  opacity: .16;
  transform: translate3d(0, 1.2rem, 0) scale(.985);
  transition: opacity 520ms ease, transform 620ms cubic-bezier(.2,.8,.2,1);
}

.section-method .method-step--01 { top: 13.2rem; left: 2.5%; }
.section-method .method-step--02 { top: 26.2rem; right: 2%; }
.section-method .method-step--pending { display: none; }

.section-method .method-step::before,
.section-method .method-step::after {
  content: none;
  display: none;
}

.section-method .method-step__node {
  position: absolute;
  z-index: 6;
  top: .65rem;
  display: grid;
  place-items: center;
  width: 3.25rem;
  min-height: 3.25rem;
  border: 1px solid rgba(189, 231, 255, .22);
  border-radius: .82rem;
  background:
    radial-gradient(circle at 32% 20%, rgba(225, 247, 255, .14), transparent 31%),
    linear-gradient(145deg, rgba(26, 78, 132, .89), rgba(5, 23, 45, .97) 62%, rgba(10, 40, 72, .91));
  color: rgba(208, 239, 255, .94);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .08em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 .8rem 1.8rem rgba(0,0,0,.15),
    0 0 1.2rem rgba(71, 163, 255, .09);
  transform: translateZ(0);
  transition: border-color 360ms ease, box-shadow 360ms ease, transform 420ms cubic-bezier(.2,.8,.2,1);
}

.section-method .method-step--01 .method-step__node { right: -1.1rem; }
.section-method .method-step--02 .method-step__node { left: -1.1rem; }

.section-method .method-step__body {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: .8rem;
  min-width: 0;
  min-height: 0;
  padding: 1.6rem 1.55rem 1.45rem;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.section-method .method-step:nth-child(even) .method-step__body { margin-left: 0; }

.section-method .method-step__body::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -.5rem -.35rem -.6rem -.6rem;
  width: auto;
  height: auto;
  border: 1px solid rgba(157, 216, 255, .13);
  border-top-color: rgba(204, 239, 255, .23);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 18% 13%, rgba(151, 221, 255, .08), transparent 20%),
    linear-gradient(145deg, rgba(17, 54, 92, .38), rgba(4, 18, 35, .70) 58%, rgba(8, 30, 54, .40));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1.4rem 3.4rem rgba(0,0,0,.13);
  clip-path: polygon(0 0, calc(100% - 1.4rem) 0, 100% 1.4rem, 100% 100%, 1.15rem 100%, 0 calc(100% - 1.15rem));
}

.section-method .method-step--02 .method-step__body::before {
  inset: -.5rem -.6rem -.6rem -.35rem;
  background:
    radial-gradient(circle at 82% 15%, rgba(149, 221, 255, .08), transparent 20%),
    linear-gradient(215deg, rgba(18, 58, 98, .40), rgba(4, 18, 35, .70) 58%, rgba(8, 31, 55, .42));
  clip-path: polygon(1.4rem 0, 100% 0, 100% calc(100% - 1.15rem), calc(100% - 1.15rem) 100%, 0 100%, 0 1.4rem);
}

.section-method .method-step__body::after {
  content: "";
  position: absolute;
  z-index: -3;
  inset: .35rem -1rem -1rem .8rem;
  width: auto;
  height: auto;
  border: 1px solid rgba(105, 190, 255, .065);
  border-radius: 1.25rem;
  background: linear-gradient(145deg, rgba(72, 166, 255, .035), rgba(3, 14, 28, .12) 60%, rgba(76, 171, 255, .025));
  transform: translate3d(.35rem, .4rem, 0);
}

.section-method .method-step--02 .method-step__body::after {
  inset: .35rem .8rem -1rem -1rem;
  transform: translate3d(-.35rem, .4rem, 0);
}

.section-method .method-step__title {
  position: relative;
  max-width: 15ch;
  margin: 0;
  color: #f5fbff;
  font-size: clamp(1.55rem, 1.65vw, 2rem);
  line-height: 1.03;
  letter-spacing: -.035em;
}

.section-method .method-step__title::before {
  content: "";
  position: absolute;
  top: -.72rem;
  left: 0;
  width: 2.6rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(211, 242, 255, .82), rgba(90, 179, 255, .30), transparent);
  box-shadow: 0 0 .65rem rgba(88, 178, 255, .12);
}

.section-method .method-step__text {
  max-width: 33rem;
  margin: 0;
  color: rgba(198, 218, 238, .74);
  font-size: .95rem;
  line-height: 1.6;
}

.section-method .method-circuit.is-root-active .method-circuit__root {
  opacity: 1;
  transform: translateX(-50%) translateY(-.18rem);
}

.section-method .method-circuit.is-root-active .method-circuit__wire--root,
.section-method .method-circuit.has-stage-1 .method-circuit__wire--01,
.section-method .method-circuit.has-stage-2 .method-circuit__wire--02 {
  stroke-dashoffset: 0;
  opacity: 1;
}

.section-method .method-circuit.is-root-active .method-circuit__junction--root,
.section-method .method-circuit.has-stage-1 .method-circuit__junction--01,
.section-method .method-circuit.has-stage-2 .method-circuit__junction--02 {
  opacity: 1;
  fill: rgba(137, 214, 255, .96);
  stroke: rgba(218, 246, 255, .92);
}

.section-method .method-step.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.section-method .method-step.is-active .method-step__node {
  border-color: rgba(215, 243, 255, .48);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 .8rem 1.8rem rgba(0,0,0,.16),
    0 0 1.4rem rgba(83, 176, 255, .14);
  animation: pp-method-node-charge 1.35s ease-out 1;
}

@keyframes pp-method-node-charge {
  0% { transform: scale(.94); }
  48% {
    transform: scale(1.065);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.20),
      0 .8rem 1.8rem rgba(0,0,0,.16),
      0 0 2rem rgba(103, 196, 255, .23);
  }
  100% { transform: scale(1); }
}

@media (hover: hover) and (pointer: fine) {
  .section-method .method-step.is-active:hover {
    transform: translate3d(0, -.28rem, 0);
  }

  .section-method .method-step.is-active:hover .method-step__node {
    border-color: rgba(229, 248, 255, .64);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.20),
      0 .9rem 1.9rem rgba(0,0,0,.17),
      0 0 1.55rem rgba(94, 188, 255, .17);
  }
}

.section-method .method-note {
  position: relative;
  width: fit-content;
  max-width: 44rem;
  margin: 1rem auto 0;
  padding: .15rem 0 .15rem 1.4rem;
  border: 0;
  border-radius: 0;
  color: rgba(173, 199, 224, .67);
  background: transparent;
  font-size: .89rem;
  line-height: 1.55;
  text-align: center;
}

.section-method .method-note::before {
  content: "";
  position: absolute;
  top: .55rem;
  left: 0;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: rgba(132, 207, 255, .72);
  box-shadow: 0 0 .65rem rgba(99, 186, 255, .18);
}

@media (max-width: 64rem) {
  .section-method {
    padding: 4.75rem 0 5.75rem;
  }

  .section-method > .container {
    width: min(100% - 2rem, 72rem);
  }

  .section-method .method-intro {
    grid-template-columns: 1fr;
    gap: 1.35rem;
    margin-bottom: 2.6rem;
  }

  .section-method .method-intro::after { display: none; }

  .section-method .method-intro h2 {
    max-width: 9ch;
    font-size: clamp(3rem, 7.5vw, 4.8rem);
  }

  .section-method .method-lead { max-width: 42rem; }
  .section-method .method-circuit { min-height: 38rem; }

  .section-method .method-step,
  .section-method .method-step:nth-child(1),
  .section-method .method-step:nth-child(2) {
    width: min(29rem, 43%);
  }

  .section-method .method-step--01 { top: 13rem; left: 1%; }
  .section-method .method-step--02 { top: 26rem; right: 1%; }
}

@media (max-width: 48rem) {
  .section-method {
    padding: 4.2rem 0 4.8rem;
    background:
      linear-gradient(180deg, rgba(2, 8, 17, 0) 0, rgba(2, 9, 20, .64) 3rem, var(--method-bg) 6rem, #03101d 55%, var(--method-bg-deep) 100%);
  }

  .section-method > .container {
    width: min(100% - 1.25rem, 34rem);
  }

  .section-method .method-intro {
    margin-bottom: 2.2rem;
    padding-top: 1.2rem;
  }

  .section-method .method-intro::before { font-size: .58rem; }

  .section-method .method-intro h2 {
    max-width: 8.2ch;
    font-size: clamp(2.7rem, 12vw, 3.8rem);
  }

  .section-method .method-lead {
    padding-left: 1rem;
    font-size: .93rem;
    line-height: 1.6;
  }

  .section-method .method-circuit {
    min-height: 37rem;
    margin-top: .8rem;
    border-top-color: rgba(127, 205, 255, .04);
  }

  .section-method .method-circuit::before {
    top: 2rem;
    width: 90%;
    height: 30rem;
  }

  .section-method .method-circuit__root { top: 1.2rem; }

  .section-method .method-circuit__root-shell {
    width: 4.25rem;
    border-radius: 1rem;
  }

  .section-method .method-circuit__root-label { font-size: .52rem; }

  .section-method .method-circuit__map { display: none; }

  .section-method .method-sequence {
    position: absolute;
    inset: 0;
  }

  .section-method .method-sequence::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 6.6rem;
    bottom: 1.2rem;
    left: 1.25rem;
    width: 1px;
    background: linear-gradient(180deg, rgba(143, 214, 255, .18), rgba(143, 214, 255, .56) 16%, rgba(84, 170, 255, .24) 82%, transparent);
    transform: scaleY(.06);
    transform-origin: top;
    transition: transform 900ms cubic-bezier(.2,.75,.2,1);
  }

  .section-method .method-circuit.has-stage-1 .method-sequence::before { transform: scaleY(.5); }
  .section-method .method-circuit.has-stage-2 .method-sequence::before { transform: scaleY(1); }

  .section-method .method-step,
  .section-method .method-step:nth-child(1),
  .section-method .method-step:nth-child(2) {
    left: 3.2rem;
    right: auto;
    width: calc(100% - 3.35rem);
  }

  .section-method .method-step--01 { top: 9.2rem; }
  .section-method .method-step--02 { top: 23.3rem; }

  .section-method .method-step__node,
  .section-method .method-step--01 .method-step__node,
  .section-method .method-step--02 .method-step__node {
    top: .72rem;
    left: -3.1rem;
    right: auto;
    width: 2.55rem;
    min-height: 2.55rem;
    border-radius: .68rem;
    font-size: .62rem;
  }

  .section-method .method-step__body {
    padding: 1.15rem 1rem 1.05rem;
  }

  .section-method .method-step__body::before,
  .section-method .method-step--02 .method-step__body::before {
    inset: -.25rem -.2rem -.35rem -.25rem;
    border-radius: 1rem;
    clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, .8rem 100%, 0 calc(100% - .8rem));
  }

  .section-method .method-step__body::after,
  .section-method .method-step--02 .method-step__body::after {
    inset: .3rem -.35rem -.55rem .4rem;
    border-radius: .95rem;
    transform: translate3d(.18rem, .2rem, 0);
  }

  .section-method .method-step__title {
    max-width: 17ch;
    font-size: clamp(1.4rem, 7vw, 1.82rem);
  }

  .section-method .method-step__text {
    font-size: .9rem;
    line-height: 1.54;
  }

  .section-method .method-note {
    margin: .8rem 0 0 3.2rem;
    padding-left: 1.15rem;
    text-align: left;
    font-size: .83rem;
  }
}

@media (max-width: 25rem) {
  .section-method > .container {
    width: min(100% - .9rem, 31rem);
  }

  .section-method .method-step,
  .section-method .method-step:nth-child(1),
  .section-method .method-step:nth-child(2) {
    left: 2.9rem;
    width: calc(100% - 3rem);
  }

  .section-method .method-step__node,
  .section-method .method-step--01 .method-step__node,
  .section-method .method-step--02 .method-step__node {
    left: -2.85rem;
  }

  .section-method .method-sequence::before { left: 1.05rem; }
  .section-method .method-note { margin-left: 2.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .section-method .method-circuit__root,
  .section-method .method-step,
  .section-method .method-step__node,
  .section-method .method-circuit__wire,
  .section-method .method-circuit__junction,
  .section-method .method-sequence::before {
    animation: none !important;
    transition: none !important;
  }

  .section-method .method-circuit__root,
  .section-method .method-step {
    opacity: 1 !important;
    transform: none !important;
  }

  .section-method .method-circuit__wire--root,
  .section-method .method-circuit__wire--01,
  .section-method .method-circuit__wire--02 {
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
  }

  .section-method .method-circuit__junction { opacity: 1 !important; }
  .section-method .method-sequence::before { transform: none !important; }
}


/* ==========================================================================
   B9.5 — Crystal Process Circuit · stability + composition fix
   Corrections after visual QA:
   - 03/04 are hard-hidden in the pilot;
   - no competing horizontal bar above ROOT;
   - ROOT / 01 / 02 form a closed composition;
   - slower, softer reveal.
   ========================================================================== */

/* Pilot means pilot: legacy .method-step rules must never leak 03/04 visually. */
.section-method [data-method-pending],
.section-method .method-step--pending,
.section-method [data-method-pending] .method-step__node,
.section-method [data-method-pending] .method-step__body {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* The long top line in B9.4 competed with ROOT and read like a foreign rail. */
.section-method .method-circuit {
  min-height: clamp(39rem, 47vw, 43rem);
  border-top: 0;
}

.section-method .method-circuit::after {
  display: none;
}

/* Keep the atmosphere behind the circuit, but lower contrast. */
.section-method .method-circuit::before {
  top: 4rem;
  width: min(54rem, 72%);
  height: 27rem;
  background:
    radial-gradient(ellipse at 50% 34%,
      rgba(72, 159, 255, .058),
      rgba(33, 91, 161, .014) 48%,
      transparent 74%);
}

/* Give the root a little more visual ownership without moving layout. */
.section-method .method-circuit__root {
  top: 1.9rem;
  opacity: .22;
  transition:
    opacity 700ms ease,
    transform 860ms cubic-bezier(.18,.78,.2,1);
}

.section-method .method-circuit__root-label {
  opacity: .72;
}

/* Stronger hierarchy: 01 enters first, 02 later and slightly higher than B9.4. */
.section-method .method-step--01 {
  top: 14rem;
  left: 3.2%;
}

.section-method .method-step--02 {
  top: 25.2rem;
  right: 3%;
}

.section-method .method-step,
.section-method .method-step:nth-child(1),
.section-method .method-step:nth-child(2) {
  opacity: 0;
  transform: translate3d(0, 1.65rem, 0) scale(.975);
  transition:
    opacity 720ms ease,
    transform 920ms cubic-bezier(.18,.78,.2,1);
}

/* Do not let hidden/legacy state generate pseudo-numbering or extra geometry. */
.section-method .method-step::before,
.section-method .method-step::after {
  content: none !important;
  display: none !important;
}

/* Wires draw more slowly, making the process easier to read. */
.section-method .method-circuit__wire--root {
  transition:
    stroke-dashoffset 900ms cubic-bezier(.18,.72,.2,1),
    opacity 520ms ease;
}

.section-method .method-circuit__wire--01 {
  transition:
    stroke-dashoffset 1120ms cubic-bezier(.18,.72,.2,1),
    opacity 520ms ease;
}

.section-method .method-circuit__wire--02 {
  transition:
    stroke-dashoffset 1240ms cubic-bezier(.18,.72,.2,1),
    opacity 520ms ease;
}

/* Ghost path is now only a faint structural hint. */
.section-method .method-circuit__wire--ghost {
  stroke: rgba(92, 174, 247, .052);
}

/* Active modules receive a controlled settle instead of a pop. */
.section-method .method-step.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.section-method .method-step.is-active .method-step__node {
  animation: pp-method-node-charge-b95 1.8s cubic-bezier(.18,.72,.2,1) 1;
}

@keyframes pp-method-node-charge-b95 {
  0% {
    transform: scale(.92);
    opacity: .55;
  }
  46% {
    transform: scale(1.055);
    opacity: 1;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.20),
      0 .8rem 1.8rem rgba(0,0,0,.16),
      0 0 2.1rem rgba(103, 196, 255, .22);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Tablet stays composed; no card leakage. */
@media (max-width: 64rem) {
  .section-method .method-circuit {
    min-height: 41rem;
  }

  .section-method .method-step--01 {
    top: 14.1rem;
    left: 1.5%;
  }

  .section-method .method-step--02 {
    top: 27rem;
    right: 1.5%;
  }
}

/* Mobile: compact and explicit; hidden stages stay hard-hidden. */
@media (max-width: 48rem) {
  .section-method .method-circuit {
    min-height: 35rem;
  }

  .section-method .method-step--01 {
    top: 8.7rem;
  }

  .section-method .method-step--02 {
    top: 21.3rem;
  }

  .section-method .method-sequence::before {
    transition: transform 1150ms cubic-bezier(.18,.72,.2,1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-method .method-step,
  .section-method .method-circuit__root,
  .section-method .method-circuit__wire--root,
  .section-method .method-circuit__wire--01,
  .section-method .method-circuit__wire--02 {
    transition: none !important;
  }
}


/* ==========================================================================
   B9.6 — Full reversible Crystal Process Circuit
   - approved B9.5 rhythm retained;
   - 03 + 04 restored as real circuit stages;
   - state can build DOWN and retract UP;
   - no layout-driven animation, no scroll hijacking.
   ========================================================================== */

/* B9.5 pilot hard-hide is obsolete because 03/04 are now approved stages. */
.section-method .method-step--03,
.section-method .method-step--04 {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Reserve the complete tree so animation never causes CLS. */
.section-method .method-circuit {
  min-height: clamp(70rem, 78vw, 76rem);
}

/* Progressive enhancement: all content is visible if JS does not initialize. */
.section-method .method-step,
.section-method .method-step:nth-child(1),
.section-method .method-step:nth-child(2),
.section-method .method-step:nth-child(3),
.section-method .method-step:nth-child(4) {
  opacity: 1;
  transform: none;
}

.section-method .method-circuit.is-ready .method-step:not(.is-active) {
  opacity: 0;
  transform: translate3d(0, 1.65rem, 0) scale(.975);
}

.section-method .method-circuit.is-ready .method-step.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* ROOT also remains safe when JS is unavailable. */
.section-method .method-circuit__root {
  opacity: 1;
}

.section-method .method-circuit.is-ready .method-circuit__root:not(.is-active) {
  opacity: .18;
  transform: translateX(-50%) translateY(.8rem) scale(.975);
}

.section-method .method-circuit.is-ready .method-circuit__root.is-active {
  opacity: 1;
  transform: translateX(-50%) translateY(-.18rem) scale(1);
}

/* Full alternating process tree. */
.section-method .method-step--01 {
  top: 14rem;
  left: 3.2%;
}

.section-method .method-step--02 {
  top: 28.5rem;
  right: 3%;
}

.section-method .method-step--03 {
  top: 43.5rem;
  left: 4.2%;
}

.section-method .method-step--04 {
  top: 58rem;
  right: 3.2%;
}

.section-method .method-step--03 .method-step__node {
  right: -1.1rem;
}

.section-method .method-step--04 .method-step__node {
  left: -1.1rem;
}

/* Mirror the crystal cut for alternating modules. */
.section-method .method-step--03 .method-step__body::before {
  inset: -.5rem -.35rem -.6rem -.6rem;
  background:
    radial-gradient(circle at 18% 13%, rgba(159, 226, 255, .085), transparent 20%),
    linear-gradient(145deg, rgba(18, 58, 98, .40), rgba(4, 18, 35, .70) 58%, rgba(8, 32, 57, .42));
  clip-path: polygon(0 0, calc(100% - 1.4rem) 0, 100% 1.4rem, 100% 100%, 1.15rem 100%, 0 calc(100% - 1.15rem));
}

.section-method .method-step--04 .method-step__body::before {
  inset: -.5rem -.6rem -.6rem -.35rem;
  background:
    radial-gradient(circle at 82% 15%, rgba(151, 223, 255, .09), transparent 20%),
    linear-gradient(215deg, rgba(18, 59, 100, .41), rgba(4, 18, 35, .70) 58%, rgba(8, 32, 57, .43));
  clip-path: polygon(1.4rem 0, 100% 0, 100% calc(100% - 1.15rem), calc(100% - 1.15rem) 100%, 0 100%, 0 1.4rem);
}

.section-method .method-step--03 .method-step__body::after {
  inset: .35rem -1rem -1rem .8rem;
  transform: translate3d(.35rem, .4rem, 0);
}

.section-method .method-step--04 .method-step__body::after {
  inset: .35rem .8rem -1rem -1rem;
  transform: translate3d(-.35rem, .4rem, 0);
}

/* All five circuit segments start retracted only when runtime is ready. */
.section-method .method-circuit.is-ready .method-circuit__wire--root,
.section-method .method-circuit.is-ready .method-circuit__wire--01,
.section-method .method-circuit.is-ready .method-circuit__wire--02,
.section-method .method-circuit.is-ready .method-circuit__wire--03,
.section-method .method-circuit.is-ready .method-circuit__wire--04 {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: .46;
}

.section-method .method-circuit__wire--03,
.section-method .method-circuit__wire--04 {
  stroke: rgba(178, 229, 255, .86);
  stroke-width: 1.45;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  opacity: .78;
  transition:
    stroke-dashoffset 1240ms cubic-bezier(.18,.72,.2,1),
    opacity 520ms ease;
}

.section-method .method-circuit__wire--04 {
  transition-duration: 1320ms, 520ms;
}

/* Reversible state: adding builds, removing retracts using the same transitions. */
.section-method .method-circuit.is-root-active .method-circuit__wire--root,
.section-method .method-circuit.has-stage-1 .method-circuit__wire--01,
.section-method .method-circuit.has-stage-2 .method-circuit__wire--02,
.section-method .method-circuit.has-stage-3 .method-circuit__wire--03,
.section-method .method-circuit.has-stage-4 .method-circuit__wire--04 {
  stroke-dashoffset: 0;
  opacity: 1;
}

.section-method .method-circuit__junction--03,
.section-method .method-circuit__junction--04 {
  fill: rgba(2, 13, 25, .92);
  stroke: rgba(172, 226, 255, .22);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: .25;
  transition: opacity 360ms ease, fill 360ms ease, stroke 360ms ease;
}

.section-method .method-circuit.has-stage-3 .method-circuit__junction--03,
.section-method .method-circuit.has-stage-4 .method-circuit__junction--04 {
  opacity: 1;
  fill: rgba(137, 214, 255, .96);
  stroke: rgba(218, 246, 255, .92);
}

/* Root state is now explicit so it can animate backward too. */
.section-method .method-circuit.is-root-active .method-circuit__root {
  opacity: 1;
  transform: translateX(-50%) translateY(-.18rem) scale(1);
}

/* Keep the note attached to the end of the now taller circuit. */
.section-method .method-note {
  margin-top: 1.35rem;
}

/* Tablet: same story, slightly denser. */
@media (max-width: 64rem) {
  .section-method .method-circuit {
    min-height: 72rem;
  }

  .section-method .method-step--01 { top: 14rem; left: 1.5%; }
  .section-method .method-step--02 { top: 28.8rem; right: 1.5%; }
  .section-method .method-step--03 { top: 44rem; left: 2%; }
  .section-method .method-step--04 { top: 58.8rem; right: 1.5%; }
}

/* Mobile: four compact stages on one reversible vertical conductor. */
@media (max-width: 48rem) {
  .section-method .method-circuit {
    min-height: 61rem;
  }

  .section-method .method-step,
  .section-method .method-step:nth-child(1),
  .section-method .method-step:nth-child(2),
  .section-method .method-step:nth-child(3),
  .section-method .method-step:nth-child(4) {
    left: 3.2rem;
    right: auto;
    width: calc(100% - 3.35rem);
  }

  .section-method .method-step--01 { top: 8.7rem; }
  .section-method .method-step--02 { top: 21rem; }
  .section-method .method-step--03 { top: 33.5rem; }
  .section-method .method-step--04 { top: 46rem; }

  .section-method .method-step__node,
  .section-method .method-step--01 .method-step__node,
  .section-method .method-step--02 .method-step__node,
  .section-method .method-step--03 .method-step__node,
  .section-method .method-step--04 .method-step__node {
    top: .72rem;
    left: -3.1rem;
    right: auto;
    width: 2.55rem;
    min-height: 2.55rem;
  }

  /* Mobile conductor is reversible by stage count. */
  .section-method .method-circuit.is-ready .method-sequence::before {
    transform: scaleY(.05);
  }

  .section-method .method-circuit.has-stage-1 .method-sequence::before { transform: scaleY(.29); }
  .section-method .method-circuit.has-stage-2 .method-sequence::before { transform: scaleY(.53); }
  .section-method .method-circuit.has-stage-3 .method-sequence::before { transform: scaleY(.77); }
  .section-method .method-circuit.has-stage-4 .method-sequence::before { transform: scaleY(1); }

  .section-method .method-step--03 .method-step__body::before,
  .section-method .method-step--04 .method-step__body::before {
    inset: -.25rem -.2rem -.35rem -.25rem;
    border-radius: 1rem;
    clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, .8rem 100%, 0 calc(100% - .8rem));
  }

  .section-method .method-step--03 .method-step__body::after,
  .section-method .method-step--04 .method-step__body::after {
    inset: .3rem -.35rem -.55rem .4rem;
    border-radius: .95rem;
    transform: translate3d(.18rem, .2rem, 0);
  }
}

@media (max-width: 25rem) {
  .section-method .method-step,
  .section-method .method-step:nth-child(1),
  .section-method .method-step:nth-child(2),
  .section-method .method-step:nth-child(3),
  .section-method .method-step:nth-child(4) {
    left: 2.9rem;
    width: calc(100% - 3rem);
  }

  .section-method .method-step__node,
  .section-method .method-step--01 .method-step__node,
  .section-method .method-step--02 .method-step__node,
  .section-method .method-step--03 .method-step__node,
  .section-method .method-step--04 .method-step__node {
    left: -2.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-method .method-circuit__wire--03,
  .section-method .method-circuit__wire--04 {
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
  }

  .section-method .method-step--03,
  .section-method .method-step--04 {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ==========================================================================
   B9.7 — Logo root + crystal card reinterpretation
   Visual critique addressed:
   1) circuit works, but cards still feel too editorial/generic
   2) root should carry brand DNA, not a placeholder letter
   3) panels need stronger relation with the glass/satellite language
   ========================================================================== */

.section-method .method-circuit__root {
  top: 5.6rem;
}

.section-method .method-circuit__root-shell {
  width: clamp(4.9rem, 5.3vw, 5.6rem);
  height: clamp(4.9rem, 5.3vw, 5.6rem);
  padding: .45rem;
  border-radius: 1.45rem;
  background:
    radial-gradient(circle at 50% 28%, rgba(165, 228, 255, .16), transparent 45%),
    linear-gradient(145deg, rgba(18, 54, 96, .36), rgba(7, 20, 38, .58) 55%, rgba(11, 34, 60, .34));
  border: 1px solid rgba(142, 216, 255, .18);
  box-shadow:
    0 0 0 1px rgba(205, 240, 255, .06) inset,
    0 16px 42px rgba(0, 0, 0, .34),
    0 0 26px rgba(69, 144, 255, .12);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.section-method .method-circuit__root-shell::before {
  content: "";
  position: absolute;
  inset: .32rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(176, 229, 255, .12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 -12px 18px rgba(0, 0, 0, .12);
}

.section-method .method-circuit__root-shell::after {
  content: "";
  position: absolute;
  inset: -.55rem;
  border-radius: 1.75rem;
  background: radial-gradient(circle, rgba(74, 147, 255, .18), transparent 70%);
  filter: blur(14px);
  opacity: .55;
  pointer-events: none;
}

.section-method .method-circuit__root-core {
  border-radius: 1rem;
  background:
    linear-gradient(180deg, rgba(129, 203, 255, .34), rgba(65, 128, 211, .18)),
    linear-gradient(180deg, rgba(12, 26, 48, .88), rgba(7, 18, 34, .96));
  border: 1px solid rgba(176, 229, 255, .22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -10px 16px rgba(0, 0, 0, .22),
    0 10px 26px rgba(0, 0, 0, .22);
}

.section-method .method-circuit__root-logo {
  width: 72%;
  height: 72%;
  object-fit: contain;
  display: block;
  filter:
    drop-shadow(0 0 8px rgba(96, 186, 255, .18))
    drop-shadow(0 3px 10px rgba(0, 0, 0, .24));
}

.section-method .method-circuit__root-mark {
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: rgba(235, 248, 255, .96);
}

.section-method .method-circuit__root-label {
  margin-top: .85rem;
  letter-spacing: .22em;
  font-size: .66rem;
  color: rgba(156, 206, 238, .72);
}

/* Global card shell: closer to project cards / satellite UI. */
.section-method .method-step {
  filter:
    drop-shadow(0 20px 42px rgba(0, 0, 0, .28))
    drop-shadow(0 0 24px rgba(61, 126, 208, .09));
}

.section-method .method-step::before {
  content: "";
  position: absolute;
  inset: -.8rem -.95rem -1rem -.95rem;
  border-radius: 1.7rem;
  background:
    radial-gradient(circle at 14% 12%, rgba(151, 224, 255, .10), transparent 20%),
    radial-gradient(circle at 84% 16%, rgba(121, 189, 255, .09), transparent 22%),
    linear-gradient(180deg, rgba(9, 23, 40, .16), rgba(4, 12, 24, 0));
  opacity: .88;
  pointer-events: none;
  filter: blur(.2px);
}

.section-method .method-step__body {
  position: relative;
  overflow: visible;
  padding: 2rem 2.05rem 1.9rem;
  border-radius: 1.55rem;
  background:
    linear-gradient(180deg, rgba(20, 57, 101, .14), rgba(7, 18, 34, .16)),
    linear-gradient(140deg, rgba(9, 26, 47, .92), rgba(5, 14, 27, .96) 58%, rgba(8, 26, 46, .90));
  border: 1px solid rgba(138, 213, 255, .16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .11),
    inset 0 -16px 30px rgba(0, 0, 0, .15),
    0 0 0 1px rgba(169, 224, 255, .04);
  clip-path: polygon(0 0, calc(100% - 1.35rem) 0, 100% 1.35rem, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));
}

.section-method .method-step__body::before {
  content: "";
  position: absolute;
  inset: .18rem;
  border-radius: 1.32rem;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 20%),
    linear-gradient(150deg, rgba(25, 66, 113, .18), rgba(6, 18, 34, .06) 52%, rgba(12, 42, 75, .12));
  border: 1px solid rgba(149, 223, 255, .09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    inset 0 -18px 22px rgba(0, 0, 0, .12);
}

.section-method .method-step__body::after {
  content: "";
  position: absolute;
  inset: .25rem;
  border-radius: 1.25rem;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .08), transparent 16%),
    radial-gradient(circle at 82% 18%, rgba(145, 216, 255, .08), transparent 18%),
    linear-gradient(90deg, transparent, rgba(140, 215, 255, .05), transparent);
  opacity: .92;
}

.section-method .method-step__body > * {
  position: relative;
  z-index: 2;
}

.section-method .method-step__body .method-step__title {
  margin-bottom: 1.15rem;
  max-width: 88%;
}

.section-method .method-step__body .method-step__text {
  max-width: 92%;
}

.section-method .method-step__title {
  font-size: clamp(2.05rem, 2.2vw, 2.7rem);
  line-height: .96;
  letter-spacing: -.045em;
  color: rgba(245, 251, 255, .98);
}

.section-method .method-step__text {
  font-size: 1rem;
  line-height: 1.72;
  color: rgba(203, 220, 233, .88);
}

.section-method .method-step__node {
  top: 1.1rem;
  width: 3.15rem;
  min-height: 3.15rem;
  border-radius: .98rem;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(124, 201, 255, .10), rgba(62, 120, 196, .05)),
    linear-gradient(180deg, rgba(10, 27, 50, .95), rgba(7, 18, 34, .98));
  border: 1px solid rgba(147, 220, 255, .26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -10px 18px rgba(0, 0, 0, .14),
    0 10px 24px rgba(0, 0, 0, .18),
    0 0 0 1px rgba(210, 242, 255, .06);
}

.section-method .method-step__node::before {
  content: "";
  position: absolute;
  inset: .18rem;
  border-radius: .82rem;
  border: 1px solid rgba(173, 231, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.section-method .method-step__node::after {
  content: "";
  position: absolute;
  inset: -.42rem;
  border-radius: 1.15rem;
  background: radial-gradient(circle, rgba(90, 160, 255, .18), transparent 72%);
  filter: blur(10px);
  opacity: .52;
  pointer-events: none;
}

.section-method .method-step--01 .method-step__node,
.section-method .method-step--03 .method-step__node {
  right: -1.55rem;
}

.section-method .method-step--02 .method-step__node,
.section-method .method-step--04 .method-step__node {
  left: -1.55rem;
}

.section-method .method-step--02 .method-step__body,
.section-method .method-step--04 .method-step__body {
  clip-path: polygon(1.35rem 0, 100% 0, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 0 100%, 0 1.35rem);
}

.section-method .method-step--02 .method-step__body::before,
.section-method .method-step--04 .method-step__body::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 20%),
    linear-gradient(210deg, rgba(25, 66, 113, .18), rgba(6, 18, 34, .06) 52%, rgba(12, 42, 75, .12));
}

.section-method .method-step--01 .method-step__body::after,
.section-method .method-step--03 .method-step__body::after {
  background:
    linear-gradient(90deg, rgba(129, 208, 255, .16), transparent 12%),
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .08), transparent 16%),
    radial-gradient(circle at 82% 18%, rgba(145, 216, 255, .08), transparent 18%),
    linear-gradient(90deg, transparent, rgba(140, 215, 255, .05), transparent);
}

.section-method .method-step--02 .method-step__body::after,
.section-method .method-step--04 .method-step__body::after {
  background:
    linear-gradient(270deg, rgba(129, 208, 255, .16), transparent 12%),
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .08), transparent 16%),
    radial-gradient(circle at 82% 18%, rgba(145, 216, 255, .08), transparent 18%),
    linear-gradient(90deg, transparent, rgba(140, 215, 255, .05), transparent);
}

/* Slim crystalline top trace inside each card for consistency with the page. */
.section-method .method-step__title::before {
  content: "";
  position: absolute;
  top: -1.05rem;
  left: .1rem;
  width: 4rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(180, 232, 255, .92), rgba(180, 232, 255, .08));
  opacity: .82;
}

.section-method .method-step__title {
  position: relative;
}

.section-method .method-circuit__wire {
  filter: drop-shadow(0 0 8px rgba(121, 196, 255, .10));
}

/* Make the four cards sit slightly lighter in the section. */
.section-method .method-step.is-active .method-step__body {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -16px 30px rgba(0, 0, 0, .14),
    0 0 0 1px rgba(169, 224, 255, .05),
    0 18px 38px rgba(0, 0, 0, .22);
}

/* Mobile: keep the same language without overloading width. */
@media (max-width: 48rem) {
  .section-method .method-circuit__root {
    top: 3.65rem;
  }

  .section-method .method-circuit__root-shell {
    width: 4.5rem;
    height: 4.5rem;
  }

  .section-method .method-step::before {
    inset: -.55rem -.45rem -.65rem -.45rem;
    border-radius: 1.25rem;
  }

  .section-method .method-step__body {
    padding: 1.45rem 1.2rem 1.35rem;
    border-radius: 1.15rem;
  }

  .section-method .method-step__body::before {
    border-radius: .95rem;
  }

  .section-method .method-step__body::after {
    border-radius: .9rem;
  }

  .section-method .method-step__title {
    font-size: clamp(2rem, 8vw, 2.45rem);
    max-width: 92%;
  }

  .section-method .method-step__text {
    font-size: .98rem;
    line-height: 1.62;
    max-width: 100%;
  }

  .section-method .method-step__node,
  .section-method .method-step--01 .method-step__node,
  .section-method .method-step--02 .method-step__node,
  .section-method .method-step--03 .method-step__node,
  .section-method .method-step--04 .method-step__node {
    width: 2.75rem;
    min-height: 2.75rem;
    left: -2.95rem;
    right: auto;
  }
}


/* ==========================================================================
   B9.8 — Crystal card brightness + stronger hover affordance
   Goal:
   - lighter card tone
   - clearer "this is interactive"
   - stronger glass sensation with internal reflections and neon halo
   ========================================================================== */

.section-method .method-step {
  cursor: pointer;
}

.section-method .method-step__body {
  transition:
    transform .34s cubic-bezier(.22, 1, .36, 1),
    box-shadow .34s cubic-bezier(.22, 1, .36, 1),
    border-color .34s cubic-bezier(.22, 1, .36, 1),
    background .34s cubic-bezier(.22, 1, .36, 1),
    filter .34s cubic-bezier(.22, 1, .36, 1);
  background:
    radial-gradient(circle at 18% 14%, rgba(177, 228, 255, .10), transparent 24%),
    radial-gradient(circle at 83% 18%, rgba(122, 184, 255, .10), transparent 25%),
    linear-gradient(180deg, rgba(35, 86, 148, .17), rgba(10, 26, 47, .22)),
    linear-gradient(140deg, rgba(14, 37, 66, .88), rgba(7, 18, 34, .93) 56%, rgba(12, 42, 76, .82));
  border-color: rgba(160, 226, 255, .22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -16px 26px rgba(0, 0, 0, .13),
    0 0 0 1px rgba(188, 231, 255, .05),
    0 18px 34px rgba(0, 0, 0, .18),
    0 0 26px rgba(52, 124, 219, .08);
}

.section-method .method-step__body::before {
  border-color: rgba(170, 229, 255, .13);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 20%),
    linear-gradient(150deg, rgba(43, 101, 167, .19), rgba(8, 22, 41, .07) 52%, rgba(23, 67, 116, .15));
}

.section-method .method-step__body::after {
  background:
    radial-gradient(circle at 14% 10%, rgba(255, 255, 255, .11), transparent 14%),
    radial-gradient(circle at 84% 14%, rgba(175, 225, 255, .10), transparent 18%),
    linear-gradient(90deg, transparent 0%, rgba(164, 220, 255, .07) 45%, transparent 100%);
  opacity: 1;
}

.section-method .method-step__title {
  color: rgba(248, 252, 255, .99);
  text-shadow: 0 0 18px rgba(88, 157, 255, .06);
}

.section-method .method-step__text {
  color: rgba(215, 229, 240, .92);
}

.section-method .method-step__node {
  transition:
    transform .34s cubic-bezier(.22, 1, .36, 1),
    box-shadow .34s cubic-bezier(.22, 1, .36, 1),
    border-color .34s cubic-bezier(.22, 1, .36, 1),
    background .34s cubic-bezier(.22, 1, .36, 1);
  background:
    linear-gradient(180deg, rgba(141, 209, 255, .14), rgba(70, 128, 212, .07)),
    linear-gradient(180deg, rgba(12, 31, 58, .95), rgba(8, 20, 37, .98));
  border-color: rgba(172, 231, 255, .28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -10px 18px rgba(0, 0, 0, .14),
    0 10px 24px rgba(0, 0, 0, .18),
    0 0 18px rgba(63, 137, 255, .12);
}

.section-method .method-step__node::after {
  background: radial-gradient(circle, rgba(96, 175, 255, .24), transparent 72%);
  opacity: .68;
}

.section-method .method-step:hover .method-step__body,
.section-method .method-step:focus-within .method-step__body,
.section-method .method-step.is-active .method-step__body {
  transform: translateY(-4px);
  border-color: rgba(198, 236, 255, .34);
  background:
    radial-gradient(circle at 18% 14%, rgba(190, 234, 255, .13), transparent 24%),
    radial-gradient(circle at 83% 18%, rgba(139, 196, 255, .13), transparent 25%),
    linear-gradient(180deg, rgba(47, 112, 182, .22), rgba(13, 34, 60, .26)),
    linear-gradient(140deg, rgba(18, 45, 78, .92), rgba(8, 21, 39, .94) 56%, rgba(19, 56, 100, .87));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -16px 26px rgba(0, 0, 0, .12),
    0 0 0 1px rgba(210, 240, 255, .07),
    0 18px 36px rgba(0, 0, 0, .18),
    0 0 34px rgba(88, 163, 255, .20),
    0 0 70px rgba(55, 128, 227, .11);
  filter: saturate(112%);
}

.section-method .method-step:hover .method-step__body::before,
.section-method .method-step:focus-within .method-step__body::before,
.section-method .method-step.is-active .method-step__body::before {
  border-color: rgba(198, 236, 255, .18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 0 0 1px rgba(205, 241, 255, .04);
}

.section-method .method-step:hover .method-step__body::after,
.section-method .method-step:focus-within .method-step__body::after,
.section-method .method-step.is-active .method-step__body::after {
  background:
    radial-gradient(circle at 14% 10%, rgba(255, 255, 255, .14), transparent 14%),
    radial-gradient(circle at 84% 14%, rgba(183, 229, 255, .12), transparent 18%),
    linear-gradient(90deg, transparent 0%, rgba(176, 228, 255, .12) 45%, transparent 100%);
}

.section-method .method-step:hover .method-step__node,
.section-method .method-step:focus-within .method-step__node,
.section-method .method-step.is-active .method-step__node {
  transform: scale(1.04);
  border-color: rgba(206, 241, 255, .40);
  background:
    linear-gradient(180deg, rgba(162, 220, 255, .18), rgba(84, 143, 220, .09)),
    linear-gradient(180deg, rgba(14, 35, 64, .95), rgba(8, 21, 39, .98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .17),
    inset 0 -10px 18px rgba(0, 0, 0, .12),
    0 10px 24px rgba(0, 0, 0, .18),
    0 0 24px rgba(93, 168, 255, .24);
}

.section-method .method-step:hover::before,
.section-method .method-step:focus-within::before,
.section-method .method-step.is-active::before {
  background:
    radial-gradient(circle at 14% 12%, rgba(176, 230, 255, .14), transparent 22%),
    radial-gradient(circle at 84% 16%, rgba(145, 204, 255, .14), transparent 24%),
    linear-gradient(180deg, rgba(12, 32, 57, .18), rgba(4, 12, 24, 0));
}

@media (prefers-reduced-motion: reduce) {
  .section-method .method-step__body,
  .section-method .method-step__node {
    transition: none !important;
  }
}


/* ==========================================================================
   B9.9 — Refined Crystal Modules
   Visual refinement after B9.8 QA:
   - less opaque blue mass, more transparent crystal;
   - better typography/padding for long titles;
   - smaller integrated node connector;
   - precise highlight / refraction edges;
   - hover glow remains obvious without implying click action.
   ========================================================================== */

.section-method .method-step {
  cursor: default;
}

/* Lighter crystal, less "solid blue panel". */
.section-method .method-step__body {
  padding: 1.85rem 1.8rem 1.65rem;
  border-color: rgba(180, 229, 255, .20);
  background:
    radial-gradient(circle at 16% 12%, rgba(213, 243, 255, .10), transparent 20%),
    radial-gradient(circle at 82% 16%, rgba(130, 198, 255, .075), transparent 22%),
    linear-gradient(180deg, rgba(41, 91, 148, .11), rgba(10, 26, 47, .13)),
    linear-gradient(140deg, rgba(12, 34, 60, .78), rgba(6, 17, 31, .90) 58%, rgba(10, 34, 60, .74));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -14px 24px rgba(0, 0, 0, .11),
    0 0 0 1px rgba(195, 234, 255, .045),
    0 18px 34px rgba(0, 0, 0, .16),
    0 0 24px rgba(61, 137, 230, .055);
}

/* Fine internal rim = "glass sheet", not nested card. */
.section-method .method-step__body::before {
  inset: .22rem;
  border-color: rgba(199, 237, 255, .10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), transparent 18%),
    linear-gradient(145deg, rgba(57, 122, 190, .11), rgba(8, 22, 40, .03) 55%, rgba(24, 74, 128, .08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -12px 18px rgba(0,0,0,.08);
}

/* Stronger specular reflection concentrated near the top edge. */
.section-method .method-step__body::after {
  inset: .25rem;
  background:
    linear-gradient(118deg,
      rgba(255,255,255,.13) 0%,
      rgba(255,255,255,.035) 16%,
      transparent 34% 66%,
      rgba(150,216,255,.06) 82%,
      transparent 100%),
    radial-gradient(55% 24% at 50% 0%, rgba(201,239,255,.12), transparent 72%);
  opacity: .9;
}

/* Typography: prevent the right-side modules from feeling cramped. */
.section-method .method-step__body .method-step__title {
  max-width: 13ch;
  margin-bottom: .9rem;
}

.section-method .method-step__title {
  font-size: clamp(1.78rem, 1.8vw, 2.22rem);
  line-height: 1;
  letter-spacing: -.038em;
}

.section-method .method-step__text {
  max-width: 100%;
  font-size: .97rem;
  line-height: 1.64;
  color: rgba(214, 229, 241, .88);
}

/* Longer titles get a little more breathing room without per-card hacks. */
.section-method .method-step--02 .method-step__body,
.section-method .method-step--04 .method-step__body {
  padding-left: 1.9rem;
}

/* Node becomes a connector terminal, not an independent mini-card. */
.section-method .method-step__node,
.section-method .method-step--01 .method-step__node,
.section-method .method-step--02 .method-step__node,
.section-method .method-step--03 .method-step__node,
.section-method .method-step--04 .method-step__node {
  top: 1.15rem;
  width: 2.72rem;
  min-height: 2.72rem;
  border-radius: .78rem;
  background:
    radial-gradient(circle at 34% 22%, rgba(225,247,255,.12), transparent 30%),
    linear-gradient(180deg, rgba(22, 55, 95, .92), rgba(7, 20, 38, .98));
  border-color: rgba(172, 229, 255, .24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -8px 14px rgba(0,0,0,.11),
    0 8px 18px rgba(0,0,0,.15),
    0 0 14px rgba(75, 156, 255, .10);
  font-size: .64rem;
}

.section-method .method-step--01 .method-step__node,
.section-method .method-step--03 .method-step__node {
  right: -1.18rem;
}

.section-method .method-step--02 .method-step__node,
.section-method .method-step--04 .method-step__node {
  left: -1.18rem;
}

.section-method .method-step__node::before {
  inset: .16rem;
  border-radius: .64rem;
  border-color: rgba(190, 235, 255, .11);
}

.section-method .method-step__node::after {
  inset: -.30rem;
  border-radius: .95rem;
  background: radial-gradient(circle, rgba(92, 176, 255, .17), transparent 70%);
  filter: blur(7px);
  opacity: .45;
}

/* Small connector bridge visually merges node with card edge. */
.section-method .method-step--01 .method-step__node::before,
.section-method .method-step--03 .method-step__node::before {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    1rem 0 0 -.96rem rgba(166, 224, 255, .18);
}

.section-method .method-step--02 .method-step__node::before,
.section-method .method-step--04 .method-step__node::before {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    -1rem 0 0 -.96rem rgba(166, 224, 255, .18);
}

/* Hover: broad neon zone + precise edge response. */
@media (hover: hover) and (pointer: fine) {
  .section-method .method-step:hover .method-step__body {
    transform: translateY(-5px);
    border-color: rgba(211, 241, 255, .34);
    background:
      radial-gradient(circle at 16% 12%, rgba(225, 248, 255, .145), transparent 22%),
      radial-gradient(circle at 82% 16%, rgba(147, 211, 255, .11), transparent 24%),
      linear-gradient(180deg, rgba(51, 111, 176, .14), rgba(12, 32, 57, .17)),
      linear-gradient(140deg, rgba(15, 42, 73, .83), rgba(7, 20, 36, .92) 58%, rgba(13, 42, 74, .80));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.20),
      inset 0 -14px 24px rgba(0,0,0,.10),
      0 0 0 1px rgba(214,241,255,.065),
      0 22px 42px rgba(0,0,0,.17),
      0 0 38px rgba(89, 170, 255, .20),
      0 0 88px rgba(52, 126, 229, .12);
    filter: saturate(1.08) brightness(1.035);
  }

  .section-method .method-step:hover .method-step__body::after {
    opacity: 1;
    background:
      linear-gradient(118deg,
        rgba(255,255,255,.17) 0%,
        rgba(255,255,255,.045) 17%,
        transparent 35% 63%,
        rgba(166,225,255,.075) 82%,
        transparent 100%),
      radial-gradient(58% 25% at 50% 0%, rgba(214,244,255,.16), transparent 74%);
  }

  .section-method .method-step:hover .method-step__node {
    transform: scale(1.055);
    border-color: rgba(214, 243, 255, .42);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.17),
      inset 0 -8px 14px rgba(0,0,0,.10),
      0 8px 18px rgba(0,0,0,.15),
      0 0 22px rgba(96, 185, 255, .24);
  }

  /* Ambient "neon pool" around the complete connected module. */
  .section-method .method-step:hover::before {
    inset: -1.2rem -1.4rem -1.35rem;
    background:
      radial-gradient(ellipse at 50% 46%, rgba(61, 140, 244, .12), transparent 68%),
      radial-gradient(circle at 14% 12%, rgba(186, 235, 255, .12), transparent 22%);
    filter: blur(10px);
    opacity: .92;
  }
}

/* Active state should stay luminous, but weaker than deliberate hover. */
.section-method .method-step.is-active .method-step__body {
  border-color: rgba(189, 231, 255, .25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -14px 24px rgba(0,0,0,.11),
    0 0 0 1px rgba(199,235,255,.05),
    0 18px 35px rgba(0,0,0,.17),
    0 0 30px rgba(73, 153, 248, .10);
}

/* Keyboard focus remains explicit if interactive content is introduced later. */
.section-method .method-step:focus-within .method-step__body {
  border-color: rgba(218, 244, 255, .44);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 0 2px rgba(118, 201, 255, .22),
    0 0 42px rgba(79, 162, 255, .16);
}

@media (max-width: 48rem) {
  .section-method .method-step__body {
    padding: 1.35rem 1.1rem 1.2rem;
  }

  .section-method .method-step__title {
    font-size: clamp(1.62rem, 7.2vw, 2rem);
    max-width: 14ch;
  }

  .section-method .method-step__text {
    font-size: .92rem;
    line-height: 1.58;
  }

  .section-method .method-step__node,
  .section-method .method-step--01 .method-step__node,
  .section-method .method-step--02 .method-step__node,
  .section-method .method-step--03 .method-step__node,
  .section-method .method-step--04 .method-step__node {
    width: 2.45rem;
    min-height: 2.45rem;
    left: -2.72rem;
    right: auto;
  }
}


/* ==========================================================================
   B9.10 — Root label above logo + 2.5D crystal card unification
   Goals:
   - protect root label from circuit overlap by lifting it above the logo;
   - unify all cards so 01 no longer reads as materially different;
   - push the modules toward 2.5D, not flat glass.
   ========================================================================== */

.section-method .method-circuit__root {
  gap: .38rem;
}

.section-method .method-circuit__root-shell {
  position: relative;
  z-index: 2;
}

.section-method .method-circuit__root-label {
  order: -1;
  position: relative;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .12rem .5rem;
  margin-bottom: .02rem;
  letter-spacing: .24em;
  text-shadow:
    0 0 .45rem rgba(121, 193, 255, .18),
    0 0 .12rem rgba(255,255,255,.06);
  background:
    linear-gradient(180deg, rgba(6, 14, 25, .78), rgba(6, 14, 25, .28));
  border-radius: 999px;
}

.section-method .method-step {
  --pp-card-tilt-x: 1.1deg;
  --pp-card-tilt-y: 0deg;
  --pp-card-lift: 0px;
}

.section-method .method-step--01,
.section-method .method-step--03 {
  --pp-card-tilt-y: 2.8deg;
}

.section-method .method-step--02,
.section-method .method-step--04 {
  --pp-card-tilt-y: -2.8deg;
}

.section-method .method-step__body {
  transform:
    perspective(1200px)
    rotateX(var(--pp-card-tilt-x))
    rotateY(var(--pp-card-tilt-y))
    translateY(var(--pp-card-lift))
    translateZ(0);
  transform-style: preserve-3d;
  border-color: rgba(188, 232, 255, .23);
  background:
    radial-gradient(circle at 18% 10%, rgba(240, 248, 255, .10), transparent 18%),
    radial-gradient(circle at 82% 14%, rgba(168, 215, 255, .095), transparent 22%),
    linear-gradient(180deg, rgba(72, 126, 190, .16), rgba(15, 34, 60, .12) 26%, rgba(8, 20, 37, .18) 100%),
    linear-gradient(145deg, rgba(17, 43, 72, .86), rgba(8, 22, 39, .93) 56%, rgba(15, 41, 71, .82));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 .45rem .85rem rgba(171, 214, 255, .03),
    inset 0 -1rem 1.3rem rgba(0, 0, 0, .11),
    inset -.55rem 0 .75rem rgba(255,255,255,.015),
    inset .85rem 0 1.1rem rgba(0,0,0,.05),
    0 .16rem 0 rgba(195, 233, 255, .05),
    0 1.15rem 2rem rgba(0, 0, 0, .16),
    0 0 1.9rem rgba(56, 130, 223, .08);
}

.section-method .method-step__body::before {
  inset: .18rem;
  border-color: rgba(207, 240, 255, .12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 20%),
    linear-gradient(145deg, rgba(82, 142, 208, .12), rgba(9, 23, 40, .025) 52%, rgba(31, 88, 147, .08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -.65rem 1rem rgba(0,0,0,.07);
}

.section-method .method-step__body::after {
  inset: .22rem;
  opacity: .94;
  background:
    linear-gradient(118deg,
      rgba(255,255,255,.17) 0%,
      rgba(255,255,255,.05) 13%,
      transparent 30% 67%,
      rgba(168,225,255,.08) 84%,
      transparent 100%),
    radial-gradient(58% 26% at 50% 0%, rgba(214,244,255,.15), transparent 75%);
}

.section-method .method-step__title {
  max-width: 12.2ch;
  font-size: clamp(1.76rem, 1.82vw, 2.2rem);
  line-height: .98;
  letter-spacing: -.04em;
  text-shadow: 0 1px 0 rgba(255,255,255,.05);
}

.section-method .method-step__text {
  color: rgba(219, 232, 244, .89);
}

.section-method .method-step__node,
.section-method .method-step--01 .method-step__node,
.section-method .method-step--02 .method-step__node,
.section-method .method-step--03 .method-step__node,
.section-method .method-step--04 .method-step__node {
  top: 1.05rem;
  width: 2.58rem;
  min-height: 2.58rem;
  border-radius: .82rem;
  border-color: rgba(181, 229, 255, .26);
  background:
    radial-gradient(circle at 38% 20%, rgba(255,255,255,.11), transparent 30%),
    linear-gradient(180deg, rgba(35, 79, 131, .94), rgba(8, 24, 45, .98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -.45rem .85rem rgba(0,0,0,.10),
    0 .7rem 1.1rem rgba(0,0,0,.14),
    0 0 1rem rgba(80, 163, 255, .12);
}

.section-method .method-step__node::before {
  inset: .14rem;
  border-radius: .68rem;
  border-color: rgba(205, 240, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.section-method .method-step__node::after {
  inset: -.28rem;
  border-radius: .95rem;
  background: radial-gradient(circle, rgba(93, 177, 255, .17), transparent 72%);
  filter: blur(7px);
  opacity: .38;
}

.section-method .method-step--01 .method-step__node::before,
.section-method .method-step--03 .method-step__node::before {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    1rem 0 0 -.96rem rgba(167, 224, 255, .16);
}

.section-method .method-step--02 .method-step__node::before,
.section-method .method-step--04 .method-step__node::before {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    -1rem 0 0 -.96rem rgba(167, 224, 255, .16);
}

/* Active should stay aligned with the rest, only subtly more awake. */
.section-method .method-step.is-active .method-step__body {
  border-color: rgba(208, 241, 255, .28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 .45rem .85rem rgba(171, 214, 255, .035),
    inset 0 -1rem 1.3rem rgba(0,0,0,.10),
    inset -.55rem 0 .75rem rgba(255,255,255,.018),
    inset .85rem 0 1.1rem rgba(0,0,0,.05),
    0 .16rem 0 rgba(195, 233, 255, .06),
    0 1.3rem 2.2rem rgba(0,0,0,.17),
    0 0 2.2rem rgba(65, 144, 241, .12);
  filter: brightness(1.035) saturate(1.05);
}

@media (hover: hover) and (pointer: fine) {
  .section-method .method-step:hover .method-step__body {
    transform:
      perspective(1200px)
      rotateX(var(--pp-card-tilt-x))
      rotateY(var(--pp-card-tilt-y))
      translateY(-6px)
      scale(1.012)
      translateZ(0);
    border-color: rgba(216, 243, 255, .38);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 .45rem .85rem rgba(171, 214, 255, .05),
      inset 0 -1rem 1.3rem rgba(0,0,0,.09),
      inset -.55rem 0 .75rem rgba(255,255,255,.022),
      inset .85rem 0 1.1rem rgba(0,0,0,.05),
      0 .16rem 0 rgba(195, 233, 255, .08),
      0 1.4rem 2.5rem rgba(0,0,0,.18),
      0 0 2.8rem rgba(89, 170, 255, .22),
      0 0 5.8rem rgba(52, 126, 229, .10);
  }

  .section-method .method-step:hover .method-step__node {
    transform: translateY(-3px) scale(1.05);
    border-color: rgba(214, 243, 255, .42);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.17),
      inset 0 -.45rem .85rem rgba(0,0,0,.09),
      0 .8rem 1.2rem rgba(0,0,0,.15),
      0 0 1.35rem rgba(96, 185, 255, .24);
  }
}

@media (max-width: 64rem) {
  .section-method .method-circuit__root-label {
    letter-spacing: .18em;
  }

  .section-method .method-step__title {
    max-width: 12.6ch;
  }
}

@media (max-width: 48rem) {
  .section-method .method-circuit__root {
    gap: .28rem;
  }

  .section-method .method-circuit__root-label {
    padding: .08rem .38rem;
    letter-spacing: .15em;
  }

  .section-method .method-step {
    --pp-card-tilt-x: .6deg;
    --pp-card-tilt-y: 0deg;
  }

  .section-method .method-step__body {
    transform:
      perspective(980px)
      rotateX(var(--pp-card-tilt-x))
      rotateY(var(--pp-card-tilt-y))
      translateY(0)
      translateZ(0);
  }

  .section-method .method-step__title {
    max-width: 11.6ch;
  }
}


/* ==========================================================================
   B9.11 — Remove order numerals + mobile cleanup
   Intent:
   - remove redundant order numbers from the side tabs;
   - keep the connectors but read them as ports, not labels;
   - simplify and repair mobile so the circuit stacks cleanly.
   ========================================================================== */

/* Order is already legible through the flow: keep ports, remove numerals. */
.section-method .method-step__node {
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-shadow: none !important;
  overflow: hidden;
}

.section-method .method-step__node,
.section-method .method-step--01 .method-step__node,
.section-method .method-step--02 .method-step__node,
.section-method .method-step--03 .method-step__node,
.section-method .method-step--04 .method-step__node {
  width: 1.32rem;
  min-height: 2.44rem;
  padding: 0;
}

.section-method .method-step--01 .method-step__node,
.section-method .method-step--03 .method-step__node {
  right: -.66rem;
}

.section-method .method-step--02 .method-step__node,
.section-method .method-step--04 .method-step__node {
  left: -.66rem;
}

.section-method .method-step__node::after {
  opacity: .28;
}

@media (max-width: 48rem) {
  .section-method {
    padding-bottom: 4.5rem;
  }

  .section-method > .container {
    width: min(100% - 1rem, 26rem);
  }

  .section-method .method-intro {
    margin-bottom: 1.8rem;
    padding-top: 1rem;
  }

  .section-method .method-circuit {
    min-height: auto;
    padding-top: 6.2rem;
  }

  /* Mobile should feel clean and intentional, not over-wired. */
  .section-method .method-circuit__map {
    display: none;
  }

  .section-method .method-circuit::before {
    display: none;
  }

  .section-method .method-circuit::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 2.1rem;
    bottom: 4rem;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: linear-gradient(180deg,
      rgba(140, 214, 255, .42) 0%,
      rgba(140, 214, 255, .26) 18%,
      rgba(89, 168, 230, .20) 60%,
      rgba(89, 168, 230, .02) 100%);
    box-shadow:
      0 0 .55rem rgba(103, 185, 255, .22),
      0 0 1.4rem rgba(43, 116, 207, .10);
  }

  .section-method .method-circuit__root {
    top: .2rem;
    left: 50%;
    gap: .32rem;
    transform: translateX(-50%);
    opacity: .96;
  }

  .section-method .method-circuit__root-shell {
    width: 4rem;
    border-radius: 1rem;
  }

  .section-method .method-circuit__root-label {
    padding: .08rem .42rem;
    margin-bottom: .08rem;
    font-size: .56rem;
    letter-spacing: .18em;
  }

  .section-method .method-steps {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
  }

  .section-method .method-step,
  .section-method .method-step--01,
  .section-method .method-step--02,
  .section-method .method-step--03,
  .section-method .method-step--04 {
    position: relative;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 0;
    transform: none !important;
  }

  .section-method .method-step::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -1rem;
    left: 50%;
    width: 1px;
    height: 1rem;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(143, 218, 255, .05), rgba(143, 218, 255, .42));
    box-shadow: 0 0 .35rem rgba(103, 185, 255, .16);
  }

  .section-method .method-step:first-child::before {
    top: -1.5rem;
    height: 1.5rem;
  }

  .section-method .method-step__node,
  .section-method .method-step--01 .method-step__node,
  .section-method .method-step--02 .method-step__node,
  .section-method .method-step--03 .method-step__node,
  .section-method .method-step--04 .method-step__node {
    top: -.72rem;
    left: 50% !important;
    right: auto !important;
    width: 1.1rem;
    min-height: 1.92rem;
    border-radius: .52rem;
    transform: translateX(-50%);
  }

  .section-method .method-step__body {
    width: 100%;
    min-height: unset;
    padding: 1.3rem 1rem 1.08rem;
    transform:
      perspective(900px)
      rotateX(.55deg)
      rotateY(0deg)
      translateY(0)
      translateZ(0);
  }

  .section-method .method-step__body::before,
  .section-method .method-step--02 .method-step__body::before,
  .section-method .method-step--03 .method-step__body::before,
  .section-method .method-step--04 .method-step__body::before {
    inset: -.22rem -.18rem -.3rem -.22rem;
    border-radius: 1rem;
    clip-path: polygon(0 0, calc(100% - .9rem) 0, 100% .9rem, 100% 100%, .8rem 100%, 0 calc(100% - .8rem));
  }

  .section-method .method-step__body::after,
  .section-method .method-step--02 .method-step__body::after,
  .section-method .method-step--03 .method-step__body::after,
  .section-method .method-step--04 .method-step__body::after {
    inset: .25rem -.28rem -.48rem .34rem;
    border-radius: .95rem;
    transform: translate3d(.14rem, .18rem, 0);
  }

  .section-method .method-step__title {
    max-width: 13.5ch;
    font-size: clamp(1.42rem, 6.6vw, 1.9rem);
    line-height: .98;
  }

  .section-method .method-step__text {
    max-width: none;
    font-size: .93rem;
    line-height: 1.56;
  }

  .section-method .method-note {
    margin: 1.15rem auto 0;
    padding-left: 1rem;
    text-align: left;
    width: calc(100% - .3rem);
  }
}


/* ==========================================================================
   B9.12 — MOBILE FLOW FIX
   Root cause:
   B9.11 targeted `.method-steps`, but live markup uses `.method-sequence`.
   This block fixes mobile only. Desktop remains untouched.
   ========================================================================== */

@media (max-width: 48rem) {
  .section-method > .container {
    width: min(100% - 1rem, 28rem);
  }

  .section-method .method-circuit {
    position: relative;
    min-height: 0 !important;
    height: auto;
    padding-top: 7.4rem;
    margin-top: .65rem;
    overflow: visible;
  }

  /* Keep SVG desktop-only. Mobile uses a simpler, robust conductor. */
  .section-method .method-circuit__map {
    display: none !important;
  }

  .section-method .method-circuit::before {
    display: none !important;
  }

  .section-method .method-circuit::after {
    display: none !important;
  }

  /* Root stays independent from the cards and can never overlap them. */
  .section-method .method-circuit__root,
  .section-method .method-circuit.is-ready .method-circuit__root:not(.is-active),
  .section-method .method-circuit.is-ready .method-circuit__root.is-active,
  .section-method .method-circuit.is-root-active .method-circuit__root {
    top: .15rem;
    left: 50%;
    transform: translateX(-50%) !important;
    gap: .34rem;
  }

  .section-method .method-circuit__root-label {
    order: -1;
    margin: 0 0 .1rem;
    padding: .08rem .42rem;
    font-size: .55rem;
    line-height: 1.2;
    letter-spacing: .17em;
    white-space: nowrap;
  }

  .section-method .method-circuit__root-shell {
    width: 4.15rem;
  }

  /*
   * LIVE owner is .method-sequence.
   * Normal flow removes every collision between 01/02/03/04.
   */
  .section-method .method-sequence {
    position: relative !important;
    inset: auto !important;
    z-index: 2;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.15rem;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* Reversible conductor lives behind the modules and only shows in gaps. */
  .section-method .method-sequence::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -1.15rem;
    bottom: -.8rem;
    left: 50%;
    width: 1px;
    height: auto;
    transform: translateX(-50%) scaleY(.04);
    transform-origin: top;
    background:
      linear-gradient(180deg,
        rgba(183, 232, 255, .55),
        rgba(111, 190, 255, .38) 38%,
        rgba(79, 151, 229, .22) 76%,
        rgba(79, 151, 229, .02));
    box-shadow:
      0 0 .5rem rgba(114, 196, 255, .18),
      0 0 1.2rem rgba(52, 128, 225, .08);
    transition: transform 1100ms cubic-bezier(.18,.72,.2,1);
    pointer-events: none;
  }

  .section-method .method-circuit.has-stage-1 .method-sequence::before {
    transform: translateX(-50%) scaleY(.28);
  }

  .section-method .method-circuit.has-stage-2 .method-sequence::before {
    transform: translateX(-50%) scaleY(.52);
  }

  .section-method .method-circuit.has-stage-3 .method-sequence::before {
    transform: translateX(-50%) scaleY(.76);
  }

  .section-method .method-circuit.has-stage-4 .method-sequence::before {
    transform: translateX(-50%) scaleY(1);
  }

  .section-method .method-step,
  .section-method .method-step:nth-child(1),
  .section-method .method-step:nth-child(2),
  .section-method .method-step:nth-child(3),
  .section-method .method-step:nth-child(4),
  .section-method .method-step--01,
  .section-method .method-step--02,
  .section-method .method-step--03,
  .section-method .method-step--04 {
    position: relative !important;
    z-index: 1;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* JS may still animate opacity; never let it reintroduce absolute geometry. */
  .section-method .method-circuit.is-ready .method-step:not(.is-active) {
    transform: translate3d(0, 1rem, 0) scale(.985) !important;
  }

  .section-method .method-circuit.is-ready .method-step.is-active {
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  /*
   * Port without number: centred on each module.
   * It visually connects the conductor to the card instead of stealing width.
   */
  .section-method .method-step__node,
  .section-method .method-step--01 .method-step__node,
  .section-method .method-step--02 .method-step__node,
  .section-method .method-step--03 .method-step__node,
  .section-method .method-step--04 .method-step__node {
    top: -.55rem !important;
    left: 50% !important;
    right: auto !important;
    width: 1rem !important;
    min-height: 1.6rem !important;
    transform: translateX(-50%) !important;
    border-radius: .48rem;
  }

  .section-method .method-step.is-active .method-step__node {
    transform: translateX(-50%) scale(1) !important;
  }

  /* Unify all four mobile cards: no mirrored desktop geometry. */
  .section-method .method-step__body,
  .section-method .method-step--01 .method-step__body,
  .section-method .method-step--02 .method-step__body,
  .section-method .method-step--03 .method-step__body,
  .section-method .method-step--04 .method-step__body {
    width: 100%;
    min-height: 0;
    margin: 0 !important;
    padding: 1.35rem 1.12rem 1.2rem;
    transform:
      perspective(900px)
      rotateX(.55deg)
      rotateY(0deg)
      translateZ(0) !important;
  }

  .section-method .method-step__body::before,
  .section-method .method-step--01 .method-step__body::before,
  .section-method .method-step--02 .method-step__body::before,
  .section-method .method-step--03 .method-step__body::before,
  .section-method .method-step--04 .method-step__body::before {
    inset: -.2rem -.16rem -.28rem -.2rem;
    border-radius: 1rem;
    clip-path:
      polygon(
        0 0,
        calc(100% - .9rem) 0,
        100% .9rem,
        100% 100%,
        .75rem 100%,
        0 calc(100% - .75rem)
      );
  }

  .section-method .method-step__body::after,
  .section-method .method-step--01 .method-step__body::after,
  .section-method .method-step--02 .method-step__body::after,
  .section-method .method-step--03 .method-step__body::after,
  .section-method .method-step--04 .method-step__body::after {
    inset: .24rem -.24rem -.42rem .3rem;
    border-radius: .92rem;
    transform: translate3d(.12rem, .16rem, 0);
  }

  .section-method .method-step__title {
    max-width: 13ch;
    font-size: clamp(1.5rem, 7vw, 1.92rem);
    line-height: .98;
  }

  .section-method .method-step__text {
    max-width: none;
    font-size: .92rem;
    line-height: 1.56;
  }

  .section-method .method-note {
    width: 100%;
    margin: 1.25rem 0 0;
    padding-left: 1rem;
    text-align: left;
  }
}

@media (max-width: 25rem) {
  .section-method > .container {
    width: min(100% - .8rem, 24rem);
  }

  .section-method .method-circuit {
    padding-top: 7rem;
  }

  .section-method .method-sequence {
    gap: 1rem;
  }

  .section-method .method-step__body {
    padding: 1.2rem .95rem 1.05rem;
  }

  .section-method .method-step__title {
    font-size: clamp(1.38rem, 7vw, 1.72rem);
  }

  .section-method .method-step__text {
    font-size: .88rem;
  }
}