/* Home page sections. */
.hero { padding-block: 72px 56px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.chip { font-family: var(--font-mono); font-size: 12px; background: var(--canvas); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; color: var(--text-2); }
.hero h1 { font-size: 64px; line-height: 1.02; letter-spacing: -.035em; font-weight: 600; margin-top: 22px; }
.hero h1 em { font-style: normal; color: var(--mint-text); }
.hero .lede { font-size: 19px; color: var(--text-2); margin-top: 22px; max-width: 54ch; }
.operator { font-size: 14px; color: var(--muted); margin-top: 18px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.trace { background: var(--ink); color: var(--on-ink); border-radius: var(--r-lg); box-shadow: 0 24px 48px -24px rgb(0 0 0 / .35); overflow: hidden; min-width: 0; }
.trace-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid rgb(255 255 255 / .08); font-size: 13px; color: var(--on-ink-2); }
.trace-bar b { color: var(--on-ink); font-weight: 600; }
.pill-ok { font-family: var(--font-mono); font-size: 12px; color: var(--mint); background: rgb(62 230 168 / .12); border-radius: 999px; padding: 2px 10px; }
.trace pre { margin: 0; padding: 18px; font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-all; color: #d4d4d8; }
.trace .cmd { color: var(--on-ink-2); }
.trace .st { color: var(--mint); }
.trace .hd { color: #93c5fd; }
.hops { list-style: none; margin: 0; padding: 6px 18px 18px; display: grid; gap: 8px; }
.hops li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: rgb(255 255 255 / .05); border-radius: var(--r-sm); padding: 10px 12px; font-size: 14px; }
.hops .n { font-family: var(--font-mono); color: var(--on-ink-2); font-size: 12px; }
.hops .host { overflow-wrap: anywhere; }
.hops .host small { display: block; color: var(--on-ink-2); font-size: 12px; }
.hops .code { font-family: var(--font-mono); font-size: 12px; color: var(--mint); }
.hops .code.final { color: #fde68a; }

.anatomy { background: var(--canvas); border-block: 1px solid var(--line); padding-block: 48px; }
.anatomy-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.anatomy-head h2 { font-size: 28px; letter-spacing: -.02em; }
.anatomy-head p { color: var(--text-2); max-width: 48ch; }
.url { display: flex; flex-wrap: wrap; gap: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; }
.seg { display: grid; gap: 8px; min-width: 0; }
.seg code { font-size: 15px; padding: 6px 8px; border-radius: 6px; overflow-wrap: anywhere; }
.seg span { font-size: 12px; color: var(--text-2); padding-left: 2px; }
.seg-host code { background: var(--ink); color: var(--on-ink); }
.seg-id code { background: var(--violet-soft); color: var(--violet-text); }
.seg-params code { background: var(--blue-soft); color: var(--blue-text); }
.seg-dest { flex: 1 1 320px; }
.seg-dest code { background: var(--mint-soft); color: var(--mint-text); box-shadow: inset 0 0 0 1.5px var(--mint); }
.seg-dest span { color: var(--mint-text); font-weight: 600; }

.networks { padding-block: 28px; border-bottom: 1px solid var(--line); }
.networks .wrap { display: grid; gap: 14px; }
.networks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; }
.networks li { font-size: 20px; font-weight: 700; color: var(--text-2); letter-spacing: -.01em; }

.section { padding-block: 88px; }
.section.alt { background: var(--canvas); border-block: 1px solid var(--line); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 44px; }
.sec-head h2 { font-size: 44px; line-height: 1.08; letter-spacing: -.03em; font-weight: 600; margin-top: 14px; }
.sec-head p { color: var(--text-2); font-size: 17px; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.steps li { border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; background: var(--bg); display: grid; gap: 10px; align-content: start; }
.steps .num { font-family: var(--font-mono); font-size: 13px; color: var(--mint-text); }
.steps h3 { font-size: 20px; }
.steps p { color: var(--text-2); font-size: 15px; }

.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.rule { background: var(--bg); padding: 28px; display: grid; gap: 10px; align-content: start; }
.rule h3 { font-size: 18px; }
.rule p { color: var(--text-2); font-size: 15px; }
.rule code { justify-self: start; font-size: 12px; background: var(--canvas); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; color: var(--ink); overflow-wrap: anywhere; }

.format { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.params { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.params th, .params td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.params tr:last-child td { border-bottom: 0; }
.params th { font-size: 13px; color: var(--muted); font-weight: 600; background: var(--canvas); }
.params td:first-child { font-family: var(--font-mono); font-size: 14px; white-space: nowrap; color: var(--ink); }
.params .dest td { background: var(--mint-soft); }
.tag { font-family: var(--font-sans); font-size: 12px; font-weight: 600; border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.tag-fwd { background: var(--mint); color: var(--mint-ink); }
.code-card { background: var(--ink); border-radius: var(--r-md); overflow: hidden; min-width: 0; }
.code-card + .code-card { margin-top: 16px; }
.code-card header { padding: 12px 16px; font-size: 13px; color: var(--on-ink-2); border-bottom: 1px solid rgb(255 255 255 / .08); }
.code-card pre { margin: 0; padding: 16px; font-size: 13px; line-height: 1.7; color: #d4d4d8; white-space: pre-wrap; word-break: break-all; }
.code-card .v { color: var(--mint); }

.data { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.fields { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.fields code { font-size: 13px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; color: var(--ink); }
.facts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.fact { background: var(--bg); padding: 22px 24px; display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 16px; align-items: baseline; }
.fact b { white-space: nowrap; font-size: 28px; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fact p { color: var(--text-2); font-size: 15px; }
.data .more { margin-top: 24px; }
.data .more a { color: var(--mint-text); font-weight: 600; text-underline-offset: 3px; }

.abuse { background: var(--ink); color: var(--on-ink); padding-block: 72px; }
.abuse .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.abuse h2 { color: var(--on-ink); font-size: 40px; line-height: 1.1; letter-spacing: -.03em; font-weight: 600; }
.abuse p { color: var(--on-ink-2); margin-top: 14px; font-size: 17px; }
.abuse-box { border: 1px solid rgb(255 255 255 / .12); border-radius: var(--r-md); padding: 24px; display: grid; gap: 14px; }
.abuse-box .label { color: var(--on-ink-2); }
.abuse-box .mail { font-family: var(--font-mono); font-size: 20px; color: var(--mint); overflow-wrap: anywhere; }

@media (max-width: 960px) {
  .hero { padding-block: 44px 40px; }
  .hero-grid, .sec-head, .format, .data, .abuse .wrap { grid-template-columns: 1fr; gap: 28px; }
  .hero h1 { font-size: 44px; }
  .sec-head h2 { font-size: 34px; }
  .steps, .rules { grid-template-columns: 1fr; }
  .section { padding-block: 60px; }
  .abuse h2 { font-size: 30px; }
  .networks ul { justify-content: flex-start; gap: 10px 24px; }
  .networks li { font-size: 17px; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 38px; }
  .fact { grid-template-columns: 1fr; gap: 4px; }
}

.hero .lede code, .steps p code, .sec-head p code, .rule p code {
  font-size: .88em; background: var(--canvas); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--ink);
}
.data-title { font-size: 44px; line-height: 1.08; letter-spacing: -.03em; font-weight: 600; margin-top: 14px; }
.data-lede { color: var(--text-2); font-size: 17px; margin-top: 16px; max-width: 52ch; }
@media (max-width: 960px) { .data-title { font-size: 34px; } }