/* ============================================================
   Identifee — shared site styles
   Loaded by every page; page-specific <style> blocks override.

   Contents
     1. Design tokens
     2. Self-hosted fonts (Inter, Newsreader, Material Symbols)
     3. Base typography + heading scale
     4. Serif accent
     5. Buttons
     6. Focus visibility + skip link
     7. Nav, color + misc utilities
   ============================================================ */

/* ---- 1. Design tokens ---- */
:root {
  /* Color */
  --c-base: #F8F8F7;
  --c-soft: #F2F1EE;
  --c-warm: #E4E4E2;
  --c-ink-950: #242424;
  --c-ink-800: #3F3D3A;
  --c-ink-700: #4D4B48;
  --c-slate: #6B7280;
  --c-accent: #0000EE;
  --c-accent-hover: #0000C4;
  /* Check marks site-wide: a true azure so pale tints read blue, not lavender */
  --c-check: #0057FF;

  /* Radius scale */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 22px;
  --r-xl: 28px;

  /* Elevation scale */
  --shadow-1: 0 2px 10px -6px rgba(36, 36, 36, 0.08);
  --shadow-2: 0 4px 16px -8px rgba(36, 36, 36, 0.10);
  --shadow-3:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 30px 80px -40px rgba(36, 36, 36, 0.18),
    0 4px 16px -8px rgba(36, 36, 36, 0.06);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 160ms;
  --dur-base: 300ms;
}

/* ---- 2. Self-hosted fonts ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/newsreader-italic-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Icon font is a ~60KB subset of exactly the glyphs this site uses.
   display:block prevents the raw ligature text ("arrow_forward") flash. */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 300 400;
  font-display: block;
  src: url('/fonts/material-symbols-rounded-subset.woff2') format('woff2');
}

/* ---- 3. Base typography ---- */
html {
  font-family: 'Inter', system-ui, sans-serif;
  background: #FFFFFF;
  scroll-behavior: smooth;
}
html, body { overflow-x: hidden; }
body {
  font-feature-settings: 'ss01', 'cv11';
  color: var(--c-ink-950);
  /* Base body weight raised 300 -> 400 for legible descriptive copy.
     Headings/labels keep their explicit font-medium/semibold, so hierarchy holds. */
  font-weight: 400;
}

/* Heading scale — single source of truth for marketing pages.
   Steps match the original per-page utility stacks exactly (no reflow). */
.h-display {
  font-size: 44px;
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.h-section {
  font-size: 26px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.h-section-sm {
  font-size: 24px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
@media (min-width: 640px) {
  .h-display { font-size: 52px; }
  .h-section { font-size: 32px; }
  .h-section-sm { font-size: 30px; }
}
@media (min-width: 1024px) {
  .h-display { font-size: 60px; }
  .h-section { font-size: 40px; }
  .h-section-sm { font-size: 36px; }
}

/* Legal pages and changelog override these with smaller clamps inline. */
h3 { font-size: clamp(22px, 3vw, 32px); line-height: 1.15; }
h4 { font-size: clamp(18px, 2vw, 22px); line-height: 1.2; }

/* Eyebrow label */
.eyebrow {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-slate);
}

/* Form placeholders: #9CA3AF fails WCAG AA on white; slate passes. */
::placeholder { color: var(--c-slate); opacity: 1; }

/* ---- Material Symbols ----
   Full class definition lives here now that Google's CSS is no longer loaded. */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ---- 4. Serif accent ----
   Real editorial serif for the accent words in headlines. Sized up a touch
   (Newsreader runs small for its em box) with line-height pinned so the span
   never expands its parent's line box. */
.serif {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.04em;
  line-height: 1;
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
}

/* ---- 5. Buttons ----
   One primary (electric blue), one secondary (ink outline), plus the two
   on-photo variants the dark heroes need. Pages should not hand-roll CTAs. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 9999px;
  padding: 12px 24px;
  font-weight: 500;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform 120ms var(--ease-out);
}
.btn:active { transform: scale(0.98); }

.btn-primary { background: var(--c-accent); color: #fff; }
.btn-primary:hover { background: var(--c-accent-hover); }

.btn-secondary {
  box-shadow: inset 0 0 0 1px var(--c-ink-950);
  color: var(--c-ink-950);
}
.btn-secondary:hover { background: var(--c-ink-950); color: #fff; }

/* On-photo variants (dark hero sections) */
.btn-inverse { background: #fff; color: var(--c-ink-950); }
.btn-inverse:hover { background: rgba(255, 255, 255, 0.9); }

.btn-glass {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.btn-glass:hover { background: rgba(255, 255, 255, 0.2); }

/* ---- 6. Focus visibility + skip link ---- */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  transform: translateY(-200%);
  background: var(--c-ink-950);
  color: #fff;
  padding: 10px 18px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  transition: transform 200ms var(--ease-out);
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline-color: #fff;
  outline-offset: -4px;
}

/* ---- 7. Glassy nav state ----
   index.html and learn-more.html override the background tint inline. */
.nav-scrolled {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(36, 36, 36, 0.06);
}
/* Phones strip backdrop-filter (mobile.css); without the blur the 0.78 tint
   lets page text collide with the logo — go near-opaque instead. Pages that
   override the tint carry the same phone bump in their own css. */
@media (max-width: 767.98px) {
  .nav-scrolled { background: rgba(255, 255, 255, 0.96); }
}

/* ---- Color + button utilities (legacy aliases) ---- */
.accent { color: var(--c-accent); }

.pill-accent { background: var(--c-accent); color: #ffffff; }
.pill-accent:hover { background: var(--c-accent-hover); }

/* ---- Misc utilities ---- */
.tnum { font-variant-numeric: tabular-nums; }

/* ---- Subscribe / opt-in band ----
   Shared by the Changelog and Roadmap pages (SubscribeBand component).
   "Never miss an update" — pinned to the viewport bottom via .is-fixed
   (toggled by script; sticky is defeated by the site-wide overflow-x:hidden),
   docking into the flow when the footer is visible. */
.cl-subscribe {
  background: rgba(248, 248, 247, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid #E4E4E2;
}
.cl-subscribe.is-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
}
.cl-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #6B7280;
  cursor: pointer;
}
.cl-consent input {
  margin-top: 2px;
  width: 14px;
  height: 14px;
  accent-color: #242424;
  flex-shrink: 0;
}

/* Subscribe confirmation / error notice — a clear, coloured pill so the
   user gets unmistakable feedback after submitting. */
.cl-msg {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
.cl-msg.is-visible {
  animation: cl-msg-in .25s ease;
}
.cl-msg::before {
  font-size: 14px;
  line-height: 1;
}
.cl-msg--success {
  background: #ECFDF3;
  border-color: #ABEFC6;
  color: #067647;
}
.cl-msg--success::before { content: "\2713"; } /* ✓ */
.cl-msg--error {
  background: #FEF3F2;
  border-color: #FECDCA;
  color: #B42318;
}
.cl-msg--error::before { content: "\26A0"; } /* ⚠ */
@keyframes cl-msg-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Scroll reveals ----
   Gated on html.js (set inline in <head>) so content is never hidden
   when JavaScript doesn't run. Reduced motion shows everything instantly. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
}
html.js [data-reveal][data-reveal-delay='1'] { transition-delay: 90ms; }
html.js [data-reveal][data-reveal-delay='2'] { transition-delay: 180ms; }
html.js [data-reveal][data-reveal-delay='3'] { transition-delay: 270ms; }
html.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}