/* ════════════════════════════════════════════════════════════════════════════
   Antemate marketing site.

   Editorial Atlas, using the tokens from editorial-atlas.css and defining NONE
   of its own colours. A hex literal in this file is a bug: it would drift from
   the app, and the token-parity test cannot see it.

   RTL from the first commit — Arabic and Hebrew ship at launch and retro-
   fitting logical properties touches every rule. Never `left`/`right` here.
   ════════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ea-canvas);
  color: var(--ea-ink);
  font-family: "Satoshi", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--ea-fs-body);
  line-height: 1.6;
}

/* --ea-link, not --ea-green-2: green at body size measures 4.4981:1 on the
   light canvas and 3.71:1 on the dark one. The role token carries the
   measured step for each. */
a { color: var(--ea-link); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ea-link); outline-offset: 3px; }

/* ── Chrome ──────────────────────────────────────────────────────────── */

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ea-s-m);
  align-items: center;
  justify-content: space-between;
  max-width: var(--ea-container);
  margin-inline: auto;
  padding-inline: var(--ea-gutter);
  padding-block: var(--ea-s-l);
}

.wordmark {
  font-weight: 900;
  font-size: 22px;
  letter-spacing: var(--ea-tracking-display);
  color: var(--ea-ink);
  text-decoration: none;
}

.site-header nav { display: flex; flex-wrap: wrap; gap: var(--ea-s-m); }
.site-header nav a { color: var(--ea-muted-ink); text-decoration: none; font-size: var(--ea-fs-small); }
.site-header nav a:hover { color: var(--ea-ink); }

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero, .page, .invite, .pillars, .honest {
  max-width: var(--ea-container);
  margin-inline: auto;
  padding-inline: var(--ea-gutter);
  padding-block: var(--ea-section-y);
}

.eyebrow {
  font-size: var(--ea-fs-label);
  font-weight: 800;
  letter-spacing: var(--ea-tracking-label);
  text-transform: uppercase;
  color: var(--ea-muted);
  margin: 0 0 var(--ea-s-m);
}

.hero h1 {
  font-size: var(--ea-fs-display);
  font-weight: 900;
  letter-spacing: var(--ea-tracking-display);
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

/* The italic accent line — the brand's signature, shared with Yanvara. */
.hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--ea-link);
}

.standfirst {
  max-width: 60ch;
  margin: var(--ea-s-l) 0 0;
  font-size: 18px;
  color: var(--ea-muted-ink);
}

/* ── Store badges ────────────────────────────────────────────────────── */

.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ea-s-s);
  margin-block-start: var(--ea-s-xl);
}

.badge {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--ea-r-pill);
  background: var(--ea-navy);
  /* A navy pill measures 1.00:1 against the dark canvas — the shape vanishes
     entirely and the badge reads as a line of loose text. The hairline is what
     keeps it a button; on the light canvas the pill already has a 16.7:1 edge
     and the rim is all but invisible. */
  border: 1px solid var(--ea-line-on-dark);
  color: var(--ea-sand);
  font-weight: 700;
  font-size: var(--ea-fs-small);
  text-decoration: none;
}

.badge-pending { color: var(--ea-muted); font-size: var(--ea-fs-small); margin: 0; }

/* Green leads in Antemate: the single key action is green, and gold is held
   back for Pro. See docs/DESIGN.md. */
.cta {
  display: inline-block;
  margin-block-start: var(--ea-s-l);
  padding: 15px 30px;
  border-radius: var(--ea-r-pill);
  background: var(--ea-green-2);
  color: var(--ea-on-green);
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--ea-shadow-green);
  transition: transform var(--ea-t-fast) var(--ea-spring);
}

.cta:hover { transform: translateY(-2px); }

/* ── Pillars ─────────────────────────────────────────────────────────── */

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ea-s-xl);
  padding-block-start: 0;
}

.pillars h2 {
  font-size: var(--ea-fs-h3);
  letter-spacing: var(--ea-tracking-tight);
  margin: 0 0 var(--ea-s-s);
}

.pillars p { color: var(--ea-muted-ink); margin: 0; }

/* ── Honest panel ────────────────────────────────────────────────────── */

/* --ea-panel, never a sand literal: the ink on this panel is remapped for dark
   mode and --ea-sand-soft cannot be (it is also the ink on every navy
   surface), so a fixed sand here put near-white text on a near-white panel —
   1.02:1, measured. The hairline is the same story as the badge: the dark
   panel sits at 1.10:1 against the dark canvas. */
.honest {
  background: var(--ea-panel);
  border: 1px solid var(--ea-line);
  border-radius: var(--ea-r-2xl);
  max-width: calc(var(--ea-container) - (2 * var(--ea-gutter)));
  padding: var(--ea-s-xl);
}

.honest ul { list-style: none; margin: var(--ea-s-m) 0 0; padding: 0; display: grid; gap: var(--ea-s-s); }
.honest li { padding-inline-start: var(--ea-s-m); border-inline-start: 2px solid var(--ea-link); }

.invite-note {
  margin-block-start: var(--ea-s-l);
  color: var(--ea-muted-ink);
  font-size: var(--ea-fs-small);
}

/* ── Footer ──────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--ea-navy-deep);
  /* 1.06:1 against the dark canvas without this — the footer simply merges
     into the page and the site appears to end early. */
  border-block-start: 1px solid var(--ea-line-on-dark);
  color: var(--ea-sand);
  padding-block: var(--ea-s-xl);
  padding-inline: var(--ea-gutter);
  margin-block-start: var(--ea-section-y);
}

.site-footer a { color: var(--ea-gold); }
.footer-links, .footer-social { display: flex; flex-wrap: wrap; gap: var(--ea-s-m); margin-block: var(--ea-s-m); }
.footer-legal { color: var(--ea-muted-2); font-size: var(--ea-fs-micro); margin: 0; }
.footer-brand p { color: var(--ea-muted-2); margin: var(--ea-s-xs) 0 0; }

/* Motion is opt-out, always. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}