:root {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #10110f;
  background: #f7f7f2;
  --muted: #686a64;
  --line: rgba(16, 17, 15, 0.18);
  --signal: #10a37f;
}

* { box-sizing: border-box; }
body { margin: 0; background: #f7f7f2; }
a { color: inherit; text-underline-offset: 4px; }
.method-page { max-width: 860px; margin: 0 auto; padding: 36px 28px 96px; }
.method-nav { display: flex; justify-content: space-between; padding-bottom: 28px; border-bottom: 1px solid var(--line); font-size: 13px; }
.method-brand { font-weight: 700; text-decoration: none; }
.method-brand::before { color: var(--signal); content: "◆ "; }
.method-hero { padding: 76px 0 54px; }
.method-kicker { color: var(--signal); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h1 { max-width: 13ch; margin: 20px 0 28px; font-size: clamp(46px, 8vw, 82px); font-weight: 480; line-height: .96; letter-spacing: -.065em; }
.method-lead { max-width: 680px; color: var(--muted); font-size: 19px; line-height: 1.65; }
.method-section { padding: 36px 0; border-top: 1px solid var(--line); }
h2 { margin: 0 0 20px; font-size: 26px; font-weight: 550; letter-spacing: -.035em; }
p, li, dd { line-height: 1.7; }
li + li { margin-top: 10px; }
dt { margin-top: 20px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
dd { margin: 5px 0 0; }
code { padding: 2px 6px; border-radius: 4px; background: rgba(16, 17, 15, .06); }
.method-note { color: var(--muted); font-size: 13px; }
@media (max-width: 600px) { .method-page { padding-inline: 20px; } .method-hero { padding-top: 52px; } }