#methods .section { padding-block: clamp(var(--space-6), 4vw, var(--space-8)); }
#methods .grid-2 { display:grid; gap: var(--space-5); grid-template-columns: 1.1fr .9fr; }
#methods .grid-3 { display:grid; gap: var(--space-5); grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 960px){ #methods .grid-2, #methods .grid-3 { grid-template-columns: 1fr; } }
#methods .methods-hero .eyebrow{ text-transform: uppercase; letter-spacing:.12em; font-size: var(--text-xs); color: var(--muted); margin:0 0 var(--space-2); }
#methods .methods-hero .subhead{ margin:0 0 var(--space-4); max-width: 70ch; }
#methods .methods-hero .hero-note{ margin:0; max-width: 60ch; }
#methods .methods-overview h2{ margin:0 0 var(--space-4); }
#methods .methods-stack{ display:grid; gap: var(--space-4); }
#methods .methods-stack .card h2{ margin-top:0; }
#methods .kpi-grid { display:grid; gap: var(--space-4); grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1024px){ #methods .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ #methods .kpi-grid { grid-template-columns: 1fr; } }
#methods .card { padding: var(--space-5); border:1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
#methods .kpi { display:grid; gap:.4rem; }
#methods .kpi .label { color: var(--muted); font-size: var(--text-sm); }
#methods .kpi .value { font-size: var(--text-2xl); font-weight:700; }
#methods .kpi .delta { font-size: var(--text-sm); margin-left:.5ch; }
#methods .kpi .delta.up { color: var(--success); }
#methods .kpi .delta.down { color: var(--danger); }
#methods .target-badge { border:1px solid var(--border); border-radius:999px; padding:.15rem .5rem; font-size: var(--text-xs); color: var(--muted); }
#methods .kpi-controls { display:flex; gap:.5rem; margin-bottom: var(--space-3); }
#methods .chip { border:1px solid var(--border); border-radius:999px; padding:.35rem .7rem; background:transparent; color: var(--text); }
#methods .chip.active { border-color: var(--brand); background: rgba(20,184,166,.14); }
#methods .chart-head { display:flex; align-items:center; justify-content:space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
#methods .tabs .tab { border:1px solid var(--border); border-radius: var(--radius-sm); padding:.35rem .6rem; background:transparent; color: var(--text); }
#methods .tabs .tab.active { background: rgba(20,184,166,.12); border-color: var(--brand); }
#methods .chart-wrap { position:relative; min-height: 300px; }
@media (max-width: 640px){ #methods .chart-wrap { min-height: 240px; } }
#methods .metric-map{ width:100%; border-collapse: collapse; }
#methods .metric-map th, #methods .metric-map td{ border-top:1px solid var(--border); padding: .75rem 1rem; vertical-align: top; }
#methods .metric-map th{ color: var(--muted); font-weight:600; }
#methods .hazard-map { width:100%; border-collapse: collapse; margin-top:.5rem; }
#methods .hazard-map th, #methods .hazard-map td { padding:.4rem .5rem; border-top:1px solid var(--border); text-align:center; }
#methods .small { font-size: var(--text-sm); }
#methods .muted { color: var(--muted); }
#methods .defs { padding: var(--space-5); display:grid; gap:.4rem; }
#methods .stakes { margin-top:.5rem; }
#methods .media-card { display:grid; gap: var(--space-4); }
#methods .video-embed { position:relative; width:100%; aspect-ratio:16 / 9; border-radius: var(--radius); overflow:hidden; background:#000; }
#methods .video-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
#methods .pct-diagram { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border); }

/* Methods advantage section */
#methods .methods-advantage h2 { margin: 0 0 var(--space-3); }
#methods .methods-advantage .subhead { margin: 0 0 var(--space-5); max-width: 70ch; }
#methods .methods-advantage h3 { margin: var(--space-5) 0 var(--space-3); }
#methods .stat-card { position: relative; }
#methods .stat-card h3 { margin-top: 0; font-size: var(--text-lg); }
#methods .stat-card .stat { font-size: var(--text-3xl); font-weight: 700; color: var(--brand); margin: var(--space-2) 0; line-height: 1.1; }
#methods .stat-card p:last-of-type { margin-bottom: 0; }
#methods .points { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--space-3); }
#methods .points li { color: var(--text); }
#methods .points a { text-decoration: none; opacity: 0.7; transition: opacity 0.2s; }
#methods .points a:hover { opacity: 1; }

/* References toggle */
#methods .references-toggle { margin-top: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); background: var(--surface); }
#methods .references-toggle summary { font-weight: 600; cursor: pointer; user-select: none; list-style: none; display: flex; align-items: center; gap: 0.5rem; }
#methods .references-toggle summary::-webkit-details-marker { display: none; }
#methods .references-toggle summary::before { content: '▶'; display: inline-block; width: 1em; transition: transform 0.2s; font-size: 0.75em; opacity: 0.7; }
#methods .references-toggle[open] summary::before { transform: rotate(90deg); }
#methods .references-toggle .references-list { margin: var(--space-4) 0 0; padding-left: 1.2rem; display: grid; gap: var(--space-2); }
#methods .references-toggle .references-list li { line-height: 1.5; }

#metrics .eyebrow{ text-transform: uppercase; letter-spacing: .12em; font-size: var(--text-xs); color: var(--muted); margin:0; }
#metrics .metrics-hero .hero-note{ margin:0; max-width: 60ch; }
#metrics .metrics-hero .actions{ margin-top: var(--space-4); }

#metrics .metrics-glance-grid{ display:grid; gap: var(--space-5); grid-template-columns: 1fr; }
#metrics .metric-card{ display:grid; gap: var(--space-5); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
#metrics .metric-card__copy{ display:grid; gap: var(--space-3); }
#metrics .metric-card__copy h3{ margin:0; }
#metrics .metric-card__copy p{ margin:0; color: var(--muted); }
#metrics .metric-card__visual{ border:1px solid var(--border); border-radius: var(--radius-sm); background: rgba(17,23,32,.82); padding: var(--space-4); display:grid; gap: var(--space-3); }
#metrics .metric-value{ font-size: var(--text-xl); font-weight:600; margin:0; }
#metrics .chart-note{ margin:0; font-size: var(--text-sm); }

#metrics .sparkline{ width:100%; height:auto; }
#metrics .sparkline polyline{ stroke-width:3; stroke-linecap:round; stroke-linejoin:round; vector-effect: non-scaling-stroke; }
#metrics .sparkline-up polyline{ stroke: var(--success); }
#metrics .sparkline-down polyline{ stroke: var(--danger); }
#metrics .sparkline-mixed polyline{ stroke: var(--brand); }
#metrics .sparkline-grid .axis-line{ stroke: rgba(255,255,255,.22); stroke-width:1; }
#metrics .sparkline-grid .grid-line{ stroke: rgba(255,255,255,.12); stroke-width:.6; }

#metrics .metrics-measure-list{ display:grid; gap: var(--space-5); }
#metrics .metric-panel{ display:grid; gap: var(--space-5); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
#metrics .metric-panel__copy{ display:grid; gap: var(--space-3); }
#metrics .metric-panel__copy h3{ margin:0 0 var(--space-3); }
#metrics .metric-panel__copy ul{ margin:0; padding-left: 1.15rem; display:grid; gap:.45rem; color: var(--muted); }
#metrics .metric-panel__visual{ border:1px solid var(--border); border-radius: var(--radius-sm); background: rgba(17,23,32,.82); padding: var(--space-4); display:grid; gap: var(--space-3); }
#metrics .metric-panel__visual .btn{ justify-self: start; }
#metrics .metric-panel__copy .btn{ justify-self: start; }
#metrics .metric-label{ font-size: var(--text-sm); letter-spacing:.04em; text-transform: uppercase; color: var(--muted); margin:0; }
#metrics .section-intro{ margin: 0 0 var(--space-5); max-width: 60ch; }

#metrics .metrics-roles-grid{ display:grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
#metrics .role-card ul{ margin:0; padding-left: 1.15rem; display:grid; gap:.45rem; color: var(--muted); }

#metrics .metrics-info-grid{ display:grid; gap: var(--space-4); grid-template-columns: 1fr; }
#metrics .info-card h2{ margin:0 0 var(--space-3); }
#metrics .info-card ul{ margin:0; padding-left: 1.15rem; display:grid; gap:.4rem; color: var(--muted); }
#metrics .definitions-card{ display:grid; gap: var(--space-4); }
#metrics .definitions-card h2{ margin:0; }
#metrics .definitions-card .definitions-list{ display:grid; gap:.5rem; }
#metrics .definitions-card .definitions-list details{ padding:0; border:none; background:transparent; }
#metrics .definitions-card .definitions-list details + details{ margin-top:.35rem; }
#metrics .definitions-card details summary{ font-size: var(--text-md); cursor:pointer; }
#metrics .definitions-card details p{ margin: var(--space-2) 0 0; color: var(--muted); }

#metrics .metrics-callout{ display:grid; gap: var(--space-4); text-align:left; max-width: var(--container-narrow); margin-inline:auto; }
#metrics .metrics-callout p{ margin:0; color: var(--muted); }
#metrics .metrics-callout .btn{ justify-self: start; }

@media (max-width: 1024px){
  #metrics .metric-card,
  #metrics .metric-panel{ grid-template-columns: 1fr; }
  #metrics .metrics-roles-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  #metrics .metrics-hero__inner{ gap: var(--space-3); }
  #metrics .metrics-callout{ text-align:left; }
}