/* Self-hosted Geist — the same vendored assets the landing surface uses
   (/static/fonts/), so no duplicate font files and no external font CDN.
   Variable faces cover the full weight range, so no synthetic weights.
   Source and licence: static/fonts/Geist-SOURCE.txt (SIL OFL 1.1). */
@font-face {
  font-family: 'Geist';
  src: url('/static/fonts/Geist-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/static/fonts/GeistMono-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Shared typography stack — mirrors the landing surface so /, /about and
     the legal pages read as one product. Inter stays a fallback only. */
  --public-font-sans: 'Geist', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --public-font-mono: 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  /* Deep navy foundation (brand direction) — a restrained shift from the
     former near-black. Surfaces keep tonal separation from the shell bg. */
  --public-bg: #060a14;
  --public-surface: #0e1526;
  --public-text: #f1f0ee;
  --public-muted: rgba(241, 240, 238, .66);
  --public-quiet: rgba(241, 240, 238, .45);
  --public-line: rgba(241, 240, 238, .12);
  /* Restrained cyan accent — set explicitly (NOT via --cyan, which ui-next.css
     overrides to amber #e2c287 on this surface). Replaces the former amber. */
  --public-accent: #74d5ff;
  /* Primary CTA — a deeper, calmer cyan than the bright --public-accent so the
     filled button reads as primary without dominating the navy shell. Off-white
     label keeps it clearly a filled action (not a weak secondary). */
  --public-cta-bg: #1a6884;
  --public-cta-fg: var(--public-text);
  --public-gutter: clamp(24px, 7.3vw, 116px);
}

[data-theme="light"] {
  --public-bg: #f2efe8;
  --public-surface: #e9e5dc;
  --public-text: #171614;
  --public-muted: rgba(23, 22, 20, .68);
  --public-quiet: rgba(23, 22, 20, .48);
  --public-line: rgba(23, 22, 20, .14);
  --public-accent: #0d6e8a;
  --public-cta-bg: #0d6e8a;
  --public-cta-fg: var(--public-bg);
}

body.about-page {
  min-height: 100vh;
  margin: 0;
  color: var(--public-text);
  background: var(--public-bg);
  font-family: var(--public-font-sans);
  /* ui-next.css styles the shared about/legal blocks through these tokens;
     re-pointing them here keeps the public pages on Geist without touching
     the legacy /tool surface, which keeps its own stack. */
  --nx-display: var(--public-font-sans);
  --nx-reading: var(--public-font-sans);
  --nx-hero: var(--public-font-sans);
}

.about-page .navbar {
  position: relative;
  z-index: 5;
  width: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.about-page .nav-inner {
  width: 100%;
  max-width: none;
  min-height: 112px;
  margin: 0;
  padding: 32px var(--public-gutter) 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  box-sizing: border-box;
}

/* Primary header lockup: transparent radar mark + AwardRadar wordmark. */
.about-page .logo {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 11px;
  color: var(--public-text);
  text-decoration: none;
}

/* Legacy fallback: some shells render the brand as a plain first nav-link
   (text-only). Kept as a defensive column lockup. */
.about-page .nav-inner > .nav-link:first-child {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  color: var(--public-text);
  text-decoration: none;
  font-size: 0;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .01em;
}

.about-page .nav-inner > .nav-link:first-child::before {
  content: "AwardRadar";
  font-size: 15px;
  color: var(--public-text);
}

/* Approved AwardRadar mark (favicon design brief), theme-swapped between the
   two canonical files. Overrides the boxed .logo-mark styling inherited from
   app.css / ui-next.css. */
.about-page .logo .logo-mark {
  display: inline-flex;
  flex: none;
  width: 28px;
  height: 28px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
}
.about-page .logo .logo-mark .mk,
.footer-lockup .footer-mark .mk { width: 100%; height: 100%; }
/* Dark surfaces show the ink-on-transparent variant; light shows the dark-ink
   variant. data-theme wins in both directions; system preference is the base. */
.mk-dark { display: block; }
.mk-light { display: none; }
[data-theme="light"] .mk-dark { display: none; }
[data-theme="light"] .mk-light { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .mk-dark { display: none; }
  :root:not([data-theme="dark"]) .mk-light { display: block; }
}

.about-page .logo-text { display: inline-flex; flex-direction: column; gap: 3px; }
.about-page .logo-name { font-size: 15px; font-weight: 650; line-height: 1; letter-spacing: .01em; }
/* Neutralize the gradient/transparent-fill wordmark paint inherited from
   app.css (.logo-award/.logo-radar) so the shell matches the landing
   reference exactly: dark-mode Award #e7e0d5 (pixel-consistent with the
   landing) + solid cyan Radar. #e7e0d5 is scoped to this wordmark rule only
   and does not touch the --public-text token or legal-page body text.
   public.css loads after app.css so these win. */
.about-page .logo-award {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #e7e0d5;
  -webkit-text-fill-color: #e7e0d5;
}
.about-page .logo-radar {
  color: var(--public-accent);
  -webkit-text-fill-color: var(--public-accent);
}
/* Light mode: Award returns to the readable dark-ink public text; Radar keeps
   the light accent via the token. The #e7e0d5 above is the dark-mode value
   only — light is restored here for both explicit toggle and system pref. */
[data-theme="light"] .about-page .logo-award {
  color: var(--public-text);
  -webkit-text-fill-color: var(--public-text);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .about-page .logo-award {
    color: var(--public-text);
    -webkit-text-fill-color: var(--public-text);
  }
}

.about-page .nav-right {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
}

.about-page .nav-link,
.about-page .theme-btn,
.about-page .text-size-btn {
  color: var(--public-muted);
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  font-weight: 550;
  letter-spacing: .04em;
}

.about-page .nav-link:hover,
.about-page .theme-btn:hover,
.about-page .text-size-btn:hover,
.about-page .nav-link-active { color: var(--public-text); }
.about-page .theme-btn { padding: 8px; }
.about-page .text-size-control { border-color: var(--public-line); }

.about-shell,
.about-page .legal {
  width: min(100% - (2 * var(--public-gutter)), 920px);
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(72px, 9vw, 132px) 0 140px;
  box-sizing: border-box;
}

.about-page .legal { max-width: 760px; }

.about-hero,
.about-page .legal > h1:first-of-type {
  margin-bottom: clamp(72px, 9vw, 128px);
}

.about-hero .eyebrow,
.about-page .legal::before {
  color: var(--public-accent);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* System-chrome breadcrumb removed — legal pages orient via the H1, not a
   pseudo-technical "Public Information" eyebrow. */
.about-page .legal::before { content: none; }

/* Remove the decorative four-pointed sparkle injected by ui-next.css
   .eyebrow::before on the public surface. AwardRadar reads as an instrument,
   not AI chrome. */
.about-page .eyebrow::before { content: none !important; display: none !important; }

.about-hero h1,
.about-page .legal h1 {
  max-width: 760px;
  margin: 18px 0 28px;
  color: var(--public-text);
  font-size: clamp(42px, 6vw, 72px);
  font-weight: 450;
  letter-spacing: -.045em;
  line-height: .98;
}

.about-hero p,
.about-page .legal p,
.about-page .legal address,
.about-page .legal ul {
  color: var(--public-muted);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.75;
}

.about-hero p { max-width: 720px; }

.about-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin: 0 0 clamp(80px, 10vw, 144px);
  padding: 22px 0;
  border: solid var(--public-line);
  border-width: 1px 0;
}

.about-toc a,
.about-page .back {
  color: var(--public-muted);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.about-page .back { margin: 0 0 48px; }

.about-section,
.about-page .legal h2 {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.about-section {
  margin: 0;
  padding: clamp(48px, 7vw, 92px) 0;
  border-top: 1px solid var(--public-line);
}

.about-section h2,
.about-page .legal h2 {
  color: var(--public-text);
  font-weight: 500;
  letter-spacing: -.025em;
}

.about-section h2 { font-size: clamp(28px, 3.8vw, 46px); }
.about-page .legal h2 { margin: 64px 0 14px; font-size: clamp(20px, 2.4vw, 28px); }
.about-section p,
.about-section li { color: var(--public-muted); line-height: 1.75; }
.about-section a,
.about-page .legal a { color: var(--public-accent); text-underline-offset: 4px; }

.about-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
}

.about-status-grid article {
  padding: 30px 0;
  border: solid var(--public-line);
  border-width: 1px 0 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.about-callout,
.about-next {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.about-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.about-primary-link,
.about-secondary-link {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  border-radius: 0;
  text-decoration: none;
  font-size: 15px;
  font-weight: 550;
}
/* Primary: a clear filled action ("start the analysis").
   Scoped with .about-page so the filled-button text color wins over the
   generic `.about-section a { color: accent }` link rule (otherwise the
   label renders in the accent colour on an accent background — invisible). */
.about-page .about-primary-link {
  padding: 0 22px;
  color: var(--public-cta-fg);
  background: var(--public-cta-bg);
  border: 1px solid var(--public-cta-bg);
}
.about-primary-link:hover { filter: brightness(1.08); }
/* Secondary: quiet, underlined text link ("contact"). */
.about-page .about-secondary-link {
  color: var(--public-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--public-line);
}
.about-secondary-link:hover { border-bottom-color: var(--public-accent); }

/* Public footer — brand lockup (quieter than the header), one trust line,
   a single row of links, and copyright. Calm, modern, no legacy chrome. */
.about-page footer,
.public-footer {
  margin: 0 var(--public-gutter);
  padding: clamp(40px, 5vw, 64px) 0 max(40px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--public-line);
  background: transparent;
  color: var(--public-muted);
  font-size: 13px;
  line-height: 1.6;
  display: grid;
  gap: 22px;
}

.footer-brand { display: flex; flex-direction: column; gap: 12px; }

/* Footer lockup: same radar mark, smaller (20px) and quieter than the header —
   the wordmark stays a single restrained colour (no cyan "Radar" split). */
.footer-lockup { display: inline-flex; align-items: center; gap: 9px; }
.footer-lockup .footer-mark { display: inline-flex; flex: none; width: 20px; height: 20px; }
.footer-wordmark { color: var(--public-text); font-size: 14px; font-weight: 600; letter-spacing: .01em; }

.footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin: 0; }
.footer-nav a,
.footer-nav .footer-consent {
  color: var(--public-muted);
  font: inherit;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.footer-nav a:hover,
.footer-nav .footer-consent:hover { color: var(--public-text); }

/* Official X profile — icon-only signet, matching the landing surface. The
   glyph is the sole carrier of the link, so it uses the muted tone rather than
   the quiet one to keep enough contrast in both themes. Inline SVG uses
   currentColor, so it stays theme-aware. No box/pill/glow. */
.footer-social {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  color: var(--public-muted);
  text-decoration: none;
}
.footer-social:hover { color: var(--public-text); }
.footer-social .footer-social-icon { flex: none; }

/* 44x44 touch target centred on the glyph. Out of flow, so the footer
   composition and spacing are unchanged. */
.footer-social::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.footer-social:focus-visible {
  outline: 1.5px solid var(--public-accent);
  outline-offset: 3px;
}

.footer-copyright { margin: 0; color: var(--public-quiet); font-size: 12px; }

@media (max-width: 700px) {
  :root { --public-gutter: 22px; }
  .about-page .nav-inner { min-height: 94px; padding-top: 26px; }
  .about-page .nav-right { gap: 10px; }
  .about-page .text-size-control { display: none; }
  .about-shell,
  .about-page .legal { width: calc(100% - 44px); padding-top: 54px; }
  .about-page .legal > h1:first-of-type {
    max-width: 100%;
    font-size: clamp(
      calc(34px * var(--text-scale)),
      calc(10vw * var(--text-scale)),
      calc(42px * var(--text-scale))
    );
    line-height: 1.02;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }
  .about-status-grid { grid-template-columns: 1fr; }
  .about-hero,
  .about-page .legal > h1:first-of-type { margin-bottom: 64px; }
}