/* ostbro — VAD
   One dark theme. Zero client JavaScript: no <script>, no on* attribute, no external resource.
   Every rule lives here; the markup carries classes and semantic tags only. */

:root {
  --bg: #181510;
  --surface: #211d16;
  --surface-raised: #2b2519;
  --text: #ddd5c6;
  --text-muted: #a79e8c;
  --text-inert: #6f675a;
  --accent: #f0a92e;
  --accent-ink: #181510;
  --radius: 12px;
  --font-ui: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Commit Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --tap: 44px;
}

* { box-sizing: border-box; }
html { background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-text-size-adjust: 100%;
}

.page { max-width: 1000px; margin: 0 auto; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent); border-radius: var(--radius); }

h1, h2, p, pre, ol, form { margin: 0; }
ol.steps { padding: 0; list-style: none; }
ol.steps > li { display: inline-flex; align-items: center; }

pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ——— header, nav, footer ——— */
.bar { position: relative; }
.brand { display: flex; align-items: center; gap: 10px; }
.foot a { color: inherit; }

/* the two strings a person compares character by character are never broken */
.mono, .mono-xl, [class*="mono"] { overflow-wrap: anywhere; }
.foot [class*="mono"] { overflow-wrap: normal; white-space: nowrap; }

/* ——— the phone menu: a <details>, so it opens with no script ——— */
.menu { display: none; }
.menu > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::marker { content: ""; }
.burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 26px; height: 20px; }
.burger > span { display: block; height: 3px; border-radius: 2px; background: var(--accent); }
.menu[open] .burger > span:nth-child(2) { opacity: .35; }
.menu-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  padding: 6px 18px 14px 18px;
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .85);
}
.menu-panel a { display: flex; align-items: center; min-height: 52px; font-size: 17px; color: var(--text); }
.menu-panel a.here { color: var(--accent); font-weight: 700; }

/* ——— controls: real inputs, state carried by :checked ——— */
.toggle {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  flex: none;
  width: 44px;
  height: 26px;
  padding: 3px;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface-raised);
  display: flex;
  align-items: center;
  cursor: pointer;
}
.toggle::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: var(--radius);
  background: var(--text-muted);
  transition: none;
}
.toggle:checked { background: var(--accent); justify-content: flex-end; }
.toggle:checked::after { background: var(--accent-ink); }
.toggle:disabled { opacity: .5; cursor: default; }
.switch-name { cursor: pointer; }
.toggle:disabled + .switch-name { cursor: default; color: var(--text-muted); }

.tile { cursor: pointer; display: block; }
.tile-input,
.chip-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.chip-option { cursor: pointer; }

.field,
.field-area {
  display: block;
  width: 100%;
  border: 0;
  color: var(--text);
  font-family: var(--font-mono);
  -webkit-appearance: none;
  appearance: none;
}
.field-area { font-family: var(--font-ui); resize: vertical; }
.field::placeholder, .field-area::placeholder { color: var(--text-inert); }
.field-label { display: block; cursor: pointer; }

