.method-page,
.guide-page {
  min-height: 100vh;
  color: var(--text-primary, #eef6f1);
  background: #0a0e1a;
}

.method-page::before,
.guide-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 16% 8%, rgba(24, 170, 118, .2), transparent 34rem),
    radial-gradient(circle at 78% 52%, rgba(103, 87, 190, .22), transparent 38rem),
    linear-gradient(155deg, #07131b, #11152a 58%, #09101d);
}

.method-hero,
.guide-hero {
  padding: clamp(8rem, 14vw, 11rem) 0 clamp(4rem, 8vw, 7rem);
  text-align: center;
}

.method-hero h1,
.guide-hero h1 {
  max-width: 1000px;
  margin: 1rem auto;
  font: 600 clamp(2.7rem, 7vw, 5.8rem)/.98 "Philosopher", Georgia, serif;
}

.method-hero p,
.guide-hero p {
  max-width: 780px;
  margin: 1.4rem auto 2rem;
  color: rgba(238, 246, 241, .76);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.75;
}

.method-article,
.guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 2rem;
  align-items: start;
  padding-bottom: 6rem;
}

.method-article > article,
.guide-article {
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border: 1px solid rgba(173, 226, 201, .15);
  border-radius: 28px;
  background: rgba(10, 20, 31, .78);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}

.method-article h2,
.guide-article h2 {
  margin: 2.7rem 0 .8rem;
  font: 600 clamp(1.8rem, 3vw, 2.5rem)/1.1 "Philosopher", Georgia, serif;
}

.method-article h2:first-of-type,
.guide-article h2:first-of-type { margin-top: .8rem; }

.method-article p,
.guide-article p,
.method-article li,
.guide-article li {
  color: rgba(238, 246, 241, .8);
  font-size: 1.03rem;
  line-height: 1.78;
}

.method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}

.method-grid > .glass,
.method-side,
.guide-side {
  padding: 1.4rem;
  border: 1px solid rgba(199, 173, 82, .2);
  border-radius: 20px;
  background: rgba(16, 27, 40, .78);
}

.method-grid h3 { margin-bottom: .5rem; color: #f4d36c; }
.method-side,
.guide-side { position: sticky; top: 6.5rem; }
.method-side ul,
.guide-side ul { padding-left: 1.2rem; }
.method-side .btn,
.guide-side .btn { width: 100%; margin-top: .7rem; }

.guide-steps { counter-reset: guide; list-style: none; padding: 0; }
.guide-steps > li { position: relative; padding: 1.1rem 1rem 1.1rem 4rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.guide-steps > li::before { counter-increment: guide; content: counter(guide); position: absolute; left: .7rem; top: 1rem; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; color: #0a0e1a; background: #f4d36c; font-weight: 800; }

@media (max-width: 900px) {
  .method-article,
  .guide-layout { grid-template-columns: 1fr; }
  .method-grid { grid-template-columns: 1fr; }
  .method-side,
  .guide-side { position: static; }
}

@media (max-width: 560px) {
  .method-hero,
  .guide-hero { padding-top: 7rem; }
  .method-hero h1,
  .guide-hero h1 { font-size: clamp(2.35rem, 12vw, 3.6rem); }
  .method-article > article,
  .guide-article { padding: 1.25rem; border-radius: 20px; }
}