/* ════════════════════════════════════════════════════════════════════════════
   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.
   ════════════════════════════════════════════════════════════════════════════ */

/* The type. ONLY the two Satoshi variable faces (normal + italic, 300–900):
   mixing per-weight CFF statics with the TrueType variable under one family
   name renders accented Latin as tofu on iOS Safari (DESIGN.md rule 4). This
   block was missing until 2026-09-22 — the files were shipped on day one and
   never declared, so every page rendered in the fallback stack for a week.
   SiteTypographyTest pins the two faces and the two files. */
@font-face {
  font-family: "Satoshi";
  src: url("/fonts/satoshi/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/fonts/satoshi/Satoshi-VariableItalic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

*, *::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: 2px; }
/* Not bare text. These read as loose words rather than navigation on a phone
   (reported), so each link gets weight, a real hit area and a ground on
   hover — 44px tall including the padding, which is the tap target both
   platforms ask for. */
.site-header nav a {
  padding: 10px 12px;
  border-radius: var(--ea-r-pill);
  color: var(--ea-muted-ink);
  text-decoration: none;
  font-size: var(--ea-fs-small);
  font-weight: 600;
  transition: background var(--ea-t-fast) var(--ea-spring), color var(--ea-t-fast) var(--ea-spring);
}
.site-header nav a:hover { background: var(--ea-panel); color: var(--ea-ink); }

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

/* The second line of the headline. Green and italic, the same emphasis the
   inner pages' `.page-hero h1 em` uses — one treatment, not two. */
.hero h1 em { font-style: italic; color: var(--ea-link); }

.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;
  border-radius: 8px;
  background: var(--ea-navy);
  /* The official artwork is black. Against the dark canvas it measures
     1.00:1 — the shape vanishes and the badge reads as loose text. The
     hairline keeps it a button; on the light canvas the artwork's own edge
     does that job and the rim is all but invisible. */
  border: 1px solid var(--ea-line-on-dark);
  color: var(--ea-sand);
  line-height: 0;
  text-decoration: none;
  transition: transform var(--ea-t-fast) var(--ea-spring);
}
.badge:hover { transform: translateY(-2px); }
.badge img { display: block; height: 46px; width: auto; border-radius: 7px; }

/* Visually hidden, scoped to its own class — never a bare descendant rule. */
.badge-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.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 { padding-block: clamp(40px, 6vw, 72px) var(--ea-s-xl); }
.footer-inner { max-width: calc(var(--ea-container) - (2 * var(--ea-gutter))); margin-inline: auto; }

/* Brand block + four link columns. The brand block takes the extra width
   because it carries the most: the line, the social buttons, the app. */
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: var(--ea-s-xl);
}
/* A class, not `.footer-brand p`: that descendant selector out-ranked the
   gold eyebrow below it and turned "Coming to iOS and Android" grey. */
.footer-tagline { color: var(--ea-muted-2); margin: var(--ea-s-s) 0 0; max-width: 34ch; }

/* Gold tracked eyebrows over each column, as Yanvara's footer does. Gold on
   navy-deep is measured in DarkModeTest. */
.footer-eyebrow {
  margin: 0 0 var(--ea-s-m);
  font-size: var(--ea-fs-label);
  font-weight: 800;
  letter-spacing: var(--ea-tracking-label);
  text-transform: uppercase;
  color: var(--ea-gold);
}
.footer-brand .footer-eyebrow { margin-block-start: var(--ea-s-l); margin-block-end: var(--ea-s-s); }

/* Links are sand, and quiet: no underline at rest. The underline arrives on
   hover and focus, so it still says "this is a link" the moment it matters. */
.footer-col { display: flex; flex-direction: column; gap: var(--ea-s-s); }
.footer-col a,
.footer-legal-links a,
.footer-waitlist { color: var(--ea-sand); text-decoration: none; }
.footer-col a:hover, .footer-col a:focus-visible,
.footer-legal-links a:hover, .footer-legal-links a:focus-visible,
.footer-waitlist:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-waitlist { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }

