/* Premium flywheel: ten consistent cards powered by one scroll-driven orbit. */
.fly {
  background:
    radial-gradient(circle at 72% 48%, #ff0d0d0b 0 13%, transparent 34%),
    linear-gradient(145deg, #0b0d11 0%, #060709 100%);
}

.fly-visual {
  width: 100%;
  max-width: 780px;
  aspect-ratio: 1;
  isolation: isolate;
  filter: none;
}

.fly-visual:before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: 13%;
  border-radius: 50%;
  background: radial-gradient(circle, #ff0d0d12 0%, #ff0d0d05 34%, transparent 68%);
  filter: blur(16px);
}

.fly-visual:after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 22%;
  border: 1px solid #ffffff0c;
  border-radius: 50%;
  box-shadow: 0 0 0 28px #ffffff025, 0 0 0 57px #ffffff018;
}

.orbit-base {
  stroke: #ffffff2f;
  stroke-width: 1.1;
}

.orbit-progress {
  stroke: #ff1717;
  stroke-width: 2.1;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px #ff0d0d75);
}

.orbit-inner {
  stroke: #ffffff16;
  stroke-width: .8;
  stroke-dasharray: 1 13;
}

.orbit-ticks {
  stroke: #ffffff12;
  stroke-width: 1;
  stroke-dasharray: 1 15;
}

.orbit-core {
  fill: #0b0d11;
  stroke: #ffffff18;
  stroke-width: 1;
}

.orbit-traveler {
  fill: #ff1f1f;
  filter: drop-shadow(0 0 5px #ff0d0d) drop-shadow(0 0 13px #ff0d0d80);
}

.orbit-traveler circle { r: 4.5px; }

.fly-center {
  z-index: 2;
  width: 29%;
  padding: 18px;
  border: 1px solid #ffffff24;
  background:
    radial-gradient(circle at 34% 25%, #252a32 0%, #111419 43%, #08090c 100%);
  box-shadow:
    0 0 0 9px #ffffff03,
    0 0 0 10px #ffffff08,
    0 28px 65px #00000070,
    inset 0 1px 0 #ffffff18;
}

.fly-center:before {
  inset: 12px;
  border: 1px solid #ff0d0d2b;
}

.fly-center:after {
  inset: -20px;
  border: 1px solid #ffffff09;
}

.fly-center span {
  color: #b9c0c9;
  font-size: 9px;
  letter-spacing: .2em;
}

.fly-center strong {
  margin-top: 8px;
  color: #fff;
  font-size: clamp(19px, 2vw, 27px);
  letter-spacing: -.065em;
}

/* Every step uses the same card, icon tile and type scale. */
.fly-node,
.fly-node.f1,
.fly-node.f6,
.fly-node.f7,
.fly-node.f8,
.fly-node.f9,
.fly-node.f10 {
  z-index: 3;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  width: 154px;
  min-height: 60px;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid #ffffff19;
  border-radius: 16px;
  background: linear-gradient(145deg, #171b22e8, #0d1015ec);
  box-shadow: 0 14px 32px #00000042, inset 0 1px 0 #ffffff0b;
  color: #fff;
  text-align: left;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(12px);
  transition:
    transform .5s var(--ease),
    background .35s ease,
    border-color .35s ease,
    box-shadow .4s ease;
}

.fly-node.f1 { --x: 50%; --y: 8%; }
.fly-node.f2 { --x: 76.5%; --y: 17.5%; }
.fly-node.f3 { --x: 89%; --y: 35.5%; }
.fly-node.f4 { --x: 89%; --y: 59%; }
.fly-node.f5 { --x: 77%; --y: 74.5%; }
.fly-node.f6 { --x: 50%; --y: 82.5%; }
.fly-node.f7 { --x: 23%; --y: 74.5%; }
.fly-node.f8 { --x: 11%; --y: 59%; }
.fly-node.f9 { --x: 11%; --y: 35.5%; }
.fly-node.f10 { --x: 23.5%; --y: 17.5%; }

.fly-node b {
  display: grid;
  width: 34px;
  height: 34px;
  margin: 0;
  place-items: center;
  color: #c2c8d0;
  transition: color .35s ease, filter .35s ease, transform .35s ease;
}

.fly-node b svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
}

.fly-node b svg path,
.fly-node b svg path:only-child {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
}

.fly-node-label,
.fly-node.f1 .fly-node-label,
.fly-node.f6 .fly-node-label {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #eef0f3;
  font: 600 12.5px/1.17 Manrope, sans-serif;
  letter-spacing: -.035em;
  text-align: left;
  transition: color .35s ease, text-shadow .35s ease;
}

.fly-node.active {
  border-color: #ff4b4b;
  background: linear-gradient(135deg, #ff2828, #d90707);
  box-shadow:
    0 0 0 6px #ff0d0d0b,
    0 18px 40px #ff0d0d35,
    inset 0 1px 0 #ffffff30;
  transform: translate(-50%, -50%) scale(1.075);
}

.fly-node.active b {
  color: #fff;
  filter: drop-shadow(0 0 9px #ffffff5c);
  transform: scale(1.08);
  animation: none;
}

.fly-node.active .fly-node-label {
  color: #fff;
  text-shadow: none;
  transform: none;
}

/* The starting card behaves exactly like every other card. */
.fly-node.fuel:not(.active) {
  border-color: #ffffff19;
  background: linear-gradient(145deg, #171b22e8, #0d1015ec);
  box-shadow: 0 14px 32px #00000042, inset 0 1px 0 #ffffff0b;
  transform: translate(-50%, -50%);
}

.fly-node.fuel:not(.active) b {
  color: #c2c8d0;
  filter: none;
  transform: none;
}

.fly-node.fuel:not(.active) .fly-node-label {
  color: #eef0f3;
  text-shadow: none;
  transform: none;
}

.fly-step,
.fly-tag { display: none !important; }

@media (max-width: 1150px) {
  .fly-visual { max-width: 700px; }
  .fly-node,
  .fly-node.f1,
  .fly-node.f6,
  .fly-node.f7,
  .fly-node.f8,
  .fly-node.f9,
  .fly-node.f10 {
    width: 137px;
    min-height: 55px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    padding: 9px 10px;
    border-radius: 14px;
  }
  .fly-node b { width: 30px; height: 30px; }
  .fly-node b svg { width: 25px; height: 25px; }
  .fly-node-label,
  .fly-node.f1 .fly-node-label,
  .fly-node.f6 .fly-node-label { font-size: 11px; }
}

/* Keep the complete system visible on 13-inch and other shallow desktop screens. */
@media (min-width: 861px) and (max-height: 800px) {
  .fly-visual {
    width: min(100%, 560px);
    max-width: 560px;
  }

  .fly-node,
  .fly-node.f1,
  .fly-node.f6,
  .fly-node.f7,
  .fly-node.f8,
  .fly-node.f9,
  .fly-node.f10 {
    width: 132px;
    min-height: 52px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    padding: 8px 9px;
    border-radius: 13px;
  }

  .fly-node b { width: 30px; height: 30px; }
  .fly-node b svg { width: 25px; height: 25px; }
  .fly-node-label,
  .fly-node.f1 .fly-node-label,
  .fly-node.f6 .fly-node-label { font-size: 10.5px; }
  .fly-center strong { font-size: 19px; }

  /* The lower trio moves inside the safe viewport, preventing clipped labels. */
  .fly-node.f5 { --y: 71.5%; }
  .fly-node.f6 { --y: 79%; }
  .fly-node.f7 { --y: 71.5%; }
}

/* Large displays use the available canvas instead of leaving the chapter centred and undersized. */
@media (min-width: 1500px) {
  .wrap { width: min(1800px, calc(100% - 160px)); }
  .fly-grid { grid-template-columns: .95fr 1.25fr; gap: 105px; }
  .fly-visual { max-width: 920px; }
}

/* The removed comparison prompt must not leave an empty grid row behind. */
@media (min-width: 861px) {
  .problem-grid h2 { grid-row: 2; }
  .problem-grid .lead { padding-top: 8px; }
  .problem-grid .points { margin-top: 66px; }
}

@media (max-width: 860px) {
  .problem-grid .points { margin-top: 45px; }
}

@media (max-width: 860px) {
  .fly-visual { max-width: 640px; margin-top: 26px; }
  .fly-node,
  .fly-node.f1,
  .fly-node.f6,
  .fly-node.f7,
  .fly-node.f8,
  .fly-node.f9,
  .fly-node.f10 {
    width: 124px;
    min-height: 49px;
    grid-template-columns: 25px minmax(0, 1fr);
    gap: 7px;
    padding: 7px 8px;
    border-radius: 12px;
  }
  .fly-node b { width: 25px; height: 25px; }
  .fly-node b svg { width: 21px; height: 21px; }
  .fly-node-label,
  .fly-node.f1 .fly-node-label,
  .fly-node.f6 .fly-node-label { font-size: 10px; }
  .fly-center { width: 30%; }
  .fly-center strong { font-size: 19px; }
}

@media (max-width: 520px) {
  .fly-visual { width: calc(100% + 24px); margin-left: -12px; }
  .fly-node,
  .fly-node.f1,
  .fly-node.f6,
  .fly-node.f7,
  .fly-node.f8,
  .fly-node.f9,
  .fly-node.f10 {
    width: 80px;
    min-height: 36px;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 4px;
    padding: 5px;
    border-radius: 8px;
  }
  .fly-node b { width: 18px; height: 18px; }
  .fly-node b svg { width: 17px; height: 17px; }
  .fly-node-label,
  .fly-node.f1 .fly-node-label,
  .fly-node.f6 .fly-node-label { font-size: 7.2px; line-height: 1.1; }
  .fly-node.f2, .fly-node.f5 { --x: 76%; }
  .fly-node.f3, .fly-node.f4 { --x: 87%; }
  .fly-node.f7, .fly-node.f10 { --x: 24%; }
  .fly-node.f8, .fly-node.f9 { --x: 13%; }
  .fly-center { width: 33%; padding: 8px; }
  .fly-center span { font-size: 5.5px; }
  .fly-center strong { margin-top: 4px; font-size: 11px; }
}