/* ==========================================================================
   GreenAnalytix — final production candidate, 2026-08-16
   Composition: Google Stitch "greenanalytix_ai_waste_intelligence_v3_final_brand"
                desktop export, rebuilt in plain CSS (no Tailwind, no CDN).
   Palette + type tokens: landing/design/palette-ab-2026-08-16/styles.css (.v-a),
                the block Safwan chose in the A/B. Colors are copied verbatim.
   Removed vs the export: gradient-mesh blobs, glassmorphism (backdrop-blur,
                translucent cards), Material Symbols, Google Fonts, remote images.
   ========================================================================== */

/* ---------- self-hosted fonts ---------- */
@font-face { font-family: "Inter"; src: url("assets/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- tokens (palette A, verbatim) ---------- */
:root {
  --font-sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);

  /* type: A's label tracking/weight kept; display weight/tracking set one step
     tighter than A's UI-scale values so the 68px Stitch display size reads as
     display type rather than oversized body type. */
  --wt-display: 700;
  --ls-display: -0.028em;
  --ls-label: 0.08em;
  --label-wt: 600;

  --primary: #09B96E;
  --deep: #067A48;
  --tint: #E1F8EB;

  --page: #F5F5F5;
  --card: #FFFFFF;
  --border: #E5E5E5;
  --border-strong: #E5E5E5;
  --fill-subtle: #F5F5F5;

  --ink: #1A1A1A;
  --body: #333333;
  --muted: #666666;

  --link: #067A48;

  --btn-bg: #09B96E;          /* ink on primary green — the compliant pairing */
  --btn-fg: #1A1A1A;
  --btn-border: #09B96E;

  --stat-fg: #067A48;
  --eyebrow-fg: #067A48;

  --amber: #F2CC4D;

  --shell: 1440px;
  --gutter: 80px;
  --radius-card: 28px;
  --radius-band: 40px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-lift: 0 18px 40px rgba(9, 185, 110, 0.10);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-family: var(--font-display); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--link); }
svg { width: 100%; height: 100%; display: block; }

:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #FFFFFF; padding: 12px 20px; border-radius: 0 0 8px 0;
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { left: 0; }

.accent { color: var(--primary); }   /* large display type only */

/* ==========================================================================
   HEADER
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--card);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.nav.is-stuck { border-bottom-color: var(--border); box-shadow: 0 1px 8px rgba(26, 26, 26, 0.04); }
.nav__inner {
  max-width: var(--shell); margin: 0 auto;
  height: 80px; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 40px;
}
.nav__brand { display: block; line-height: 0; flex: none; }
.nav__brand img { width: 188px; height: auto; }
.nav__links { display: flex; align-items: center; gap: 36px; margin-left: auto; }
.nav__links a {
  color: var(--body); text-decoration: none;
  font-size: 14.5px; font-weight: 500; letter-spacing: -0.005em;
  padding: 10px 0; transition: color 160ms ease;
}
.nav__links a:hover { color: var(--deep); }
.nav__links a[aria-current="page"] { color: var(--deep); font-weight: 600; }
.nav__actions { display: flex; align-items: center; gap: 12px; }

.nav__toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  cursor: pointer; position: relative;
}
.nav__bars, .nav__bars::before, .nav__bars::after {
  position: absolute; left: 50%; width: 18px; height: 2px; margin-left: -9px;
  background: var(--ink); border-radius: 2px; content: "";
}
.nav__bars { top: 21px; }
.nav__bars::before { top: -6px; left: 0; margin-left: 0; }
.nav__bars::after { top: 6px; left: 0; margin-left: 0; }
.nav.is-open .nav__bars { background: transparent; }
.nav.is-open .nav__bars::before { top: 0; transform: rotate(45deg); }
.nav.is-open .nav__bars::after { top: 0; transform: rotate(-45deg); }

.nav__mobile {
  display: none; flex-direction: column; gap: 4px;
  padding: 12px 20px 24px; background: var(--card); border-top: 1px solid var(--border);
}
.nav__mobile a {
  color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 500;
  padding: 14px 4px; border-bottom: 1px solid var(--border);
}
.nav__mobile .btn { margin-top: 16px; border-bottom: 0; }

/* ==========================================================================
   BUTTONS + FORM CONTROLS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 30px; border: 1px solid transparent; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.btn--sm { height: 44px; padding: 0 24px; font-size: 14.5px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-border); }
.btn--primary:hover { background: var(--deep); color: #FFFFFF; border-color: var(--deep); transform: translateY(-1px); }
.btn[disabled] { opacity: 0.6; cursor: default; transform: none; }

.field {
  width: 100%; height: 52px;
  padding: 0 20px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: 15px;
  appearance: none; -webkit-appearance: none;
  text-overflow: ellipsis;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field::placeholder { color: var(--muted); opacity: 1; }
.field:hover { border-color: #D0D0D0; }
.field:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(9, 185, 110, 0.22); }
.field:focus-visible { outline: 3px solid var(--deep); outline-offset: 1px; }
.field.has-error { border-color: #BA1A1A; }
select.field { padding-right: 40px; cursor: pointer; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: 20px; top: 22px; width: 7px; height: 7px;
  border-right: 1.7px solid var(--muted); border-bottom: 1.7px solid var(--muted);
  transform: rotate(45deg); pointer-events: none;
}
.field__error {
  display: flex; align-items: center; gap: 6px;
  margin: 7px 0 0 20px; font-size: 13px; color: #BA1A1A;
}
[hidden] { display: none !important; }
.field__errorIcon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex: none; border-radius: 999px;
  background: #BA1A1A; color: #FFFFFF; font-size: 11px; font-weight: 700;
}

.waitlist { max-width: 520px; }
.waitlist__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.waitlist__cell { min-width: 0; }
.waitlist__cell--wide { grid-column: 1 / -1; }
.waitlist__note { margin-top: 14px; font-size: 13px; color: var(--muted); }
.waitlist__note a { color: var(--link); }
.waitlist__formError, .waitlist__success {
  margin-top: 12px; font-size: 14px; font-weight: 600;
  padding: 12px 18px; border-radius: 14px;
}
.waitlist__formError { color: #BA1A1A; background: #FFDAD6; }
.waitlist__success { color: var(--deep); background: var(--tint); }
.waitlist.is-done .waitlist__grid, .waitlist.is-done .waitlist__note { display: none; }

/* ---------- hero variant: Stitch's CONTROL STYLE on our three required fields ----------
   Stitch's hero control is `px-6 py-4 rounded-full bg-white border-outline-variant/40
   focus:border-primary focus:ring-1`. We keep all three waitlist fields (email,
   country, role) and restyle them to that language: 56px pill, 24px inner padding,
   1px #CCCCCC-at-40% hairline, primary border + 1px ring on focus. Rows: email →
   country + role → button, inside the shared .waitlist__grid so hero and footer
   forms stay structurally identical. */
