:root {
  --pay-bg: #07110f;
  --pay-panel: #0d1c18;
  --pay-line: #315047;
  --pay-accent: #63e6be;
  --pay-text: #edf5f2;
  --pay-muted: #b7c9c3;
  --md-primary-fg-color: #087f5b;
  --md-accent-fg-color: #63e6be;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--pay-bg);
  --md-default-fg-color: var(--pay-text);
  --md-default-fg-color--light: var(--pay-muted);
}

.md-grid { max-width: 1440px; }
.md-content { font-size: .83rem; line-height: 1.65; }
.md-content h1 { max-width: 900px; font-weight: 800; letter-spacing: -.035em; }
.md-content h2 { margin-top: 2.4em; font-weight: 750; letter-spacing: -.02em; }
.md-content table:not([class]) { display: table; width: 100%; }
.md-typeset a { text-underline-offset: .18em; }
.md-typeset blockquote { border-left-color: var(--pay-accent); background: rgba(99,230,190,.06); }
.md-typeset code { border-radius: .2rem; }

.docs-hero {
  margin: -1.2rem -1.2rem 2.2rem;
  padding: clamp(2rem, 6vw, 4.5rem) clamp(1.2rem, 5vw, 4rem);
  border: 1px solid var(--pay-line);
  background:
    linear-gradient(120deg, rgba(99,230,190,.14), transparent 58%),
    repeating-linear-gradient(90deg, transparent 0 74px, rgba(99,230,190,.025) 75px),
    var(--pay-panel);
}
.docs-hero h1 { margin: .5rem 0 1rem; max-width: 930px; font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.04; }
.kicker, .card-number { color: var(--pay-accent); font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.lede { max-width: 900px; color: var(--pay-text); font-size: 1.05rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.4rem 0; }
.hero-actions a { padding: .7rem 1rem; font-weight: 800; text-decoration: none; }
.primary-button { background: var(--pay-accent); color: var(--pay-bg) !important; }
.secondary-button { border: 1px solid #4d786c; color: var(--pay-text) !important; }
.truth-banner { display: flex; flex-wrap: wrap; gap: .5rem; color: var(--pay-muted); }
.truth-banner > * { padding: .35rem .6rem; border: 1px solid var(--pay-line); background: var(--pay-bg); }
.truth-banner strong { color: var(--pay-accent); }

.visual-cards, .docs-grid, .case-example-grid { display: grid; gap: .8rem; }
.visual-cards, .case-example-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.docs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.visual-cards article, .case-example-grid article, .docs-grid a, .matrix-example {
  padding: 1rem;
  border: 1px solid var(--pay-line);
  background: var(--pay-panel);
}
.visual-cards article { border-top: 3px solid var(--pay-accent); }
.visual-cards h3 { margin: .35rem 0; }
.visual-cards p, .case-example-grid p { margin-bottom: 0; }
.docs-grid a { display: grid; gap: .3rem; text-decoration: none; transition: .15s ease; }
.docs-grid a:hover { border-color: var(--pay-accent); transform: translateY(-2px); }
.docs-grid small { color: #96aaa3; letter-spacing: .07em; text-transform: uppercase; }
.docs-grid strong { color: var(--pay-text); font-size: 1rem; }
.docs-grid span { color: var(--pay-muted); }

.reading-path { display: flex; align-items: stretch; gap: .45rem; overflow-x: auto; padding: .5rem 0; }
.reading-path span { min-width: 145px; padding: .7rem; border-left: 3px solid var(--pay-accent); background: var(--pay-panel); }
.reading-path b { display: block; color: var(--pay-accent); }
.reading-path i { align-self: center; color: var(--pay-accent); font-style: normal; }
.case-example-grid { margin: 1rem 0 1.5rem; }
.case-example-grid article:nth-child(3) { border-top: 3px solid var(--pay-accent); }
.case-example-grid span { color: var(--pay-accent); font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.matrix-example { margin: 1.4rem 0; }
.matrix-example h2 { margin: .3rem 0 .7rem; }

.wide-table { max-height: 75vh; overflow: auto; border: 1px solid var(--pay-line); }
.wide-table table { min-width: 1900px; margin: 0 !important; }
.wide-table thead { position: sticky; top: 0; z-index: 4; background: #17352d; }
.wide-table tbody tr:nth-child(even) { background: rgba(255,255,255,.025); }
.wide-table tbody tr:hover { background: #153029; }
.wide-table th, .wide-table td { min-width: 190px; padding: .65rem; vertical-align: top; }
.wide-table th:first-child, .wide-table td:first-child { position: sticky; left: 0; z-index: 2; min-width: 55px; background: #10231e; }
.wide-table th:nth-child(2), .wide-table td:nth-child(2) { position: sticky; left: 55px; z-index: 3; min-width: 210px; background: #10231e; }
.journey-table th[scope="row"] > small { display: block; margin-top: .45rem; }
.journey-table .case-number { color: var(--pay-accent); font-weight: 900; }
.journey-table .failure-cell { border-left: 2px solid #f4b860; background: rgba(244,184,96,.06); }
.journey-table .real-cell { border-left: 2px solid var(--pay-accent); background: rgba(99,230,190,.05); }
.docs-filter { display: flex; align-items: center; gap: .8rem; margin: 1rem 0 .35rem; font-weight: 800; }
.docs-filter input { width: min(440px,100%); padding: .65rem .75rem; border: 1px solid #4d786c; background: var(--pay-panel); color: var(--pay-text); }
.docs-case-count { margin: 0 0 .7rem; color: var(--pay-muted); }
.mermaid { overflow-x: auto; margin: 1.4rem 0; padding: 1rem; border: 1px solid var(--pay-line); background: #fff; }

@media (max-width: 760px) {
  .visual-cards, .docs-grid, .case-example-grid { grid-template-columns: 1fr; }
  .reading-path { display: grid; }
  .reading-path i { justify-self: center; transform: rotate(90deg); }
  .docs-filter { align-items: stretch; flex-direction: column; }
}