/* ─────────────────────────────────────────────────────────────────────────────────────────────
   SPACE GROTESK, SERVED FROM OUR OWN ORIGIN (2026-09-20)

   It used to come from fonts.googleapis.com, as a render-blocking <link> in all six documents. That
   is two extra DNS lookups and two extra TLS handshakes (googleapis for the CSS, then gstatic for
   the file) standing between a visitor and the FIRST PIXEL of the page — measured at 995ms on a
   cold visit to www.goagenza.com, during which the screen was blank. Nothing could paint until a
   third party answered twice.

   Self-hosted, the face is one same-origin request on a connection the browser has already opened
   for the document, and the CSP no longer has to allow two Google origins at all.

   ⚠ DECLARED HERE, IN THIS SHEET, ON PURPOSE. It is the ONE stylesheet every document loads —
   index.html (so the app and the no-JS hero both get it) and the five plain legal pages. Putting it
   in src/index.css instead would reach the app and none of the static pages, and putting it in six
   <style> blocks is the copy this file's own header exists to refuse.

   ONE FILE PER UNICODE RANGE, and `font-weight: 500 700` on each: Space Grotesk is a VARIABLE font,
   so Google served the SAME file for weights 500, 600 and 700 — three declarations of one download.
   Spelled as a weight RANGE here, which is that same fact said once. The ranges are Google's own, so
   a visitor still downloads only what their text needs (22 kB for latin alone).

   `font-display: swap` is kept from the Google CSS and is load-bearing: a heading paints immediately
   in the fallback and swaps when the face lands, rather than sitting invisible.

   Files under public/fonts/, licence beside them in OFL.txt (SIL Open Font License 1.1, which
   permits exactly this).
   ───────────────────────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-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: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   THE PUBLIC SHEET — the only styling the signed-out world gets.

   Deliberately NOT Tailwind. Tailwind lives in the app bundle, and every page that uses this
   sheet has to render correctly with the bundle absent: the no-JavaScript fallback in index.html,
   and the three legal pages, which are plain files Vite never touches. Hand-written CSS is what
   survives that.

   It also has to survive the app's own Content-Security-Policy, which allows stylesheets only
   from 'self'. That is why this is a FILE and not a <style> block copied into four documents.

   ⚠ EVERY RULE IS SCOPED TO .agz-public OR #pre-app, AND THAT IS NOT TIDINESS. index.html is the
   APP's document as well as the public one, so this sheet is live on every signed-in screen. The
   class names here are ordinary words — grid, prose, wrap — and Tailwind ships `grid` as a display
   utility the app uses everywhere. Unscoped, `.grid p { color: silver }` won on specificity (0,1,1
   against a utility's 0,1,0) and painted every paragraph inside every grid in the product at
   1.70:1, and `.grid li` put a black card behind list items on white screens. Fixed 2026-09-10
   after David spotted the light text; pinned by tests/scope/public-css-isolation.test.js.

   Brand sheet, September 2026: black is the surface, silver is the trim, red is the signal, and
   red is the rarest of the three on any screen. Space Grotesk is headings only; body and numbers
   stay on system-ui. Both rules are honored below.
   ───────────────────────────────────────────────────────────────────────────────────────────── */

:root {
  --agz-black: #000000;
  --agz-ink: #0b0b0c;
  --agz-red: #D8232A;
  /* THE EYEBROW'S RED, AND NOTHING ELSE'S. The brand red is 4.19:1 on black — small text needs
     4.5, and this is the only place the brand red carries TEXT on the black surface. Ruled by
     David 2026-09-11: lighten the eyebrow rather than move the brand. Same hue and saturation,
     lightness raised 8 points, which reaches 5.10:1. Never use this as the brand red. */
  --agz-red-eyebrow: #E14349;
  --agz-silver: #C3C7CE;
  --agz-silver-light: #EEF0F3;
  --agz-silver-dark: #7E838C;
  --agz-line: #24262b;
  --measure: 68ch;
}

.agz-public *, .agz-public *::before, .agz-public *::after,
#pre-app *, #pre-app *::before, #pre-app *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* SCOPED ON PURPOSE. This sheet is linked from index.html, which is also the app's own document,
   so an unscoped `body` rule here would quietly restyle every signed-in screen — a 17px body and a
   black surface leaking under Tailwind, visible nowhere in the app's own source. The class is put
   on <body> by index.html and taken off by main.jsx in the same breath that removes #pre-app, so
   the surface belongs to the public page and to nothing else. The legal pages carry it for good.

   `#pre-app` is listed alongside so the fallback still paints correctly if the class is ever
   dropped from the markup without this file being read. */

body.agz-public,
#pre-app {
  margin: 0;
  background: var(--agz-black);
  color: var(--agz-silver-light);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}


