/* flaxmor site stylesheet (build 8032).
   Replaces the nine layered stylesheets of 8028 (R14). One token set, one type
   scale, one component language. aster-labs-flow.css still styles the diagram.
   Reference IDs in comments point to design-reference/flaxmor-8028-review.md. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
}

@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/dm-mono-regular-latin.woff2") format("woff2");
}

@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/dm-mono-medium-latin.woff2") format("woff2");
}

/* ---------- Tokens ---------- */

:root {
  /* Colour: every value has one role (COLOR-06). Contrast noted against its ground. */
  --ground: #f4f0e8;
  --ground-deep: #ebe5d9;      /* proof chapter; ink 13.1:1, muted 4.7:1 */
  --band: #1e1f27;             /* the single ink band */
  --card: #fffdf8;
  --ink: #1e1f27;              /* 14.4:1 on ground */
  --ink-muted: #4c4e56;        /* 7.3:1 on ground, 6.6:1 on ground-deep (was #62646c: too faint) */
  --on-band: #f4f0e8;          /* 14.4:1 on band */
  --on-band-muted: #c9c5bc;    /* 9.5:1 on band */
  --encoded: #4958d1;          /* encoded / model side only (R13); 5.1:1 on ground */
  --encoded-wash: #e9efff;
  --encoded-on-band: #a9b2ff;  /* 8.2:1 on band */
  --fail: #a3402c;             /* 5.5:1 on fail-wash */
  --fail-wash: #feece7;
  --fail-on-band: #f4a196;     /* 8.1:1 on band */
  --hairline: rgba(30, 31, 39, 0.14);
  --hairline-on-band: rgba(244, 240, 232, 0.16);
  --field-edge: #85878e;       /* 3.5:1 on white: meets non-text contrast */
  --focus: #1e1f27;

  /* Type scale (TYPE-03, TYPE-04): eight roles, nothing below 12px. */
  --fs-display: clamp(40px, 5.1vw, 74px);
  --fs-closing: clamp(34px, 4.6vw, 66px);
  --fs-h2: clamp(30px, 3vw, 42px);
  --fs-h3: clamp(20px, 1.6vw, 24px);
  --fs-lead: clamp(17px, 1.25vw, 19px);
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-label: 14px;      /* mono labels, nav, eyebrows: matches Alice/Legion/June (TYPE-04) */

  /* Space */
  --page-x: clamp(20px, 5.5vw, 80px);
  --section-y: clamp(48px, min(6.4vw, 10vh), 96px);
  --header-h: 72px;
  --content-max: 1280px;

  /* Names the diagram stylesheet expects. */
  --blue: var(--encoded);
  --blue-dark: #3f4ec1;
  --muted: var(--ink-muted);
  --line: var(--hairline);
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--ground);
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.55;
  overflow-x: clip;
}

body.menu-open {
  overflow: hidden;
}