/* Round social buttons: 44px, the tap target both platforms ask for. */
.footer-social { display: flex; gap: var(--ea-s-s); margin-block-start: var(--ea-s-l); }
.social-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ea-line-on-dark);
  color: var(--ea-sand);
  transition: border-color var(--ea-t-fast) var(--ea-spring), transform var(--ea-t-fast) var(--ea-spring);
}
.social-btn:hover { border-color: var(--ea-gold); transform: translateY(-1px); }

/* The rule and the legal line. */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ea-s-s) var(--ea-s-l);
  margin-block-start: clamp(32px, 5vw, 56px);
  padding-block-start: var(--ea-s-l);
  border-block-start: 1px solid var(--ea-line-on-dark);
}
.footer-legal { color: var(--ea-muted-2); font-size: var(--ea-fs-micro); margin: 0; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: var(--ea-s-l); font-size: var(--ea-fs-micro); }
.footer-legal-links a { color: var(--ea-muted-2); }

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

/* ════════════════════════════════════════════════════════════════════════════
   Editorial Atlas, second pass (2026-09-22): the app is the picture.
   Every screen below is a real render (public/images/app, from
   scripts/capture-app-screens.sh) inside a CSS phone. Still no colour of its
   own — every fill and every ink is a token, and DarkModeTest measures each
   pairing in both modes.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Wordmark + header CTA ────────────────────────────────────────────── */

.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ea-ink); }
.wordmark-mark { display: block; flex: none; }
/* The wordmark is an SVG of outlines sized by height; its width follows the
   viewBox. Level with the bars: the mark is 28, the word's x-height sits at
   the bars' band when the word box is ~20. */
.wordmark-text { display: block; height: 21px; width: auto; }
.site-footer .wordmark { color: var(--ea-sand); }

.site-nav { align-items: center; margin-inline-start: auto; }
.nav-cta {
  flex: none;
  padding: 9px 16px;
  border-radius: var(--ea-r-pill);
  background: var(--ea-green-2);
  color: var(--ea-on-green);
  font-weight: 800;
  transition: transform var(--ea-t-fast) var(--ea-spring);
}
.site-header nav .nav-cta { color: var(--ea-on-green); }
.nav-cta:hover { transform: translateY(-1px); color: var(--ea-on-green); }

/* ── The phone ───────────────────────────────────────────────────────── */

/* Not a handset replica: a soft dark slab with a screen in it. The slab is
   fixed navy in both modes (a phone is dark), so it carries the hairline the
   footer and badges carry, for the same reason. */
.am-phone {
  position: relative;
  width: var(--am-phone-w, clamp(200px, 24vw, 280px));
  margin: 0;
  padding: 9px;
  border-radius: 44px;
  background: var(--ea-navy);
  border: 1px solid var(--ea-line-on-dark);
  box-shadow: var(--ea-shadow-lift);
}
.am-phone img { display: block; width: 100%; height: auto; border-radius: 36px; }

/* ── Hero with the app in it ─────────────────────────────────────────── */

.hero--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ea-s-xl);
  align-items: center;
  padding-block-end: var(--ea-s-xl);
}
.hero-media {
  position: relative;
  display: grid;
  min-width: 0;
  padding-block: var(--ea-s-l);
}
.hero-media .shot--hero { width: 100%; }
.hero-proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ea-s-m);
  margin: var(--ea-s-l) 0 0;
  padding: 0;
  color: var(--ea-muted-ink);
  font-size: var(--ea-fs-small);
}
.hero-proof li { display: inline-flex; align-items: center; gap: 6px; }
.hero-proof .icon { color: var(--ea-link); }

/* ── Three screens, one story ────────────────────────────────────────── */

