/* webcomponent.ai landing
   Anchor (docs/DESIGN-TASTE.md rule 1): the james.qa defense-tech theme
   (sites/james-qa/theme.css, gen 2 token set), same anchor as the bit.ad
   landing this copies. Space Grotesk display voice, Space Mono micro label
   layer, 4px corners, dark ground, monochrome interaction accent. The product
   is unannounced, so the page carries no spec list and no flourish. */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('./fonts/space-grotesk-latin.woff2?v=06408904') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/space-mono-400-latin.woff2?v=fb4a81a2') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/space-mono-700-latin.woff2?v=2d46bd15') format('woff2');
}

:root {
  color-scheme: dark;
  --bg: #000000;
  --card: #0A0B0D;
  --border: #1F2228;
  --border-strong: #2A2E36;
  --text: #F5F5F7;
  --dim: #9A968D;
  --faint: #6C6A63;
  --accent: #FFFFFF;
  --font-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
  --radius: 4px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.5;
}

.page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 20px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 16px;
}

h1 {
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

h1 .tld { color: var(--dim); }

.lede {
  font-size: 1.0625rem;
  color: var(--dim);
  margin: 0 0 40px;
  max-width: 44ch;
}

.lede strong { color: var(--text); font-weight: 500; }

.foot {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.foot a {
  color: var(--dim);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
}

.foot a:hover,
.foot a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
  outline: none;
}