.agz-public h1,
.agz-public h2,
.agz-public h3,
#pre-app h1,
#pre-app h2,
#pre-app h3 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #ffffff;
}


.agz-public h1,
#pre-app h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin: 0 0 1rem; letter-spacing: -0.02em; }

.agz-public h2,
#pre-app h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 2.75rem 0 0.75rem; }

.agz-public h3,
#pre-app h3 { font-size: 1.05rem; margin: 0 0 0.35rem; }


.agz-public p,
.agz-public li,
#pre-app p,
#pre-app li { max-width: var(--measure); }

.agz-public p,
#pre-app p { margin: 0 0 1rem; }


.agz-public a,
#pre-app a { color: var(--agz-silver-light); text-decoration: underline; text-underline-offset: 3px; }

.agz-public a:hover,
#pre-app a:hover { color: #ffffff; }

.agz-public a:focus-visible,
#pre-app a:focus-visible { outline: 2px solid var(--agz-red); outline-offset: 3px; border-radius: 2px; }


.agz-public strong,
#pre-app strong { color: #ffffff; font-weight: 600; }

.agz-public .wrap, #pre-app .wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.5rem; }

/* ── Header ───────────────────────────────────────────────────────────────────────────────── */
.agz-public .site-head, #pre-app .site-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--agz-line);
}
.agz-public .site-head img, #pre-app .site-head img { height: 34px; width: auto; display: block; }
.agz-public .site-head nav, #pre-app .site-head nav { display: flex; gap: 1.5rem; font-size: 0.9rem; }
.agz-public .site-head nav a, #pre-app .site-head nav a { text-decoration: none; color: var(--agz-silver); }
.agz-public .site-head nav a:hover, #pre-app .site-head nav a:hover { color: #ffffff; text-decoration: underline; }

/* ── Hero ─────────────────────────────────────────────────────────────────────────────────── */
.agz-public .hero, #pre-app .hero { padding: 3.5rem 0 3.5rem; }

/* The lockup at reading size, leading the page. The kit's floor for a lockup is 120px wide and
   its ratio is roughly 4.16:1, so 56px of height lands near 233px — comfortably clear of the
   floor at every breakpoint, and it shrinks with the viewport rather than overflowing it. */
.agz-public .hero-logo, #pre-app .hero-logo {
  height: 56px; width: auto; display: block;
  max-width: min(233px, 70vw);
  margin: 0 0 2rem;
}
.agz-public .hero .lede, #pre-app .hero .lede { font-size: 1.2rem; color: var(--agz-silver); max-width: 46ch; }

.agz-public .eyebrow, #pre-app .eyebrow {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--agz-red-eyebrow);
  margin: 0 0 1rem;
}

/* ── Feature grid ─────────────────────────────────────────────────────────────────────────── */
.agz-public .grid, #pre-app .grid {
  display: grid; gap: 1.5rem;
  /* 20rem, not 15: at the container's width 15rem fits three columns and leaves the fourth card
     stranded on its own row. Two-up matches the React page, which uses sm:grid-cols-2. */
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  margin: 1.5rem 0 0; padding: 0; list-style: none;
}
.agz-public .grid li, #pre-app .grid li {
  max-width: none;
  border: 1px solid var(--agz-line);
  border-radius: 14px;
  padding: 1.25rem 1.25rem 1.4rem;
  background: var(--agz-ink);
}
.agz-public .grid p, #pre-app .grid p { font-size: 0.95rem; color: var(--agz-silver); margin: 0; max-width: none; }

/* ── Prose pages (privacy, terms, about) ──────────────────────────────────────────────────── */
.agz-public .prose, #pre-app .prose { padding: 3rem 0 1rem; }
.agz-public .prose ul, #pre-app .prose ul { padding-left: 1.25rem; }
.agz-public .prose li, #pre-app .prose li { margin-bottom: 0.5rem; }
.agz-public .prose .updated, #pre-app .prose .updated { color: var(--agz-silver-dark); font-size: 0.9rem; }

/* ── Footer ───────────────────────────────────────────────────────────────────────────────── */
.agz-public .site-foot, #pre-app .site-foot {
  margin-top: 4rem; padding: 2rem 0 3rem;
  border-top: 1px solid var(--agz-line);
  color: var(--agz-silver-dark); font-size: 0.875rem;
}
.agz-public .site-foot nav, #pre-app .site-foot nav { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.agz-public .site-foot a, #pre-app .site-foot a { color: var(--agz-silver); }
.agz-public .site-foot p, #pre-app .site-foot p { max-width: var(--measure); margin: 0.35rem 0 0; }

@media (prefers-reduced-motion: no-preference) {
  /* Scoped like the rest: an unscoped `html` rule would hand the whole signed-in app smooth
     scrolling it never asked for. */
body.agz-public { scroll-behavior: smooth; }
}