.waitlist--hero { max-width: 520px; }
.waitlist--hero .waitlist__grid { gap: 14px; }
.waitlist--hero .field {
  height: 56px; padding: 0 24px; font-size: 15.5px;
  border-color: rgba(204, 204, 204, 0.55);
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04);
}
.waitlist--hero select.field { padding-right: 44px; }
.waitlist--hero .field:hover { border-color: rgba(204, 204, 204, 0.9); }
.waitlist--hero .field:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.waitlist--hero .select-wrap::after { top: 24px; right: 24px; }
.waitlist--hero .waitlist__cta { height: 56px; padding: 0 32px; }
.waitlist--hero .field__error { margin-left: 24px; }

/* ==========================================================================
   SHARED SECTION FURNITURE
   ========================================================================== */
.section {
  padding: 72px var(--gutter);
  scroll-margin-top: 88px;
}
.section > * { max-width: var(--shell); margin-left: auto; margin-right: auto; }
.agents, .proof { background: var(--card); }
.compliance, .faqsection { background: var(--page); }

.section__head { max-width: 820px; margin: 0 auto 32px; text-align: center; }
.section__head--left { max-width: 860px; margin: 0 0 32px; text-align: left; }
.section__head h2 {
  font-size: 40px; line-height: 1.15;
  font-weight: var(--wt-display); letter-spacing: var(--ls-display);
}
.section__sub { margin-top: 12px; font-size: 16.5px; line-height: 1.6; color: var(--body); }

.eyebrow {
  margin: 0 0 10px;
  font-size: 12px; font-weight: var(--label-wt); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--eyebrow-fg);
}
.eyebrow--pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px; border-radius: var(--radius-pill);
  background: var(--tint); color: var(--deep); border: 1px solid rgba(6, 122, 72, 0.18);
}
.eyebrow__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--primary); flex: none; }
/* Stitch's `auto_awesome` sparkle, redrawn inline so the page makes no icon-font request. */
.eyebrow__icon { width: 14px; height: 14px; flex: none; color: var(--deep); }

.rule { height: 1px; margin: 0; border: 0; background: var(--border); }

/* The in-section source strip was moved to the footer (#sources) on 2026-08-17 —
   see .fsources in the FOOTER block. */

/* ==========================================================================
   1. HERO
   ========================================================================== */
/* Composition follows the Stitch hero's DESIGN LANGUAGE: 50/50 columns with a
   96px gap, 96px section top padding, vertically centred; eyebrow pill → display
   h1 (second line in primary green) → single-paragraph sub → pill-control waitlist
   form (our three required fields), and a tilted image carrying one floating stat
   chip on its top-right corner. Page background is ours — no gradient blobs. */
.hero {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 48px var(--gutter) 56px;
  scroll-margin-top: 88px;
}
.hero__inner {
  --hero-gap: 96px;
  max-width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--hero-gap); align-items: start;
}
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero .eyebrow--pill { margin-bottom: 24px; }
.hero h1 {
  margin: 0 0 24px;
  font-size: clamp(34px, 3.75vw, 54px); line-height: 1.1;
  font-weight: var(--wt-display); letter-spacing: -0.03em;
}
.hero h1 .accent { color: var(--primary); }   /* 50px display type — the pack allows #09B96E at this size */
/* The 50/50 grid puts the copy column at 592px at 1440; the two display lines
   render ~640px, so — exactly as in the Stitch export, where the h1 runs over
   the column gutter — size the h1 to its longest line and let it spill into the
   gap, capped 16px short of the image column so the two never collide. */
@media (min-width: 1024px) {
  .hero h1 { width: max-content; max-width: calc(100% + var(--hero-gap) - 16px); }
}
/* Stitch's `text-body-lg max-w-xl` — 18px/1.6 on a 576px measure (32em). */
.hero__sub {
  max-width: 576px; margin-bottom: 36px;
  font-size: 18px; line-height: 1.6; color: var(--body);
}

/* ---------- hero art: static, no 3D tilt (owner call — the image sits flat) ---------- */
.hero__art { position: relative; margin-top: 24px; }
.hero__tilt {
  position: relative;
}
.hero__tilt::before {                       /* soft green ground-glow behind the board */
  content: ""; position: absolute; inset: 8% 4% -6% 6%;
  background: radial-gradient(60% 60% at 40% 50%, rgba(9, 185, 110, 0.18), rgba(9, 185, 110, 0) 70%);
  filter: blur(36px); transform: translateZ(-40px); z-index: 0;
}
.hero__art img {
  position: relative; z-index: 1;
  width: 100%; border-radius: 16px;          /* Stitch rounded-2xl */
  box-shadow: 0 20px 40px rgba(9, 185, 110, 0.08), 0 2px 8px rgba(26, 26, 26, 0.05);
}

/* ---------- the single floating stat chip ---------- */
/* Stitch's `-top-6 -right-6 p-4 bg-surface-glass backdrop-blur-xl rounded-2xl shadow-xl`. */
.hero__chip {
  position: absolute; top: -24px; right: -24px; z-index: 2;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px 16px 16px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid rgba(26, 26, 26, 0.07); border-radius: 16px;
  box-shadow: 0 16px 34px rgba(26, 26, 26, 0.10);
}
/* Icon is ink on primary green (7.4:1) — Stitch's white-on-green is 2.2:1 and fails. */
.hero__chipIcon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: 999px;
  background: var(--primary); color: var(--ink);
}
.hero__chipIcon svg { width: 23px; height: 23px; }
.hero__chipText { display: block; }
.hero__chipHead { display: flex; align-items: center; }
/* Label and the confidentiality tag share one line so the chip keeps the
   two-line height of the Stitch original. */