.strip, .pricing-teaser, .band-wrap {
  max-width: var(--ea-container);
  margin-inline: auto;
  padding-inline: var(--ea-gutter);
  padding-block: var(--ea-section-y);
}
.strip-head { max-width: 62ch; margin-block-end: var(--ea-s-xl); }
.strip-head h2, .pricing-teaser h2 {
  font-size: var(--ea-fs-h2);
  letter-spacing: var(--ea-tracking-tight);
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
.strip-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ea-s-xl);
  --am-phone-w: 100%;
}
.strip-item { margin: 0; display: grid; gap: var(--ea-s-m); justify-items: center; }
.strip-item .am-phone { max-width: 300px; }
.strip-item figcaption { color: var(--ea-muted-ink); text-align: center; max-width: 30ch; }
.strip-item figcaption strong { color: var(--ea-ink); }

/* ── Pillar cards ────────────────────────────────────────────────────── */

.pillars--cards { gap: var(--ea-s-l); }
/* At most three across. A card count that divides by three (Features has
   nine) leaves an orphan on the fourth column; this keeps the auto-fit
   behaviour below that, so a phone still gets one column. */
.pillars--three {
  grid-template-columns: repeat(auto-fit, minmax(max(260px, calc((100% - 2 * var(--ea-s-l)) / 3)), 1fr));
}
.pillar {
  padding: clamp(22px, 2.4vw, 28px);
  border-radius: var(--ea-r-xl);
  background: var(--ea-surface);
  border: 1px solid var(--ea-line);
  box-shadow: var(--ea-shadow-card);
}
.pillar h2 { font-size: 20px; }
.pillar-icon {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--ea-r-sm);
  background: var(--ea-green-soft);
  color: var(--ea-link);
  margin-block-end: var(--ea-s-m);
}

/* ── The navy band ───────────────────────────────────────────────────── */

.band {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: var(--ea-s-xl);
  align-items: center;
  max-width: calc(var(--ea-container) - (2 * var(--ea-gutter)));
  margin-inline: auto;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--ea-r-2xl);
  background: var(--ea-navy);
  border: 1px solid var(--ea-line-on-dark);
  color: var(--ea-sand);
  --am-phone-w: clamp(200px, 22vw, 260px);
}
.band h2 { font-size: var(--ea-fs-h2); letter-spacing: var(--ea-tracking-tight); line-height: 1.08; margin: 0 0 var(--ea-s-m); text-wrap: balance; }
.band p { margin: 0; max-width: 56ch; }
.band .am-phone { justify-self: center; }
.eyebrow--on-dark { color: var(--ea-gold); }
.band-link, .site-footer .band-link { display: inline-flex; align-items: center; gap: 8px; margin-block-start: var(--ea-s-l); color: var(--ea-link-on-dark); font-weight: 700; }

/* ── Plan cards ──────────────────────────────────────────────────────── */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--ea-s-l);
}
.plan {
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: var(--ea-r-xl);
  background: var(--ea-surface);
  border: 1px solid var(--ea-line);
  box-shadow: var(--ea-shadow-card);
}
.plan--pro { border-color: var(--ea-gold); box-shadow: var(--ea-shadow-gold); }
.plan-name { margin: 0 0 var(--ea-s-s); font-size: var(--ea-fs-label); font-weight: 800; letter-spacing: var(--ea-tracking-label); text-transform: uppercase; color: var(--ea-muted); }
.plan-pro-chip { display: inline-block; padding: 4px 10px; border-radius: var(--ea-r-pill); background: var(--ea-gold); color: var(--ea-on-gold); }
.plan-price { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.plan-amount { font-size: var(--ea-fs-h1); font-weight: 900; letter-spacing: var(--ea-tracking-display); color: var(--ea-ink); }
.plan-per, .plan-alt { color: var(--ea-muted-ink); }
.plan-alt { margin: var(--ea-s-xs) 0 0; font-size: var(--ea-fs-small); }
.plan-lead { margin: var(--ea-s-m) 0; color: var(--ea-ink); }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ea-s-s); color: var(--ea-muted-ink); }
.plan-list li { display: flex; gap: 10px; align-items: flex-start; }
.plan-list .icon { flex: none; margin-block-start: 2px; color: var(--ea-link); }
.plan-link { display: inline-flex; align-items: center; gap: 8px; margin-block-start: var(--ea-s-l); font-weight: 700; }

