.protocol-page {
  --protocol-ink: var(--foinse-color-ink-900);
  --protocol-muted: var(--foinse-color-ink-500);
  --protocol-rule: var(--foinse-color-rule-200);
  --protocol-paper: var(--foinse-color-paper);
  --protocol-card: var(--foinse-color-surface-1);
  --protocol-blue: var(--foinse-color-accent);
  --protocol-blue-dark: var(--foinse-color-accent-hover);
  --protocol-green: var(--foinse-color-reserve);
  color: var(--protocol-ink);
  background: var(--protocol-paper);
}

.protocol-page .site-head,
.protocol-page footer { color: var(--foinse-color-ink-900); background: var(--foinse-color-paper); }
.protocol-page .foinse-btn--primary { color: #fff; background: var(--protocol-blue); border-color: var(--protocol-blue); }
.protocol-page .foinse-btn--tertiary { color: var(--protocol-ink); background: var(--protocol-card); border-color: var(--protocol-rule); }

.protocol-page .hero {
  padding-block: clamp(72px, 9vw, 120px);
  color: var(--protocol-ink);
  background: var(--protocol-card);
  border-color: var(--protocol-rule);
}

.protocol-page .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, .76fr); }
.protocol-page .eyebrow { color: var(--protocol-green); }
.protocol-page .hero h1 { max-width: 12ch; color: var(--protocol-ink); font-size: clamp(48px, 6vw, 72px); }
.protocol-page .lede { max-width: 54ch; color: var(--protocol-muted); }

.loop-map {
  padding: 22px;
  background: var(--protocol-card);
  border: 1px solid var(--protocol-rule);
  border-radius: 16px;
}

.loop-map__loop,
.loop-map__wallet {
  position: relative;
  padding: 24px;
  background: var(--protocol-card);
  border: 1px solid var(--protocol-rule);
  border-radius: 10px;
}

.loop-map__loop > span,
.loop-map__wallet > span { display: block; margin-bottom: 18px; color: var(--protocol-green); font: 700 11px/1 var(--foinse-font-family-mono); letter-spacing: .09em; }
.loop-map__loop strong,
.loop-map__wallet strong { display: block; color: var(--protocol-ink); font-size: 24px; }
.loop-map__loop strong b { color: var(--protocol-blue); }
.loop-map__loop small,
.loop-map__wallet small { display: block; margin-top: 7px; color: var(--protocol-muted); font-size: 13px; }
.loop-map__wallet { margin: 12px 28px; background: var(--foinse-color-rule-100); border-color: var(--foinse-color-rule-200); text-align: center; }
.loop-map__wallet > span { color: var(--protocol-blue); }
.loop-map__loop--market > span { color: var(--protocol-blue); }
.loop-map > p { margin: 18px 0 0; color: var(--protocol-muted); font-size: 13px; text-align: center; }

.protocol-page .foinse-section { color: var(--protocol-ink); background: var(--protocol-paper); border-color: var(--protocol-rule); }
.protocol-page .foinse-section:nth-of-type(odd) { background: var(--protocol-card); }
.protocol-page .section-heading h2,
.protocol-page .foinse-section h2,
.protocol-page .foinse-section h3 { color: var(--protocol-ink); }
.protocol-page .section-heading p,
.protocol-page .foinse-section > .wrap > p { color: var(--protocol-muted); }

.protocol-page .grammar-grid {
  background: var(--protocol-card);
  border: 1px solid var(--protocol-rule);
  border-radius: 12px;
  overflow: hidden;
}
.protocol-page .grammar-grid > div { min-height: 170px; padding: 24px; border-right: 1px solid var(--protocol-rule); }
.protocol-page .grammar-grid > div:last-child { border-right: 0; }
.protocol-page .grammar-grid b { color: var(--protocol-ink); }
.protocol-page .grammar-grid p { color: var(--protocol-muted); }

.protocol-page .foinse-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.protocol-page .foinse-steps > li { min-height: 230px; padding: 26px; background: var(--protocol-card); border: 1px solid var(--protocol-rule); border-radius: 12px; }
.protocol-page .foinse-step-no { margin-bottom: 48px; color: var(--protocol-green); }
.protocol-page .foinse-steps h3 { color: var(--protocol-ink); }
.protocol-page .foinse-steps p { color: var(--protocol-muted); }

.protocol-page #gas-toll { background: var(--foinse-color-rule-100); }
.protocol-page #gas-toll .foinse-steps > li { border-color: var(--foinse-color-rule-200); }
.protocol-page .proof-rail { color: var(--protocol-ink); background: var(--foinse-color-rule-100); border-color: var(--foinse-color-reserve); }
.protocol-page .proof-rail h2 { color: var(--protocol-ink); }
.protocol-page .proof-rail p { color: var(--protocol-muted); }

@media (max-width: 900px) {
  .protocol-page .hero-grid,
  .protocol-page .section-heading { grid-template-columns: 1fr; }
  .protocol-page .foinse-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .protocol-page .grammar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .protocol-page .grammar-grid > div { border-bottom: 1px solid var(--protocol-rule); }
}

@media (max-width: 640px) {
  .protocol-page .hero { padding-block: 56px 68px; }
  .protocol-page .hero h1 { font-size: 46px; }
  .protocol-page .hero-cta { display: grid; }
  .protocol-page .hero-cta .foinse-btn { width: 100%; }
  .loop-map { padding: 14px; }
  .loop-map__wallet { margin-inline: 10px; }
  .protocol-page .foinse-steps,
  .protocol-page .grammar-grid { grid-template-columns: 1fr; }
  .protocol-page .foinse-steps > li { min-height: 0; }
  .protocol-page .foinse-step-no { margin-bottom: 24px; }
  .protocol-page .grammar-grid > div { min-height: 0; border-right: 0; }
}