/* The app's tokens (Docs/DESIGN_TOKENS.md): dark surfaces, compressed uppercase type. */
@font-face { font-family: "Next Condensed"; font-weight: 500; font-display: swap; src: url("/fonts/barlow-condensed-500.woff2") format("woff2"); }
@font-face { font-family: "Next Condensed"; font-weight: 600; font-display: swap; src: url("/fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Next Condensed"; font-weight: 700; font-display: swap; src: url("/fonts/barlow-condensed-700.woff2") format("woff2"); }

:root {
  --base: #111113;
  --second: #1f1f21;
  --third: #353536;
  --titles: #e9e9ec;
  --subtitles: rgba(233, 233, 236, 0.7);
  --descriptions: rgba(233, 233, 236, 0.5);
  --divider: rgba(233, 233, 236, 0.2);
  --secondary: rgba(233, 233, 236, 0.2);
  --orange: #f28e00;
  --display: "Next Condensed", "SF Compact Display", "Arial Narrow", system-ui, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--base); -webkit-text-size-adjust: 100%; }
body {
  margin: 0 auto;
  max-width: 880px;
  min-height: 100vh;
  padding: 0 16px calc(32px + env(safe-area-inset-bottom));
  background: radial-gradient(900px 480px at 85% -120px, rgba(242, 142, 0, 0.16), transparent 70%) no-repeat;
  color: var(--subtitles);
  font: 16px/1.55 var(--text);
  overflow-wrap: break-word;
}
a { color: var(--titles); text-underline-offset: 3px; text-decoration-color: var(--divider); }
a:hover { text-decoration-color: var(--titles); }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 28px/1 var(--display); letter-spacing: -0.02em; text-transform: uppercase; }
.brand img { border-radius: 9px; }
nav { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: flex-end; }
nav a { font: 600 18px/1 var(--display); text-transform: uppercase; text-decoration: none; color: rgba(233, 233, 236, 0.3); padding: 6px 0; }
nav a:hover, nav a[aria-current] { color: var(--titles); }

h1, h2, h3 { font-family: var(--display); text-transform: uppercase; color: var(--titles); margin: 0; letter-spacing: -0.01em; }

.card {
  background: var(--second);
  border-radius: 32px;
  padding: 28px;
  box-shadow: inset 0 0 8px rgba(233, 233, 236, 0.12), inset 0 0 2px rgba(233, 233, 236, 0.22);
}

/* Home */
.hero { text-align: center; padding: 40px 0 44px; }
.hero .icon { border-radius: 27px; box-shadow: 0 24px 80px rgba(242, 142, 0, 0.28); }
.hero h1 { font-size: clamp(72px, 19vw, 128px); line-height: 0.9; font-weight: 700; margin-top: 28px; letter-spacing: -0.03em; }
.hero h1 span { display: block; font-size: 0.3em; font-weight: 600; line-height: 1; color: var(--subtitles); letter-spacing: 0; margin-top: 8px; }
.lead { margin: 20px auto 0; max-width: 420px; font-size: 18px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grid h2, .note h2 { font-size: 32px; line-height: 1; font-weight: 600; }
.grid p { margin: 12px 0 0; font-size: 15px; }
.note { margin-top: 8px; }
.note p { margin: 12px 0 0; max-width: 640px; }
.links { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.button {
  display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: 24px;
  background: var(--titles); color: var(--base);
  font: 600 18px/1 var(--display); text-transform: uppercase; text-decoration: none;
}
.button.secondary { background: var(--secondary); color: var(--titles); }
.button:hover { opacity: 0.85; }
.disclaimer { text-align: center; color: var(--descriptions); font-size: 14px; max-width: 520px; margin: 28px auto 0; }

/* Documents */
.doc { padding: 36px 28px 40px; }
.doc > * { max-width: 680px; }
.doc h1 { font-size: clamp(44px, 11vw, 64px); line-height: 0.9; font-weight: 700; letter-spacing: -0.03em; }
.doc .caption { color: var(--descriptions); font-size: 14px; margin: 12px 0 0; }
.doc h2 { font-size: 26px; line-height: 1; font-weight: 600; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--divider); }
.doc h3 { font-size: 20px; line-height: 1; font-weight: 600; margin-top: 26px; }
.doc p { margin: 12px 0 0; }
.doc ul { margin: 12px 0 0; padding-left: 20px; }
.doc li { margin-top: 6px; }
.doc li::marker { color: var(--descriptions); }

footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; padding: 32px 0 0; color: var(--descriptions); font-size: 14px; }
footer a { color: var(--descriptions); }
footer .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--descriptions); }

@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
  .card { padding: 24px; }
  .doc { padding: 28px 22px 32px; }
  .top { padding: 16px 4px; }
  nav { gap: 2px 14px; }
  nav a { font-size: 16px; }
}