/* The app's look (frontend/theme.js, BRAND.md direction B "blood trail"): pure black, hairlines
   instead of filled cards, condensed heavy Archivo caps for titles, Archivo for reading, Martian
   Mono for labels, square 6px corners and one red accent. Heart rate is amber because red is taken. */

:root {
  --bg: #000;
  --surface: #0c0c0c;
  --line: #1a1a1a;
  --border: #2a2a2a;
  --text: #ececec;
  --soft: #b8b8b8;
  --muted: #8a8a8a;
  --faint: #6e6e6e;
  --accent: #e5232d;
  --accent-dim: #3a1414;
  --heart: #fbbf24;
  --workout: #fb923c;
  --danger: #f87171;
  --radius: 6px;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "Martian Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--soft);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 640px; }

.label {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Titles: the app's ArchivoExtraCondensed-ExtraBold, from the variable font's width axis. */
.display, .hero h1, .section h2, .doc h1 {
  font-family: var(--sans);
  font-stretch: 62%;
  font-weight: 800;
  text-transform: uppercase;
}

/* Header */
.top { border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: var(--radius); display: block; }
.brand span { font-stretch: 62%; font-weight: 800; font-size: 24px; letter-spacing: 0.5px; line-height: 1; }
.top nav { display: flex; gap: 24px; }
.top nav a { font-family: var(--mono); font-weight: 300; font-size: 11px; letter-spacing: 1.6px; color: var(--muted); }
.top nav a:hover, .top nav a[aria-current] { color: var(--text); text-decoration: none; }

/* Home: hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; padding-top: 80px; padding-bottom: 88px; }
.hero h1 {
  color: var(--text);
  font-size: clamp(56px, 9vw, 104px);
  line-height: 0.92;
  letter-spacing: 0.5px;
  margin: 18px 0 26px;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero p.lede { font-size: 18px; line-height: 1.6; max-width: 30em; margin: 0 0 16px; }
.hero p.lede strong { color: var(--text); font-weight: 600; }
.pill {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 16px;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 16px;
  font-family: var(--mono); font-weight: 300; font-size: 11px; letter-spacing: 1.4px;
  color: var(--text);
}
.pill .dot { width: 6px; height: 6px; background: var(--accent); }
.hound { position: relative; }
.hound img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
/* Fades the image's square edges into the page so the hound looks out of the dark. */
.hound::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius); pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, var(--bg) 100%);
}

/* Home: two-column statement sections */
.proof { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.proof h2 { margin-bottom: 20px; }
.proof h2 em { font-style: normal; color: var(--accent); }
.proof p { font-size: 17px; max-width: 28em; margin: 0; }
.proof p + p { margin-top: 16px; }

/* Home: features as hairline rows */
.section { border-top: 1px solid var(--line); padding: 72px 0; }
.section h2 { color: var(--text); font-size: clamp(40px, 6vw, 56px); line-height: 0.95; letter-spacing: 0.4px; margin: 12px 0 40px; }
.rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.row { padding: 28px 28px 28px 0; border-bottom: 1px solid var(--line); }
.row:nth-child(odd) { border-right: 1px solid var(--line); }
.row:nth-child(even) { padding-left: 28px; }
.row .label { color: var(--accent); }
.row h3 { color: var(--text); font-weight: 600; font-size: 18px; margin: 10px 0 6px; }
.row p { margin: 0; font-size: 15px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step { border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.step h3 { color: var(--text); font-weight: 600; font-size: 17px; margin: 12px 0 6px; }
.step p { margin: 0; font-size: 15px; }

/* Documents: privacy, support, import */
.doc { padding-top: 64px; padding-bottom: 80px; }
.doc h1 { color: var(--text); font-size: 56px; line-height: 0.95; letter-spacing: 0.4px; margin: 12px 0 20px; }
.doc h2 { color: var(--text); font-weight: 600; font-size: 19px; margin: 36px 0 8px; padding-top: 28px; border-top: 1px solid var(--line); }
.doc h3 { color: var(--text); font-weight: 600; font-size: 16px; margin: 22px 0 4px; }
.doc ul { padding-left: 20px; }
.doc li { margin: 6px 0; }
.doc li::marker { color: var(--accent); }
.doc strong { color: var(--text); font-weight: 600; }
.callout { border-left: 2px solid var(--accent); padding: 2px 0 2px 16px; margin: 28px 0; color: var(--text); }
.table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; }
.table td { border-top: 1px solid var(--line); padding: 12px 12px 12px 0; vertical-align: top; }
.table td:first-child { color: var(--text); white-space: nowrap; width: 1%; }

/* Footer */
footer { border-top: 1px solid var(--line); padding: 32px 0 48px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: flex-end; }
footer .links { display: flex; gap: 24px; }
footer a { color: var(--muted); }
footer a:hover { color: var(--text); }
footer p { margin: 0; font-size: 13px; color: var(--faint); }

@media (max-width: 820px) {
  .hero, .proof { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .proof { gap: 4px; }
  .hero { padding-top: 48px; padding-bottom: 64px; }
  .hound { max-width: 420px; }
  .rows { grid-template-columns: minmax(0, 1fr); }
  .row, .row:nth-child(even) { padding: 24px 0; border-right: 0; }
  .row:nth-child(odd) { border-right: 0; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .section { padding: 56px 0; }
  .doc h1 { font-size: 46px; }
  .top nav { gap: 16px; }
}

@media (max-width: 380px) {
  .brand span { font-size: 21px; }
  .brand img { width: 28px; height: 28px; }
  .top nav { gap: 12px; }
}