/* ── Get-the-app band ────────────────────────────────────────────────── */

.app-band {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: var(--ea-s-xl);
  align-items: center;
  max-width: calc(var(--ea-container) - (2 * var(--ea-gutter)));
  margin: var(--ea-section-y) auto 0;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--ea-r-2xl);
  background: var(--ea-navy);
  border: 1px solid var(--ea-line-on-dark);
  color: var(--ea-sand);
  --am-phone-w: clamp(200px, 22vw, 250px);
}
.app-band h2 { font-size: var(--ea-fs-h2); letter-spacing: var(--ea-tracking-tight); line-height: 1.08; margin: 0 0 var(--ea-s-m); text-wrap: balance; }
.app-band-sub { margin: 0; max-width: 52ch; }
.app-band .store-badges { margin-block-start: var(--ea-s-l); }
.app-band .badge-pending { color: var(--ea-sand); }
.app-band .am-phone { justify-self: center; }
.site-footer .store-badges { margin-block-start: var(--ea-s-m); }

/* ── Waitlist (pre-launch) ───────────────────────────────────────────── */

/* Where the store badges will stand once the listings are live. A single
   row on wide screens; the button drops under the field on a phone. The
   field is a SURFACE on whatever ground it sits on — sand in the hero, navy
   in the app band — so the same rule serves both and the ink/surface pairing
   is the one DarkModeTest already measures. */
.waitlist { margin-block-start: var(--ea-s-l); max-width: 460px; }
.waitlist-row { display: flex; gap: var(--ea-s-s); align-items: stretch; }
.waitlist-label,
.waitlist-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.waitlist-input {
  flex: 1 1 0;
  min-width: 0;
  padding: 14px 18px;
  border: 1px solid var(--ea-line-strong);
  border-radius: var(--ea-r-pill);
  background: var(--ea-surface);
  color: var(--ea-ink);
  font: inherit;
  font-size: var(--ea-fs-body);
}
.waitlist-input::placeholder { color: var(--ea-muted); }
.waitlist-input:focus-visible { outline: 2px solid var(--ea-link); outline-offset: 2px; }
.cta--form { margin-block-start: 0; border: 0; cursor: pointer; font: inherit; font-weight: 800; white-space: nowrap; }
.waitlist-note { margin: var(--ea-s-s) 0 0; font-size: var(--ea-fs-small); color: var(--ea-muted); }
.waitlist-error { margin: var(--ea-s-s) 0 0; font-size: var(--ea-fs-small); font-weight: 700; color: var(--ea-error); }
.app-band .waitlist-note { color: var(--ea-sand); }
.app-band .waitlist-error { color: var(--ea-error-on-dark); }
.app-band .waitlist-input:focus-visible { outline-color: var(--ea-link-on-dark); }

/* ── Inner pages: hero, feature rows, compare table ─────────────────── */

.page-hero {
  max-width: var(--ea-container);
  margin-inline: auto;
  padding: var(--ea-section-y) var(--ea-gutter) var(--ea-s-xl);
}
.page-hero h1 { font-size: var(--ea-fs-display); letter-spacing: var(--ea-tracking-display); line-height: 1.02; margin: var(--ea-s-s) 0 var(--ea-s-m); text-wrap: balance; max-width: 18ch; }
.page-hero h1 em { font-style: italic; color: var(--ea-link); }
.page-hero .standfirst { max-width: 58ch; }