.btn-el {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-el:disabled { cursor: default; }

/* ——— styles lifted out of the markup ——— */
.row { display: flex; justify-content: space-between; align-items: center; padding: 18px 32px; background: var(--surface); }
.line { display: flex; align-items: center; gap: 10px; }
.lead { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.line-2 { display: flex; align-items: center; gap: 18px; font-size: 14px; font-weight: 500; color: var(--text-muted); }
.bit { color: var(--text); }
.grid { display: grid; grid-template-columns: 1.618fr 1fr; gap: 20px; padding: 32px; }
.line-3 { display: flex; gap: 8px; align-items: center; margin-bottom: 20px; font-size: 14px; font-weight: 600; }
.chip { background: var(--accent); color: var(--bg); border-radius: var(--radius); padding: 6px 12px; }
.muted { color: var(--text-muted); }
.eyebrow { font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.title { margin: 0 0 8px 0; font-size: clamp(21px, 10.8vw, 42px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }
.copy { margin: 0 0 20px 0; font-size: 17px; line-height: 1.72; color: var(--text-muted); }
.grid-2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.card { background: var(--surface); border-radius: var(--radius); padding: 14px 12px; text-align: center; }
.lead-2 { font-size: 20px; font-weight: 700; }
.muted-2 { font-size: 14px; color: var(--text-muted); margin-bottom: 20px; }
.card-2 { background: var(--surface); border-radius: var(--radius); padding: 20px 22px; }
.bit-2 { font-size: 17px; line-height: 1.72; }
.line-4 { display: flex; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.card-3 { background: var(--surface); color: var(--text-inert); border-radius: var(--radius); padding: 13px 30px; font-size: 17px; font-weight: 700; box-shadow: inset 0 0 0 2px var(--surface-raised); }
.muted-3 { font-size: 14px; line-height: 1.5; color: var(--text-muted); max-width: 46ch; }
.card-4 { background: var(--surface); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.eyebrow-2 { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row-2 { display: flex; justify-content: space-between; align-items: baseline; }
.muted-4 { font-size: 14px; color: var(--text-muted); }
.mono { font-family: var(--font-mono); font-size: 20px; color: var(--text-muted); }
.mono-2 { font-family: var(--font-mono); font-size: 17px; color: var(--text-muted); }
.chip-2 { height: 3px; background: var(--accent); border-radius: var(--radius); }
.mono-3 { font-family: var(--font-mono); font-size: 20px; }
.mono-4 { font-family: var(--font-mono); font-size: 17px; }
.muted-5 { font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.panel { background: var(--surface-raised); border-radius: var(--radius); padding: 16px; }
.row-3 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.mono-5 { font-family: var(--font-mono); font-size: clamp(12px, 6.2vw, 24px); color: var(--text-muted); }
.muted-6 { font-size: 14px; line-height: 1.5; color: var(--text-muted); margin-top: 10px; }
.muted-7 { margin-top: auto; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.footgrid { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto auto; align-items: start; gap: 22px 24px; background: var(--surface); padding: 28px 32px; }
.stack-2 { display: flex; flex-direction: column; gap: 6px; }
.mono-6 { font-family: var(--font-mono); font-size: 17px; color: var(--text); }
.mono-7 { font-family: var(--font-mono); font-size: 17px; color: var(--text); background: var(--surface-raised); border-radius: var(--radius); padding: 8px 12px; white-space: nowrap; box-shadow: inset 0 0 0 2px var(--bg); }
.mono-8 { font-family: var(--font-mono); font-size: 14px; line-height: 1.5; white-space: nowrap; }
.bit-3 { font-size: 14px; color: var(--accent); }
.line-5 { display: flex; align-items: center; gap: 8px; }
.chip-3 { width: 10px; height: 10px; border-radius: var(--radius); background: var(--accent); flex: none; }
.bit-4 { font-size: 17px; }
.panel-2 { background: var(--surface-raised); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 20px; box-shadow: 0 0 0 2px var(--accent); }
.lead-3 { font-size: clamp(12px, 6.2vw, 24px); font-weight: 700; line-height: 1.35; }
.card-5 { background: var(--surface); border-radius: var(--radius); padding: 14px 12px; text-align: center; opacity: .3; }
.panel-3 { background: var(--surface-raised); border-radius: var(--radius); padding: 14px 12px; text-align: center; box-shadow: 0 0 0 2px var(--accent); }
.card-6 { background: var(--surface); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 12px; box-shadow: 0 0 0 2px var(--accent); }
.row-4 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.eyebrow-3 { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.mono-9 { font-family: var(--font-mono); font-size: clamp(21px, 10.8vw, 42px); line-height: 1; }
.panel-4 { background: var(--surface-raised); border-radius: var(--radius); padding: 20px 22px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 12px; }
.eyebrow-4 { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px; }
.mono-10 { font-family: var(--font-mono); font-size: clamp(15px, 7.4vw, 29px); }
.eyebrow-5 { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; }
.mono-11 { font-family: var(--font-mono); font-size: clamp(12px, 6.2vw, 24px); }
.panel-5 { display: flex; justify-content: space-between; align-items: center; background: var(--surface-raised); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 20px; box-shadow: 0 0 0 2px var(--accent); }
.line-6 { display: flex; align-items: baseline; gap: 14px; }
.lead-4 { font-size: clamp(18px, 9.0vw, 35px); font-weight: 700; letter-spacing: -0.02em; }
.muted-8 { font-size: 20px; color: var(--text-muted); }
.line-7 { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; }
.btn { width: 24px; height: 24px; border-radius: var(--radius); background: var(--accent); color: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.eyebrow-6 { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.grid-4 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.card-7 { background: var(--surface); border-radius: var(--radius); padding: 12px 10px; text-align: center; }
.lead-5 { font-size: 17px; font-weight: 700; }
.card-8 { background: var(--surface); border-radius: var(--radius); padding: 12px 10px; text-align: center; opacity: .45; }
.panel-6 { background: var(--surface-raised); color: var(--text); border-radius: var(--radius); padding: 13px 24px; font-size: 17px; font-weight: 600; }
.btn-2 { background: var(--accent); color: var(--bg); border-radius: var(--radius); padding: 13px 30px; font-size: 17px; font-weight: 700; }
.muted-9 { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin-top: 8px; }
.eyebrow-7 { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.muted-10 { font-size: 14px; line-height: 1.5; color: var(--text-muted); margin-top: 6px; }
.card-9 { display: flex; justify-content: space-between; align-items: center; background: var(--surface); border-radius: var(--radius); padding: 20px 26px; margin-bottom: 20px; }
.lead-6 { font-size: clamp(15px, 7.4vw, 29px); font-weight: 700; letter-spacing: -0.02em; color: var(--text-muted); }
.muted-11 { font-size: 17px; color: var(--text-muted); }
.eyebrow-8 { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 20px; }
.panel-7 { background: var(--surface-raised); border-radius: var(--radius); padding: 12px 10px; text-align: center; box-shadow: 0 0 0 2px var(--accent); }
.panel-8 { background: var(--surface-raised); border-radius: var(--radius); padding: 20px 22px; box-shadow: 0 0 0 2px var(--accent); }
.stack-3 { display: flex; flex-direction: column; gap: 8px; }
.panel-9 { display: flex; justify-content: space-between; align-items: center; background: var(--surface-raised); border-radius: var(--radius); padding: 16px 20px; box-shadow: 0 0 0 2px var(--accent); }
.lead-7 { font-size: clamp(12px, 6.2vw, 24px); font-weight: 700; }
.card-10 { display: flex; justify-content: space-between; align-items: center; background: var(--surface); border-radius: var(--radius); padding: 16px 20px; }
.stack-4 { display: flex; flex-direction: column; gap: 12px; }
.card-11 { background: var(--surface); border-radius: var(--radius); padding: 20px 22px; box-shadow: 0 0 0 2px var(--accent); }
.mono-12 { font-family: var(--font-mono); font-size: clamp(12px, 6.2vw, 24px); line-height: 1.35; word-break: break-all; background: var(--surface-raised); border-radius: var(--radius); padding: 16px 18px; }
.muted-12 { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin-top: 10px; }
.muted-13 { font-size: 14px; line-height: 1.65; color: var(--text-muted); margin-top: 10px; }
.lead-8 { font-size: 20px; font-weight: 700; line-height: 1.45; margin-bottom: 8px; }
.card-12 { background: var(--surface); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 20px; align-self: start; }
.mono-13 { font-family: var(--font-mono); font-size: 17px; line-height: 1.4; word-break: break-all; }
.muted-14, .muted-15 { font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.copy-2 { margin: 0 0 8px 0; font-size: 20px; font-weight: 700; line-height: 1.45; }
.copy-3 { margin: 0 0 8px 0; font-size: 17px; line-height: 1.72; }
.copy-4 { margin: 0; font-size: 17px; line-height: 1.72; }
.row-5 { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 12px; }
.line-8 { display: flex; align-items: center; gap: 12px; }
.grid-6 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.bit-5 { font-size: 14px; line-height: 1.6; }
.mono-14 { font-family: var(--font-mono); font-size: 14px; line-height: 1.8; }
.card-13 { background: var(--surface); border-radius: var(--radius); padding: 18px 22px; }
.lead-9 { font-size: 20px; font-weight: 700; cursor: pointer; color: var(--accent); }
.stack-5 { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.lead-10 { font-size: clamp(12px, 6.2vw, 24px); font-weight: 700; color: var(--text-muted); }
.panel-10 { background: var(--surface-raised); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; }
.eyebrow-9 { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.grid-7 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; opacity: .55; }
.eyebrow-10 { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.panel-11 { background: var(--surface-raised); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; box-shadow: 0 0 0 2px var(--accent); }
.lead-11 { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.muted-16 { font-size: 14px; line-height: 1.5; color: var(--text-muted); max-width: 42ch; }
.line-9 { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.mono-15 { background: var(--surface-raised); border-radius: var(--radius); padding: 8px 14px; font-family: var(--font-mono); font-size: 14px; }
.btn-3 { background: var(--accent); color: var(--bg); font-weight: 700; border-radius: var(--radius); padding: 8px 14px; font-family: var(--font-mono); font-size: 14px; }
.eyebrow-11 { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; }
.stack-6 { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.bit-6 { font-size: 14px; }
.bit-7 { padding: 32px; }
.grid-8 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.card-14 { background: var(--surface); border-radius: var(--radius); padding: 22px 24px; }
.eyebrow-12 { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
.mono-16 { font-family: var(--font-mono); font-size: clamp(18px, 9.0vw, 35px); margin-bottom: 8px; }
.row-6 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.grid-9 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.muted-17 { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin-top: 10px; }
.mono-17 { font-family: var(--font-mono); font-size: 17px; line-height: 1.4; word-break: break-all; margin-bottom: 10px; }
.panel-12 { display: flex; justify-content: space-between; align-items: center; gap: 24px; background: var(--surface-raised); border-radius: var(--radius); padding: 22px 24px; }
.btn-4 { background: var(--accent); color: var(--bg); border-radius: var(--radius); padding: 14px 26px; font-size: 20px; font-weight: 700; white-space: nowrap; }
.grid-10 { display: grid; grid-template-columns: 1.618fr 1fr; gap: 20px; padding: 52px 32px 32px 32px; }
.copy-5 { margin: 0 0 32px 0; font-size: 20px; line-height: 1.6; color: var(--text-muted); }
.line-10 { display: flex; gap: 12px; align-items: stretch; margin-bottom: 12px; }
.card-15 { flex: 1; background: var(--surface); border-radius: var(--radius); padding: 20px 24px; box-shadow: 0 0 0 2px var(--accent); }
.mono-18 { font-family: var(--font-mono); font-size: clamp(18px, 9.0vw, 35px); letter-spacing: 0.02em; }
.btn-5 { background: var(--accent); color: var(--bg); border-radius: var(--radius); padding: 0 32px; font-size: 20px; font-weight: 700; display: flex; align-items: center; }
.card-16 { background: var(--surface); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 12px; }
.lead-12 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.muted-18 { font-size: 17px; line-height: 1.72; color: var(--text-muted); }
.card-17 { background: var(--surface); border-radius: var(--radius); padding: 20px; }
.stack-7 { display: flex; flex-direction: column; gap: 10px; font-size: 17px; }
.mono-19 { font-family: var(--font-mono); font-size: clamp(12px, 6.2vw, 24px); margin-bottom: 8px; }
.panel-13 { background: var(--surface-raised); border-radius: var(--radius); padding: 20px; }
.bit-8 { font-size: 14px; line-height: 1.7; }
.card-18 { background: var(--surface); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.btn-6 { background: var(--accent); color: var(--bg); border-radius: var(--radius); padding: 13px 22px; font-size: 17px; font-weight: 700; text-align: center; }
.muted-19 { font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.row-7 { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 24px 32px 0 32px; }
.eyebrow-13 { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--accent); color: var(--bg); padding: 7px 14px; border-radius: var(--radius); }
.card-19 { background: var(--surface); border-radius: var(--radius); padding: 24px 26px; }
.mono-20 { font-family: var(--font-mono); font-size: clamp(25px, 12.8vw, 50px); line-height: 1; margin-bottom: 10px; }
.mono-21 { font-family: var(--font-mono); color: var(--text); font-size: 20px; }
.row-8 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.mono-22 { font-family: var(--font-mono); font-size: clamp(12px, 6.2vw, 24px); line-height: 1.3; word-break: break-all; background: var(--surface-raised); border-radius: var(--radius); padding: 16px 18px; }
.card-20 { background: var(--surface); border-radius: var(--radius); padding: 20px 24px; }
.line-11 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.panel-14 { background: var(--surface-raised); border-radius: var(--radius); padding: 20px; box-shadow: 0 0 0 2px var(--accent); }
.mono-23 { font-family: var(--font-mono); font-size: clamp(18px, 9.0vw, 35px); line-height: 1; margin-bottom: 10px; }
.mono-24 { font-family: var(--font-mono); font-size: clamp(12px, 6.2vw, 24px); margin-bottom: 10px; }
.line-12 { display: flex; gap: 12px; align-items: baseline; }
.btn-7 { width: 22px; height: 22px; border-radius: var(--radius); background: var(--accent); color: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex: none; }
.bit-9 { flex: 1; font-size: 17px; }
.mono-25 { font-family: var(--font-mono); font-size: 14px; color: var(--text-muted); }
.panel-15 { width: 22px; height: 22px; border-radius: var(--radius); background: var(--surface-raised); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }
.card-21 { background: var(--surface); border-radius: var(--radius); padding: 20px; font-size: 14px; line-height: 1.65; color: var(--text-muted); }
.mono-26 { font-family: var(--font-mono); color: var(--text); }
.line-13 { display: flex; align-items: center; gap: 20px; font-size: 14px; font-weight: 500; color: var(--text-muted); }
.row-9 { display: flex; justify-content: space-between; align-items: center; padding: 24px 32px 0 32px; }
.grid-11 { display: grid; grid-template-columns: 1.618fr 1fr; gap: 20px; padding: 24px 32px 32px 32px; }
.mono-27 { font-family: var(--font-mono); font-size: clamp(25px, 12.8vw, 50px); line-height: 1.05; }
.mono-28 { font-family: var(--font-mono); font-size: clamp(12px, 6.2vw, 24px); line-height: 1.4; color: var(--text-muted); }
.bit-10 { font-size: 17px; line-height: 1.72; margin-top: 12px; }
.mono-29 { font-family: var(--font-mono); font-size: clamp(16px, 8.2vw, 32px); line-height: 1.3; word-break: break-all; background: var(--surface-raised); border-radius: var(--radius); padding: 18px 20px; }
.muted-20 { font-size: 17px; color: var(--text-muted); margin-top: 12px; }
.line-14 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.bit-11 { padding: 52px 32px 32px 32px; }
.title-2 { margin: 0 0 16px 0; font-size: clamp(25px, 12.8vw, 50px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; max-width: 22ch; }
.copy-6 { margin: 0 0 52px 0; font-size: 20px; line-height: 1.6; color: var(--text-muted); max-width: 62ch; }
.grid-12 { display: grid; grid-template-columns: 1.618fr 1fr; gap: 20px; }
.line-15 { display: flex; flex-wrap: wrap; gap: 32px; align-items: baseline; margin-top: 18px; }
.muted-21 { font-size: 17px; line-height: 1.72; max-width: 52ch; color: var(--text-muted); }
.muted-22 { flex: 1; font-size: 17px; color: var(--text-muted); }
.eyebrow-14 { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--surface-raised); color: var(--accent); padding: 7px 14px; border-radius: var(--radius); }
.mono-30 { font-family: var(--font-mono); font-size: 20px; line-height: 1.35; word-break: break-all; background: var(--surface-raised); border-radius: var(--radius); padding: 16px 18px; }
.eyebrow-15 { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--surface-raised); color: var(--text-muted); padding: 7px 14px; border-radius: var(--radius); }
.lead-13 { font-size: clamp(21px, 10.8vw, 42px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 10px; }
.mono-31 { font-family: var(--font-mono); font-weight: 400; }
.panel-16 { background: var(--surface-raised); border-radius: var(--radius); padding: 20px 24px; box-shadow: 0 0 0 2px var(--accent); }
.card-22 { display: flex; justify-content: space-between; align-items: center; gap: 24px; background: var(--surface); border-radius: var(--radius); padding: 20px 24px; }
.grid-13 { display: grid; grid-template-columns: 1fr 1.618fr; gap: 20px; padding: 32px; }
.title-3 { margin: 0 0 12px 0; font-size: clamp(21px, 10.8vw, 42px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }
.copy-7 { margin: 0 0 20px 0; font-size: 20px; line-height: 1.6; }
.panel-17 { background: var(--surface-raised); border-radius: var(--radius); padding: 20px; margin-bottom: 12px; box-shadow: 0 0 0 2px var(--accent); }
.copy-8 { margin: 0 0 10px 0; font-size: 20px; font-weight: 700; line-height: 1.45; }
.copy-9 { margin: 0 0 10px 0; font-size: 17px; line-height: 1.72; }
.card-23 { background: var(--surface); border-radius: var(--radius); padding: 20px; margin-bottom: 12px; }
.copy-10 { margin: 0; font-size: 17px; line-height: 1.72; color: var(--text-muted); }
.row-10 { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.mono-32 { font-family: var(--font-mono); font-size: 17px; text-align: right; }
.grid-14 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lead-14 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.grid-15 { display: grid; grid-template-columns: 1fr 1.618fr; gap: 20px; margin-bottom: 20px; align-items: start; }
.copy-11 { margin: 0; font-size: 20px; line-height: 1.6; }
.panel-18 { background: var(--surface-raised); border-radius: var(--radius); padding: 20px 24px; }
.card-24 { background: var(--surface); border-radius: var(--radius); padding: 22px 24px; display: grid; grid-template-columns: 150px 1fr 110px; gap: 20px; align-items: start; }
.eyebrow-16 { justify-self: end; font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--radius); background: var(--accent); color: var(--bg); font-weight: 700; }
.eyebrow-17 { justify-self: end; font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--radius); background: var(--surface-raised); color: var(--text-muted); }
.card-25 { background: var(--surface); border-radius: var(--radius); padding: 52px 32px; text-align: center; }
.lead-15 { font-size: clamp(15px, 7.4vw, 29px); font-weight: 700; margin-bottom: 10px; }
.copy-12 { margin: 0 auto; font-size: 17px; line-height: 1.72; max-width: 60ch; color: var(--text-muted); }
.subtitle { margin: 0 0 8px 0; font-size: clamp(12px, 6.2vw, 24px); font-weight: 700; }
.panel-19 { background: var(--surface-raised); border-radius: var(--radius); padding: 24px 26px; box-shadow: 0 0 0 2px var(--accent); }
.copy-13 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.55; }
.subtitle-2 { margin: 0 0 8px 0; font-size: 20px; font-weight: 700; }
.copy-14 { margin: 0 0 12px 0; font-size: 17px; line-height: 1.72; }
.mono-33 { font-family: var(--font-mono); font-size: 14px; }
.mono-34 { font-family: var(--font-mono); font-size: 14px; line-height: 1.8; background: var(--surface-raised); border-radius: var(--radius); padding: 14px 16px; }
.card-26 { display: flex; gap: 14px; align-items: baseline; background: var(--surface); border-radius: var(--radius); padding: 14px 20px; }
.mono-35 { font-family: var(--font-mono); font-size: 14px; color: var(--accent); width: 48px; }
.mono-36 { font-family: var(--font-mono); font-size: 17px; flex: 1; }
.mono-37 { margin: 0; font-family: var(--font-mono); font-size: 14px; line-height: 1.75; overflow-x: auto; }
.panel-20 { background: var(--surface-raised); border-radius: var(--radius); padding: 20px 24px; font-size: 17px; line-height: 1.72; }
.card-27 { background: var(--surface); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 12px; }
.line-16 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-21 { background: var(--surface-raised); border-radius: var(--radius); padding: 18px 20px; min-height: 150px; font-size: 17px; line-height: 1.72; color: var(--text-muted); }
.card-28 { background: var(--surface); border-radius: var(--radius); padding: 20px 24px; box-shadow: 0 0 0 2px var(--accent); }
.stack-8 { display: flex; flex-direction: column; gap: 8px; font-size: 17px; line-height: 1.72; }
.row-11 { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; }
.stack-9 { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.panel-22 { background: var(--surface-raised); border-radius: var(--radius); padding: 18px 22px; box-shadow: inset 3px 0 0 var(--accent); }
.panel-23 { background: var(--surface-raised); border-radius: var(--radius); padding: 18px 20px; min-height: 92px; }
.muted-23 { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin-top: 6px; }
.card-29 { background: var(--surface); border-radius: var(--radius); padding: 20px 24px; font-size: 14px; line-height: 1.65; color: var(--text-muted); }
.card-30 { background: var(--surface); border-radius: var(--radius); padding: 32px 34px; margin-bottom: 12px; }
.mono-38 { font-family: var(--font-mono); font-size: clamp(12px, 6.2vw, 24px); margin-bottom: 14px; }
.line-17 { display: flex; flex-wrap: wrap; gap: 8px; }
.panel-24 { background: var(--surface-raised); border-radius: var(--radius); padding: 10px 16px; font-size: 17px; }
.bit-12 { margin-top: 12px; }
.btn-8 { background: var(--accent); color: var(--bg); border-radius: var(--radius); padding: 12px 22px; font-size: 17px; font-weight: 700; }
.panel-25 { background: var(--surface-raised); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 12px; box-shadow: 0 0 0 2px var(--accent); }
.eyebrow-18 { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.mono-39 { font-family: var(--font-mono); font-size: 17px; line-height: 1.8; background: var(--surface-raised); border-radius: var(--radius); padding: 20px 22px; word-break: break-word; }
.card-31 { background: var(--surface); border-radius: var(--radius); padding: 20px; margin-bottom: 12px; box-shadow: 0 0 0 2px var(--accent); }
.lead-16 { font-size: clamp(12px, 6.2vw, 24px); font-weight: 700; margin-bottom: 10px; }
.mono-40 { font-family: var(--font-mono); font-size: 20px; word-break: break-all; margin-bottom: 10px; }
.mono-41 { font-family: var(--font-mono); font-size: 20px; margin-bottom: 10px; }
.muted-24 { font-size: 17px; line-height: 1.72; color: var(--text-muted); margin-bottom: 10px; }
.stack-10 { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.mono-42 { font-family: var(--font-mono); font-size: 14px; line-height: 1.7; background: var(--surface-raised); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 10px; word-break: break-all; }
.line-18 { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.stack-11 { display: flex; flex-direction: column; gap: 2px; }
.mono-43 { font-family: var(--font-mono); font-size: 17px; line-height: 1.5; word-break: break-all; }

/* ——— the build index, not part of the service ——— */
.pad-page { padding: 32px; }
.index-groups { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
.index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.index-card { background: var(--surface); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; min-height: var(--tap); }
.index-card .lead { font-size: 17px; font-weight: 700; }
.index-card .mono { font-size: 14px; }

/* ——— the amount field: the one accent outline on the screen ——— */
.amount-box { box-shadow: 0 0 0 2px var(--accent); }
.amount-box .field { background: transparent; padding: 0; }

/* the amount screen shows both limits before anything is typed */
.grid-3.limits { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px 20px; }
/* a figure a person reads off the screen is never broken, the same rule the footer follows */
.grid-3.limits .mono-10 { font-size: 24px; white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 760px) { .grid-3.limits { grid-template-columns: 1fr; gap: 14px; } }

/* ——— control state, after the lifted styles so it wins ——— */
.tile { box-shadow: none; }
.tile:has(.tile-input:disabled) { opacity: .45; cursor: default; }
.tile:has(.tile-input:checked) { background: var(--surface-raised); box-shadow: 0 0 0 2px var(--accent); }
.chip-option { background: var(--surface-raised); color: var(--text); font-weight: 400; }
.chip-option:has(.chip-input:checked) { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.btn-el:disabled { background: var(--surface); color: var(--text-inert); box-shadow: inset 0 0 0 2px var(--surface-raised); }

/* ——— phone: the grids collapse, the nav becomes the menu, the summary leads ——— */
@media (max-width: 760px) {
.grid,
.grid-2,
.footgrid,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12,
.grid-13,
.grid-14,
.grid-15,
.card-24 { grid-template-columns: 1fr; gap: 14px; }
.grid,
.grid-2,
.footgrid,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12,
.grid-13,
.grid-14,
.grid-15,
.card-24 > * { min-width: 0; }

.row,
.grid,
.card-3,
.footgrid,
.btn-2,
.bit-7,
.grid-10,
.btn-5,
.row-7,
.row-9,
.grid-11,
.bit-11,
.grid-13,
.card-25,
.card-30 { padding: 18px; }
  .row { padding: 18px 18px; }
  .grid { padding: 18px; }
  .card-3 { padding: 13px 18px; }
  .footgrid { padding: 18px 18px; }
  .btn-2 { padding: 13px 18px; }
  .bit-7 { padding: 18px; }
  .grid-10 { padding: 18px 18px 18px 18px; }
  .btn-5 { padding: 0px 18px; }
  .row-7 { padding: 24px 18px 0px 18px; }
  .row-9 { padding: 24px 18px 0px 18px; }
  .grid-11 { padding: 24px 18px 18px 18px; }
  .bit-11 { padding: 18px 18px 18px 18px; }
  .grid-13 { padding: 18px; }
  .card-25 { padding: 18px 18px; }
  .card-30 { padding: 18px 18px; }

  .bar { padding: 12px 18px; }
  .nav { display: none; }
  .menu { display: block; margin-left: auto; }
  .foot { grid-template-columns: 1fr; gap: 22px; padding: 24px 18px; }
  .foot a { display: inline-flex; align-items: center; min-height: var(--tap); }
  .foot [class*="mono"] { white-space: nowrap; }
  .steps { display: flex; flex-wrap: wrap; gap: 6px; }

  /* nothing may push past the column: a flex item defaults to the width of its
     content, and a row that fits at 1000 has to be allowed to break here */
  .main [class], .foot [class] { min-width: 0; }
  .main [class] { flex-wrap: wrap; }
  .main button, .main .btn-el { max-width: 100%; }

  /* a field and its button stack, so the value keeps its line and the button its height */
  form [class*="line"] { flex-wrap: wrap; }

  .summary {
    order: -1;
    position: sticky;
    top: 0;
    z-index: 5;
    max-height: 42vh;
    overflow-y: auto;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .7);
  }
}

@media (max-width: 760px) {
  .pad-page { padding: 22px 18px; }
}

@media (max-width: 420px) {
  .row { padding: 18px 14px; }
  .grid { padding: 14px; }
  .card-3 { padding: 13px 14px; }
  .footgrid { padding: 14px 14px; }
  .btn-2 { padding: 13px 14px; }
  .bit-7 { padding: 14px; }
  .grid-10 { padding: 14px 14px 14px 14px; }
  .btn-5 { padding: 0px 14px; }
  .row-7 { padding: 24px 14px 0px 14px; }
  .row-9 { padding: 24px 14px 0px 14px; }
  .grid-11 { padding: 24px 14px 14px 14px; }
  .bit-11 { padding: 14px 14px 14px 14px; }
  .grid-13 { padding: 14px; }
  .card-25 { padding: 14px 14px; }
  .card-30 { padding: 14px 14px; }
  .bar { padding: 10px 14px; }
  .foot { padding: 20px 14px; }
}


/* ═══════════════════════════════════════════════════════════════════
   GUIDE — the one long page on the site. New primitives, all reusable.
   ═══════════════════════════════════════════════════════════════════ */

/* .num — a figure the engine substitutes. Every rate, surcharge, minimum,
   maximum and confirmation count is its own node with a data-num key, so a
   server value lands inside the span and nowhere else. Purely a hook: it
   inherits every visual property from its surroundings. */
.num { white-space: nowrap; overflow-wrap: normal; }

/* .guide — reading measure and vertical rhythm for the whole page. The other
   screens are worked in columns; this one is read top to bottom, so it gets a
   narrower column and larger gaps between sections than a working screen. */
.guide { padding: 52px 32px 32px 32px; display: flex; flex-direction: column; gap: 52px; }
.guide > * { min-width: 0; }
.guide .copy { max-width: 68ch; }
.guide .title { max-width: 26ch; }
.guide .title-2 { margin: 0 0 12px 0; max-width: 30ch; }

/* .guide-hero — the opening block, wider measure than the body so the first
   paragraph reads as an introduction rather than as the first section. */
.guide-hero { max-width: 76ch; }
.guide-hero .copy { margin: 0; font-size: 20px; line-height: 1.6; }

/* .fork — the decision block. It is not the first section of an article: it is
   the point where a reader who knows what they want leaves for the order form.
   Two columns on a desktop so all four are seen at once without scrolling. */
.fork { background: var(--surface); border-radius: var(--radius); padding: 24px 26px; box-shadow: 0 0 0 2px var(--accent); }
.fork-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fork-card { background: var(--surface-raised); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.fork-card .row-5 { margin-bottom: 0; align-items: baseline; }
.fork-card .guide-jump { margin-top: auto; }

/* .guide-jump — a link into the depth of the page, marked so it does not read
   as body text. */
.guide-jump { display: inline-block; color: var(--accent); }

/* .rm — the route map. Four rows, each: what you send, Monero, what you
   receive. The connector is an inline SVG line that stops on both sides of the
   middle node, so the break is drawn rather than described. No script and no
   animation; the SVG stretches on its own with preserveAspectRatio="none" and
   the stroke stays one weight through vector-effect. */
.rm-wrap { background: var(--surface); border-radius: var(--radius); padding: 24px 26px; }
.rm { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.rm-row {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) minmax(24px, 1fr) auto minmax(24px, 1fr) minmax(96px, 1fr);
  align-items: center;
  gap: 12px;
  background: var(--surface-raised);
  border-radius: var(--radius);
  padding: 16px 20px;
}
/* the base pair is one conversion, so its row has two nodes and no middle. The
   columns are the same widths as the three-node rows, so the ends stay aligned
   down the whole map. */
.rm-row.rm-direct { grid-template-columns: minmax(96px, 1fr) 1fr minmax(96px, 1fr); }
.rm-end { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rm-coin { font-size: 20px; font-weight: 700; }
.rm-note { font-size: 14px; color: var(--text-muted); }
.rm-mid { display: flex; align-items: center; justify-content: center; }
.rm-mid-label {
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--radius);
  padding: 6px 12px;
  white-space: nowrap;
}
.rm-link { display: block; width: 100%; height: 8px; }
.rm-line { stroke: var(--text-inert); stroke-width: 2; stroke-dasharray: 3 5; }
/* the dashed break says the two ends never meet — true of coin to coin only.
   On the base rows the payout is the Monero itself, one conversion, so the line
   is continuous. Both classes are named so source order cannot override it. */
.rm-line.rm-line-solid { stroke: var(--text-muted); stroke-dasharray: none; }
.rm-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rm-name { font-size: 14px; color: var(--accent); }
.rm-rate { font-family: var(--font-mono); font-size: 14px; color: var(--text-muted); }

/* .toc — the contents. The anchors existed; this is the list above them, so a
   reader can see how much page there is before committing to it. */
.toc { background: var(--surface); border-radius: var(--radius); padding: 22px 26px; }
.toc-list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; }
.toc-link { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; min-height: var(--tap); }
.toc-n { font-family: var(--font-mono); font-size: 14px; color: var(--accent); }
.toc-t { font-size: 17px; }

/* .sec — one section of the long read. The hairline and the numbered marker are
   the rhythm: they tell the eye where a section starts and how far along it is. */
.sec { display: flex; flex-direction: column; gap: 12px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .08); }
.sec > .copy { margin: 0; }
.sec-mark { display: flex; align-items: baseline; gap: 10px; }
.sec-n { font-family: var(--font-mono); font-size: 20px; color: var(--accent); }
.sec-of { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-inert); }

/* .sec-long — the switches section is twice the length of any other and says so:
   its marker carries an accent rule down the left of the whole block. */
.sec-long { box-shadow: inset 3px 0 0 var(--surface-raised); padding-left: 20px; }

/* .switch-grid — eight equal blocks. Two columns, because eight full-width
   cards in a row is the flat list the page is trying to stop being. */
.switch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.switch-card { background: var(--surface); border-radius: var(--radius); padding: 18px 20px; }
.switch-card .grid-6 { grid-template-columns: 1fr; gap: 12px; }
.switch-card .row-5 { align-items: baseline; }

/* .tbl — the limits table. Fourteen rows, six columns. On a desktop it is a
   table; below 760px each row becomes a card with the label in front of every
   value, drawn from data-l, so nothing scrolls sideways and no column is lost. */
.table-wrap { margin-bottom: 14px; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { padding: 10px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.tbl th { font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }
.tbl th:first-child, .tbl td:first-child { padding-left: 0; }
.tbl th:last-child, .tbl td:last-child { padding-right: 0; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .t-coin { font-weight: 700; color: var(--text); }
.tbl .t-net { font-size: 17px; color: var(--text-muted); }
/* a coin that is not being handled: dimmed, the way the disabled tile is */
.tbl .tr-off { opacity: .45; }

.guide-close { margin-bottom: 0; }

@media (max-width: 760px) {
  .guide { padding: 22px 18px; gap: 34px; }
  .fork, .rm-wrap, .toc { padding: 18px; }
  .fork-grid, .toc-list, .switch-grid { grid-template-columns: 1fr; }
  .sec-long { padding-left: 14px; }

  /* the route row becomes a column and the connector turns with it */
  .rm-row, .rm-row.rm-direct { grid-template-columns: 1fr; gap: 8px; padding: 16px 18px; }
  .rm-link { height: 14px; }
  .rm-mid { justify-content: flex-start; }

  /* the table, one card per row */
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: auto; }
  .tbl tr { background: var(--surface-raised); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 8px; }
  .tbl td { border-bottom: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 16px; }
  .tbl td::before { content: attr(data-l); font-size: 14px; color: var(--text-muted); }
  .tbl .t-coin { font-size: 20px; padding-bottom: 6px; }
  .tbl .t-net { padding-bottom: 8px; }
  .tbl .t-net::before { content: none; }
  .tbl .t-coin, .tbl .t-net { display: inline-block; margin-right: 8px; }
}

/* ——— OSTBRO OVERRIDES ——— */
/* ОТПЕЧАТОК СЛИПАЛСЯ С ПОДПИСЬЮ. Подпись и значение в .row-2 стоят
   вплотную: «Fingerprint9470 28CC…». На узком экране это читается
   как одна строка мусора, а отпечаток — то, что человек сверяет
   посимвольно. */
.row-2 { display: flex; gap: 14px; align-items: baseline;
         flex-wrap: wrap; justify-content: space-between; }
.row-2 > .muted-4 { flex: none; }
.row-2 > .mono-4 { min-width: 0; overflow-wrap: anywhere; }

/* ССЫЛКА SIMPLEX РВАЛАСЬ ПОСРЕДИ СЛОВА. Сокращённый вид ломался как
   «smp12.simplex. / im/a#suLOfwMsK». Ломаем только по знакам. */
.mono-42 { font-family: var(--mono, monospace); font-size: 14px;
           color: var(--muted, #9aa3ad); overflow-wrap: anywhere;
           word-break: break-all; line-height: 1.5; }

/* Правило дизайна .qr-pair svg осталось от времён, когда код был
   SVG. Само по себе безвредно, но вводит в заблуждение при чтении
   стилей — гасим и заменяем своим. */
.qr-pair svg { display: none; }
.qr-pair .qr { flex: none; }

/* КОД ДЕПОЗИТА СЕТКОЙ, А НЕ SVG.
   На уровне Safest в Tor Browser SVG отключён целиком. Это наша
   основная среда, и прежний встроенный SVG не отрисовывался ровно
   у тех людей, ради которых сервис сделан.
   Тёмное по светлому всегда: инвертированный код многие сканеры
   телефонов не читают. Поле в четыре модуля — без него сканер
   не находит границы. */
.qr { display: grid; grid-template-columns: repeat(var(--qn), 1fr);
      width: var(--qs); height: var(--qs); background: #fff;
      line-height: 0; flex: none; border-radius: 6px; overflow: hidden; }
.qr i { display: block; width: 100%; height: 100%; background: #fff; }
.qr i.on { background: #000; }
@media (max-width: 420px) {
  .qr { width: min(var(--qs), 62vw); height: min(var(--qs), 62vw); }
}

/* ЗНАК В ШАПКЕ. Тоже был SVG, тоже невидим на Safest. */
.mark-1 { display: inline-block; width: 24px; height: 24px; flex: none;
          position: relative; vertical-align: middle;
          background: linear-gradient(#f0a92e, #f0a92e) center/14px 3px no-repeat; }
.mark-1::before, .mark-1::after { content: ""; position: absolute; top: 4px;
          width: 4px; height: 16px; background: #ddd5c6; border-radius: 1px; }
.mark-1::before { left: 1px; }
.mark-1::after { right: 1px; }

/* ЛИНИИ МАРШРУТОВ В ГАЙДЕ. Были SVG. */
.rm-link { display: block; width: 100%; height: 8px; position: relative; }
.rm-link::after { content: ""; position: absolute; left: 0; right: 0; top: 3px;
          border-top: 1px solid #6b7280; }
.rm-solid::after { border-top-style: solid; }
.rm-dashed::after { border-top-style: dashed; }

/* Переполнение на 360: дизайн сбрасывает min-width только у прямых
   детей сеток; вложенные flex-контейнеры остаются с min-width:auto
   и распирают контейнер. */
@media (max-width: 760px) {
  .page * { min-width: 0; }
  .btn-4 { white-space: normal; padding: 12px 18px; font-size: 18px; }
}

/* Выпадашка разделения: блоки внутри вровень с открытыми.
   card-13 добавляла свои поля, и блоки в ней оказывались уже
   и выглядели второсортно. Подпись отступы сохраняет,
   содержимое их не наследует. */
details.card-13 { padding-left: 0; padding-right: 0; }
details.card-13 > summary { padding-left: 22px; padding-right: 22px; }
details.card-13 > .stack-5 { margin-top: 12px; }

/* ТАБЛИЦА ГАЙДА. Шесть столбцов не помещаются на 360: строки уходили
   на 454 и распирали всю страницу. Прокрутка внутри самой таблицы —
   единственный способ без скриптов и без потери столбцов. */
/* ТАБЛИЦА ГАЙДА. Шесть столбцов с nowrap дают 458 при ширине экрана
   360 — таблица распирает всю страницу, и текст уезжает за край.
   Обёртке задан только отступ; прокрутка внутри неё — единственный
   способ без скриптов и без потери столбцов. */
.table-wrap { overflow-x: auto; }

/* МЕНЮ НА ВСЕХ ШИРИНАХ. Дизайн задумал его как телефонное — восемь
   пунктов помещались в ряд на десктопе. Открытыми остались два,
   Track и Guide, а прочие семь оказались недоступны с большого
   экрана вовсе. */
.menu { display: block; margin-left: 12px; }
.nav { display: flex; gap: 18px; align-items: center; }
@media (max-width: 760px) { .nav { display: none; } }

/* Текст канарейки: он подписан, и переносы — часть подписи.
   Показываем как есть, длинные строки переносим, а не режем. */
.canary-text {
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  margin: 0; font-size: 13px; line-height: 1.5;
}

/* Разобранная канарейка. На телефоне подпись и значение идут в столбик:
   онион в пятьдесят шесть знаков рядом с подписью не встаёт никак. */
.canary-rows { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
.canary-row { display: flex; flex-direction: column; gap: 3px; }
.canary-what { font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); }
.canary-val { font-family: var(--font-mono); font-size: 14px; line-height: 1.5;
  overflow-wrap: anywhere; word-break: break-word; }
.canary-hash { display: block; color: var(--text-muted); font-size: 12px; }
.canary-get { display: inline-block; margin-top: 6px; font-size: 16px;
  font-weight: 700; color: var(--accent); text-decoration: none; }
.canary-get:hover { text-decoration: underline; }
.canary-get + .canary-get { margin-left: 18px; }
.canary-cmd { display: block; font-family: var(--font-mono); font-size: 13px;
  line-height: 1.5; padding: 9px 11px; border-radius: 8px; margin-top: 8px;
  background: rgba(0, 0, 0, .28); overflow-wrap: anywhere; }
.canary-facts { box-shadow: 0 0 0 2px var(--accent); }
/* Раскрытие с самой подписью: без своих полей, вид даёт card-13. */
.canary-raw { margin-top: 14px; }

@media (min-width: 700px) {
  .canary-row { flex-direction: row; align-items: baseline; gap: 16px; }
  .canary-what { flex: 0 0 168px; }
  .canary-val { flex: 1; }
}

/* ГАРАНТИЯ. Та же карточка, что «Send before» рядом, только выделенная —
   как выделена карточка курса справа. Отдельной плашкой во всю ширину
   она ломала ритм двух колонок.

   Свои размеры, а не примитивы с clamp(…, 6.2vw, …): команда gpg
   на телефоне становилась в двадцать два пункта и вылезала за край. */
.guarantee { box-shadow: 0 0 0 2px var(--accent); }
.guarantee-get {
  font-size: 17px; font-weight: 700; color: var(--accent);
  text-decoration: none;
}
.guarantee-get:hover { text-decoration: underline; }
.guarantee-cmd {
  display: block; font-family: var(--font-mono); font-size: 13px;
  line-height: 1.5; padding: 9px 11px; border-radius: 8px;
  margin-top: 12px; background: rgba(0, 0, 0, .28);
  /* длиннее экрана — переносим, а не режем и не прячем */
  overflow-wrap: anywhere; word-break: break-word;
}
.guarantee-key {
  margin: 10px 0 0; font-size: 13px; line-height: 1.5;
  color: var(--text-muted); overflow-wrap: anywhere;
}

/* Адрес и код рядом: код читают телефоном, адрес — глазами.
   На узком экране код уходит под адрес, а не жмёт его. */
.qr-pair { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.qr-pair .mono-22 { flex: 1; }
.qr-pair svg { flex: none; border-radius: 6px; background: #fff; }
@media (max-width: 560px) { .qr-pair { flex-direction: column; } }

/* Ссылка «вглубь» на гайде: она вела себя как обычный текст, и человек
   не понимал, что по ней можно перейти. */
.guide-jump { display: inline-block; margin-top: 8px; color: var(--accent); }

/* Карточки блока решений: четыре равнозначных пункта. С акцентной
   рамкой у каждого акцент перестаёт быть акцентом, без рамки они
   сливаются в один список. Тихий контур разделяет, не крича. */
.route-card { background: var(--surface); border-radius: var(--radius);
  padding: 18px 22px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }

/* ПОРЯДОК КНОПОК. В разметке «Далее» идёт первой — иначе Enter
   отправляет «Назад»: браузер берёт первую кнопку отправки формы,
   а не ту, что выглядит главной. Скриптов нет, поэтому визуальный
   порядок задаётся стилем. */
.line-4 { display: flex; align-items: center; gap: 12px; }
.line-4 > button[name="back"] { order: -1; }