.methodology-page { color: var(--promo-ink); padding-bottom: 3rem; }
.methodology-page .content-section { padding-block: clamp(2rem, 5vw, 4rem); border: 0; background: transparent; }
.methodology-page .content-section__inner { padding-block: 0; background: transparent; border: 0; box-shadow: none; }
.methodology-page #intro { padding-bottom: 0; }
.methodology-page #intro .section-subtitle { margin-bottom: 0; }
.methodology-page :is(h1, h2, h3, h4) { color: var(--promo-ink); }
.methodology-page h1 { color: var(--promo-blue); font-size: clamp(2.25rem, 5vw, 3.5rem); }
.methodology-page h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.3; }
.methodology-page :is(.section-subtitle, .markdown-content, .feature-item p) { color: #cbd5e1; }
.methodology-page .section-kicker { display: none; }
.methodology-page .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.methodology-page .feature-item { border: 1px solid var(--promo-border); border-radius: 1.25rem; background: var(--promo-surface); padding: 1.5rem; }
.methodology-page .feature-item h3 { font-size: 1.2rem; line-height: 1.45; }
.methodology-page .feature-item p { font-size: 1rem; line-height: 1.75; }
.methodology-page .feature-item__content { padding: 0; }
.method-process { width: min(calc(100% - 2rem), var(--container)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.method-process > .content-section { min-width: 0; padding: 0; }
.method-process .content-section__inner { width: 100%; padding: 0; }
.method-process .content-section__layout { display: block; }
.method-process .feature-grid { counter-reset: method-step; }
.method-process .feature-item { counter-increment: method-step; border-top-color: var(--step-color, #38bdf8); }
.method-process .feature-item::before { content: '0' counter(method-step); display: inline-block; margin-bottom: 1rem; padding: 0.3rem 0.6rem; border: 1px solid currentColor; border-radius: 0.7rem; color: var(--step-color, #38bdf8); font-weight: 800; }
.method-process .feature-item:nth-child(2) { --step-color: #fcbc27; }
.method-process .feature-item:nth-child(3) { --step-color: #a98bff; }
.method-process .feature-item:nth-child(4) { --step-color: #2dd4bf; }
.method-demo { min-width: 0; margin-block: 0 2rem; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--promo-border); border-top-color: var(--promo-gold); border-radius: 1.25rem; background: var(--promo-surface); }
.method-demo h2 { margin: 0.8rem 0 0.4rem; font-size: 1.2rem; line-height: 1.4; }
.method-demo > p { color: #cbd5e1; font-size: 0.95rem; }
.method-demo .method-demo__badge { display: inline-block; margin: 0; padding: 0.3rem 0.65rem; border: 1px solid #786026; border-radius: 2rem; color: var(--promo-gold); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; }
.method-demo__screen { padding: 1rem; margin-top: 1rem; border-radius: 1rem; background: #0b1220; }
.method-demo__phase { min-height: 2.8em; margin: 0 0 0.75rem; color: #f8fafc; font-size: 0.85rem; font-weight: 700; }
.method-demo__image { position: relative; overflow: hidden; border-radius: 0.75rem; aspect-ratio: 16 / 9; }
.method-demo__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter 2s ease; }
.method-demo__image [data-demo-compare] { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); filter: sepia(0.35) hue-rotate(95deg) saturate(2.2); }
.method-demo__image [hidden] { display: none; }
.method-demo__palette { display: flex; gap: 0.4rem; margin-top: 0.9rem; }
.method-demo__palette span { flex: 1; text-align: center; padding: 0.3rem; border: 1px solid currentColor; border-radius: 0.5rem; font-weight: 800; font-size: 0.85rem; }
.method-demo__palette span:nth-child(1) { color: #ff7777; }
.method-demo__palette span:nth-child(2) { color: #facc15; }
.method-demo__palette span:nth-child(3) { color: #4ade80; }
.method-demo__palette span:nth-child(4) { color: #38bdf8; }
.method-demo__palette span:nth-child(5) { color: #80a7ff; }
.method-demo__palette span:nth-child(6) { color: #c084fc; }
.method-demo__palette .is-active { background: #334155; box-shadow: 0 0 12px currentColor; transform: translateY(2px) scale(0.96); }
.method-demo__steps { display: flex; justify-content: center; gap: 0.5rem; list-style: none; padding: 0; margin: 1rem 0; }
.method-demo__steps li { width: 0.5rem; height: 0.5rem; background: #475569; border-radius: 1rem; }
.method-demo__steps [aria-current] { width: 1.25rem; background: #38bdf8; }
.method-demo__controls { display: none; flex-wrap: wrap; gap: 0.5rem; }
.method-demo[data-phase] .method-demo__controls { display: flex; }
.method-demo__controls button { flex: 1; padding: 0.6rem; border: 1px solid #475569; border-radius: 0.5rem; color: #f8fafc; background: #19263e; font: inherit; font-size: 0.8rem; cursor: pointer; }
.method-demo__controls button:hover { background: #253857; }
.method-demo .method-demo__note { margin-bottom: 0; font-size: 0.85rem; line-height: 1.65; }
.methodology-page :is(a, button):focus-visible { outline: 3px solid var(--promo-blue); outline-offset: 4px; }
.method-illustration { margin-block: 0 2rem; }
.method-illustration button { display: block; width: 100%; padding: 0; border: 1px solid var(--promo-border); border-radius: 1rem; overflow: hidden; background: #080e1b; cursor: zoom-in; }
.method-illustration img { display: block; width: 100%; height: auto; }
.method-illustration figcaption { margin-top: 0.75rem; color: #cbd5e1; font-size: 0.85rem; text-align: center; }
@media (max-width: 64rem) { .method-process { grid-template-columns: 1fr; } .method-demo { width: min(100%, 40rem); margin-inline: auto; } }
@media (max-width: 40rem) { .methodology-page .feature-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .method-demo__image img { transition: none; } }