.meth-shell { background: #f0f4ff; min-height: 100vh; }
.meth-hero { background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #3157D5 100%); color: #fff; padding: 4rem 0; }
.meth-hero-inner { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: center; }
.meth-eyebrow { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: #93c5fd; margin-bottom: 1rem; }
.meth-hero h1 { font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 800; color: #fff; line-height: 1.08; margin-bottom: 1rem; }
.meth-hero-lead { color: rgba(255,255,255,.88); font-size: 1.05rem; line-height: 1.55; margin-bottom: 1.6rem; }
.meth-hero-actions { display: flex; gap: .9rem; flex-wrap: wrap; }
.meth-btn-primary { background: #fff; color: #1d4ed8; border: none; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.18); transition: all .2s; }
.meth-btn-primary:hover { background: #f0f9ff; color: #1e40af; transform: translateY(-2px); }
.meth-hero-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.meth-fact { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 1rem; padding: 1.4rem 1.2rem; text-align: center; }
.meth-fact b { display: block; font-size: 2rem; font-weight: 800; color: #fff; line-height: 1; }
.meth-fact span { font-size: .78rem; color: rgba(255,255,255,.72); }

.meth-section-eyebrow { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 800; color: #3157D5; margin-bottom: .5rem; }
.meth-section-sub { color: #64748b; max-width: 640px; margin: .5rem auto 0; font-size: 1.02rem; }
.section-light { background: #eef4ff; }

.meth-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 1.1rem; padding: 1.5rem; box-shadow: 0 4px 16px rgba(15,23,42,.04); }
.meth-card h3 { font-size: 1.02rem; font-weight: 700; color: #0f172a; margin-bottom: .6rem; }
.meth-card-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: #e0e7ff; color: #4338ca; font-weight: 800; font-size: .85rem; margin-bottom: .5rem; }
.meth-param { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.25rem; height: 100%; }
.meth-param h3 { font-size: .95rem; font-weight: 700; color: #0f172a; margin-bottom: .45rem; }
.meth-param code { background: #f1f5f9; padding: .1rem .3rem; border-radius: 4px; font-size: .8em; }

.meth-table { font-size: .9rem; margin-bottom: .75rem; }
.meth-badge { display: inline-block; border-radius: 999px; padding: .2rem .6rem; font-size: .72rem; font-weight: 800; }
.meth-badge-c { background: #fee2e2; color: #991b1b; }
.meth-badge-h { background: #ffedd5; color: #9a3412; }
.meth-badge-m { background: #fef3c7; color: #92400e; }
.meth-badge-l { background: #dbeafe; color: #1e40af; }
.meth-badge-i { background: #f1f5f9; color: #475569; }

.meth-band { border-radius: .8rem; padding: 1rem .5rem; text-align: center; font-weight: 800; font-size: .9rem; height: 100%; }
.meth-band small { font-weight: 600; font-size: .75rem; }
.meth-band-a { background: #dcfce7; color: #166534; }
.meth-band-b { background: #d1fae5; color: #065f46; }
.meth-band-c { background: #fef3c7; color: #92400e; }
.meth-band-d { background: #ffedd5; color: #9a3412; }
.meth-band-f { background: #fee2e2; color: #991b1b; }

.meth-callout { display: flex; gap: 1rem; align-items: flex-start; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 1.1rem; padding: 1.4rem 1.6rem; }
.meth-callout i { color: #3157D5; font-size: 1.4rem; margin-top: .2rem; }
.meth-callout h2, .meth-callout h3 { font-size: 1.05rem; font-weight: 800; color: #0f172a; margin-bottom: .3rem; }
.meth-callout-amber { background: #fffbeb; border-color: #fde68a; }
.meth-callout-amber i { color: #d97706; }
.meth-manual { display: flex; align-items: center; background: #fff; border: 1px solid #e2e8f0; border-radius: .8rem; padding: .7rem .9rem; font-size: .88rem; font-weight: 600; color: #334155; height: 100%; }
.meth-disclaimer { background: #fffbeb; border-color: #fde68a; }
@media (max-width: 991px) { .meth-hero-inner { grid-template-columns: 1fr; } }
/* Hero facts stayed 2-up down to 360px and cramped; stack on very small screens. */
@media (max-width: 480px) {
    .meth-hero-facts { grid-template-columns: 1fr; }
    .meth-hero { padding: 2.5rem 0; }
    .meth-fact b { font-size: 1.7rem; }
}