.plans-wrap, .feature-rows, .compare-wrap {
  max-width: var(--ea-container);
  margin-inline: auto;
  padding-inline: var(--ea-gutter);
  padding-block: var(--ea-s-xl) var(--ea-section-y);
}
.plans-note { max-width: 62ch; margin: var(--ea-s-l) 0 0; color: var(--ea-muted-ink); }
/* Rows straight under a page hero: no strip-head, so the top padding goes. */
.feature-rows--first { padding-block-start: 0; }
.feature-rows--first .feature-row:first-child { border-block-start: 0; padding-block-start: var(--ea-s-m); }
.feature-row h2 { font-size: var(--ea-fs-h3); letter-spacing: var(--ea-tracking-tight); margin: var(--ea-s-s) 0; }
.page-hero .cta { margin-block-start: var(--ea-s-l); }
.page-hero + .pillars { padding-block-start: var(--ea-s-xl); }

/* Feature rows: a screen beside its copy, sides alternating. The copy leads
   the reading order in the markup whichever side it lands on, so a screen
   reader hears the claim before the picture of it. */
.feature-row {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--ea-s-xl);
  align-items: center;
  padding-block: var(--ea-s-xl);
  border-block-start: 1px solid var(--ea-line);
  --am-phone-w: clamp(220px, 24vw, 300px);
}
.feature-row .am-phone { justify-self: center; }
.feature-row:nth-child(odd) :is(.am-phone, .shot) { order: 2; }
.feature-row h3 { font-size: var(--ea-fs-h3); letter-spacing: var(--ea-tracking-tight); margin: var(--ea-s-s) 0; }
.feature-copy p { margin: 0 0 var(--ea-s-s); max-width: 54ch; color: var(--ea-ink); }
.feature-free { color: var(--ea-muted-ink); font-size: var(--ea-fs-small); }
.feature-meter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--ea-r-pill);
  background: var(--ea-green-soft);
  color: var(--ea-link);
  font-size: var(--ea-fs-label);
  font-weight: 800;
  letter-spacing: var(--ea-tracking-label);
  text-transform: uppercase;
}

/* The compare table. A surface card with hairlines; the row heading is the
   feature, the two columns the plans. */
.compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--ea-surface);
  border: 1px solid var(--ea-line);
  border-radius: var(--ea-r-xl);
  box-shadow: var(--ea-shadow-card);
  overflow: hidden;
}
.compare th, .compare td { padding: 14px 18px; text-align: left; vertical-align: middle; border-block-start: 1px solid var(--ea-line); }
.compare thead th { border-block-start: 0; font-size: var(--ea-fs-label); font-weight: 800; letter-spacing: var(--ea-tracking-label); text-transform: uppercase; color: var(--ea-muted); }
.compare tbody th { font-weight: 600; color: var(--ea-ink); width: 46%; }
.compare td { color: var(--ea-muted-ink); }
.compare td.tick { color: var(--ea-link); }
.compare td.no { color: var(--ea-muted); }
.compare-price td, .compare-price th { font-weight: 800; color: var(--ea-ink); background: var(--ea-panel); }

/* ── Third pass: 3-D icons, screenshot panels, the rotating hero ─────── */

/* The rendered soft-3D icons (public/images/icons-3d). Fixed-colour artwork,
   like a photograph; they sit on tiles that DO remap. */
.icon-3d { display: block; width: 64px; height: 64px; margin-block-end: var(--ea-s-m); }
.icon-3d--lead { width: 72px; height: 72px; }
.pillar .icon-3d { width: 60px; height: 60px; }

/* A screenshot panel: a tinted rounded ground behind a phone. The phone can
   bleed off the bottom edge (--bleed) so the panel reads as a window onto the
   app rather than a phone floating on the page. Tints are tokens that remap
   in dark mode; navy is fixed and carries its hairline. */
.shot {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(22px, 3vw, 40px);
  border-radius: var(--ea-r-2xl);
  overflow: hidden;
  isolation: isolate;
}
.shot--green { background: var(--ea-green-soft); }
.shot--sand { background: var(--ea-panel); border: 1px solid var(--ea-line); }
.shot--navy { background: var(--ea-navy); border: 1px solid var(--ea-line-on-dark); }
.shot--bleed { padding-block-end: 0; align-items: end; }
.shot--bleed .am-phone { margin-block-end: -22%; }
.shot .am-phone { box-shadow: var(--ea-shadow-lift); }

