/* ═══════════════════════════════════════════════════════════════
   HyperDCA — marketing home + docs.  Aesthetic target is Vercel:
   near-monochrome, ONE accent (the brand copper), hierarchy carried
   by type rather than colour, 1px low-opacity hairlines instead of
   shadows, 150–200ms ease-out motion. No gradients, no parallax,
   no autoplay, no images.

   WHY this is a SECOND stylesheet and not a rewrite of styles.css:
   privacy.html, terms.html, support.html and donate.html all depend
   on styles.css's class vocabulary (.legal, .callout, .big-free,
   .btn-dune, .nav.solid …). Rewriting it would silently restyle four
   live legal pages. index.html and docs.html load ONLY this file, so
   the two vocabularies never meet and the legal pages render
   byte-identically to before.

   WHY no webfont: the previous home preconnected to Google Fonts and
   render-blocked on Inter + JetBrains Mono. The system stack costs
   zero requests and is what this page is judged on — first paint.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Near-monochrome, warm-neutral. Derived from the existing brand coal
     (#1C1A19) so the marketing site and the dark app still feel related. */
  --bg: #0A0908;
  --bg-raised: #121110;
  --fg: #EDEBE9;
  --fg-2: rgba(237, 235, 233, 0.62);
  --fg-3: rgba(237, 235, 233, 0.42);

  /* Depth is hairlines, not shadows. */
  --line: rgba(237, 235, 233, 0.10);
  --line-strong: rgba(237, 235, 233, 0.18);

  /* The ONE accent. Same copper as the app's --color-copper. */
  --accent: #C9956B;
  --accent-ink: #17150F;
  --accent-dim: rgba(201, 149, 107, 0.14);

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
    'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* No page-wide column any more. Sections run edge to edge and are held off the viewport
     edge by the gutter alone, which grows with the screen (see the breakpoints at the foot
     of this file) so "full width" reads as generous rather than as unpadded.
     Readability is protected where it actually matters instead — every prose block below
     carries its own `ch` measure (hero-lede 46ch, section-lede 58ch, step 60ch, plain 62ch,
     doc 68ch), so widening the container cannot lengthen a line of body copy. The one
     exception is the docs page, which is prose end to end and therefore keeps a column. */
  --maxw-read: 76ch;
  --gutter: 20px;

  --dur: 160ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
::selection { background: var(--accent-dim); }

/* Motion is a courtesy, never a requirement. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Keyboard users get a visible ring everywhere; mouse users never see it. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* The docs page is the one place the old column survives: it is 300 lines of continuous
   prose, and a heading spanning 2400px above a 68ch paragraph reads as a broken layout
   rather than as a wide one. Scoped to .doc so the nav and footer on the same page stay
   edge-to-edge with everything else. */
.doc .wrap {
  /* + the gutter because box-sizing is border-box globally: without the calc, the padding
     eats INTO the measure, so the reading column would get NARROWER at exactly the widths
     where the gutter grows. This keeps the text column a constant 76ch at every size. */
  max-width: calc(var(--maxw-read) + 2 * var(--gutter));
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: var(--gutter);
  top: 10px;
  z-index: 200;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  padding: 8px 14px;
  border-radius: 6px;
}

/* ─── Nav ─────────────────────────────────────────────────────────
   No JS: at 375px the section anchors drop out and only the two
   things a first-time visitor needs survive — sign in, get started.
   Everything hidden here is still reachable from the footer.        */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 9, 8, 0.82);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.brand svg { width: 20px; height: 18px; display: block; flex-shrink: 0; }

.nav-right { display: flex; align-items: center; gap: 6px; }
.nav-link {
  display: none;
  padding: 8px 10px;
  font-size: 14px;
  color: var(--fg-2);
  transition: color var(--dur) var(--ease);
}
.nav-link:hover { color: var(--fg); }

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;          /* WCAG 2.5.5 target size */
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.btn-primary:hover { opacity: 0.88; }
.btn-quiet {
  color: var(--fg-2);
  background: transparent;
}
.btn-quiet:hover { color: var(--fg); background: var(--bg-raised); }
.btn-outline {
  border-color: var(--line-strong);
  color: var(--fg);
  background: transparent;
}
.btn-outline:hover { background: var(--bg-raised); }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn-lg { min-height: 48px; padding: 0 24px; font-size: 16px; }

