/* The site wears the app's own system — docs/DESIGN.md §0.
   A dark, quiet ground with exactly one luminous object on it; one accent
   expressed as one hue path, blue to green; depth as a light source above
   rather than a shadow below. A marketing site that looked nothing like the
   product would be the first promise broken. */
:root {
  --base: #0a1220;
  --sunken: #060c16;
  --raised: #111b2a;
  --ink: #f2f6fa;
  --secondary: #9fb0c4;
  --muted: #8496ab;
  --accent: #4acbda;
  --accent-start: #38b8f5;
  --accent-end: #6cdebe;
  --line: #22304a;
  --gutter: clamp(20px, 5vw, 40px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* The ground gradient: four points of luminance, so a full page of
     near-black does not band on an OLED panel. */
  background: linear-gradient(180deg, #0c1626 0%, var(--base) 60%) no-repeat;
  background-color: var(--base);
  color: var(--ink);
  font: 400 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  padding: 0 var(--gutter) 96px;
}
.wrap { max-width: 720px; margin: 0 auto; }
header { padding: 56px 0 40px; display: flex; align-items: center; gap: 12px; }
.brand {
  font-weight: 700; letter-spacing: -0.01em; font-size: 20px;
  color: var(--ink); text-decoration: none;
}
.mark { width: 26px; height: 26px; flex: none; }

h1 { font-size: clamp(34px, 7vw, 54px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 20px; }
h2 { font-size: clamp(21px, 4vw, 26px); letter-spacing: -0.01em; margin: 44px 0 12px; }
h3 { font-size: 18px; margin: 0 0 8px; }
p, li { color: var(--secondary); }
li { margin-bottom: 8px; }
.lead { font-size: clamp(18px, 3vw, 21px); color: var(--secondary); }
a { color: var(--accent); }
strong { color: var(--ink); font-weight: 600; }

/* The hero ring — the mark, at page size. It is the one luminous object here
   and nothing else on the page glows. */
.hero { position: relative; margin: 0 0 8px; }
.hero .glow {
  position: absolute; inset: -40px -10% auto; height: 260px;
  background: linear-gradient(120deg, var(--accent-start), var(--accent-end));
  opacity: 0.14; filter: blur(90px); pointer-events: none; z-index: 0;
}
.hero > *:not(.glow) { position: relative; z-index: 1; }

.card {
  background: var(--raised);
  border: 1px solid transparent;
  border-radius: 14px; padding: 22px 24px; margin: 20px 0;
  /* Depth is a light source above, never a shadow below — DESIGN §0 rule 4. */
  background-image: linear-gradient(180deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.012) 35%, transparent 100%);
  background-clip: padding-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.figure {
  font: 600 34px/1.1 ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--ink); letter-spacing: -0.02em; display: block; margin-bottom: 6px;
}
.figure-note { display: block; font-size: 14px; color: var(--muted); margin-bottom: 18px; }

.meta { color: var(--muted); font-size: 15px; }
nav.foot { border-top: 1px solid var(--line); margin-top: 64px; padding-top: 24px; font-size: 15px; }
nav.foot a { margin-right: 20px; display: inline-block; margin-bottom: 8px; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; color: var(--ink); }
table { border-collapse: collapse; width: 100%; margin: 16px 0; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 15px; }
th { color: var(--ink); font-weight: 600; }
td { color: var(--secondary); }

@media (prefers-reduced-motion: no-preference) {
  .hero .glow { transition: opacity .3s ease-out; }
}