:root {
  --ink: #123558;
  --muted: #567087;
  --blue: #137cd2;
  --green: #15a96d;
  --pink: #f24889;
  --orange: #f5a313;
  --cyan: #ddf8ff;
  --line: #c9e8ef;
  --bg: #dff8ff;
}

html {
  scroll-padding-top: 22px;
}

body {
  position: relative;
  background:
    radial-gradient(circle at 9% 5%, #ffffff 0 3%, transparent 13%),
    radial-gradient(circle at 94% 12%, #b8f6e7 0 3%, transparent 14%),
    linear-gradient(180deg, #d8f8ff 0%, #f0fcff 24%, #e8fff7 66%, #dff8ff 100%);
  color: var(--ink);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image: radial-gradient(circle, #159bd1 1.3px, transparent 1.5px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, #000, transparent 24%, transparent 80%, #000);
}

header {
  position: relative;
  z-index: 2;
  background: #0879c7;
  border: 0;
  color: #fff;
  box-shadow: 0 4px 16px #0879c72b;
}

.header-inner {
  max-width: 1000px;
  padding: 15px 28px;
}

.brand {
  letter-spacing: .14em;
}

.header-label {
  color: #e9fbff;
}

main {
  position: relative;
  max-width: 1000px;
  padding: 28px 28px 84px;
}

.guide-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 18px;
  padding: 46px 48px 42px;
  border: 4px solid #fff;
  border-radius: 30px;
  background:
    radial-gradient(circle at 88% 21%, #fff 0 5px, transparent 6px),
    radial-gradient(circle at 82% 34%, #ffdb45 0 8px, transparent 9px),
    linear-gradient(125deg, #ffffff 0%, #e8fbff 48%, #cbf4ff 100%);
  box-shadow: 0 15px 35px #128fc52a;
}

.guide-hero::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  right: -105px;
  bottom: -150px;
  border-radius: 50%;
  border: 28px solid #53d5be45;
  box-shadow: 0 0 0 25px #45bff02e;
  pointer-events: none;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #0876bf;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
}

.hero-kicker::before {
  content: "";
  width: 24px;
  height: 4px;
  border-radius: 4px;
  background: var(--pink);
}

.guide-hero h1 {
  margin: 12px 0 10px;
  color: #075f9f;
  font-size: clamp(36px, 6vw, 58px);
  letter-spacing: .035em;
  line-height: 1.35;
  text-shadow: 0 3px 0 #fff;
}

.hero-desc {
  max-width: 680px;
  color: #345f79;
  font-size: 17px;
}

.hero-actions {
  position: relative;
  z-index: 1;
  max-width: 720px;
  gap: 13px;
  margin-top: 26px;
}

.hero-actions .guide-choice {
  min-height: 92px;
  padding: 18px 20px;
  border: 2px solid #fff;
  border-radius: 18px;
  background: linear-gradient(135deg, #1597df, #0876c9);
  box-shadow: 0 6px 0 #0765ab, 0 12px 22px #0765ab26;
}

.hero-actions a.guide-choice:first-child {
  background: linear-gradient(135deg, #1597df, #0876c9);
  border-color: #fff;
}

.hero-actions .choice-watch {
  background: linear-gradient(135deg, #fb6098, #e93c78);
  box-shadow: 0 6px 0 #bd2358, 0 12px 22px #ce2b6826;
}

.hero-actions .guide-choice:hover {
  box-shadow: 0 8px 0 #0765ab, 0 16px 28px #0765ab2d;
}

.hero-actions .choice-watch:hover {
  box-shadow: 0 8px 0 #bd2358, 0 16px 28px #ce2b6830;
}

.intro-notice {
  margin: 0 0 24px;
  padding: 0 18px;
}

.intro-notice p > span {
  border-color: #21a487;
}

.intro-notice strong {
  color: #087d64;
}

.toc,
.pay-top,
.chapter {
  border: 3px solid #fff;
  background: #ffffffef;
  box-shadow: 0 14px 32px #0e83ae18;
}

.toc {
  padding: 31px;
  border-radius: 27px;
}

.toc h2 {
  color: #075f9f;
}

.toc-grid {
  gap: 10px;
}

.toc-grid a {
  min-height: 84px;
  border: 1px solid #c7eaf0;
  background: #f4fcff;
  box-shadow: none;
}

.toc-grid li:nth-child(1) a { border-left: 7px solid #198fd4; }
.toc-grid li:nth-child(2) a { border-left: 7px solid #16ac75; }
.toc-grid li:nth-child(3) a { border-left: 7px solid #f04f89; }
.toc-grid li:nth-child(4) a { border-left: 7px solid #f2a014; }
.toc-grid li:nth-child(5) a { border-left: 7px solid #735ed9; }
.toc-grid li:nth-child(1) .toc-num { background: #198fd4; }
.toc-grid li:nth-child(2) .toc-num { background: #16ac75; }
.toc-grid li:nth-child(3) .toc-num { background: #f04f89; }
.toc-grid li:nth-child(4) .toc-num { background: #f2a014; }
.toc-grid li:nth-child(5) .toc-num { background: #735ed9; }

.toc-grid a:hover {
  transform: translateX(3px);
  border-color: #8fd7e7;
  background: #eefdff;
}

.toc-copy strong {
  color: var(--ink);
}

.rules {
  margin: 24px 0 36px;
}

.rule {
  border: 2px solid #fff;
  background: #ffffffd9;
  box-shadow: 0 6px 16px #1083a814;
}

.rule:nth-child(1) { border-top: 5px solid #1b93d6; }
.rule:nth-child(2) { border-top: 5px solid #16ad76; }
.rule:nth-child(3) { border-top: 5px solid #f04f89; }

.chapter {
  overflow: hidden;
  margin-top: 26px;
  border-radius: 27px;
}

.chapter-head {
  position: relative;
  padding: 25px 30px;
  border: 0;
  color: #fff;
  background: linear-gradient(120deg, var(--section-color), var(--section-dark));
}

.chapter-head::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 18px;
  width: 54px;
  height: 54px;
  border: 2px solid #ffffff50;
  border-radius: 50%;
  box-shadow: 24px 28px 0 -13px #ffffff33;
}

.chapter-head h2,
.step-label {
  color: #fff;
}

.step-label {
  opacity: .86;
}

.big-number {
  background: #fff;
  color: var(--section-dark);
  box-shadow: 0 5px 14px #123c5128;
}

#step1 { --section-color: #22a8e5; --section-dark: #0875c3; }
#step2 { --section-color: #31c98f; --section-dark: #079664; }
#step3 { --section-color: #fa649c; --section-dark: #dd2c70; }
#step4 { --section-color: #ffb82e; --section-dark: #ef8912; }
#step5 { --section-color: #8f78eb; --section-dark: #6952cf; }

.chapter-content {
  padding: 31px;
}

.lead .em,
.instruction-list b {
  color: #076fb8;
  background: linear-gradient(transparent 68%, #bfefff 68%);
}

.setup-part h3,
.operation-intro h3,
.signal-reading strong {
  color: #0a699f;
}

.setup-part h3 > span,
.instruction-list li::before {
  color: #fff;
  background: #1193d2;
}

.button {
  background: linear-gradient(135deg, #198ee0, #096ec5);
  box-shadow: 0 5px 0 #0759a2, 0 11px 18px #086dbb26;
}

.button:hover {
  background: linear-gradient(135deg, #25a1ef, #0874cf);
}

.note,
.operation-intro,
.browser-card,
.report-card {
  border-color: #b8e3ec;
  background: #eefaff;
}

.finish {
  border-color: #b9ead4;
  background: #ecfff6;
  color: #087c57;
}

.pay-top {
  position: relative;
  overflow: hidden;
  margin-top: 34px;
  padding: 34px;
  border-radius: 28px;
}

.pay-top::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 9px;
  background: linear-gradient(90deg, #1b92d5 0 34%, #f04f89 34% 67%, #f5ad1e 67%);
}

.pay-top h2 {
  color: #075f9f;
  font-size: 30px;
}

.pay-grid {
  gap: 14px;
}

.pay {
  position: relative;
  overflow: hidden;
  border: 2px solid #c4e8f0;
  border-radius: 19px;
  background: linear-gradient(135deg, #effbff, #fff);
}

.pay::after {
  content: "";
  position: absolute;
  width: 92px;
  height: 92px;
  right: -40px;
  bottom: -50px;
  border-radius: 50%;
  background: #24a6e51f;
}

.pay.gold-pay {
  border-color: #f1cf70;
  background: linear-gradient(135deg, #fff7d8, #fffdf3);
}

.pay.gold-pay::after {
  background: #f5ae2526;
}

.pay > small span:first-child {
  color: #4b6980;
  font-weight: 800;
}

.pay > strong {
  color: #0b75bc;
  font-size: 40px;
}

.pay.gold-pay > strong {
  color: #dc8410;
}

.member-note {
  padding: 18px 20px;
  border: 1px solid #f2d38d;
  border-radius: 14px;
  background: #fff9e9;
  color: #5d4a22;
  font-weight: 600;
  line-height: 1.9;
}

.payday {
  border-color: #bfe6d6;
  background: #f1fff8;
}

.payday h3 strong {
  color: #079061;
}

.guide-videos {
  border: 3px solid #fff;
  background: linear-gradient(140deg, #076ca5, #074f78 60%, #06475a);
  box-shadow: 0 16px 34px #07507731;
}

.video-eyebrow,
.card-play {
  color: #ffe27a;
}

.guide-video-card {
  border-color: #ffffff3d;
  background: #ffffff13;
}

.guide-video-card:hover {
  background: #ffffff20;
}

.float-toc {
  border: 2px solid #fff;
  color: #0872b4;
  box-shadow: 0 8px 22px #0c78aa30;
}

footer {
  color: #496c7f;
}

@media (max-width: 700px) {
  main {
    padding: 16px 13px 58px;
  }

  .guide-hero {
    padding: 34px 19px 30px;
    border-radius: 23px;
  }

  .guide-hero h1 {
    font-size: clamp(31px, 10vw, 40px);
  }

  .hero-actions {
    gap: 13px;
  }

  .hero-actions .guide-choice {
    min-height: 84px;
  }

  .intro-notice {
    padding: 0 5px;
  }

  .toc,
  .pay-top {
    padding: 25px 17px;
    border-radius: 22px;
  }

  .toc-grid a {
    min-height: 84px;
  }

  .chapter {
    margin: 23px 0 0;
    border-radius: 22px;
  }

  .chapter-head {
    padding: 22px 17px;
  }

  .chapter-head::after {
    right: 10px;
    opacity: .65;
  }

  .chapter-content {
    padding: 23px 17px;
  }

  .pay {
    min-height: 124px;
  }

  .pay > strong {
    font-size: 32px;
  }

  .member-note {
    padding: 16px;
    font-size: 15px;
  }
}

@media (max-width: 360px) {
  .guide-hero h1 {
    font-size: 29px;
  }

  .pay {
    display: block;
  }

  .pay > strong {
    margin-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    display: none;
  }
}

/* Illustration-led polish */
.guide-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(250px, .72fr);
  grid-template-areas:
    "kicker art"
    "title art"
    "description art"
    "actions art";
  column-gap: 30px;
  align-items: center;
  padding-right: 30px;
  background:
    radial-gradient(circle at 77% 18%, #fff 0 5px, transparent 6px),
    radial-gradient(circle at 70% 28%, #ffdc52 0 8px, transparent 9px),
    radial-gradient(circle at 9% 92%, #8ce9d2 0 5px, transparent 6px),
    linear-gradient(125deg, #fff 0%, #eafcff 48%, #c9f3ff 100%);
}

.guide-hero::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: 55px;
  top: 45px;
  border-radius: 44% 56% 64% 36%;
  background: linear-gradient(145deg, #87ead455, #74cff04d);
  transform: rotate(14deg);
  pointer-events: none;
}

.hero-kicker { grid-area: kicker; }
.guide-hero h1 { grid-area: title; }
.hero-desc { grid-area: description; }
.hero-actions { grid-area: actions; }

.hero-art {
  grid-area: art;
  position: relative;
  z-index: 1;
  width: 100%;
  margin: -12px 0 -10px;
  align-self: center;
}

.hero-art img {
  display: block;
  width: 100%;
  max-height: 350px;
  object-fit: contain;
  filter: drop-shadow(0 18px 20px #0d78a52c);
  animation: hero-float 5s ease-in-out infinite;
}

.hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
}

.hero-actions .guide-choice {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero-actions .guide-choice::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 90px;
  height: 90px;
  right: -45px;
  top: -50px;
  border-radius: 50%;
  background: #ffffff28;
}

.toc-grid li:nth-child(1) a { background: linear-gradient(90deg, #edf9ff, #fff); }
.toc-grid li:nth-child(2) a { background: linear-gradient(90deg, #ecfff7, #fff); }
.toc-grid li:nth-child(3) a { background: linear-gradient(90deg, #fff0f6, #fff); }
.toc-grid li:nth-child(4) a { background: linear-gradient(90deg, #fff8e8, #fff); }
.toc-grid li:nth-child(5) a { background: linear-gradient(90deg, #f3f0ff, #fff); }

.chapter-head {
  isolation: isolate;
}

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

.chapter-head::before {
  content: "";
  position: absolute;
  inset: auto -40px -76px auto;
  width: 180px;
  height: 180px;
  border: 34px solid #ffffff17;
  border-radius: 50%;
  pointer-events: none;
}

.pay-top {
  background:
    radial-gradient(circle at 94% 12%, #fff4b7 0 7px, transparent 8px),
    radial-gradient(circle at 88% 21%, #73ddc7 0 5px, transparent 6px),
    linear-gradient(140deg, #fff 0%, #f3fdff 68%, #fff9df 100%);
}

.pay-top h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.pay-top h2::before {
  content: "";
  width: 13px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(180deg, #f6b528, #f04f89);
  box-shadow: 0 0 0 6px #fff2c9;
}

.pay-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 26px;
  align-items: center;
}

.pay-art {
  position: relative;
  margin: 0;
  padding: 8px;
}

.pay-art::before {
  content: "";
  position: absolute;
  inset: 16% 3% 8%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff4afc9, #8de7d34a 58%, transparent 70%);
  filter: blur(4px);
}

.pay-art img {
  position: relative;
  display: block;
  width: 100%;
  max-height: 270px;
  object-fit: contain;
  filter: drop-shadow(0 15px 16px #9b711f24);
}

.pay {
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pay.gold-pay {
  box-shadow: inset 0 0 0 4px #fff8dc, 0 8px 18px #d99b1c18;
}

.member-note {
  box-shadow: inset 4px 0 0 #f2b426;
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0) rotate(-.4deg); }
  50% { transform: translateY(-8px) rotate(.4deg); }
}

@media (max-width: 780px) {
  .guide-hero {
    grid-template-columns: minmax(0, 1fr) minmax(210px, .7fr);
    column-gap: 18px;
  }

  .hero-actions {
    grid-template-columns: 1fr;
  }

  .pay-layout {
    grid-template-columns: minmax(0, 1fr) 210px;
  }
}

@media (max-width: 700px) {
  .guide-hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "kicker"
      "title"
      "description"
      "art"
      "actions";
    padding-right: 19px;
  }

  .guide-hero::before {
    width: 145px;
    height: 145px;
    right: 23px;
    top: 215px;
  }

  .hero-art {
    width: min(82%, 310px);
    margin: 12px auto -2px;
  }

  .hero-art img {
    max-height: 235px;
  }

  .pay-layout {
    grid-template-columns: 1fr;
  }

  .pay-art {
    width: min(76%, 250px);
    margin: -2px auto -8px;
  }

  .pay {
    min-height: 118px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art img {
    animation: none;
  }
}