/* ─── Hero ───────────────────────────────────────────────────────
   Sized so the headline, the one sentence and the one CTA all clear
   the fold on a 375×667 device with the 56px nav on top.            */
.hero { padding: 64px 0 56px; border-bottom: 1px solid var(--line); }
.hero h1 {
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 600;
  max-width: 15ch;
}
.hero-lede {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 46ch;
}
.hero-cta {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Verifiable capability facts only — every number here is counted from
   the codebase, not from marketing. See docs.html for the sources. */
.hero-facts {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 16px;
}
.fact-k {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.fact-v {
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--fg-3);
  /* The three facts spread across the full width as a stat strip, but each caption stays a
     readable block under its number rather than one 200-character line. */
  max-width: 40ch;
}

/* ─── Section scaffolding ─── */
.section { padding: 64px 0; border-bottom: 1px solid var(--line); }
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.section h2 {
  margin-top: 12px;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 600;
  max-width: 22ch;
}
.section-lede {
  margin-top: 12px;
  font-size: 15.5px;
  color: var(--fg-2);
  max-width: 58ch;
}

/* ─── How it works ─── */
.steps { margin-top: 40px; list-style: none; display: grid; gap: 0; }
.step {
  padding: 24px 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 6px;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step-n {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.step h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.step p { font-size: 15px; color: var(--fg-2); max-width: 60ch; }

/* ─── Features ─── */
.grid {
  margin-top: 40px;
  display: grid;
  gap: 1px;                       /* the gap IS the hairline: see .card bg */
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.card {
  background: var(--bg);
  padding: 24px 20px;
  transition: background-color var(--dur) var(--ease);
}
.card:hover { background: var(--bg-raised); }
.card h3 {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.card p { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); }

/* ─── Plain-language list (the "what this is not" block) ─── */
.plain { margin-top: 32px; list-style: none; display: grid; gap: 14px; }
.plain li {
  padding-left: 20px;
  position: relative;
  font-size: 15px;
  color: var(--fg-2);
  max-width: 62ch;
}
.plain li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.plain strong { color: var(--fg); font-weight: 600; }

/* ─── Closing CTA ─── */
.closing { padding: 72px 0; text-align: center; border-bottom: 1px solid var(--line); }
.closing h2 { margin: 0 auto; font-size: 26px; letter-spacing: -0.025em; font-weight: 600; max-width: 20ch; }
.closing p { margin: 12px auto 26px; color: var(--fg-2); max-width: 46ch; font-size: 15.5px; }
.closing .hero-cta { justify-content: center; }

/* ─── Footer ─── */
.foot { padding: 44px 0 56px; font-size: 14px; }
.foot-top { display: grid; gap: 28px; }
.foot-nav { display: grid; gap: 10px; }
.foot-h {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.foot-nav a { color: var(--fg-2); transition: color var(--dur) var(--ease); }
.foot-nav a:hover { color: var(--fg); }
.foot-legal {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--fg-3);
  font-size: 13px;
  line-height: 1.6;
  display: grid;
  gap: 12px;
}
/* The risk warning is the longest paragraph on the page and the one a regulator would read.
   It gets a measure like every other prose block now that the footer is edge-to-edge. */
.foot-legal p { max-width: 90ch; }
.foot-legal strong { color: var(--fg-2); font-weight: 600; }
.foot-legal a { color: var(--fg-2); transition: color var(--dur) var(--ease); }
.foot-legal a:hover { color: var(--fg); }

/* ═══ Docs page ═══════════════════════════════════════════════════ */
.doc { padding: 44px 0 88px; }
.doc-head { padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.doc-head h1 { font-size: 32px; line-height: 1.15; letter-spacing: -0.03em; font-weight: 600; }
.doc-head p { margin-top: 12px; color: var(--fg-2); max-width: 60ch; font-size: 16px; }

.doc-toc { margin: 28px 0 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; }
/* No list markers: several section titles are themselves numbered ("2. Connect an
   exchange"), and an <ol> marker on top of that reads as "4. 2. Connect an exchange". */
.doc-toc ol { margin: 10px 0 0; padding-left: 0; list-style: none; display: grid; gap: 7px; }
.doc-toc li { font-size: 14.5px; color: var(--fg-2); }
.doc-toc a { color: var(--fg-2); transition: color var(--dur) var(--ease); }
.doc-toc a:hover { color: var(--accent); }

.doc h2 {
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 22px;
  letter-spacing: -0.025em;
  font-weight: 600;
  scroll-margin-top: 72px;
}
.doc h3 { margin-top: 28px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.doc p { margin-top: 12px; color: var(--fg-2); max-width: 68ch; font-size: 15.5px; }
.doc ul, .doc ol { margin-top: 12px; padding-left: 22px; display: grid; gap: 8px; max-width: 68ch; }
.doc li { color: var(--fg-2); font-size: 15.5px; }
.doc strong { color: var(--fg); font-weight: 600; }
.doc a:not(.btn):not(.brand) { color: var(--accent); }
.doc a:not(.btn):not(.brand):hover { text-decoration: underline; }
.doc code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}
.doc .note {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: var(--bg-raised);
}
.doc .note p { margin-top: 0; color: var(--fg-2); }
.doc .note p + p { margin-top: 10px; }

.doc-table { margin-top: 18px; width: 100%; overflow-x: auto; }
.doc-table table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 14.5px; }
.doc-table th, .doc-table td {
  text-align: left;
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg-2);
  vertical-align: top;
}
.doc-table th { color: var(--fg); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; }
.doc-table td:first-child { color: var(--fg); white-space: nowrap; }

/* ═══ Breakpoints — mobile-first; everything above is the 375px view ═══ */
@media (min-width: 600px) {
  :root { --gutter: 32px; }
  .hero { padding: 96px 0 72px; }
  .hero h1 { font-size: 54px; }
  .hero-lede { font-size: 18.5px; margin-top: 22px; }
  .hero-facts { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .section { padding: 88px 0; }
  .section h2 { font-size: 32px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .card { padding: 28px 24px; }
  .step { grid-template-columns: 64px 1fr; gap: 0 20px; padding: 28px 0; }
  .step-n { grid-row: span 2; padding-top: 3px; }
  .foot-top { grid-template-columns: 1.4fr 1fr 1fr; }
  .closing h2 { font-size: 32px; }
  .doc-head h1 { font-size: 40px; }
}

@media (min-width: 900px) {
  .nav-link { display: inline-flex; }
  .nav-right { gap: 4px; }
  .hero h1 { font-size: 64px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Wide displays ─────────────────────────────────────────────────────────────
   With the page column gone, the gutter is the only thing between content and the
   bezel, so it grows in step with the viewport. Vertical section padding grows with
   it: horizontal air without matching vertical air reads as a stretched layout
   rather than a spacious one. */
@media (min-width: 1200px) {
  :root { --gutter: 48px; }
  .hero { padding: 128px 0 96px; }
  .section { padding: 112px 0; }
  .closing { padding: 112px 0; }
  .doc { padding: 56px 0 112px; }
}

@media (min-width: 1700px) {
  :root { --gutter: 80px; }
  /* Type scales with the canvas. Without this the headline stays at its 900px size while the
     section around it doubles in width, which reads as a small page on a big monitor rather
     than a big page. The `ch` measures below it are untouched, so the lede does NOT get
     longer lines — only the display type grows. */
  .hero h1 { font-size: 76px; }
  .section h2, .closing h2 { font-size: 38px; }
}

@media (min-width: 2200px) {
  :root { --gutter: 120px; }
  /* Six feature cards, so the column count has to divide six or the last row is ragged:
     1 → 2 → 3 → 6, never 4 or 5. Only at this width is a sixth column still ~300px wide,
     which is what the three-line card copy needs. */
  .grid { grid-template-columns: repeat(6, 1fr); }
}