h1,
h2,
h3,
p,
dl,
dd,
ol,
ul,
figure {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
textarea {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 12px 16px;
  color: #fff;
  background: var(--ink);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

.wrap {
  box-sizing: content-box;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--page-x);
}

/* ---------- Shared components ---------- */

.label {
  color: var(--ink-muted);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}

.title-pair span {
  display: block;
}

h2,
h2 span {
  text-wrap: balance;
}

.title-em {
  color: var(--encoded);
}

/* Section headlines are deliberately quieter than the hero: lighter weight, looser
   tracking and leading, so each section reads calmly (the hero stays the loud one). */
h2 {
  font-size: var(--fs-h2);
  font-weight: 480;
  line-height: 1.12;
  letter-spacing: -0.028em;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.section-head {
  max-width: 820px;
}

/* Desktop: the headline on the left and its supporting line right beside it,
   joined by a thin divider and level with the headline's last line, so the
   intro reads as one unit and uses the width instead of leaving a gap. */
@media (min-width: 981px) {
  .section-head {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(14em, 24em);
    justify-content: start;
    column-gap: 48px;
    align-items: end;
    max-width: var(--content-max);
  }

  .section-head > .label {
    grid-column: 1 / -1;
  }

  .section-head > h2 {
    grid-column: 1;
    max-width: 740px;
  }

  .section-head > .standfirst {
    grid-column: 2;
    max-width: none;
    margin: 0 0 0.35em;
    padding-left: 24px;
    border-left: 1px solid var(--hairline);
    font-size: 17px;
    line-height: 1.5;
  }

  .chapter-ink .section-head > .standfirst {
    border-left-color: var(--hairline-on-band);
  }
}

.section-head .label {
  margin-bottom: 16px;
}

.standfirst {
  max-width: 40em;
  margin-top: 20px;
  color: var(--ink-muted);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.btn {
  display: inline-flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.035em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease;
}

.btn-primary {
  color: #fff;
  background: var(--ink);
}

.btn-quiet {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(30, 31, 39, 0.28);
}

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

.btn-quiet:hover {
  background: #fff;
}

.pill-button {
  min-height: 36px;
  padding: 0 14px;
  color: var(--ink);
  background: transparent;
  border: 1px solid rgba(30, 31, 39, 0.28);
  border-radius: 999px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: var(--fs-label);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.pill-button:hover {
  background: #fff;
}

/* Encoded-value chips (R13): real values in ink, encoded values in mono on a wash. */
.value-encoded {
  color: var(--encoded);
  font-family: "DM Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.value-encoded {
  padding: 1px 6px;
  background: var(--encoded-wash);
  border-radius: 3px;
}








/* Reveal on scroll: content is always visible without JS or with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html.motion-ready .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 520ms ease, transform 520ms ease;
  }

  html.motion-ready .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Header (R7, R9) ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  min-height: var(--header-h);
  padding: 12px var(--page-x);
  background: rgba(244, 240, 232, 0.94);
  border-bottom: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  width: fit-content;
}

.brand img {
  width: 132px;
}

.nav-links {
  display: flex;
  gap: clamp(18px, 2.2vw, 32px);
  align-items: center;
  justify-self: center;
}

.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.035em;
}

.nav-links a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.nav-links a:hover::after,
.nav-links a.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-cta {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  justify-self: end;
  min-height: 44px;
  padding: 0 18px;
  color: #fff;
  background: var(--ink);
  border-radius: 6px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.035em;
  white-space: nowrap;
}

.menu-toggle {
  display: none;
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: 1fr auto auto;
    gap: 10px;
  }

  .header-cta {
    order: 2;
    padding: 0 14px;
  }

  .header-cta span[aria-hidden] {
    display: none;
  }

  .menu-toggle {
    position: relative;
    order: 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(30, 31, 39, 0.28);
    border-radius: 6px;
    cursor: pointer;
  }

  .menu-toggle > span:not(.sr-only) {
    position: absolute;
    width: 18px;
    height: 1.5px;
    background: var(--ink);
    transition: transform 180ms ease;
  }

  .menu-toggle > span:first-child {
    transform: translateY(-4px);
  }

  .menu-toggle > span:nth-child(2) {
    transform: translateY(4px);
  }

  .menu-toggle[aria-expanded="true"] > span:first-child {
    transform: rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] > span:nth-child(2) {
    transform: rotate(-45deg);
  }

  .nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: grid;
    gap: 0;
    padding: 8px var(--page-x) 24px;
    background: var(--ground);
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 24px 50px rgba(30, 31, 39, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s 180ms;
  }

  .nav-links.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .nav-links a {
    min-height: 54px;
    border-bottom: 1px solid var(--hairline);
    font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.01em;
  }

  .nav-links a::after {
    display: none;
  }
}

@media (max-width: 380px) {
  .brand img {
    width: 104px;
  }

  .header-cta {
    padding: 0 11px;
    letter-spacing: 0.01em;
  }
}

/* ---------- 1 · Hero (R1, R2) ---------- */

.intro {
  padding: clamp(32px, 4.4vw, 64px) var(--page-x) clamp(32px, 3.4vw, 48px);
}

.intro-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: center;
  max-width: var(--content-max);
  margin: 0 auto;
}

.intro-eyebrow {
  display: flex;
  gap: 12px;
  align-items: center;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.intro-eyebrow::before {
  content: "";
  width: 3px;
  height: 18px;
  background: var(--encoded);
}

.intro-title {
  margin-top: 22px;
  font-size: var(--fs-display);
  font-weight: 560;
  line-height: 1;
  letter-spacing: -0.045em;
}

.intro-title span {
  display: block;
}

.intro-title-em {
  margin-top: 0.06em;
  color: var(--encoded);
}

.intro-lede {
  max-width: 34em;
  margin-top: 26px;
  color: var(--ink-muted);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.intro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* The visual runs into the page margin so the orbit has room for the widest labels. */
.intro-visual {
  margin-right: calc(-1 * var(--page-x));
}

.intro-visual-stage {
  position: relative;
  aspect-ratio: 1 / 0.8;
}

.intro-visual-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.intro-proof {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1.45fr 1.2fr;
  gap: 28px;
  max-width: var(--content-max);
  margin: clamp(24px, 3vw, 40px) auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}

.intro-proof dt {
  margin-bottom: 8px;
  color: var(--ink-muted);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.intro-proof dd {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.model-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.model-logos li {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 7px;
}

.model-logos img {
  width: 18px;
  height: 18px;
}

.model-logos .model-logos-more {
  width: auto;
  height: auto;
  padding-left: 4px;
  color: var(--ink-muted);
  background: none;
  border: 0;
  font-size: var(--fs-small);
  font-weight: 400;
}

@media (max-width: 1100px) {
  .intro-proof {
    grid-template-columns: 1fr 1fr;
    gap: 22px 28px;
  }
}

@media (max-width: 980px) {
  .intro-inner {
    grid-template-columns: 1fr;
  }

  .intro-visual {
    width: min(100%, 560px);
    margin: 0 auto;
  }
}

@media (max-width: 680px) {
  .intro-title {
    font-size: clamp(36px, 10.4vw, 44px);
    line-height: 1.02;
  }

  .intro-actions {
    display: grid;
  }

  .intro-actions .btn {
    width: 100%;
  }

  .intro-visual {
    width: auto;
    margin-inline: calc(-1 * var(--page-x));
  }

  .intro-visual-stage {
    aspect-ratio: 1 / 0.86;
  }

  .intro-proof {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ---------- Chapters (COLOR-02, SPACE-02) ---------- */

.chapter {
  padding-block: var(--section-y);
}

.chapter-tight {
  padding-block: calc(var(--section-y) * 0.7);
}

/* Two plain chapters in a row share the ground, so the second needs less space
   above it: the first one's bottom padding already separates them. */
.chapter:not(.chapter-ink):not(.chapter-deep) + .chapter:not(.chapter-ink):not(.chapter-deep) {
  padding-top: calc(var(--section-y) * 0.35);
}

.chapter-deep {
  background: var(--ground-deep);
}

.chapter-ink {
  color: var(--on-band);
  background: var(--band);
}

.chapter-ink .label,
.chapter-ink .standfirst {
  color: var(--on-band-muted);
}

.chapter-ink .title-em {
  color: var(--encoded-on-band);
}

.chapter-ink :focus-visible {
  outline-color: var(--on-band);
}

/* ---------- 2 · Alternatives (R5) ---------- */

.compare {
  width: 100%;
  margin-top: clamp(24px, 3vw, 40px);
  border-collapse: collapse;
  text-align: left;
  table-layout: fixed;
}

/* Balanced columns (TYPE-05): the narrow middle column no longer wraps every row. */
.col-approach { width: 30%; }
.col-receives { width: 30%; }
.col-catch { width: 40%; }

.compare thead th {
  padding: 0 18px 14px 0;
  color: var(--on-band-muted);
  border-bottom: 1px solid var(--hairline-on-band);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Every cell in a row lines up on its first line of text (the baseline), whatever
   its font size; markers and the logo are positioned against that same line. */
.compare tbody th,
.compare tbody td {
  padding: 22px 18px 22px 0;
  border-bottom: 1px solid var(--hairline-on-band);
  vertical-align: baseline;
}

.compare tbody th {
  color: var(--on-band);
  font-size: 21px;
  font-weight: 560;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.compare tbody td {
  color: var(--on-band-muted);
  font-size: 16px;
  line-height: 1.45;
}

/* The catches stay quiet; the red crosses carry the verdict. */
.compare-row.is-rejected td:last-child {
  color: var(--on-band-muted);
}

/* Rejected approaches get a coral cross beside the name: the verdict is instant,
   and the name stays easy to read (the catch column says why). */
/* On desktop the row name is plain text; the button only acts on mobile, where
   rows collapse to the name and the catch (script.js disables it on desktop). */
.compare-toggle {
  display: block;
  width: 100%;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: left;
}

.compare-toggle:disabled {
  cursor: default;
}

.compare-chevron {
  display: none;
}

.approach {
  position: relative;
  display: block;
  padding-left: 36px;
}

/* Centred on the name's first line (line box 1.25 x 21px). */
.verdict-no {
  position: absolute;
  top: calc((1.25em - 24px) / 2);
  left: 0;
  width: 24px;
  height: 24px;
  border: 1.5px solid rgba(244, 161, 150, 0.55);
  border-radius: 50%;
}

.verdict-no::before,
.verdict-no::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.5px;
  background: var(--fail-on-band);
  border-radius: 1px;
  transform: translate(-50%, -50%) rotate(45deg);
}

.verdict-no::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.placeholder-token {
  padding: 1px 6px;
  color: var(--on-band);
  background: rgba(244, 240, 232, 0.12);
  border-radius: 3px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 14px;
}

/* The answer row leads (LAYOUT-02); its last cell uses the band's "good" colour (COLOR-03). */
.compare tbody .compare-flaxmor th,
.compare tbody .compare-flaxmor td {
  padding-top: 16px;
  padding-bottom: 22px;
  color: var(--on-band);
  background: rgba(169, 178, 255, 0.12);
  border-bottom: 0;
}

.compare tbody .compare-flaxmor th {
  padding-left: 26px;
  box-shadow: inset 3px 0 0 var(--encoded-on-band);
}

.compare tbody .compare-flaxmor td:last-child {
  color: var(--encoded-on-band);
}

.compare tbody .compare-flaxmor td:last-child strong {
  color: var(--on-band);
  font-weight: 650;
}

.section-handoff {
  margin-top: 28px;
}

.section-handoff a {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(244, 240, 232, 0.4);
  text-underline-offset: 4px;
}

.section-handoff a:hover {
  text-decoration-color: currentColor;
}

/* The wordmark's baseline sits 78.5/112 down the logo, so shifting the image down by
   the rest of its height puts the wordmark on the row's text baseline. */
.compare-logo {
  display: inline-block;
  width: 150px;
  height: auto;
  vertical-align: calc(-150px * 112 / 393 * (112 - 78.5) / 112);
}

/* Every width: each approach is a row with its name and catch; the name opens
   what the model receives. The flaxmor row is always open. */
@media all {
  .compare thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .compare,
  .compare tbody,
  .compare tr,
  .compare th,
  .compare td {
    display: block;
    width: auto;
  }

  .compare colgroup {
    display: none;
  }

  .compare tr {
    padding: 18px 0;
    border-bottom: 1px solid var(--hairline-on-band);
  }

  .compare tbody th,
  .compare tbody td {
    padding: 0;
    border: 0;
  }

  .compare tbody th {
    width: auto;
    margin-bottom: 10px;
    font-size: 19px;
  }

  .compare tbody td {
    display: grid;
    grid-template-columns: 7.2em 1fr;
    align-items: baseline;
    gap: 12px;
    padding: 4px 0;
    font-size: 15px;
  }

  .compare tbody td::before {
    content: attr(data-label);
    color: var(--on-band-muted);
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .compare-flaxmor {
    padding-inline: 20px !important;
    background: rgba(169, 178, 255, 0.1);
    box-shadow: inset 3px 0 0 var(--encoded-on-band);
  }

  .compare tbody .compare-flaxmor th,
  .compare tbody .compare-flaxmor td {
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .compare tbody .compare-flaxmor th {
    margin-bottom: 10px;
  }

  .compare tbody .compare-flaxmor td {
    padding: 4px 0;
  }

  /* Collapsed rows: the name and the catch. Tap to show what the model receives
     and what you get back. The flaxmor row is always open. */
  .compare-toggle {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    cursor: pointer;
  }

  .compare-chevron {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-right: 1.5px solid var(--on-band-muted);
    border-bottom: 1.5px solid var(--on-band-muted);
    transform: translateY(-3px) rotate(45deg);
    transition: transform 180ms ease;
  }

  .compare-toggle[aria-expanded="true"] .compare-chevron {
    transform: translateY(2px) rotate(-135deg);
  }

  .compare tbody th {
    margin-bottom: 6px;
  }

  /* Only collapse when script.js is running, so the detail is never unreachable. */
  .motion-ready .compare-row.is-rejected .compare-detail {
    display: none;
  }

  .motion-ready .compare-row.is-open .compare-detail {
    display: grid;
  }

  html:not(.motion-ready) .compare-chevron {
    display: none;
  }

  /* Collapsed, the catch reads as a subline under the name, aligned with its text. */
  .motion-ready .compare-row.is-rejected:not(.is-open) td:last-child {
    display: block;
    padding: 0 0 0 36px;
  }

  .motion-ready .compare-row.is-rejected:not(.is-open) td:last-child::before {
    content: none;
  }
}

/* Desktop: name on the left, the catch (and, when open, what the model receives)
   on the right, so each approach is one calm line. */
@media (min-width: 761px) {
  .compare tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    column-gap: 48px;
    align-items: baseline;
    padding: 16px 0;
  }

  .compare tbody th {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
    font-size: 20px;
  }

  .compare tbody td {
    grid-column: 2;
    grid-template-columns: 11em 1fr;
    font-size: 16px;
  }

  .motion-ready .compare-row.is-rejected:not(.is-open) td:last-child {
    padding-left: 0;
  }

  .compare-toggle {
    justify-content: flex-start;
    gap: 16px;
  }

  .compare-flaxmor {
    padding-block: 20px !important;
  }
}

/* ---------- 3 · How it works (R4) ---------- */

#how .section-head {
  margin-bottom: clamp(28px, 3vw, 40px);
}

/* Mobile only: the round trip as one side-by-side card (R4, MOBILE-03). Each box
   opens the full view: the values open the prompt, each answer opens its answer. */
.mirror-wrap {
  display: none;
}

.mirror-hint {
  display: inline-flex;
  margin-bottom: 10px;
  color: var(--ink-muted);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.mirror {
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
}

.mirror-head,
.mirror-box-values,
.mirror-answer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.mirror-head {
  border-bottom: 1px solid var(--hairline);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.mirror-head > span {
  padding: 14px 14px 12px;
}

/* Right-hand column: the external AI side, behind the dashed boundary. */
.mirror-head > span + span,
.mirror-cell-ai,
.mirror-box-ai {
  background: #f5f7ff;
}

.mirror-head > span + span,
.mirror-box-values .mirror-cell-ai,
.mirror-box-ai {
  border-left: 1px dashed rgba(73, 88, 209, 0.5);
}

.mirror-zone {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-muted);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mirror-zone-ai {
  color: var(--encoded);
}

.mirror-box {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--ink);
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mirror-box-values .mirror-cell:nth-child(-n + 2) {
  padding-top: 14px;
}

/* Room for the open icon beside the first encoded value. */
.mirror-box-values .mirror-cell:nth-child(2) {
  padding-right: 40px;
}

.mirror-answer .mirror-chip-figures {
  white-space: normal;
}

.mirror-box-values .mirror-cell:nth-child(2) .mirror-chip {
  white-space: normal;
}

.mirror-answer .mirror-zone {
  padding-right: 30px;
}

.mirror-box-values .mirror-cell:nth-child(5),
.mirror-box-values .mirror-cell:nth-child(6) {
  padding-bottom: 14px;
}

.mirror-cell {
  display: block;
  padding: 8px 14px;
}

.mirror-answer {
  border-top: 1px solid var(--hairline);
}

.mirror-answer .mirror-cell {
  height: 100%;
  padding: 14px 14px 16px;
}

.mirror-box-values .mirror-cell-ai {
  background: #f5f7ff;
}

/* Open-in-full icon in each box's top-right corner. */
.mirror-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(30, 31, 39, 0.25);
  border-radius: 50%;
}

.mirror-box:active {
  background-color: rgba(30, 31, 39, 0.04);
}

.mirror-box:focus-visible {
  outline-offset: -3px;
}

.mirror-name {
  display: block;
  padding-right: 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.mirror-name-ai {
  color: var(--encoded);
}

.mirror-figures {
  display: block;
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.mirror-chip {
  display: inline-block;
  padding: 1px 6px;
  color: var(--encoded);
  background: var(--encoded-wash);
  border-radius: 3px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mirror-chip-figures {
  display: table;
  margin-top: 4px;
  font-size: 14px;
}


.mirror-note {
  margin-top: 12px;
  color: var(--ink-muted);
  font-size: var(--fs-small);
}

@media (max-width: 760px) {
  #how .aster-labs-flow {
    display: none;
  }

  .mirror-wrap {
    display: block;
  }
}

/* ---------- 4 · In the product (R16) ---------- */

.shots {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  margin-top: clamp(20px, 2.6vw, 36px);
}

.shot {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  gap: 18px clamp(24px, 3vw, 48px);
  align-items: center;
}

.shot-frame {
  position: relative;
  grid-row: span 2;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
}

.shot-frame img {
  width: 100%;
  height: auto;
}

.shot-scroll {
  max-height: 440px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.shot-frame-output::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 72px;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
  transition: opacity 200ms ease;
}

.shot-frame-output.is-at-end::after {
  opacity: 0;
}

.shot figcaption {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}


.shot figcaption .label {
  color: var(--encoded);
}

.shot figcaption p {
  margin-top: 10px;
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

@media (max-width: 760px) {
  .shot {
    grid-template-columns: 1fr;
  }

  .shot-frame,
  .shot figcaption {
    grid-column: 1;
    grid-row: auto;
  }

  .shot figcaption {
    order: -1;
  }

  /* Show each screenshot whole: the full composer, and the full-width answer that
     scrolls vertically inside its frame. */
  .shot-frame img {
    width: 100%;
    max-width: 100%;
  }

  .shot-scroll {
    max-height: 420px;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

/* On mobile the screenshots sit behind a button, so the section is a headline, a
   line and one tap. Desktop always shows them. */
.shots-toggle {
  display: none;
}

@media (max-width: 760px) {
  .motion-ready .shots-toggle {
    display: inline-flex;
    margin-top: 24px;
  }

  .motion-ready .product:not(.is-open) .shots {
    display: none;
  }
}

/* ---------- 5 · Check our work (R3, R13) ---------- */

.faq {
  margin-top: clamp(20px, 2.6vw, 36px);
  border-top: 1px solid var(--hairline);
}

.faq-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 16px clamp(24px, 4vw, 64px);
  padding: 28px 0;
  border-bottom: 1px solid var(--hairline);
}

.faq dt {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.faq dd {
  max-width: 40em;
  color: var(--ink-muted);
  font-size: var(--fs-body);
  line-height: 1.6;
}

.faq dd strong {
  color: var(--ink);
  font-weight: 650;
}

.more-link {
  margin-top: 22px;
}

.more-link a {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(30, 31, 39, 0.35);
  text-underline-offset: 4px;
}

.more-link a:hover {
  text-decoration-color: currentColor;
}

.parity {
  margin-top: clamp(28px, 3.5vw, 44px);
}

.parity-result {
  display: grid;
  gap: 12px;
  padding: 4px 0 4px clamp(18px, 2vw, 28px);
  border-left: 3px solid var(--encoded);
}

.parity-scope {
  color: var(--ink-muted);
  font-size: var(--fs-lead);
}

.parity-link {
  justify-self: start;
  margin-top: 4px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(30, 31, 39, 0.35);
  text-underline-offset: 4px;
}

.parity-link:hover {
  text-decoration-color: currentColor;
}

.parity-result strong {
  max-width: 18em;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 560;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

@media (max-width: 760px) {
  .faq-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .faq dt {
    font-size: 20px;
  }
}

/* Every screen size: the question toggles the explanation; the bold answer is
   always visible and reads as a reply (smaller, set off by a rule). */
.faq-row {
  grid-template-columns: 1fr;
  gap: 6px;
}

.faq dd {
  padding-left: 14px;
  border-left: 2px solid rgba(30, 31, 39, 0.22);
  font-size: 16px;
}

.faq dd strong {
  font-weight: 600;
}

.faq-toggle {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}

.faq-toggle:hover .faq-chevron {
  border-color: var(--ink);
}

.faq-chevron {
  display: block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-right: 1.5px solid var(--ink-muted);
  border-bottom: 1.5px solid var(--ink-muted);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 180ms ease;
}

.faq-toggle[aria-expanded="true"] .faq-chevron {
  transform: translateY(2px) rotate(-135deg);
}

/* Only collapse when script.js is running, so the explanation is never unreachable. */
.motion-ready .faq-detail {
  display: none;
}

.motion-ready .faq-row.is-open .faq-detail {
  display: block;
  margin-top: 8px;
}

html:not(.motion-ready) .faq-chevron {
  display: none;
}

/* ---------- 6 · Workflows (R17) ---------- */

.workflows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(20px, 2.6vw, 36px);
}

.workflow {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
}

.workflow h3 {
  font-size: var(--fs-h3);
}

.workflow > p:not(.tags) {
  color: var(--ink-muted);
  font-size: 16px;
}

/* Workflow visuals: a small slice of the product doing each job. Pink is a
   sensitive value in your environment; indigo dots are the same value encoded.
   The resting frame is the finished state, so reduced motion still reads. */
.matter-visual {
  margin-top: auto;
  padding: 8px 6px;
  background: var(--ground);
  border-radius: 12px;
}

.matter-visual svg {
  display: block;
  width: 100%;
  height: auto;
}

.wf-paper {
  fill: var(--card);
  stroke: var(--hairline);
}

.wf-head {
  fill: var(--ground-deep);
}

.wf-rule {
  fill: none;
  stroke: var(--hairline);
}

.wf-text,
.wf-secret,
.wf-summary {
  fill: none;
  stroke-linecap: round;
  stroke-width: 6;
}

.wf-text {
  stroke: #ddd7cb;
}

.wf-text-head {
  stroke: #b9b3a7;
}

.wf-secret {
  stroke: var(--encoded);
  stroke-dasharray: 0 10;
}

.wf-scan {
  fill: var(--encoded);
  opacity: 0;
}

.wf-axis {
  fill: none;
  stroke: #b9b3a7;
  stroke-width: 1.5;
}

.wf-bar {
  fill: var(--ink);
  transform-box: fill-box;
  transform-origin: center bottom;
}

.wf-avatar {
  fill: var(--ground-deep);
}

.wf-label rect {
  fill: var(--ink);
}

.wf-label path {
  fill: none;
  stroke: var(--card);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.wf-label {
  transform-box: fill-box;
  transform-origin: center;
}

.wf-summary {
  stroke: var(--ink);
  stroke-dasharray: 200;
  stroke-dashoffset: 0;
}

.wf-outside {
  fill: var(--encoded-wash);
}

.wf-boundary {
  fill: none;
  stroke: var(--encoded);
  stroke-dasharray: 4 5;
  stroke-width: 1.5;
}

.wf-link {
  fill: none;
  stroke: #b9b3a7;
  stroke-width: 1.5;
}

.wf-link-encoded {
  fill: none;
  stroke: var(--encoded);
  stroke-dasharray: 0 8;
  stroke-linecap: round;
  stroke-width: 4;
}

.wf-tool {
  fill: none;
  stroke: var(--ink-muted);
  stroke-linejoin: round;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
}

.wf-tool > rect:first-child {
  fill: var(--card);
}

.wf-encoder {
  fill: var(--card);
  stroke: var(--encoded);
  stroke-width: 2;
}

.wf-encoder-ring {
  fill: none;
  stroke: var(--encoded);
  stroke-dasharray: 3 4;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
}

.wf-model {
  fill: var(--card);
  stroke: var(--ink-muted);
  stroke-width: 1.5;
}

.wf-model-core {
  fill: none;
  stroke: var(--ink-muted);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
}

.wf-packet {
  fill: #e6798a;
  stroke: var(--card);
  stroke-width: 2;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  /* Spreadsheet: a scan line finds the sensitive cells, they break into encoded
     dots as it passes, then the answer builds on the right. */
  .workflow.is-animating .wf-scan { animation: wf-scan 1.4s 0.3s linear both; }
  .workflow.is-animating .wf-secret { animation: wf-encode 0.7s ease-in-out both; }
  .workflow.is-animating .wf-d1 { animation-delay: 0.65s; }
  .workflow.is-animating .wf-d2 { animation-delay: 1s; }
  .workflow.is-animating .wf-d3 { animation-delay: 1.35s; }
  .workflow.is-animating .wf-bar { animation: wf-grow 0.6s cubic-bezier(0.2, 0.75, 0.25, 1) both; }
  .workflow.is-animating .wf-b1 { animation-delay: 1.9s; }
  .workflow.is-animating .wf-b2 { animation-delay: 2s; }
  .workflow.is-animating .wf-b3 { animation-delay: 2.1s; }
  .workflow.is-animating .wf-b4 { animation-delay: 2.2s; }

  /* Record: identifiers are picked out one by one and encoded, then the summary
     and its label come back. */
  .workflow.is-animating .wf-r1 { animation-delay: 0.35s; }
  .workflow.is-animating .wf-r2 { animation-delay: 0.6s; }
  .workflow.is-animating .wf-r3 { animation-delay: 0.85s; }
  .workflow.is-animating .wf-r4 { animation-delay: 1.1s; }
  .workflow.is-animating .wf-summary { animation: wf-draw 0.9s 1.95s ease-out both; }
  .workflow.is-animating .wf-label { animation: wf-pop 0.45s 2.7s cubic-bezier(0.3, 1.4, 0.5, 1) both; }

  /* Agents: each tool in turn sends a call. It is encoded at the boundary,
     reaches the model and comes back decoded. */
  .workflow.is-animating .wf-packet-a { animation: wf-packet-a 1.8s 0.2s ease-in-out both; }
  .workflow.is-animating .wf-packet-b { animation: wf-packet-b 1.8s 1.1s ease-in-out both; }
  .workflow.is-animating .wf-packet-c { animation: wf-packet-c 1.8s 2s ease-in-out both; }
  .workflow.is-animating .wf-encoder-ring { animation: wf-pulse 0.45s 0.7s ease-in-out, wf-pulse 0.45s 1.6s ease-in-out, wf-pulse 0.45s 2.5s ease-in-out; }
  .workflow.is-animating .wf-model-core { animation: wf-pulse-big 0.5s 1.05s ease-in-out, wf-pulse-big 0.5s 1.95s ease-in-out, wf-pulse-big 0.5s 2.85s ease-in-out; }
  .workflow.is-animating .wf-tool-a { animation: wf-tool 0.5s 1.75s ease-in-out; }
  .workflow.is-animating .wf-tool-b { animation: wf-tool 0.5s 2.65s ease-in-out; }
  .workflow.is-animating .wf-tool-c { animation: wf-tool 0.5s 3.55s ease-in-out; }
}

@keyframes wf-scan {
  0% { opacity: 0; transform: translateX(0); }
  10%, 88% { opacity: 0.55; }
  100% { opacity: 0; transform: translateX(226px); }
}

@keyframes wf-encode {
  0% { stroke: #e6798a; stroke-dasharray: 80 0; stroke-width: 6; }
  25% { stroke: #e6798a; stroke-dasharray: 80 0; stroke-width: 10; }
  100% { stroke: #4958d1; stroke-dasharray: 0 10; stroke-width: 6; }
}

@keyframes wf-grow {
  0% { transform: scaleY(0.05); }
  100% { transform: scaleY(1); }
}

@keyframes wf-draw {
  0% { stroke-dashoffset: 200; }
  100% { stroke-dashoffset: 0; }
}

@keyframes wf-pop {
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes wf-packet-a {
  0% { opacity: 0; transform: translate(84px, 43px); fill: #e6798a; }
  6% { opacity: 1; }
  32% { transform: translate(212px, 95px); fill: #e6798a; }
  40% { transform: translate(238px, 95px); fill: #4958d1; }
  55%, 62% { transform: translate(306px, 95px); fill: #4958d1; }
  76% { transform: translate(238px, 95px); fill: #4958d1; }
  84% { transform: translate(212px, 95px); fill: #e6798a; }
  95% { opacity: 1; }
  100% { opacity: 0; transform: translate(84px, 43px); fill: #e6798a; }
}

@keyframes wf-packet-b {
  0% { opacity: 0; transform: translate(84px, 95px); fill: #e6798a; }
  6% { opacity: 1; }
  32% { transform: translate(212px, 95px); fill: #e6798a; }
  40% { transform: translate(238px, 95px); fill: #4958d1; }
  55%, 62% { transform: translate(306px, 95px); fill: #4958d1; }
  76% { transform: translate(238px, 95px); fill: #4958d1; }
  84% { transform: translate(212px, 95px); fill: #e6798a; }
  95% { opacity: 1; }
  100% { opacity: 0; transform: translate(84px, 95px); fill: #e6798a; }
}

@keyframes wf-packet-c {
  0% { opacity: 0; transform: translate(84px, 147px); fill: #e6798a; }
  6% { opacity: 1; }
  32% { transform: translate(212px, 95px); fill: #e6798a; }
  40% { transform: translate(238px, 95px); fill: #4958d1; }
  55%, 62% { transform: translate(306px, 95px); fill: #4958d1; }
  76% { transform: translate(238px, 95px); fill: #4958d1; }
  84% { transform: translate(212px, 95px); fill: #e6798a; }
  95% { opacity: 1; }
  100% { opacity: 0; transform: translate(84px, 147px); fill: #e6798a; }
}

@keyframes wf-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.22); }
}

@keyframes wf-pulse-big {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.4); }
}

@keyframes wf-tool {
  0%, 100% { transform: scale(1); stroke: var(--ink-muted); }
  50% { transform: scale(1.12); stroke: var(--ink); }
}

.tags {
  color: var(--ink-muted);
  text-align: center;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
}

.workflows-nav {
  display: none;
}

/* Phones: the three workflows sit in one row you swipe or step through with the
   arrows. Native horizontal scrolling, so vertical swipes always scroll the page. */
@media (max-width: 760px) {
  .workflows {
    display: flex;
    gap: 12px;
    margin-inline: calc(-1 * var(--page-x));
    padding: 2px var(--page-x) 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--page-x);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .workflows::-webkit-scrollbar {
    display: none;
  }

  .workflow {
    flex: 0 0 calc(100% - 28px);
    scroll-snap-align: start;
  }

  .motion-ready .workflows-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    margin-top: 16px;
  }

  .workflows-arrows {
    display: flex;
    gap: 12px;
  }

  .workflows-arrow {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--ink);
    background: var(--card);
    border: 1px solid rgba(30, 31, 39, 0.25);
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
  }

  .workflows-arrow:disabled {
    color: #7d7f86;
    border-color: var(--hairline);
    cursor: default;
  }

  .workflows-count {
    color: var(--ink-muted);
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.06em;
  }
}

@media (max-width: 980px) {
  .workflows {
    grid-template-columns: 1fr;
  }

  .matter-visual svg {
    height: 110px;
  }
}

/* ---------- 7 · Pilot and people (R7, R8) ---------- */

.pilot {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.pilot-offer .label,
.people > .label {
  margin-bottom: 16px;
}

.pilot-steps {
  display: grid;
  margin: 28px 0 26px;
  border-top: 1px solid var(--hairline);
}

.pilot-steps li {
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
}

.pilot-steps h3 {
  font-size: 20px;
}

.pilot-steps p {
  margin-top: 4px;
  color: var(--ink-muted);
  font-size: 16px;
}

.pilot-note {
  margin: 18px 0 26px;
  color: var(--ink-muted);
  font-size: var(--fs-small);
}

.people {
  padding: clamp(24px, 3vw, 36px);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
}

.people-title {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 560;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.people > p:not(.label) {
  margin-top: 12px;
  color: var(--ink-muted);
  font-size: 16px;
}

.founders {
  display: grid;
  gap: 20px;
  margin-top: 24px;
}

.founder {
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}


.founder-name {
  font-size: 20px;
  font-weight: 650;
}

.founder-role {
  color: var(--ink-muted);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.founder-bio {
  margin-top: 8px;
  color: var(--ink-muted);
  font-size: 16px;
}

@media (max-width: 980px) {
  .pilot {
    grid-template-columns: 1fr;
  }
}

/* ---------- 8 · Closing form (R7, R10, R11) ---------- */

.closing {
  position: relative;
  padding: calc(var(--section-y) * 0.8) var(--page-x) var(--section-y);
  overflow: hidden;
}

.closing-head {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.closing-head h2 {
  font-size: var(--fs-closing);
  line-height: 0.98;
}

.closing-head .standfirst {
  margin-inline: auto;
}

.closing-flight {
  position: absolute;
  right: -30px;
  bottom: -20px;
  width: 260px;
  opacity: 0.16;
  transform: rotate(-8deg);
  pointer-events: none;
}

.contact-form {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
  max-width: 720px;
  margin: clamp(32px, 4vw, 44px) auto 0;
  padding: clamp(22px, 3vw, 32px);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 18px;
}

.form-intro {
  grid-column: 1 / -1;
  color: var(--ink);
  font-size: 16px;
}

.form-honeypot {
  position: absolute;
  left: -9999px;
}

.contact-form label {
  display: grid;
  gap: 8px;
}

.contact-form label > span {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contact-form label i {
  margin-left: 6px;
  color: var(--ink-muted);
  font-style: normal;
  font-weight: 400;
  text-transform: none;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--field-edge);
  border-radius: 6px;
  font-size: 16px;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #6b6d74;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--ink);
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.form-wide,
.form-submit,
.form-legal,
.form-status {
  grid-column: 1 / -1;
}

.form-submit {
  justify-content: center;
  width: 100%;
}

.form-legal {
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.5;
}

.form-legal a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-status:empty {
  display: none;
}

.form-status {
  padding: 14px 16px;
  background: var(--encoded-wash);
  border-radius: 8px;
  font-size: 16px;
}

.form-status a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-status.is-error {
  color: var(--fail);
  background: var(--fail-wash);
}

@media (max-width: 680px) {
  .contact-form {
    grid-template-columns: 1fr;
  }
}

/* ---------- Footer (R10) ---------- */

.site-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px 32px;
  align-items: center;
  padding: 32px var(--page-x);
  border-top: 1px solid var(--hairline);
}

.footer-brand img {
  width: 120px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  justify-content: flex-end;
}

.footer-links a,
.footer-copy {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: var(--fs-label);
}

.footer-links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-copy {
  color: var(--ink-muted);
}

@media (max-width: 760px) {
  .site-footer {
    grid-template-columns: 1fr;
  }

  .footer-links {
    justify-content: flex-start;
  }

  .footer-links a {
    min-height: 44px;
  }
}

/* Mobile: "How it works" runs straight into "In the product" on the same ground,
   so the gap between them only needs to separate, not to mark a chapter. */
@media (max-width: 760px) {
  #how {
    padding-bottom: 20px;
  }
}


/* ---------- One section, one screen (desktop) ----------
   Like Oak and Alice, each section should be seen whole, without scrolling inside
   it. These rules compact the sections that ran taller than a 1440x900 screen. */
@media (min-width: 981px) {
  /* Alternatives: tighter rows. */
  #why {
    padding-block: calc(var(--section-y) * 0.85);
  }

  .compare {
    margin-top: 28px;
  }


  /* How it works: the diagram's own top bar folds into the section intro, the
     "click any card" hint joins the controls row, and the diagram is sized to fit
     what is left of the screen (its cards open in full on click). */
  #how {
    padding-top: calc(var(--section-y) * 0.75);
    padding-bottom: calc(var(--section-y) * 0.45);
  }

  #how .section-head {
    margin-bottom: 14px;
  }

  #how .aster-labs-heading {
    display: none;
  }

  #how .aster-labs-flow {
    --aster-chrome: 128px;
    --aster-reserved: calc(var(--header-h) + var(--section-y) * 1.2 + 178px);
  }

  #how [data-ax-status] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  /* In the product: the two screenshots side by side, caption above each. */
  .shots {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .shot {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 14px;
  }

  .shot figcaption p {
    font-size: 18px;
  }

  .shot-scroll {
    max-height: 330px;
  }

  /* Security and quality: headline and parity result on the left, questions right. */
  .proof-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 6vw, 112px);
    align-items: start;
  }

  .proof-side .section-head {
    display: block;
  }

  .proof-side .parity {
    margin-top: 36px;
  }

  .proof-main .faq {
    margin-top: 0;
  }

  .faq-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 0;
  }

  .faq dt {
    font-size: 20px;
  }

  .faq dd {
    font-size: 16px;
  }

  .parity-result strong {
    font-size: clamp(26px, 2.4vw, 34px);
  }

  /* Closing: headline on the left, form on the right. */
  .closing {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 6vw, 112px);
    align-items: center;
    max-width: calc(var(--content-max) + 2 * var(--page-x));
    margin-inline: auto;
  }

  .closing-head {
    margin: 0;
    text-align: left;
  }

  .closing-head .standfirst {
    margin-inline: 0;
  }

  .contact-form {
    max-width: none;
    margin: 0;
  }

  .form-legal {
    font-size: 14px;
  }
}

/* Mobile keeps the original order: questions first, then the parity result. */
@media (max-width: 980px) {
  .proof-grid,
  .proof-side,
  .proof-main {
    display: contents;
  }

  .proof-grid {
    display: flex;
    flex-direction: column;
  }

  .proof-side .parity {
    order: 3;
  }

  .proof-main {
    order: 2;
  }
}

@media (min-width: 981px) {
  .pilot-steps li {
    padding: 14px 0;
  }

  .pilot-steps {
    margin: 22px 0 22px;
  }
}

/* ---------- Alternatives rows (8033) ----------
   The catch is the line that matters, so it never moves: it sits under the name
   (mobile) or beside it (desktop). Opening a row only adds a quieter line beneath
   the catch, showing what the model receives. Slightly larger than before. */
.compare tbody tr {
  display: flex;
  flex-direction: column;
  padding: 22px 0;
}

.compare tbody th {
  order: 0;
  margin-bottom: 8px;
  font-size: 20px;
}

.compare tbody td,
.motion-ready .compare-row.is-rejected:not(.is-open) td:last-child {
  display: block;
  padding: 0 0 0 36px;
  font-size: 17px;
  line-height: 1.5;
}

.compare tbody td::before,
.motion-ready .compare-row.is-rejected:not(.is-open) td:last-child::before {
  content: none;
}

.compare tbody td:last-child {
  order: 1;
}

.compare tbody .compare-detail,
.motion-ready .compare-row.is-open .compare-detail {
  order: 2;
  display: block;
  margin-top: 10px;
  color: var(--on-band-muted);
  font-size: 16px;
}

.motion-ready .compare-row.is-rejected:not(.is-open) .compare-detail {
  display: none;
}

.compare tbody .compare-detail::before {
  content: attr(data-label);
  display: block;
  margin-bottom: 4px;
  color: var(--on-band-muted);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.compare tbody .compare-flaxmor td {
  padding-left: 0;
}

.compare tbody .compare-flaxmor .compare-detail {
  color: var(--on-band);
}

@media (min-width: 761px) {
  .compare tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 0.52fr) minmax(0, 1fr);
    column-gap: 48px;
    align-items: baseline;
    padding: 18px 0;
  }

  .compare tbody th {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
    font-size: var(--fs-h3);
  }

  .compare tbody td,
  .motion-ready .compare-row.is-rejected:not(.is-open) td:last-child {
    grid-column: 2;
    padding-left: 0;
    font-size: 18px;
  }

  .compare tbody td:last-child {
    grid-row: 1;
  }

  .compare tbody .compare-detail,
  .motion-ready .compare-row.is-open .compare-detail {
    grid-row: 2;
    font-size: 16px;
  }

  .compare tbody .compare-flaxmor {
    padding-block: 22px !important;
  }

  .verdict-no {
    width: 26px;
    height: 26px;
    top: calc((1.25em - 26px) / 2);
  }

  .compare-logo {
    width: 160px;
  }
}

@media (max-width: 760px) {
  .compare tbody td {
    padding-right: 8px;
  }
}

/* Whole row toggles (8033): click anywhere on a rejected approach. */
.motion-ready .compare-row.is-rejected {
  cursor: pointer;
}

.motion-ready .compare-row.is-rejected:hover .compare-chevron {
  border-color: var(--on-band);
}

.motion-ready .compare-row.is-rejected:hover .approach {
  text-decoration: underline;
  text-decoration-color: rgba(244, 240, 232, 0.35);
  text-underline-offset: 5px;
}

/* Desktop: the catch spans the row; opening it shows "what the model receives"
   and "what you get back" side by side beneath it. */
@media (min-width: 761px) {
  .compare tbody tr.compare-row {
    grid-template-columns: minmax(0, 0.52fr) minmax(0, 0.5fr) minmax(0, 0.5fr);
  }

  .compare tbody tr.compare-row th {
    grid-row: 1 / span 2;
  }

  .compare tbody tr.compare-row td:last-child,
  .motion-ready .compare-row.is-rejected:not(.is-open) td:last-child {
    grid-column: 2 / span 2;
    grid-row: 1;
  }

  .compare tbody tr.compare-row td.compare-detail {
    grid-column: 2;
    grid-row: 2;
    padding-right: 24px;
  }

  .compare tbody tr.compare-row td.compare-back {
    grid-column: 3;
  }
}

/* How it works: the diagram fills the screen again; only the section intro
   scrolls past first. */
@media (min-width: 981px) {
  #how .aster-labs-flow {
    --aster-chrome: 120px;
    --aster-reserved: calc(var(--header-h) + 28px);
  }
}

/* Product screenshots: click (or the Enlarge button) to read them full size. */
.shot-frame[data-enlarge] {
  cursor: zoom-in;
}

.shot-enlarge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  color: var(--ink);
  background: rgba(255, 253, 248, 0.94);
  border: 1px solid rgba(30, 31, 39, 0.22);
  border-radius: 999px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: var(--fs-label);
  font-weight: 600;
  cursor: zoom-in;
}

.shot-frame:hover .shot-enlarge {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}

.shot-dialog {
  width: min(1240px, calc(100% - 40px));
  max-height: calc(100vh - 60px);
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(30, 31, 39, 0.3);
}

.shot-dialog::backdrop {
  background: rgba(30, 31, 39, 0.6);
}

.shot-dialog-body {
  max-height: calc(100vh - 60px);
  overflow: auto;
}

.shot-dialog-body img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

.shot-dialog-close {
  position: sticky;
  top: 12px;
  float: right;
  z-index: 3;
  width: 40px;
  height: 40px;
  margin: 12px 12px -52px 0;
  color: #fff;
  background: var(--ink);
  border: 0;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 760px) {
  .shot-dialog {
    width: calc(100% - 16px);
    max-height: calc(100vh - 32px);
  }

  .shot-dialog-body {
    max-height: calc(100vh - 32px);
  }

  /* Wide enough to read on a phone; pan sideways. */
  .shot-dialog-body img {
    width: 900px;
  }
}

/* Desktop, open rows (and the flaxmor row): the row spreads into the full table:
   name | what the model receives | what you get back | the catch. Closed rows keep
   just the name and the catch. */
@media (min-width: 761px) {
  .compare tbody tr.compare-row {
    grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.42fr) minmax(0, 0.42fr) minmax(0, 0.56fr);
  }

  .compare tbody tr.compare-row td:last-child,
  .motion-ready .compare-row.is-rejected:not(.is-open) td:last-child {
    grid-column: 2 / -1;
    grid-row: 1;
  }

  .compare tbody tr.compare-row.is-open,
  .compare tbody tr.compare-flaxmor {
    align-items: start;
  }

  .compare tbody tr.compare-row.is-open th,
  .compare tbody tr.compare-flaxmor th {
    grid-row: 1;
  }

  .compare tbody tr.compare-row.is-open td.compare-detail,
  .compare tbody tr.compare-flaxmor td.compare-detail {
    grid-row: 1;
    grid-column: 2;
    margin-top: 0;
    font-size: 16px;
  }

  .compare tbody tr.compare-row.is-open td.compare-back,
  .compare tbody tr.compare-flaxmor td.compare-back {
    grid-column: 3;
  }

  .compare tbody tr.compare-row.is-open td:last-child,
  .compare tbody tr.compare-flaxmor td:last-child {
    grid-column: 4;
    font-size: 16px;
  }

  .compare tbody tr.compare-row.is-open td:last-child::before,
  .compare tbody tr.compare-flaxmor td:last-child::before {
    content: "The catch";
    display: block;
    margin-bottom: 4px;
    color: var(--on-band-muted);
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* Names line up with the values, below the small column labels. */
  .compare tbody tr.compare-row.is-open th {
    padding-top: 18px;
  }

  .compare tbody tr.compare-flaxmor th {
    padding-top: 14px;
  }
}

@media (min-width: 761px) {
  .compare tbody tr.compare-row {
    grid-template-columns: minmax(0, 0.66fr) minmax(0, 0.42fr) minmax(0, 0.42fr) minmax(0, 0.56fr);
    column-gap: 36px;
  }

  /* The flaxmor row shares the same column lines as the rows above. */
  .compare tbody tr.compare-flaxmor {
    padding-inline: 0 !important;
  }

  .compare tbody .compare-flaxmor th {
    padding-left: 22px;
  }

  .compare tbody tr.compare-flaxmor td:last-child {
    padding-right: 22px;
  }
}

/* Less clutter (8033): one chevron per row, at the far right like the FAQ. */
@media (min-width: 761px) {
  .compare tbody tr.compare-row {
    position: relative;
  }

  .compare tbody tr.compare-row .compare-chevron {
    position: absolute;
    top: 34px;
    right: 8px;
    margin: 0;
  }

  .compare tbody tr.compare-row td:last-child {
    padding-right: 44px;
  }
}

/* Phones: the hero eyebrow stays on one line (a wrapped eyebrow competes with the H1). */
@media (max-width: 760px) {
  .intro-eyebrow {
    letter-spacing: 0.02em;
  }
}

/* Phones: the header CTA drops "design" so it fits beside the logo and menu. */
@media (max-width: 760px) {
  .header-cta .cta-long {
    display: none;
  }
}

/* Hero, desktop (8033): the first screen belongs to the hero alone, as on Oak,
   Alice, June and Jazz (SPACE-01, LAYOUT-01). It fills the viewport under the
   header, with more air above the eyebrow and between the copy blocks; the proof
   strip sits on the bottom edge of the screen, like Alice's logo bar. */
@media (min-width: 981px) and (min-height: 700px) {
  .intro {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - var(--header-h));
    padding-top: clamp(48px, 9vh, 120px);
    padding-bottom: clamp(24px, 4vh, 44px);
  }

  .intro-inner {
    flex: 1 0 auto;
    width: 100%;
  }

  .intro-title {
    margin-top: 28px;
  }

  .intro-lede {
    margin-top: 30px;
  }

  .intro-actions {
    margin-top: 40px;
  }

  .intro-proof {
    width: 100%;
    margin-top: clamp(32px, 5vh, 56px);
  }
}