/*
 * The look of BS Connect's pages on the web: the board's `.doc` (mocks/trust/theme/trust.css from line 345, its
 * tokens, and the `.rule` / `.step` of mocks/trust/screens/web-3-rules.html), with the board's numbers.
 * One font from another site (Sora, in each page's head); without it the phone's own font reads the same sizes.
 */
:root {
  --font: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --n-700: #3f3f46;
  --ink: #1f1f1f; --muted: rgba(31,31,31,.6); --faint: rgba(31,31,31,.38); --line: rgba(31,31,31,.08);
  --red: #ef4444; --red-deep: #b91c1c;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #fff; font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; }
h1, h2, p, ul, ol, table { margin: 0; }
[hidden] { display: none !important; }

.doc { max-width: 560px; margin: 0 auto; padding: 22px 22px 40px; color: var(--n-700); font-size: 14px; line-height: 22px; letter-spacing: -.1px; }
.doc a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(31,31,31,.35); }
.doc .brand { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; letter-spacing: -.3px; color: var(--ink); }
.doc .brand img { width: 28px; height: 28px; border-radius: 8px; }
.doc h1 { margin-top: 20px; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.6px; color: var(--ink); }
.doc h1:focus { outline: none; }
.doc .when { margin-top: 6px; font-size: 12px; color: var(--muted); }
.doc .when + p { margin-top: 14px; }
/* A link that opens a page at one of its parts leaves the part where the board draws it: 18 under the bar. */
.doc h2 { margin-top: 24px; font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.3px; color: var(--ink); scroll-margin-top: 18px; }
.doc p { margin-top: 8px; }
.doc ul { margin-top: 8px; padding-left: 18px; }
.doc li { margin-top: 4px; }
.doc li b, .doc p b { font-weight: 600; color: var(--ink); }
.doc ol { margin-top: 8px; padding-left: 20px; }
.doc ol li { margin-top: 6px; }

.doc .box { margin-top: 16px; padding: 14px 16px; border-radius: 20px; background: #f3f3f5; }
.doc .box b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.doc .box p { margin-top: 4px; font-size: 13px; line-height: 19px; overflow-wrap: anywhere; }

.doc table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 12.5px; line-height: 18px; }
.doc th { text-align: left; font-weight: 600; color: var(--ink); padding: 8px 8px 8px 0; border-bottom: 1px solid rgba(31,31,31,.14); }
.doc td { vertical-align: top; padding: 9px 8px 9px 0; border-bottom: .5px solid rgba(31,31,31,.1); }
.doc td:first-child { font-weight: 600; color: var(--ink); width: 34%; }

.doc .rule { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; }
.doc .rule img { flex: none; width: 34px; height: 34px; object-fit: contain; }
.doc .rule b { display: block; font-size: 16px; line-height: 21px; font-weight: 700; letter-spacing: -.3px; color: var(--ink); }
.doc .rule p { margin-top: 3px; font-size: 13.5px; line-height: 20px; }
.doc .step { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: .5px solid rgba(31,31,31,.1); font-size: 13.5px; line-height: 20px; }
.doc .step b { flex: none; width: 92px; font-weight: 600; color: var(--ink); }

/* Not on the board: the way from one page to the others, under the text. */
.doc .foot { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 44px; padding-top: 16px; border-top: .5px solid rgba(31,31,31,.1); font-size: 12px; line-height: 18px; color: var(--muted); }
.doc .foot b { font-weight: 600; color: var(--ink); }
.doc .foot span { flex-basis: 100%; }

/* ── the delete page's form (trust.css: .field, .btn, .link) ─────────────────────────────────────────────── */
.doc .field { display: flex; align-items: center; gap: 10px; height: 54px; margin-top: 14px; padding: 0 16px; border-radius: 18px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(31,31,31,.16); font-size: 15px; color: var(--faint); }
.doc .field:focus-within, .doc .field.on { box-shadow: inset 0 0 0 1.5px var(--ink); }
.doc .field.bad { box-shadow: inset 0 0 0 1.5px var(--red); }
.doc .field svg { flex: none; width: 19px; height: 19px; color: var(--muted); }
.doc .field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; padding: 0; background: transparent; font: inherit; color: var(--ink); }
.doc .field input::placeholder { color: var(--faint); opacity: 1; }
.doc .field input.code { letter-spacing: 6px; font-variant-numeric: tabular-nums; }

.doc .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 46px; margin-top: 12px; padding: 0 18px; border: 0; border-radius: 999px;
  font-family: inherit; font-weight: 600; font-size: 14px; letter-spacing: inherit; white-space: nowrap; color: var(--ink); cursor: pointer; transition: transform 100ms cubic-bezier(.2,.8,.2,1); }
.doc .btn svg { width: 17px; height: 17px; }
.doc .btn:active { transform: scale(.97); }
.doc .btn:focus-visible, .doc .link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.doc .btn.ink { color: #fff; background: linear-gradient(180deg, #4a4a4e 0%, #1f1f1f 52%, #0c0c0e 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.22), inset 0 -3px 5px rgba(0,0,0,.45), 0 8px 16px rgba(15,20,40,.28); }
.doc .btn.ink:active { transform: scale(.95, .9); transition-duration: 80ms; }
.doc .btn.red { background: #fee2e2; color: var(--red-deep); }
.doc .btn.lg { height: 52px; font-size: 15px; }
.doc .btn.off, .doc .btn:disabled { opacity: .38; box-shadow: none; cursor: default; transform: none; }
.doc .btn.wide { display: flex; width: 100%; }
.doc .link { display: block; width: 100%; margin: 0; border: 0; background: none; font-family: inherit; text-align: center; font-size: 13px; line-height: 22px; font-weight: 600; letter-spacing: inherit; color: var(--n-700); padding: 10px 12px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(31,31,31,.35); }
.doc .note { margin-top: 10px; font-size: 13px; line-height: 19px; color: var(--red-deep); }

.doc .mt4 { margin-top: 4px; } .doc .mt16 { margin-top: 16px; } .doc .mt18 { margin-top: 18px; } .doc .mt20 { margin-top: 20px; }

@media (prefers-reduced-motion: reduce) { .doc .btn { transition: none; } .doc .btn:active { transform: none; } }