/* The hero fan: three phones, the middle one leading. */
.shot--hero { min-height: 540px; padding: 44px 0 0; --am-phone-w: clamp(200px, 19vw, 250px); align-items: end; }
.shot--hero .am-phone { margin-block-end: -14%; }
.am-phone--front { position: relative; z-index: 2; }
.am-phone--fan-l, .am-phone--fan-r {
  position: absolute !important;
  /* An absolutely positioned child of a grid sits at its STATIC position,
     i.e. the container's start, not the centre place-items promised — so it
     is centred by hand before the fan translate. */
  left: 50%;
  margin-inline-start: calc(var(--am-phone-w) / -2);
  bottom: -12%;
  z-index: 1 !important;
  transform: translateX(-52%) scale(.8) rotate(-8deg);
  transform-origin: bottom center;
}
.am-phone--fan-r { transform: translateX(52%) scale(.8) rotate(8deg); }


/* ── Section grounds ─────────────────────────────────────────────────── */

/* The whole site was one colour top to bottom (reported). A wash is a
   full-width ground behind a section that keeps its own max-width and
   gutters, so the colour runs edge to edge while the content stays in the
   column. Both tokens remap for dark mode, which is why the wash is a token
   and not a tint. */
.wash { width: 100%; }
.wash--green { background: var(--ea-green-soft); }
/* Reserved for a page whose section above it is already tinted. It is two
   points off the canvas, so it separates sections rather than colouring
   one — never reach for it to make a section look different. */
.wash--panel { background: var(--ea-panel); }
/* The FAQ partial always emits a wash so the markup is one shape; `none` is
   the canvas, and a canvas wash must not draw the divider below. */
.wash--none { background: transparent; }
.wash--none + .wash, .wash + .wash--none { border-block-start: 0; }
/* The eyebrow steps up on a wash. --ea-muted is 4.24:1 on green-soft — under
   AA, measured — so secondary copy on a tinted ground takes the darker of the
   two muted tokens. Same reason the panel note further up gives. */
.wash .eyebrow { color: var(--ea-muted-ink); }
/* A wash meeting the canvas needs no line; two washes meeting each other do. */
.wash + .wash { border-block-start: 1px solid var(--ea-line); }

/* Use-case cards. */
.uses, .showcase {
  max-width: var(--ea-container);
  margin-inline: auto;
  padding-inline: var(--ea-gutter);
  padding-block: var(--ea-section-y);
}
.uses-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ea-s-l); }
.use {
  display: block;
  padding: clamp(22px, 2.4vw, 28px);
  border-radius: var(--ea-r-xl);
  background: var(--ea-surface);
  border: 1px solid var(--ea-line);
  box-shadow: var(--ea-shadow-card);
  color: inherit;
  text-decoration: none;
  transition: transform var(--ea-t-fast) var(--ea-spring), box-shadow var(--ea-t-fast) var(--ea-spring);
}
.use:hover { transform: translateY(-3px); box-shadow: var(--ea-shadow-float); }
.use h3 { margin: 0 0 var(--ea-s-xs); font-size: var(--ea-fs-title); color: var(--ea-ink); }
.use p { margin: 0; color: var(--ea-muted-ink); font-size: var(--ea-fs-small); }

/* Links between the comparison pages: quiet surface pills, ink on surface —
   a pair DarkModeTest already measures. */
.compare-more {
  max-width: var(--ea-container);
  margin-inline: auto;
  padding-inline: var(--ea-gutter);
  padding-block: 0 var(--ea-section-y);
}
.compare-more-row { display: flex; flex-wrap: wrap; gap: var(--ea-s-s); margin-block-start: var(--ea-s-s); }
.compare-more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--ea-r-pill);
  background: var(--ea-surface);
  border: 1px solid var(--ea-line);
  color: var(--ea-ink);
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--ea-t-fast) var(--ea-spring), border-color var(--ea-t-fast) var(--ea-spring);
}
.compare-more-link:hover, .compare-more-link:focus-visible { border-color: var(--ea-line-strong); transform: translateY(-1px); }

