.how-heading {
  margin-bottom: 24px;
}

.how-heading h1 { color:#fff; }
.how-heading .muted { color:#cfc5db; }

.eyebrow {
  color: #5f19bb;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.how-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.how-step {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  padding: 20px;
  border-right: 1px solid rgba(164,114,215,.42);
  border-bottom: 1px solid rgba(164,114,215,.42);
  border-left: 1px solid rgba(164,114,215,.42);
  border-top: 5px solid #5f19bb;
  background-color: rgba(40,23,62,.9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='36' viewBox='0 0 42 36'%3E%3Cpath d='M10.5 1h21L41 18l-9.5 17h-21L1 18Z' fill='none' stroke='%23a472d7' stroke-opacity='.08'/%3E%3C/svg%3E"),linear-gradient(145deg,rgba(95,25,187,.2),rgba(8,7,20,.3));
  background-size: 42px 36px,auto;
  color: #fff;
  box-shadow: 0 12px 28px rgba(8,7,20,.26);
  display: flex;
  flex-direction: column;
}

.how-step:nth-child(even) {
  border-top-color: #00d118;
}

.step-top {
  display: flex;
  min-height: 58px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

.step-number {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 50%;
  background: #5f19bb;
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  box-shadow: 0 4px 0 #3b0e78;
}

.how-step:nth-child(even) .step-number {
  background: #00d118;
  color: #080714;
  box-shadow: 0 4px 0 #008b10;
}

.step-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  border-radius: 14px;
  border: 1px solid rgba(164,114,215,.5);
  background: rgba(8,7,20,.48);
  font-size: 25px;
}

.how-step h2 {
  margin: 0 0 12px;
  font-size: 21px;
  line-height: 1.15;
}

.how-step p {
  margin: 0;
  color: #d7cedf;
}

.pricing-panel {
  position: relative;
  overflow: hidden;
  margin-top: 44px;
  padding: 34px;
  border: 1px solid #35245c;
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 8%, rgba(0,209,24,.2), transparent 30%),
    linear-gradient(135deg, #080714 0%, #1b0c35 58%, #34106a 100%);
  color: #fff;
  box-shadow: 0 14px 32px rgba(8,7,20,.2);
}

.pricing-panel .eyebrow {
  color: #00d118;
}

.pricing-intro {
  max-width: 680px;
}

.pricing-intro h2 {
  margin: 4px 0 6px;
  font-size: 34px;
}

.pricing-intro p {
  margin-top: 0;
  color: #d8cee5;
}

.pricing-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 24px 0;
}

.price-card {
  padding: 22px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px;
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.price-card.deep {
  border-color: rgba(0,209,24,.65);
  background: rgba(0,209,24,.1);
}

.session-label {
  color: #cba9ed;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.3px;
}

.price-card.deep .session-label {
  color: #50ee62;
}

.price-card h3 {
  margin: 5px 0 0;
  font-size: 21px;
}

.price-card .price {
  margin: 4px 0;
  color: #fff;
  font-size: 48px;
  line-height: 1;
}

.price-card .price sup {
  position: relative;
  top: -10px;
  margin-right: 2px;
  font-size: 22px;
}

.price-card > p:last-child {
  margin-bottom: 0;
  color: #d8cee5;
}

.pricing-action {
  min-width: 190px;
  text-align: center;
}

.content-page { color:#fff; }

.content-page-hero,
.blog-coming-soon {
  position:relative;
  overflow:hidden;
  padding:34px;
  border:1px solid rgba(164,114,215,.46);
  border-radius:20px;
  background-color:rgba(40,23,62,.9);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='36' viewBox='0 0 42 36'%3E%3Cpath d='M10.5 1h21L41 18l-9.5 17h-21L1 18Z' fill='none' stroke='%23a472d7' stroke-opacity='.08'/%3E%3C/svg%3E"),radial-gradient(circle at 88% 12%,rgba(0,209,24,.2),transparent 31%),linear-gradient(145deg,rgba(95,25,187,.28),rgba(8,7,20,.42));
  background-size:42px 36px,auto,auto;
  box-shadow:0 14px 32px rgba(8,7,20,.3);
}

.content-page-hero h1,
.blog-coming-soon h1{margin:5px 0 8px;font-size:clamp(34px,5vw,56px);line-height:1.02}
.content-page-hero p,
.blog-coming-soon>p{max-width:740px;margin:0 0 22px;color:#ddd3e7;font-size:18px}
.standalone-pricing{margin-top:22px}
.standalone-pricing .price-card h2{margin:5px 0 0;font-size:23px}

.pricing-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:4px 0 24px}
.pricing-details article{display:flex;flex-direction:column;gap:5px;padding:15px;border:1px solid rgba(164,114,215,.25);border-radius:10px;background:rgba(8,7,20,.34)}
.pricing-details span{color:#d8cee5;font-size:14px}

.guide-journey{display:grid;gap:12px;margin:22px 0}
.guide-journey article{display:grid;grid-template-columns:54px 1fr;gap:16px;align-items:start;padding:18px;border:1px solid rgba(164,114,215,.4);border-radius:14px;background:rgba(40,23,62,.87);box-shadow:0 8px 20px rgba(8,7,20,.2)}
.guide-journey article>span{display:grid;width:44px;height:44px;place-items:center;border-radius:50%;background:#5f19bb;font-size:19px;font-weight:900;box-shadow:0 4px 0 #3b0e78}
.guide-journey article:nth-child(even)>span{background:#00d118;color:#080714;box-shadow:0 4px 0 #008b10}
.guide-journey h2{margin:0 0 5px;font-size:20px}
.guide-journey p{margin:0;color:#d7cedf}

.guide-compensation{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:24px;padding:28px;border:1px solid rgba(0,209,24,.45);border-radius:18px;background:linear-gradient(135deg,rgba(8,7,20,.96),rgba(52,16,106,.9));box-shadow:0 12px 28px rgba(8,7,20,.28)}
.guide-compensation h2{margin:5px 0 8px;font-size:30px}
.guide-compensation p{color:#d8cee5}
.compensation-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.compensation-examples article{display:flex;flex-direction:column;gap:7px;padding:18px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.08)}
.compensation-examples strong{color:#00d118;font-size:20px}
.compensation-examples small{color:#d8cee5;line-height:1.45}
.compensation-note{grid-column:1/-1;margin:0!important;font-size:13px}
.guide-requirements{margin-top:22px;padding:24px;border:1px solid rgba(164,114,215,.36);border-radius:16px;background:rgba(40,23,62,.84)}
.guide-requirements h2{margin-top:0}
.guide-requirements>div{display:flex;flex-wrap:wrap;gap:9px}
.guide-requirements span{padding:8px 11px;border:1px solid rgba(0,209,24,.34);border-radius:999px;background:rgba(0,209,24,.08);color:#e9ffec;font-size:13px}

.blog-coming-soon{text-align:center;padding:54px 34px}
.blog-coming-soon>p{margin:0 auto 30px}
.blog-mark{display:grid;width:76px;height:76px;margin:0 auto 18px;place-items:center;border:2px solid #00d118;border-radius:22px;background:rgba(8,7,20,.7);box-shadow:0 0 24px rgba(0,209,24,.2),inset 0 0 20px rgba(95,25,187,.28)}
.blog-mark img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 0 9px rgba(0,209,24,.4))}
.blog-future-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:920px;margin:0 auto 30px;text-align:left}
.blog-future-features article{padding:20px;border:1px solid rgba(164,114,215,.35);border-radius:14px;background:rgba(8,7,20,.48)}
.blog-feature-icon{display:grid!important;width:45px;height:45px;margin-bottom:12px!important;place-items:center;border:1px solid rgba(164,114,215,.55);border-radius:12px;background:linear-gradient(145deg,rgba(95,25,187,.42),rgba(8,7,20,.8));box-shadow:inset 0 1px rgba(255,255,255,.1),0 5px 14px rgba(0,0,0,.25)}
.blog-feature-icon svg{width:31px;height:31px;fill:none;stroke:#d5a9ff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.blog-feature-icon.brand-compass{border-color:rgba(0,209,24,.58)}
.blog-feature-icon img{width:35px;height:35px;object-fit:contain;filter:drop-shadow(0 0 7px rgba(0,209,24,.42))}
.blog-future-features strong{font-size:18px}
.blog-future-features p{margin:7px 0 0;color:#d8cee5}
.coming-soon-pill{display:inline-block;padding:8px 14px;border:1px solid #00d118;border-radius:999px;background:rgba(0,209,24,.12);color:#85ff92;font-size:12px;font-weight:900;letter-spacing:1.3px}

@media (max-width: 900px) {
  .how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-step { min-height: 250px; }
  .pricing-details,
  .blog-future-features { grid-template-columns:1fr; }
  .guide-compensation { grid-template-columns:1fr; }
}

@media (max-width: 560px) {
  .how-steps,
  .pricing-options { grid-template-columns: 1fr; }
  .how-step { min-height: auto; }
  .pricing-panel { padding: 24px 18px; }
  .pricing-intro h2 { font-size: 28px; }
  .content-page-hero,
  .blog-coming-soon { padding:28px 18px; }
  .compensation-examples { grid-template-columns:1fr; }
  .guide-compensation { padding:22px 18px; }
}