.hero__chipLabel {
  font-size: 11px; font-weight: var(--label-wt);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted);
}
.hero__chipValue {
  display: block; margin-top: 3px;
  font-size: 19px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.hero__chipTag {
  margin-left: 7px; padding: 2px 6px; border-radius: 5px;
  background: var(--fill-subtle); color: var(--muted);
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
}

/* Chip is static — positioned, no float-in, no motion (owner call). */

/* ---------- compact stats row (image column only, above the marquee) ----------
   Three equal columns with hairline dividers — no card/tint background, just
   figures. Same width as the image column (it's a direct child of
   .hero__art). No year-range stat here. */
.hero__stats {
  margin-top: 22px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hero__stat {
  padding: 10px 18px; text-align: center;
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.hero__stat:first-child { padding-left: 0; }
.hero__stat:last-child { padding-right: 0; }
.hero__stat:not(:first-child) { border-left: 1px solid var(--border); }
.hero__statValue {
  font-size: 27px; line-height: 1.15;
  font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hero__statLabel {
  font-size: 11px; font-weight: var(--label-wt);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted);
}

/* ---------- standards marquee ----------
   Sits under the hero IMAGE only — last child of .hero__art, a sibling of
   .hero__tilt (so it sits outside the image's 3D tilt transform) and never
   spans under the copy column. Four text wordmarks only — no third-party
   logo marks, no label — doubled so the loop is seamless and faded at both
   edges. THE ONE PERMITTED INFINITE ANIMATION ON THIS PAGE: purely
   decorative, pauses on hover/focus, and is fully static under
   prefers-reduced-motion (every other animation on this page runs once). */
.marquee {
  margin-top: 14px;                    /* 14px below .hero__stats — see above */
  height: 48px;
  display: flex; align-items: center;
}
.marquee__viewport {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex; width: max-content; align-items: center;
  animation: marqueeScroll 46s linear infinite;
}
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__seq { display: flex; align-items: center; flex: none; }
.marquee__item {
  display: inline-flex; align-items: center; flex: none;
  font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--muted);                /* #666 on white — 5.7:1, passes AA body text */
}
.marquee__sep { flex: none; margin: 0 18px; font-size: 12px; color: var(--muted); opacity: 0.5; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ==========================================================================
   2. AGENTS
   ========================================================================== */
/* One row of five equal cards — the whole pipeline lands in a single viewport. */
.agents__row { display: grid; gap: 20px; max-width: 1280px; margin: 0 auto; }
.agents__row--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.card {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px 20px 26px;
  box-shadow: var(--shadow-card);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: rgba(9, 185, 110, 0.35); }
.card__icon {
  display: block; width: 62px; height: 62px; padding: 16px; margin-bottom: 26px;
  border-radius: 18px; background: var(--tint); color: var(--deep);
}
.card__icon--sm { width: 44px; height: 44px; padding: 11px; margin-bottom: 14px; border-radius: 13px; }
.card h3 {
  margin-bottom: 8px;
  font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -0.012em;
  color: var(--ink);
}
.card p { font-size: 14.5px; line-height: 1.5; color: var(--body); }
.ticks {
  margin-top: auto; padding-top: 16px;
  display: flex; flex-direction: column; gap: 7px;
  border-top: 1px solid var(--border);
}
.ticks li {
  position: relative; padding-left: 25px;
  font-size: 12.5px; line-height: 1.45; font-weight: 500; color: var(--muted);
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 18px; height: 18px; border-radius: 999px; background: var(--tint);
}
.ticks li::after {
  content: ""; position: absolute; left: 5.5px; top: 6px;
  width: 7px; height: 3.5px; border-left: 2px solid var(--deep); border-bottom: 2px solid var(--deep);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   3a. STEP CARDS — each carries a miniature of the real product UI doing that
   step. The mocks are HTML/CSS fragments, not images, so they stay crisp and
   theme-true at any size. All values in them are ILLUSTRATIVE (tagged once on
   the section head, not on every card).
   -------------------------------------------------------------------------- */
.agents__tag {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 14px auto 0; padding: 5px 13px;
  border-radius: var(--radius-pill);
  background: var(--fill-subtle); border: 1px solid var(--border);
  font-size: 11.5px; font-weight: 500; color: var(--muted);
}
.agents__tagDot { flex: none; width: 6px; height: 6px; border-radius: 999px; background: var(--amber); }

.agent { position: relative; padding: 14px 14px 20px; }
.agent__step {
  margin: 15px 0 4px;
  font-size: 11px; font-weight: var(--label-wt); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--deep);
}
.agent h3 { margin-bottom: 6px; font-size: 16.5px; }
.agent > p:not(.agent__step) { font-size: 13.5px; line-height: 1.5; color: var(--body); }

/* pipeline connector — hairline + node in the gap, level with the mock centre */
.agent:not(:last-child)::after {
  content: ""; position: absolute; top: 111px; right: -20px;
  width: 20px; height: 1px; background: var(--border);
  transition: transform 220ms ease;
}
.agent:not(:last-child)::before {
  content: ""; position: absolute; top: 105.5px; right: -13.5px; z-index: 1;
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--card); border: 1.5px solid var(--primary);
  transition: transform 220ms ease;
}
.agent:hover::before, .agent:hover::after { transform: translateY(4px); }
/* .reveal.is-in resets transform after the reveal, so the hover lift has to outrank it */
.agent.is-in:hover { transform: translateY(-4px); }

/* ---------- shared mini-UI shell ---------- */
.umock {
  position: relative;
  height: 194px; padding: 12px;
  display: flex; flex-direction: column; gap: 7px;
  border: 1px solid var(--border); border-radius: 14px;
  background: #FBFBFB;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.umock__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.umock__title {
  min-width: 0;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.umock__chip {
  flex: none; padding: 2px 7px; border-radius: var(--radius-pill);
  background: var(--tint); color: var(--deep);
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap;
}

/* ---------- 1 · intake ---------- */
.umock__drop {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 9px; border-radius: 10px;
  border: 1px dashed rgba(6, 122, 72, 0.35);
  background: rgba(225, 248, 235, 0.55);
  color: var(--deep); font-size: 9.5px; font-weight: 500;
}
.umock__drop svg { width: 13px; height: 13px; flex: none; }
.umock__files { display: flex; flex-direction: column; gap: 5px; }
.umock__files li {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 4px 7px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--border);
}
.umock__ficon {
  flex: none; position: relative; width: 9px; height: 11px;
  border-radius: 2px 4px 2px 2px;
  background: #E4E4E4;
}
.umock__ficon::after {
  content: ""; position: absolute; right: 0; top: 0;
  border-top: 4px solid #FBFBFB; border-left: 4px solid transparent;
}
.umock__fname {
  flex: 1 1 0; min-width: 0;
  font-size: 9.5px; font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.umock__pct { flex: none; font-size: 8.5px; font-weight: 600; color: var(--muted); }
.umock__tick { flex: none; position: relative; width: 12px; height: 12px; border-radius: 999px; background: var(--tint); }
.umock__tick::after {
  content: ""; position: absolute; left: 3.4px; top: 3.6px;
  width: 5px; height: 2.4px;
  border-left: 1.6px solid var(--deep); border-bottom: 1.6px solid var(--deep);
  transform: rotate(-45deg);
}
.umock__prog { flex: 1 0 100%; height: 3px; border-radius: 999px; background: var(--fill-subtle); overflow: hidden; }
.umock__prog i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.umock__cursor {
  position: absolute; right: 11px; bottom: 11px;
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: var(--radius-pill);
  background: var(--primary); color: var(--ink);
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.03em;
  box-shadow: 0 4px 12px rgba(9, 185, 110, 0.30);
}
.umock__cursor::before {
  content: ""; position: absolute; left: -4px; top: -5px;
  width: 0; height: 0;
  border-left: 8px solid var(--ink);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transform: rotate(38deg);
}

/* ---------- 2 · audit baseline ---------- */
.umock__kpis { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.umock__kpis > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 4px 8px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--border);
}
.umock__kpis dt { font-size: 9px; color: var(--muted); white-space: nowrap; }
.umock__kpis dd { margin: 0; font-size: 10.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.umock__bench { margin-top: auto; }
.umock__benchTop { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 5px; }
.umock__benchTop span {
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted);
}
.umock__benchTop b { font-size: 9.5px; font-weight: 700; color: var(--deep); white-space: nowrap; }
.umock__track { position: relative; height: 8px; border-radius: 999px; background: #ECECEC; }
.umock__track > i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.umock__mark { position: absolute; top: 0; right: 0; width: 2px; height: 100%; border-radius: 2px; background: var(--ink); }
.umock__benchFoot { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 8px; color: var(--muted); }

/* ---------- 3 · findings, one chip per pillar ---------- */
.umock__pillars { display: flex; flex-direction: column; gap: 5px; }
.umock__pillars li {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  padding: 4px 9px; border-radius: var(--radius-pill);
}
.umock__dot { flex: none; width: 6px; height: 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.14); }
.umock__pname { flex: none; font-size: 9px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.umock__pstub {
  flex: 1 1 auto; min-width: 0; text-align: right;
  font-size: 8.5px; color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p--infra, .p--ops { background: #F0F0F0; }
.p--infra .umock__dot, .p--ops .umock__dot { background: #8A8A8A; }
.p--vendor { background: #E9F1FA; }
.p--vendor .umock__dot { background: #2F6DB5; }
.p--behave { background: var(--tint); }
.p--behave .umock__dot { background: var(--primary); }
.p--data { background: #FBF2D8; }
.p--data .umock__dot { background: var(--amber); }

/* ---------- 4 · strategy measures ---------- */
.umock__measures { display: flex; flex-direction: column; gap: 6px; }
.umock__measures li {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 6px 8px; border-radius: 9px;
  background: var(--card); border: 1px solid var(--border);
}
.umock__mname { font-size: 9.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.umock__mrow { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.umock__mrow b { font-size: 9px; font-weight: 700; color: var(--deep); white-space: nowrap; }
.umock__pill {
  flex: none; padding: 2px 7px; border-radius: var(--radius-pill);
  font-size: 8px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
  color: var(--ink);                    /* ink on amber / green — the compliant pairing */
}
.umock__pill--due { background: var(--amber); }
.umock__pill--ok { background: var(--primary); }
.umock__foot {
  margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding-top: 7px; border-top: 1px solid var(--border);
  font-size: 9px; color: var(--muted);
}
.umock__foot b { font-size: 11.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.umock__foot sub { font-size: 7px; }

/* ---------- 5 · roadmap phases ---------- */
.umock__phases { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; justify-content: space-evenly; }
.umock__phases li { display: flex; align-items: center; gap: 8px; }
.umock__pl { flex: none; width: 40px; font-size: 8.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.umock__pbar { position: relative; flex: 1 1 auto; min-width: 0; height: 10px; border-radius: 999px; background: #ECECEC; }
.umock__pbar > i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.umock__pbar--2 > i { background: #5ED3A0; }
.umock__pbar--3 > i { background: #A9E7C9; }
.umock__pbar em {
  position: absolute; top: 3px; width: 4px; height: 4px; border-radius: 999px;
  background: rgba(26, 26, 26, 0.55); transform: translateX(-50%);
}
.umock__axis {
  display: flex; justify-content: space-between; gap: 6px;
  margin-left: 48px; padding-top: 5px; border-top: 1px solid var(--border);
  font-size: 7.5px; letter-spacing: 0.04em; color: var(--muted);
}
.umock__stamp {
  margin-top: auto; align-self: flex-end;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 5px; border-radius: var(--radius-pill);
  background: var(--tint); color: var(--deep);
  border: 1px solid rgba(6, 122, 72, 0.28);
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
}
.umock__stampTick { position: relative; flex: none; width: 12px; height: 12px; border-radius: 999px; background: var(--primary); }
.umock__stampTick::after {
  content: ""; position: absolute; left: 3.4px; top: 3.6px;
  width: 5px; height: 2.4px;
  border-left: 1.6px solid var(--ink); border-bottom: 1.6px solid var(--ink);
  transform: rotate(-45deg);
}

/* Between 1280 and ~1400 the five-across row squeezes each card to ~208px:
   step the mini-UI type down one notch there so nothing has to truncate. */
@media (min-width: 1280px) and (max-width: 1399px) {
  .umock { padding: 10px; gap: 6px; }
  .umock__title { font-size: 8.5px; letter-spacing: 0.05em; }
  .umock__chip { font-size: 8px; padding: 2px 5px; }
  .umock__drop { font-size: 9px; padding: 6px 8px; }
  .umock__files li, .umock__measures li { padding: 4px 6px; }
  .umock__fname, .umock__mname { font-size: 9px; }
  .umock__kpis dt { font-size: 8.5px; }
  .umock__kpis dd { font-size: 10px; }
  .umock__pillars li { padding: 4px 7px; }
  .umock__pname { font-size: 8.5px; }
  .umock__pstub { font-size: 8px; }
  .umock__stamp { font-size: 8px; }
}

/* ---------- one entrance beat per mock, tied to the card's scroll reveal ---------- */
.umock__grow {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 360ms cubic-bezier(0.2, 0.7, 0.3, 1) 90ms;
}
.card.is-in .umock__grow { transform: scaleX(1); }
.umock__pop {
  opacity: 0; transform: scale(0.82);
  transition: opacity 260ms ease var(--d, 0ms), transform 260ms cubic-bezier(0.2, 0.8, 0.3, 1) var(--d, 0ms);
}
.card.is-in .umock__pop { opacity: 1; transform: none; }

/* ==========================================================================
   3. COMPLIANCE — light / white-first (owner ruling 2026-08-17)
   ==========================================================================
   The dark band was retired: the page is white-first end to end. Rhythm now
   runs white (#how) → grey #F5F5F5 (#compliance) → white (#proof), so the
   section still separates from its neighbours without a dark surface.
   Copy column carries more text than the panel, so it gets the wider track. */
.compliance { padding: 56px var(--gutter) 40px; background: var(--page); }
.band {
  max-width: 1280px; margin: 0 auto;
  background: var(--card); color: var(--body);
  border: 1px solid var(--border); box-shadow: var(--shadow-card);
  border-radius: var(--radius-band); overflow: hidden;
  display: grid; grid-template-columns: 1.35fr 1fr;
}
.band__copy {
  padding: 40px 44px 44px;
  display: flex; flex-direction: column; justify-content: center;
}
.band__copy > .btn { align-self: flex-start; }
.band__copy h2 {
  margin-bottom: 14px;
  font-size: 32px; line-height: 1.18;
  font-weight: var(--wt-display); letter-spacing: var(--ls-display);
  color: var(--ink);
}
.band__lead { max-width: 740px; font-size: 15.5px; line-height: 1.55; color: var(--body); }
.band__list { margin: 18px 0 0; display: flex; flex-direction: column; gap: 12px; }
.band__list li { display: flex; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--body); }
.band__list b { color: var(--ink); font-weight: 600; }
/* Icons are UI graphics (≥3:1 needed) — deep green, not primary, on white. */
.band__icon { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--deep); }
.band__copy .btn { height: 48px; margin-top: 22px; }
/* Panel column stays white so the band reads as ONE card against the grey
   section; the hairline divider carries the split, the tint blocks carry the
   colour. (A grey panel column merged into the page behind it.) */
.band__panel {
  padding: 32px 40px;
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

/* White card on the white band — the border plus a 1px lift gives it edge. */
.mock--panel {
  width: 100%; max-width: 400px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 22px; padding: 20px;
  box-shadow: 0 2px 10px rgba(26, 26, 26, 0.05);
}
.mock__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.mock__title { font-size: 14px; font-weight: 600; color: var(--ink); }
.mock__tag {
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 6px; background: var(--tint); color: var(--deep); white-space: nowrap;
}
/* The numbered DET requirement gauge was removed on 2026-08-17: a count implied
   requirement-level coverage the product does not claim. The list below carries
   statuses only, and no count. */
.mock__rows--lead li:first-child { border-top: 0; }
.mock__rows li {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-top: 1px solid var(--border);
  font-size: 13.5px; color: var(--body);
}
/* Status chips: fill carries the state, ink/deep text carries the contrast. */
.mock__rows b {
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.mock__rows .ok { background: var(--tint); color: var(--deep); }
.mock__rows .warn { background: var(--amber); color: var(--ink); }
.mock__rows .review { background: var(--fill-subtle); color: var(--body); border-color: var(--border); }

/* The two regime blocks live in the panel column, under the example view —
   it balances the band and keeps the whole section inside one viewport. */
.band__regimes {
  width: 100%; max-width: 400px;
  display: flex; flex-direction: column; gap: 12px;
  margin: 16px 0 0;
}
.regime {
  padding: 11px 14px; border-radius: 12px;
  background: var(--tint); border-left: 3px solid var(--deep);
}
.regime__label {
  margin: 0 0 5px;
  font-size: 11px; font-weight: var(--label-wt); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--deep);
}
.regime__text { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--body); }
/* Lead sentence of each regime card carries the number — it is the first thing read. */
.regime__text b { display: block; margin-bottom: 3px; color: var(--ink); font-weight: 600; font-size: 13px; }

/* ==========================================================================
   4. HUMAN ACCOUNTABILITY
   ========================================================================== */
.proof__grid {
  display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center;
  max-width: 1280px; margin: 0 auto;
}
.proof__media { position: relative; border-radius: var(--radius-card); overflow: hidden; }
.proof__media img { width: 100%; height: 440px; object-fit: cover; object-position: 50% 28%; }

.approval {
  position: absolute; right: 24px; bottom: 24px; width: 296px;
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: 18px 18px 16px; box-shadow: 0 18px 40px rgba(26, 26, 26, 0.18);
}
.approval__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.approval__label {
  font-size: 10.5px; font-weight: var(--label-wt); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--muted);
}
.approval__doc { font-size: 15px; font-weight: 600; color: var(--ink); }
.approval__meta { margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.approval__actions { display: flex; gap: 8px; margin-top: 14px; }
.approval__btn {
  flex: 1; text-align: center; padding: 9px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--border); color: var(--body);
}
.approval__btn--primary { background: var(--primary); border-color: var(--primary); color: var(--ink); }

.proof__points { display: flex; flex-direction: column; gap: 22px; }
.point h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 8px; }
.point p { font-size: 15px; line-height: 1.55; color: var(--body); }
.point .card__icon--sm { margin-bottom: 12px; }

/* ==========================================================================
   5. FAQ
   ========================================================================== */
.faq { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq__item {
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  overflow: hidden; transition: border-color 200ms ease, box-shadow 200ms ease;
}
.faq__item.is-open { border-color: rgba(9, 185, 110, 0.4); box-shadow: var(--shadow-card); }
.faq__q {
  width: 100%; min-height: 64px; padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-sans); font-size: 17px; font-weight: 600; color: var(--ink);
  letter-spacing: -0.01em;
}
.faq__q:hover { color: var(--deep); }
.faq__icon {
  position: relative; width: 22px; height: 22px; flex: none;
  border-radius: 999px; background: var(--tint);
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--deep);
  transform: translate(-50%, -50%); transition: opacity 180ms ease;
}
.faq__icon::before { width: 10px; height: 2px; }
.faq__icon::after { width: 2px; height: 10px; }
.faq__item.is-open .faq__icon::after { opacity: 0; }
.faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 260ms ease;
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 24px 22px; max-width: 680px; font-size: 15.5px; line-height: 1.65; color: var(--body); }

/* ==========================================================================
   5. FOUNDER + WAITLIST — ONE combined card, built 2026-08-18 to the
   owner-approved Codex board
   landing/design/founder-cta-combined-2026-08-18/board.png.
   The board render is 1751x898 for a 1440 layout; its nav content block is
   1551 board px wide and this page's content block is 1280 css px, so
   board px x 0.8253 = css px on a 1355-wide card. This card is built at the
   page's own content width (1280) so it lines up with the header, so the
   board's horizontal measurements are additionally scaled by 1280/1355 =
   0.9446. Every number below is quoted from that conversion so the next pass
   can re-check it against the same board.
   Board fills sampled directly: left half #F3F5F0, right half #E3F1E4,
   hairline between them.
   ========================================================================== */
.fcsection { padding: 72px var(--gutter); background: var(--card); scroll-margin-top: 88px; }

/* Board: card 54..1695 x 149..830 board -> 1355 x 563 css, radius 28; the
   divider sits at 51.9% of the card width. At 1280 the same proportions give a
   532px-tall card, which is what the content stack below lands on. */
.fcard {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 51.9% 48.1%;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #F3F5F0;
}

/* ---------- left half: founder ---------- */
/* Board: copy column starts 336.7 css from the card's left edge (24.85% of the
   card = 47.9% of this half) and runs to 626 (72 css of right padding).
   Padding-block 70 centres the 359px copy stack the way the board does
   (board eyebrow cap top 87.3 below the card top; this lands 89.5). */
.fcard__founder {
  position: relative;
  padding: 62px 56px 78px 47.9%;
  display: flex; flex-direction: column; justify-content: center;
  background: #F3F5F0;
  border-right: 1px solid rgba(26, 26, 26, 0.08);
  scroll-margin-top: 104px;   /* nav 80 + section padding — #founder is the nav's "About" target */
}
.fcard__copy { position: relative; z-index: 1; }

/* board: eyebrow ink 156.7 css wide at 1280, cap height 9.1 board css
   -> 12.5px at 0.16em (measured 160.5) */
.fcard__eyebrow {
  margin: 0;
  font-size: 12.5px; line-height: 1.2;
  font-weight: var(--label-wt); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--deep);
}
/* board: "A word from" ink is 269.6 css wide at 1280 -> 47.5px/700 (measured:
   266.7 at 47, 272.7 at 48); the two ink tops sit 57.8 apart -> line-height
   1.16. 47.5px is large display type, so .accent (#09B96E) stays inside the
   pack's large-text-only rule. margin 18 reproduces the board's 31px
   eyebrow-ink-to-cap-top gap. */
.fcard__title {
  margin: 18px 0 0;
  font-size: 47.5px; line-height: 1.16;
  font-weight: var(--wt-display); letter-spacing: var(--ls-display);
  color: var(--ink);
}
/* board: 5 lines, ink tops 28.1 css apart, widest line 274 css -> 18.5px/1.52.
   18.5 in a 280px column is what reproduces the board's five line breaks
   ("...built from the / work: real audits, traceable / ..."): the widest line
   measures 273 and the next word ("work:") needs 326, so the breaks are
   stable. */
.fcard__quote { margin: 20px 0 0; max-width: 280px; }
.fcard__quote p { font-size: 18.5px; line-height: 1.52; color: var(--ink); }

/* board: one line, ink 271.3 css wide at 1280. The board's typeface sets ~9%
   narrower than Inter at the same cap height, so the size is set from the line
   width (16px -> 280, inside the 289px column) to keep the board's single line
   rather than from the cap height (which would read 17.2px and wrap). */
.fcard__attr {
  margin-top: 19px;
  font-size: 16px; line-height: 1.5; color: var(--ink);
}
.fcard__attr b { font-weight: 600; color: var(--deep); }

/* Board: the photo bleeds off the card's left, top and bottom edges and is
   clipped by the card radius, its right edge fading into the tint.
   Geometry solved from the board: head 152 css wide, head centre 153 css from
   the card's left edge, hair top 62 below the card top. With the source
   825x1024 that means the image is rendered 465 css wide (scale 0.5636) and
   pulled 83 css left of the card edge — i.e. 121.7% / -21.7% of this 382px
   (57.5% of the half) panel, kept proportional so the subject scale tracks the
   card at every width. */
.fcard__photo {
  position: absolute; left: 0; top: 0; bottom: 0; width: 57.5%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 0 72%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(90deg, #000 0 72%, rgba(0, 0, 0, 0) 100%);
}
.fcard__photo picture { display: block; }
.fcard__photo img {
  position: absolute; left: -21.7%; top: 19px;
  width: 121.7%; max-width: none; height: auto;
  /* top:19 reproduces the board's hair-top offset; the min-height is the
     safety net for any width where the card outgrows the image's natural
     height — object-fit keeps the crop honest instead of stretching it */
  min-height: calc(100% - 19px); object-fit: cover; object-position: 50% 0;
}

/* ---------- right half: waitlist ---------- */
.fcard__cta {
  background: #E3F1E4;
  padding: 63px 64px 78px;
  display: flex; flex-direction: column; justify-content: center;
}
/* board: the H2 ink is all but exactly the half's inner width (485 of 488 css
   at 1280) on ONE line -> 37px/700 (measured 484.8; 38px overflows to two
   lines) */
.fcard__ctaTitle {
  font-size: 37px; line-height: 1.14;
  font-weight: var(--wt-display); letter-spacing: var(--ls-display); color: var(--ink);
}
/* board: 2 lines, ink tops 28.9 board css apart and 350 / 451.4 css wide at
   1280 -> 18px/1.6 (measured 352.3 / 457.3). The board's first line ends on
   "and" even though "diversion" would still fit the column, so the break is
   explicit in the markup and switched off once the card stacks. */
.fcard__ctaSub { margin-top: 15px; font-size: 18px; line-height: 1.6; color: var(--body); }

/* board control block: 54.6-tall pills, 14.8 apart, then a 60.8-tall button
   18.7 below, microcopy 29.5 below that (all css at 1280) */
.waitlist--card { max-width: none; margin-top: 31px; }
.waitlist--card .waitlist__grid { gap: 15px; }
.waitlist--card .field {
  height: 55px; padding: 0 24px; font-size: 15.5px;
  border-color: transparent;
}
.waitlist--card select.field { padding-right: 44px; }
.waitlist--card .select-wrap::after { top: 24px; right: 22px; }
.waitlist--card .field:hover { border-color: rgba(26, 26, 26, 0.12); }
.waitlist--card .field__error { margin-left: 24px; }
.waitlist--card .waitlist__cta { height: 61px; margin-top: 4px; }
.waitlist--card .waitlist__note { margin-top: 22px; }
.waitlist--card .waitlist__success { background: #FFFFFF; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--page); border-top: 1px solid var(--border); padding: 56px var(--gutter) 28px; }
.footer__grid {
  max-width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 48px;
}
.footer__brand img { width: 176px; height: auto; margin-bottom: 18px; }
.footer__brand p { max-width: 360px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col h4 { margin-bottom: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.footer__col a { font-size: 14.5px; color: var(--muted); text-decoration: none; }
.footer__col a:hover { color: var(--deep); text-decoration: underline; }
/* Scope statement + collapsed policy sources (moved out of #compliance). */
.footer__scope {
  max-width: var(--shell); margin: 32px auto 0; padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 13px; line-height: 1.6; color: var(--muted);
}
.footer__independent { max-width: 720px; }
.fsources { margin-top: 10px; }
.fsources > summary {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; color: var(--link); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.fsources > summary::-webkit-details-marker { display: none; }
.fsources > summary::marker { content: ""; }
.fsources > summary::after {
  content: ""; width: 6px; height: 6px; margin-left: 2px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.fsources[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.fsources__list {
  margin: 10px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 32px;
  font-size: 12.5px;
}
.fsources__list b { color: var(--ink); font-weight: 600; }
.fsources__list a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.fsources__note { margin-top: 10px; max-width: 860px; font-size: 12.5px; color: var(--muted); }

.footer__base {
  max-width: var(--shell); margin: 28px auto 0; padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted);
}

/* ==========================================================================
   LEGAL PAGES (terms.html / privacy.html)
   ========================================================================== */
.legal { background: var(--card); }
.legal__head { max-width: 760px; margin: 0 auto 40px; text-align: left; }
.legal__head h1 { font-size: 46px; line-height: 1.15; font-weight: var(--wt-display); letter-spacing: var(--ls-display); }
.legal__head .section__sub { font-size: 15px; color: var(--muted); }
.legal__body { max-width: 760px; margin: 0 auto; }
.legal__body h2 { margin: 34px 0 10px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.legal__body p, .legal__body li { font-size: 16px; line-height: 1.7; color: var(--body); }
.legal__body p + p { margin-top: 12px; }
/* Visible status flag at the top of both legal pages until counsel signs off. */
.legal__draft {
  margin-bottom: 22px; padding: 14px 18px;
  background: var(--tint); border-left: 3px solid var(--deep); border-radius: 0 12px 12px 0;
  font-size: 15px; line-height: 1.6; color: var(--ink);
}
.legal__draft b { color: var(--deep); }
.legal__body ul { margin: 12px 0; padding-left: 22px; list-style: disc; }
.legal__body li { margin-bottom: 6px; }

/* ==========================================================================
   MOTION
   ========================================================================== */
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity 620ms ease, transform 620ms ease;
  transition-delay: calc(var(--i, 0) * 80ms);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .umock__grow { transform: none !important; }
  .umock__pop { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   RESPONSIVE — desktop 1440 → 1024 → 768 → 390, derived from the desktop
   composition (the Stitch mobile export was discarded).
   ========================================================================== */
/* Five across needs ~230px per card; below that the row folds to 3 + 2
   (six-column grid: three cards span 2, the last two span 3). */
/* Below the 1440 design width the card loses width faster than the copy does,
   so the copy column steps down before the two-column split gives out. */
@media (max-width: 1399px) {
  /* the card keeps the board's split but loses width, so the photo share, the
     two display sizes and both copy columns step down with it. Below 1400 the
     right half is too narrow for the board's forced break in the sub, so the
     sub wraps naturally from here down. */
  .fcard__founder { padding: 56px 44px 68px 45%; }
  .fcard__title { font-size: 44px; }
  .fcard__quote { max-width: 272px; }
  .fcard__quote p { font-size: 18px; }
  .fcard__attr { font-size: 15.5px; }
  .fcard__cta { padding: 56px 48px 64px; }
  .fcard__ctaTitle { font-size: 33px; }
  .fcard__ctaSub { font-size: 17px; }
  .fcard__ctaSub br { display: none; }
  .waitlist--card { margin-top: 26px; }
}

@media (max-width: 1279px) {
  /* The card stacks: photo (3:2, bleeding to the card edges) on top, founder
     copy, then the mint waitlist half. Below 1280 the content block is under
     ~1120 and the board's 52/48 split leaves the founder copy column too
     narrow to hold "A word from" on one line. */
  .fcard { grid-template-columns: minmax(0, 1fr); }
  .fcard__founder {
    padding: 0;
    border-right: 0; border-bottom: 1px solid rgba(26, 26, 26, 0.08);
  }
  .fcard__photo {
    position: static; width: auto; height: 300px;
    -webkit-mask-image: none; mask-image: none;
  }
  .fcard__photo img {
    position: static; width: 100%; height: 100%;
    min-height: 0; object-position: 50% 6%;
  }
  .fcard__copy { padding: 36px 44px 44px; }
  .fcard__title { font-size: 40px; }
  .fcard__quote { max-width: 560px; margin-top: 20px; }
  .fcard__quote p { font-size: 19px; }
  .fcard__attr { font-size: 16px; }
  .fcard__cta { padding: 44px; }
  .fcard__ctaTitle { font-size: 34px; }
  .fcard__ctaSub { font-size: 17.5px; max-width: 560px; }

  /* the row stops being one line, so the pipeline connector stops making sense */
  .agent:not(:last-child)::before, .agent:not(:last-child)::after { content: none; }
  .agents__row--five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .agents__row--five > .card { grid-column: span 2; }
  .agents__row--five > .card:nth-child(4),
  .agents__row--five > .card:nth-child(5) { grid-column: span 3; }
}

@media (max-width: 1200px) {
  :root { --gutter: 48px; }
  .hero__inner { --hero-gap: 56px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .section__head h2 { font-size: 38px; }
  .band__copy { padding: 36px 36px 40px; }
  .band__panel { padding: 36px 36px; }
  .band__copy h2 { font-size: 30px; }
  .proof__grid { gap: 40px; }
}

@media (max-width: 1023px) {
  :root { --gutter: 40px; }
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .nav.is-open .nav__mobile { display: flex; }
  .nav__inner { gap: 16px; }
  .nav__actions { margin-left: auto; }

  .hero { padding: 64px var(--gutter) 48px; }
  .hero__inner { --hero-gap: 44px; grid-template-columns: minmax(0, 1fr); }
  .hero__sub { max-width: 620px; }
  .waitlist { max-width: 620px; }
  .waitlist--hero { max-width: 520px; }
  /* stacked layout: a tilted full-bleed board reads as a mistake, so straighten it */
  .hero__tilt::before { content: none; }
  /* the align-items:start offset was for the two-column layout only — stacked
     columns don't need the gap between copy and image */
  .hero__art { margin-top: 0; }

  .section { padding: 64px var(--gutter); }
  .compliance { padding: 64px var(--gutter) 56px; }
  .section__head { margin-bottom: 32px; }
  .agents__row--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agents__row--five > .card { grid-column: auto; }
  .agents__row--five > .card:nth-child(4) { grid-column: auto; }
  .agents__row--five > .card:nth-child(5) { grid-column: 1 / -1; }
  .band { grid-template-columns: 1fr; }
  .band__panel { border-left: 0; border-top: 1px solid var(--border); padding: 36px 36px 44px; }
  .proof__grid { grid-template-columns: 1fr; }
  .proof__media img { height: 420px; }
  .fcsection { padding: 64px var(--gutter); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 767px) {
  :root { --gutter: 20px; --radius-card: 22px; --radius-band: 28px; }

  .nav__inner { height: 68px; }
  .nav__brand img { width: 158px; }
  .nav__actions .btn--sm { display: none; }

  .hero { padding: 40px var(--gutter) 40px; }
  .hero__inner { --hero-gap: 32px; }
  /* 29px is the largest size that still fits "AI that turns waste data" on one
     line at 390, so mobile keeps the same two-line break as desktop. */
  .hero h1 { font-size: clamp(24px, 7.44vw, 29px); line-height: 1.15; letter-spacing: -0.022em; width: auto; max-width: none; }
  .hero .eyebrow--pill { margin-bottom: 18px; }
  .hero__sub { font-size: 16.5px; margin-bottom: 26px; }
  .hero__art img { border-radius: 16px; }

  /* chip scaled down, lifted into the column gap and pulled inside the frame so
     it clears the illustration's top row and nothing overhangs at 390 */
  .hero__chip {
    top: -22px; right: -2px; gap: 10px;
    padding: 10px 14px 10px 10px; border-radius: 14px;
  }
  .hero__chipIcon { width: 34px; height: 34px; }
  .hero__chipIcon svg { width: 17px; height: 17px; }
  .hero__chipValue { font-size: 15.5px; }
  .hero__chipLabel { font-size: 10px; }
  .hero__chipTag { font-size: 9px; }

  .hero__stats { margin-top: 18px; }
  .hero__stat { padding: 6px 8px; gap: 3px; }
  .hero__statValue { font-size: 19px; }
  .hero__statLabel { font-size: 9px; }

  .waitlist, .waitlist--hero, .waitlist__grid { max-width: none; }
  .waitlist__grid { grid-template-columns: 1fr; }
  .waitlist__cell { grid-column: 1 / -1; }
  /* all four rows go full-width and stack */
  .waitlist--hero .waitlist__grid { gap: 10px; }
  .waitlist--hero .field, .waitlist--hero .waitlist__cta { height: 52px; }
  .waitlist--hero .select-wrap::after { top: 22px; }

  .section { padding: 52px var(--gutter); }
  .compliance { padding: 52px var(--gutter) 44px; }
  .section__head { text-align: left; margin-bottom: 28px; }
  .section__head h2 { font-size: 32px; line-height: 1.2; }
  .section__sub { font-size: 16px; }

  .card { padding: 24px 20px 26px; }
  .card h3 { font-size: 17px; }
  .card p { font-size: 15px; }
  .card__icon--sm { width: 42px; height: 42px; padding: 10px; margin-bottom: 12px; }
  .agents__row--five { grid-template-columns: minmax(0, 1fr); }
  .agents__row--five > .card:nth-child(5) { grid-column: auto; }
  .agents__row { gap: 14px; }

  .band__copy, .band__panel { padding: 30px 22px 34px; }
  .band__copy h2 { font-size: 30px; }
  .band__lead { font-size: 15.5px; }
  .band .btn { width: 100%; }
  .band__regimes { max-width: none; gap: 10px; }
  .fsources__list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mock--panel { max-width: none; padding: 20px; }

  .proof__media img { height: 360px; }
  .approval { right: 12px; bottom: 12px; left: 12px; width: auto; padding: 14px; }
  .approval__doc { font-size: 14px; }

  /* 390: photo 260 tall at the top of the card, copy and form at 24px padding,
     both halves full-bleed to the card edges */
  .fcsection { padding: 52px var(--gutter); }
  .fcard__photo { height: 260px; }
  .fcard__copy { padding: 28px 24px 32px; }
  .fcard__eyebrow { letter-spacing: 0.16em; }
  .fcard__title { font-size: 34px; }
  .fcard__quote { margin-top: 18px; max-width: none; }
  .fcard__quote p { font-size: 17.5px; }
  .fcard__attr { margin-top: 18px; font-size: 15.5px; }
  .fcard__cta { padding: 32px 24px 36px; }
  .fcard__ctaTitle { font-size: 30px; }
  .fcard__ctaSub { font-size: 16.5px; max-width: none; }
  .waitlist--card { margin-top: 24px; }
  .waitlist--card .waitlist__grid { gap: 10px; }
  .waitlist--card .field, .waitlist--card .waitlist__cta { height: 52px; }
  .waitlist--card .select-wrap::after { top: 22px; }

  .faq__q { font-size: 15.5px; padding: 18px 18px; }
  .faq__a p { padding: 0 18px 20px; font-size: 15px; }

  .footer { padding: 52px var(--gutter) 28px; }
  .footer__grid { grid-template-columns: 1fr; gap: 34px; }
  .footer__base { margin-top: 36px; flex-direction: column; gap: 8px; }
  .legal__head h1 { font-size: 34px; }
}