.showcase { padding-block-start: 0; }
.showcase .feature-row:first-child { border-block-start: 0; }
.feature-row .shot { width: 100%; max-width: 460px; justify-self: center; --am-phone-w: clamp(210px, 22vw, 280px); }
.feature-link { display: inline-flex; align-items: center; gap: 8px; margin-block-start: var(--ea-s-s); font-weight: 700; }
.band .icon-3d--lead { margin-block-end: var(--ea-s-s); }
.plan-list--plain li { padding-inline-start: var(--ea-s-m); border-inline-start: 2px solid var(--ea-line-strong); }

/* FAQ. Native <details>, styled as cards, so it works with no script. */
.faq {
  max-width: var(--ea-container);
  margin-inline: auto;
  padding-inline: var(--ea-gutter);
  /* Top padding too. It was zero, which put the eyebrow against the edge of
     a green wash and flush under the honest card before it. */
  padding-block: var(--ea-section-y);
}
.faq-list { display: grid; gap: var(--ea-s-s); max-width: 820px; }
.faq-item {
  border-radius: var(--ea-r-lg);
  background: var(--ea-surface);
  border: 1px solid var(--ea-line);
  padding: 0 var(--ea-s-l);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--ea-s-m) 0;
  font-weight: 700;
  color: var(--ea-ink);
  display: flex;
  justify-content: space-between;
  gap: var(--ea-s-m);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--ea-link); font-weight: 800; flex: none; }
.faq-item[open] summary::after { content: '–'; }
.faq-item p { margin: 0 0 var(--ea-s-m); color: var(--ea-muted-ink); max-width: 68ch; }

/* ── Phones ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  /* Logo and CTA share the first row; the links take a full row beneath. */
  .site-header { row-gap: var(--ea-s-s); }
  .site-nav { order: 3; flex-basis: 100%; margin-inline-start: 0; }
  .nav-cta { order: 2; }
  /* The hero fan on a phone: two phones, not three. */
  .shot--hero { min-height: 0; padding-block-start: 28px; --am-phone-w: clamp(180px, 52vw, 230px); }
  .am-phone--fan-l { display: none; }
  .am-phone--fan-r { transform: translateX(46%) scale(.8) rotate(8deg); }
}

@media (max-width: 1100px) and (min-width: 881px) {
  /* Five columns crowd below 1100px: the brand takes its own row and the
     four link columns share the next. */
  .footer-top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 880px) {
  /* minmax(0, 1fr), never a bare 1fr: 1fr means minmax(auto, 1fr), and the
     auto minimum lets a wide child (the four-item proof row) push the column
     past the viewport. */
  .hero--split, .band, .app-band { grid-template-columns: minmax(0, 1fr); }
  .hero-media { order: 2; --am-phone-w: clamp(200px, 56vw, 260px); }
  .strip-row { grid-template-columns: 1fr; --am-phone-w: clamp(200px, 60vw, 260px); }
  .band .am-phone, .app-band .am-phone { --am-phone-w: clamp(200px, 56vw, 240px); }
  .waitlist-row { flex-direction: column; }
  .cta--form { width: 100%; }
  .feature-row { grid-template-columns: minmax(0, 1fr); --am-phone-w: clamp(200px, 56vw, 260px); }
  .feature-row .shot { --am-phone-w: clamp(200px, 56vw, 260px); }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ea-s-xl) var(--ea-s-l); }
  .footer-brand { grid-column: 1 / -1; }
  .feature-row:nth-child(odd) .am-phone, .feature-row:nth-child(odd) .shot { order: 0; }
  .compare th, .compare td { padding: 10px 10px; font-size: var(--ea-fs-small); }
  .compare tbody th { width: auto; }
}