/*
 * Landing page.
 *
 * One stylesheet, on the tokens in variables.css. The hero is the locked
 * direction (2026-10-15) and sets the system; the sections below it are a
 * neutral baseline on the same tokens, awaiting their own design pass and
 * final copy. Hero sizes are fixed from 1200px wide up and scale down with the
 * container (cqw) below that, so nothing grows past its desktop size.
 */

/* Magnet (Frere-Jones Type): licensed webfont, self-hosted; Medium is the
   licensed weight. The licence covers the marketing site. Same files the app ships. */
@font-face {
  font-family: 'Magnet';
  src: url('/assets/fonts/Magnet-Medium.woff2') format('woff2'),
       url('/assets/fonts/Magnet-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── Base ──────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

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

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 9px 16px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--clr-brand);
  border: 1px solid var(--clr-brand);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.btn-quiet {
  color: var(--clr-ink);
  background: transparent;
  border-color: var(--clr-panel-line);
}

.btn-lg { padding: 14px 28px; font-size: 16px; }

.btn:focus-visible { outline: 2px solid var(--clr-brand); outline-offset: 2px; }

/* ── Nav ───────────────────────────────────────────────────────────────── */

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: var(--max-w);
  margin: 32px auto 0;
  padding: 0 20px 12px;
  font-family: var(--font-ui);
}

.site-logo { display: inline-flex; align-items: center; line-height: 0; }
.site-logo img { height: 26px; width: auto; display: block; }

.site-nav-links {
  display: flex;
  gap: 18px;
  margin-right: auto;
  font-size: 14px;
}

.site-nav-links a,
.nav-link {
  color: var(--clr-body);
  font-size: 14px;
  text-decoration: none;
}

.site-nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
}

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

.hero-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  /* 16:11 up to 1200px wide, then the composition stops growing. */
  min-height: min(68.75cqw, 825px);
  padding: 0 20px;
  background: linear-gradient(180deg, var(--clr-bg) 0%, var(--clr-bg-warm) 100%);
}

/* The illustration halves: 50% of the hero width each, behind the panel. */
.hero-stack {
  position: absolute;
  z-index: 0;
  bottom: max(-9cqw, -108px);
  width: min(60cqw, 720px);
  height: auto;
  pointer-events: none;
  user-select: none;
}
/* The stacks are locked to the window edges at full size from 1200px up, so
   narrowing the page brings them toward each other and further under the
   card. Below 1200px they scale down with the page. */
.hero-stack-left { left: max(-11cqw, -132px); }
.hero-stack-right { right: max(-11cqw, -132px); }

.hero-card {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: min(8.5cqw, 102px) 0 min(6cqw, 72px);
  text-align: center;
}

.hero-title {
  max-width: min(66cqw, 760px);
  margin: 0 auto min(1.4cqw, 16px);
  font-family: var(--font-display);
  font-size: clamp(40px, 4.5cqw, 54px);   /* 54px from 1200 up, never below 40 */
  font-weight: 500;                  /* Magnet Medium */
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--clr-ink);
  text-wrap: balance;
}

/* The turning team word (assets/js/hero-words.js), a split-flap like a
   departures board, in one rhythm for every change: the old word flips down
   flat (0–0.26s), then the slot glides to the new word's width for --slide
   (set from the distance, so "teams." always moves at the same speed), then
   the new word flips up into place. The words are flat while "teams." moves,
   so they never overlap it. */
.hero-word {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  transition: width var(--slide, 0.35s) cubic-bezier(0.45, 0, 0.25, 1) 0.26s;
}
.hero-word-ghost { visibility: hidden; }
.hero-word-now {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  perspective: 900px;
}
.hero-flap {
  display: inline-block;
  transform-origin: 50% 60%;
  backface-visibility: hidden;
  transition: transform 0.36s cubic-bezier(0.2, 0.9, 0.3, 1.15) calc(0.26s + var(--slide, 0.35s));
}
.is-entering .hero-flap { transform: rotateX(-90deg); }
.is-leaving .hero-flap {
  transform: rotateX(90deg);
  transition: transform 0.26s cubic-bezier(0.6, 0, 0.9, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .hero-word, .hero-flap { transition: none; }
}

.hero-sub {
  max-width: min(50cqw, 560px);
  margin: 0 auto min(2.8cqw, 32px);
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.4167cqw, 17px);
  line-height: 1.5;
  color: var(--clr-body);
}

/* The panel: one outer box, two columns of equal height. */
.hero-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 46fr 54fr;
  gap: min(0.9167cqw, 11px);
  align-items: stretch;
  width: min(66cqw, 792px);
  margin: 0 auto;
  padding: min(0.9167cqw, 11px);
  text-align: left;
  background: var(--clr-panel);
  border: 1px solid var(--clr-panel-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
}

/* Left column: the five jobs as plain rows on the panel surface. */
.jobs-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.job {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: min(0.8cqw, 10px);
  width: 100%;
  padding: min(0.8333cqw, 10px) min(1.0833cqw, 13px);
  font-family: var(--font-ui);
  font-size: clamp(13px, 1.1667cqw, 14px);
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  color: var(--clr-ink);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.job:hover { background: rgba(255, 255, 255, 0.55); }
.job:focus-visible { outline: 2px solid var(--clr-brand); outline-offset: 2px; }

.job-arrow {
  flex: none;
  width: 13px;
  height: 13px;
  color: var(--clr-hairline);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
}

.job[aria-pressed='true'] {
  color: var(--clr-brand);
  font-weight: 500;
  background: var(--clr-card);
}
.job[aria-pressed='true'] .job-arrow { color: var(--clr-brand); }

/* Right column: the composer is the only card. */
.composer { margin: 0; display: flex; }

.composer-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  min-height: 0;
  padding: min(1.4167cqw, 17px) min(1.5833cqw, 19px) min(1.1667cqw, 14px);
  background: var(--clr-card);
  border-radius: var(--radius-md);
}

.composer-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* No gap: the job's opening already ends with the one space before what
     they type, and a flex gap on top of it reads as a double space. */
  gap: 0;
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.3333cqw, 16px);
  line-height: 1.45;
}

/* The half-sentence the job wrote. Not editable, and not a placeholder. */
.composer-opening {
  color: var(--clr-brand);
  white-space: pre-wrap;
}

.composer-input {
  flex: 1 1 min(8cqw, 96px);
  min-width: 0;
  padding: 0 0 0 min(0.3cqw, 4px);
  font-family: var(--font-ui);
  font-size: inherit;
  line-height: inherit;
  color: var(--clr-ink);
  background: transparent;
  border: 0;
  border-left: 2px solid var(--clr-brand);
  outline: none;
  caret-color: var(--clr-brand);
}
.composer-input::placeholder { color: var(--clr-quiet); }

.composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: min(1cqw, 12px);
  margin-top: min(1.4cqw, 17px);
}

.composer-hint {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.3;
  color: var(--clr-quiet);
}
.composer-hint[data-state='error'] { color: var(--clr-flag); }

/* The send: a rounded square, like the app's composer button. */
.composer-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  color: #fff;
  background: var(--clr-brand);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.composer-go svg { width: 18px; height: 18px; }
/* Solid even while disabled; the script keeps it closed until a job is picked. */
.composer-go:disabled { cursor: not-allowed; }
.composer-go:focus-visible { outline: 2px solid var(--clr-brand); outline-offset: 2px; }

.composer-turnstile:not([hidden]) { margin-top: min(1cqw, 12px); }

/* ── Sections (baseline, awaiting their own design pass) ───────────────── */

.section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 72px 20px;
}

/* One continuous surface below the hero: no alternating bands. The hero ends
   on the warm tone, so this picks it up at exactly that tone and fades to
   white over the first stretch, then a few soft washes sit at irregular
   points further down. Wash positions are percentages of the whole wrapper,
   so they do not follow the section rhythm. */
.page-body {
  background:
    linear-gradient(180deg, var(--clr-bg-warm) 0, var(--clr-bg) 480px),
    radial-gradient(ellipse 70% 18% at 88% 30%, var(--clr-panel) 0%, transparent 70%),
    radial-gradient(ellipse 60% 14% at 8% 55%, var(--clr-bg-warm) 0%, transparent 70%),
    radial-gradient(ellipse 80% 16% at 60% 84%, var(--clr-panel) 0%, transparent 70%),
    var(--clr-bg);
}

.section h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--clr-ink);
}

.section h3 {
  margin: 0 0 6px;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  color: var(--clr-ink);
}

.lede {
  margin: 0 0 32px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--clr-body);
}

.lede-wide { max-width: 620px; }

/* Content slots: where an image, screenshot or logo wall will go. */
.visual-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  margin: 28px 0 0;
  padding: 24px 16px;
  background: var(--clr-panel);
  border: 1px solid var(--clr-panel-line);
  border-radius: var(--radius-md);
  color: var(--clr-quiet);
  font-size: 14px;
  text-align: center;
}

.visual-slot::before {
  content: attr(data-label);
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clr-quiet);
}

.visual-slot-wide { min-height: 120px; }
.visual-slot-tile { min-height: 72px; margin: 0 0 14px; }
.visual-slot-tile::before { font-size: 10px; }

/* ── Connections: logo stacks ────────────────────────────────────────
   Static stacks in the jobs2 block system, straight on the page; the SVG
   scales with the column. */
.blocks-wall { margin: 20px 0 0; overflow: hidden; }
.logo-stacks { display: block; width: 100%; height: auto; }
/* From tablet up: the mass climbs to the right, so it is pulled up under the
   heading and the copy sits over its low end. Both the pull and the copy's
   width are fractions of the column, so the composition holds its shape
   as it scales rather than switching layouts at a breakpoint. */
@media (min-width: 600px) {
  #data h2, #data .lede, #data .aside-copy { position: relative; z-index: 1; }
  #data .lede { max-width: min(520px, 60%); }
  .blocks-wall { margin-top: -12.5%; }
}
/* Phones: under the copy, shown larger and cropped from the low left end so
   the peak and the marks stay legible. */
@media (max-width: 599px) {
  .logo-stacks { width: 150%; margin-left: -50%; }
  /* One plan per row; the blocks no longer need a shared floor. (Scoped to
     #pricing so it outranks the base rules, which come later in the file.) */
  #pricing .pricing { grid-template-columns: 1fr; }
  #faq .qa-wrap { grid-template-columns: 1fr; }
  #faq .qa-list { grid-column: auto; }
  #pricing .plan-blocks { margin-top: 0; }
}

/* Steps */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The icon marks the top of each column now; the old ink rule went. */
.steps li { padding-top: 0; }

/* Keeps a wrapped heading from leaving a word or two stranded on its second line. */
.steps h3 { text-wrap: balance; }

.steps p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--clr-body); }

/* Ideas */
.agents {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* The hero panel's treatment: beige surface, no outline, with the mock
   sitting on it as a plain white box the way the composer does. */
.agent {
  padding: 18px;
  background: var(--clr-panel);
  border: 0;
  border-radius: var(--radius-md);
}

.agent-builds { margin: 0; font-size: 14px; line-height: 1.5; color: var(--clr-body); }

.agent-more {
  display: flex;
  flex-direction: column;
}

/* Named agents, as a chip row (section 5). */
/* Limitless possibilities is centred: its rows are symmetric, so the
   heading sits on their axis, and it breaks up the run of left-aligned
   sections around it. */
#agents h2, #agents .lede { text-align: center; }
#agents .lede { margin-left: auto; margin-right: auto; }

/* Limitless possibilities: two rows of agent tiles drifting in opposite
   directions, faded at both ends. Each row holds its set twice, so moving
   it by half its width loops without a seam. */
.agent-rows {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.agent-row { display: flex; width: max-content; animation: agent-drift 56s linear infinite; }
.agent-row-rev { animation-direction: reverse; animation-duration: 64s; }
.agent-rows:hover .agent-row { animation-play-state: paused; }
@keyframes agent-drift { to { transform: translateX(-50%); } }
.agent-set { display: flex; gap: 12px; margin: 0; padding: 0 12px 0 0; list-style: none; }
.agent-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 10px;
  background: var(--clr-panel);
  border-radius: 16px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--clr-ink);
  white-space: nowrap;
}
.agent-ico { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--clr-card); color: var(--clr-brand); }
.agent-ico svg { width: 22px; height: 22px; fill: var(--clr-brand-tint); stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.agent-next { background: transparent; box-shadow: inset 0 0 0 1.5px var(--clr-panel-line); color: var(--clr-body); font-weight: 500; }
.agent-next .agent-ico { background: var(--clr-panel); color: var(--clr-body); }
.agent-next .agent-ico svg { fill: none; }
@media (prefers-reduced-motion: reduce) {
  .agent-rows { -webkit-mask-image: none; mask-image: none; }
  .agent-row { width: auto; animation: none; }
  .agent-set { flex-wrap: wrap; padding: 0; }
  .agent-set[aria-hidden="true"] { display: none; }
}

/* Team: each point travels with its tile. On wide screens the column
   wrappers dissolve (display: contents) so points fill the first grid row
   and tiles the second, and the tiles line up whatever the copy length. */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; grid-auto-flow: column; column-gap: 24px; row-gap: 14px; }
.team-col { display: contents; }
.team-point h3 { margin: 0 0 6px; }
.team-point p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--clr-body); }
.team-tile { display: flex; min-width: 0; }
.team-tile .mock-team { flex: 1; }

/* The team section is a beige band that fades in from the page above and
   out to the page below, so its three tiles can sit on it as plain white. */
.section-team { max-width: none; padding: 140px 0 120px; background: linear-gradient(180deg, transparent 0, var(--clr-panel) 260px); }
/* …and the trust line sits on the same beige, which fades out below it. */
.section-trust { max-width: none; padding: 0 0 48px; background: linear-gradient(180deg, var(--clr-panel) 0, var(--clr-panel) 60px, transparent 100%); }
/* Lucide shield-check under the tagline, in the step icons' two-tone brand
   treatment on the brand tint. */
.band-ico { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-top: 26px; border-radius: 18px; background: var(--clr-brand-tint); color: var(--clr-brand); }
.band-ico svg { width: 30px; height: 30px; fill: var(--clr-brand-tint); stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.team-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }
.section-team h2 { margin-bottom: 32px; }

.aside-copy { margin: 18px 0 0; font-size: 14px; color: var(--clr-quiet); }

/* Trust band */
.section-band { text-align: center; }

.band-copy {
  font-family: var(--font-display);
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--clr-brand);
  text-wrap: balance;
}

/* Pricing */
.pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px;
}

/* Beige cards with no outline, like the idea cards. Each opens on its
   blocks, sitting on a common floor so the stacks read as growing from
   Free to Max, then the copy and the button. */
.plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px;
  background: var(--clr-panel);
  border-radius: var(--radius-md);
}
.plan-blocks { align-self: flex-start; width: auto; height: 64px; margin: 72px 0 22px; }
.plan-blocks-pro { height: 100px; margin-top: 36px; }
.plan-blocks-max { height: 136px; margin-top: 0; }
.plan h3 { margin: 0; font-size: 18px; }
.plan .price {
  max-width: none;
  margin: 6px 0 10px;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--clr-ink);
}
.per { margin-left: 4px; font-family: var(--font-ui); font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--clr-quiet); }
.plan-desc { margin: 0 0 24px; font-size: 15px; line-height: 1.5; color: var(--clr-body); }
.plan .btn { margin-top: auto; }


/* FAQ: the heading on the left, the questions down the right as an
   accordion. Lighter rules between items, a plus that turns into a cross
   when open (and turns back as soon as a close starts, not when it ends). */
/* The same three columns and gap as the pricing cards above, so the list
   starts exactly under the second card: heading one third, questions two. */
.qa-wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.qa-list { grid-column: 2 / 4; }
.qa-wrap h2 { margin: 12px 0 0; text-wrap: balance; }
.qa-list { border-bottom: 1px solid var(--clr-panel-line); }
.qa { border-top: 1px solid var(--clr-panel-line); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 600;
  color: var(--clr-ink);
  list-style: none;
  cursor: pointer;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:focus-visible { outline: 2px solid var(--clr-brand); outline-offset: 4px; border-radius: 4px; }
.qa-toggle { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--clr-panel); transition: transform 0.2s ease, background-color 0.2s ease; }
.qa-toggle::before, .qa-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.75px; margin: -0.875px 0 0 -6px; border-radius: 1px; background: var(--clr-ink); }
.qa-toggle::after { transform: rotate(90deg); }
.qa[open]:not([data-closing]) .qa-toggle { transform: rotate(45deg); background: var(--clr-brand-tint); }
.qa[open]:not([data-closing]) .qa-toggle::before, .qa[open]:not([data-closing]) .qa-toggle::after { background: var(--clr-brand); }
/* The answer's wrapper is what the script animates; it clips while it
   grows or shrinks. */
.qa-body { overflow: hidden; }
.qa p { max-width: 560px; margin: 0; padding: 0 44px 22px 0; font-size: 15px; line-height: 1.6; color: var(--clr-body); }
@media (prefers-reduced-motion: reduce) { .qa-toggle { transition: none; } }

/* Closing + footer */
.section-closing { text-align: center; padding-bottom: 40px; }
.section-closing h2 { font-size: 40px; margin-bottom: 20px; }

/* The footer ends the page on the cream, with the block drawing running off
   the bottom edge. The drawing is deliberately overscanned: 230% of the width,
   nudged left, so only its middle shows (the crop Molly approved on the
   sign-up wait screens). All container-relative, so it scales with width. */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  /* Just tall enough that the drawing's tallest stack clears the section above. */
  min-height: 38cqw;
  margin: 0;
  padding: 0 20px;
  background: linear-gradient(180deg, var(--clr-bg) 0%, var(--clr-bg-warm) 100%);
  font-family: var(--font-ui);
}

/* The content sits in the V of the drawing, centred on the page and anchored
   a fixed share of the width up from the bottom so it rides the dip as the
   drawing scales. */
.footer-inner {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 17cqw;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: max-content;
  max-width: calc(100% - 40px);
  text-align: center;
}

.footer-blocks {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -30cqw;
  width: 230cqw;
  max-width: none;
  height: auto;
  transform: translateX(-52%);
  pointer-events: none;
  user-select: none;
}

/* Capped in width so the row wraps to two lines where the V is narrow
   (below about 1760px wide) and stays on one line above that. */
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; max-width: 30cqw; font-size: 14px; }
.footer-links a { color: var(--clr-body); text-decoration: none; }
.footer-links a:hover { color: var(--clr-ink); }

.footer-fine { margin: 0; font-size: 13px; color: var(--clr-quiet); }

/* ── Narrow ────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .site-nav-links { display: none; }

  .hero-stage { min-height: 0; padding-bottom: 36px; }
  .hero-stack { display: none; }
  .hero-card { padding: 44px 0 0; }
  .hero-title { max-width: none; font-size: 34px; }
  .hero-sub { max-width: none; font-size: 17px; margin-bottom: 24px; }
  .hero-panel { grid-template-columns: 1fr; width: auto; gap: 10px; padding: 10px; }
  .jobs-list { gap: 2px; }
  .job { font-size: 15px; padding: 11px 13px; }
  .job-arrow { width: 13px; height: 13px; }
  .composer-box { padding: 16px 16px 14px; }
  .composer-text { font-size: 17px; }
  .composer-hint { font-size: 13px; }
  .composer-go { width: 37px; height: 37px; }
  .composer-go svg { width: 18px; height: 18px; }

  .agents { grid-template-columns: 1fr; }
  .plan { padding: 22px; }
  .plan .price { font-size: 38px; }
  /* Narrow: text, tile, text, tile. */
  .team-grid { display: block; }
  .team-col { display: block; }
  .team-col + .team-col { margin-top: 36px; }
  .team-tile { margin-top: 14px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 48px 16px; }
  .section-team { padding: 100px 0 80px; }
  .section-trust { padding: 0 0 32px; }
  .band-copy { font-size: 26px; }
  .team-inner { padding: 0 16px; }
  .section h2 { font-size: 30px; }
  .section-closing h2 { font-size: 32px; }

  /* Narrow: the V is too tight for a row of links, so the content goes back
     above the band and the blocks start further down. */
  .site-footer { min-height: 70cqw; padding: 40px 16px 0; }
  .footer-inner { position: static; transform: none; width: auto; max-width: none; margin: 0 auto; }
  .footer-links { max-width: none; }
  .footer-blocks { bottom: -34cqw; }
  .start-card { padding: 40px 0 32px; }
  .start-ground { min-height: 40cqw; }
  .start-ground .footer-blocks { bottom: -40cqw; }
}

/* ── Get started page (/start) ─────────────────────────────────────────────
   A screen of its own, like the provisioning questions: logo, the hero's
   entry form, and the footer drawing as the ground beneath it. The narrow
   overrides sit in the media block above. */
.start-page {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background: linear-gradient(180deg, var(--clr-bg) 0, var(--clr-bg-warm) 100%);
}
.start {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  container-type: inline-size;
  padding: 24px 20px 0;
}
.start-card { margin: auto; padding: 32px 0 24px; }
.start-signin { margin: 20px 0 0; font-size: 14px; color: var(--clr-quiet); }
.start-signin a { color: var(--clr-brand); font-weight: 500; }
/* The footer drawing, shorter than on the long page so the form keeps the
   first screen. */
.start-ground { min-height: 20cqw; flex-shrink: 0; background: none; }
.start-ground .footer-blocks { bottom: -44cqw; }

/* ── Product mocks ────────────────────────────────────────────────────────
   Snippets of the application, rebuilt in markup from the tokens so they
   stay crisp and re-skin with the palette. Not screenshots.

   The brand shown — Fernwell — and all of its figures are invented, so
   nothing here exposes a real customer's data and no real brand is named.
   The panels themselves are real ones from the product. Keep it that way:
   these should only ever show things the product actually does.

   The window-sized variants (left rail, breadcrumb, data table, run list,
   share footer) were cut with the artefacts section — recover them from
   commit dcc3e06 if that section ever comes back. */
.mock {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--clr-card);
  border: 1px solid var(--clr-panel-line);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  line-height: 1.35;
  color: var(--clr-ink);
  -webkit-user-select: none;
  user-select: none;
}

/* One panel out of the app, 16:10. */
.mock-tile { margin: 0 0 14px; aspect-ratio: 16 / 10; }

.mock-topbar {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 7px 10px;
  background: var(--clr-panel);
  border-bottom: 1px solid var(--clr-panel-line);
  font-size: 9px;
  font-weight: 500;
  color: var(--clr-text);
  white-space: nowrap;
}

.mock-mark { flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--clr-brand); }

.mock-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  padding: 9px;
}

/* ── KPIs and column chart ────────────────────────────────────────────── */
.mk-kpis { display: flex; flex: none; gap: 7px; }

.mk-kpi {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 6px 7px;
  background: var(--clr-panel);
  border: 1px solid var(--clr-panel-line);
  border-radius: var(--radius-sm);
}

.mk-k { overflow: hidden; font-size: 8px; color: var(--clr-quiet); white-space: nowrap; text-overflow: ellipsis; }
.mk-v { font-size: 12px; font-weight: 600; letter-spacing: -0.01em; color: var(--clr-ink); }

.mk-chart { display: flex; flex: 1; align-items: flex-end; gap: 4px; min-height: 26px; }
.mk-chart span { flex: 1; border-radius: 2px 2px 0 0; background: var(--clr-brand-tint); }
.mk-chart span.on { background: var(--clr-brand); }

/* ── Ranked list ──────────────────────────────────────────────────────── */
.mk-rank { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 7px; }
.mk-rk { display: grid; grid-template-columns: minmax(0, 72px) 1fr 26px; gap: 7px; align-items: center; font-size: 9px; }
.mk-rk > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--clr-text); }
.mk-track { height: 6px; border-radius: 999px; background: var(--clr-panel); }
.mk-fill { display: block; height: 100%; border-radius: 999px; background: var(--clr-hairline); }
.mk-pct { font-size: 9px; color: var(--clr-body); text-align: right; }
.mk-rk-you > span:first-child { font-weight: 600; color: var(--clr-brand); }
.mk-rk-you .mk-fill { background: var(--clr-brand); }
.mk-rk-you .mk-pct { font-weight: 600; color: var(--clr-brand); }
.w38 { width: 38%; } .w24 { width: 24%; } .w17 { width: 17%; }

/* ── Quotes and themes ────────────────────────────────────────────────── */
.mk-quotes { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 6px; }
.mk-q { padding: 5px 6px; background: var(--clr-panel); border-radius: var(--radius-sm); font-size: 9px; color: var(--clr-text); }
.mk-src { display: block; margin-top: 2px; font-size: 8px; color: var(--clr-quiet); }
.mk-chips { display: flex; flex: none; gap: 4px; }
.mk-chip { padding: 2px 6px; border-radius: 999px; background: var(--clr-panel); border: 1px solid var(--clr-panel-line); font-size: 8px; color: var(--clr-body); white-space: nowrap; }
.mk-chip-on { background: var(--clr-brand-tint); border-color: transparent; color: var(--clr-brand); font-weight: 600; }

/* ── Grouped rows and audit rows ──────────────────────────────────────── */
.mk-list { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 7px; }
.mk-li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center; font-size: 9px; color: var(--clr-text); }
.mk-li > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mk-li b { font-weight: 600; color: var(--clr-ink); }
.mk-sev { display: inline-flex; align-items: center; gap: 4px; }
.mk-sev::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--clr-hairline); }
.mk-sev-hi::before { background: var(--clr-flag); }
.mk-sev-md::before { background: #e0a33c; }

/* ── Product mocks: findings ──────────────────────────────────────────────
   Each tile carries ONE concrete finding, not a decorative chart. The test
   for every one of them: does it show why you'd want this agent, by example?
   A share-of-voice bar does not; "here is a question where you are not
   named" does. Content first, chrome second.

   Visual language from the Gener8 Panel Data Explorer, a real app in the
   product: small sentence-case grey labels, bold ink values, colour used to
   mean something (flag = the problem, green = the good direction).

   Fernwell is an invented brand and every figure here is invented with it,
   so nothing names a real brand or exposes a customer's data. They do only
   show things the product genuinely does. Keep both of those true. */
.mock-find {
  --mf-good: #2d8a5f;

  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0 0 14px;
  /* A floor rather than an aspect ratio: aspect-ratio ties height to width,
     which shrinks these exactly where the three-up grid is narrowest and
     clips the lists. A min-height never clips, and since the content is
     fixed-size text they still come out level across a row. */
  min-height: 188px;
  padding: 12px;
  background: var(--clr-card);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  line-height: 1.3;
  -webkit-user-select: none;
  user-select: none;
}

.mf-head { font-size: 12px; font-weight: 600; letter-spacing: -0.01em; color: var(--clr-ink); }
.mf-q { font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--clr-ink); }
.mf-meta { margin-top: 3px; font-size: 8.5px; color: var(--clr-quiet); }
/* Lighter than the panel line: the same token at roughly half strength. */
.mf-rule { margin: 5px 0 4px; border-top: 1px solid color-mix(in srgb, var(--clr-panel-line) 55%, transparent); }
.mf-rows { display: flex; flex-direction: column; gap: 6px; }

/* 1 — the answer you are missing from. */
.mf-row { display: grid; grid-template-columns: 11px minmax(0, 1fr) auto; gap: 7px; align-items: baseline; font-size: 10px; color: var(--clr-text); }
.mf-n { font-size: 8.5px; font-variant-numeric: tabular-nums; color: var(--clr-quiet); }
.mf-row b { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.mf-tag { font-size: 8.5px; color: var(--clr-quiet); }
.mf-miss { color: var(--clr-flag); }
.mf-miss .mf-n, .mf-miss .mf-tag { color: var(--clr-flag); }
.mf-miss b { font-weight: 600; }

/* 2 — a theme that is moving, with the evidence under it. */
.mf-split { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mf-trend { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; color: var(--clr-flag); }

.mf-quote {
  margin-top: auto;
  padding: 8px 10px;
  background: var(--clr-bg-warm);
  border-radius: var(--radius-sm);
  font-size: 10px;
  color: var(--clr-text);
}

.mf-quote span { display: block; margin-top: 3px; font-size: 8px; color: var(--clr-quiet); }

/* 3 — ranked by impact, which reorders ranking by volume. */
.mf-r3 { display: grid; grid-template-columns: minmax(0, 1fr) 42px 38px; gap: 8px; align-items: baseline; font-size: 10px; font-variant-numeric: tabular-nums; color: var(--clr-text); }
.mf-r3 b { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.mf-r3 span { text-align: right; }
.mf-cols { font-size: 7.5px; letter-spacing: 0.02em; font-weight: 600; text-transform: uppercase; color: var(--clr-quiet); }
.mf-cols b { font-weight: 600; }

/* 4 — the divergence worth explaining. */
.mf-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto 46px; gap: 8px; align-items: baseline; margin-bottom: 3px; }
.mf-kv span { font-size: 9px; color: var(--clr-body); }
.mf-kv b { font-size: 13px; font-weight: 700; letter-spacing: -0.02em; color: var(--clr-ink); }
.mf-kv em { font-size: 9px; font-style: normal; font-weight: 600; text-align: right; }
.mf-up { color: var(--mf-good); }
.mf-down { color: var(--clr-flag); }
.mf-flat { color: var(--clr-body); }

/* 5 — a fixable problem with its cost attached. */
.mf-sev { align-self: flex-start; margin-bottom: 4px; padding: 2px 7px; border-radius: 999px; font-size: 7.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.mf-sev-hi { background: #fdeae3; color: #b2411d; }
.mf-sev-md { background: var(--clr-panel); color: var(--clr-body); }
.mf-cons { margin-top: 3px; font-size: 9px; color: var(--clr-body); }
.mf-next { display: flex; align-items: center; gap: 7px; font-size: 9.5px; color: var(--clr-text); }
.mf-next .mf-sev { margin-bottom: 0; }
.mf-next b { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }

/* The rise the multiplier is claiming, with its own axis so it reads as
   a measurement rather than a decorative squiggle. */
.mf-spark { display: flex; flex: 1; flex-direction: column; min-height: 46px; margin: 8px 0; }
.mf-spark svg { display: block; flex: 1; width: 100%; min-height: 0; }
.mf-months { display: flex; justify-content: space-between; margin-top: 3px; font-size: 7px; color: var(--clr-quiet); }

/* A quiet line of scope at the foot of a tile. */
.mf-foot { margin-top: auto; font-size: 8.5px; color: var(--clr-quiet); }

.mf-next-last { margin-top: 5px; }

/* ── Findings: non-list treatments ────────────────────────────────────────
   Most of these tiles are lists, which gets monotonous across a row of
   five. The readout leads on one figure, and the ad audit is a diagram of
   the day rather than a ranking. */

/* A readout leads on its headline figure. */
.mf-eyebrow { font-size: 8.5px; color: var(--clr-quiet); }
.mf-bigline { display: flex; align-items: baseline; gap: 8px; }
.mf-bigline em { font-size: 11px; font-style: normal; font-weight: 600; }
.mf-big { display: block; margin-top: 1px; font-size: 31px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; color: var(--clr-text); }

.mf-weeks { display: flex; align-items: flex-end; gap: 4px; height: 36px; margin: 8px 0 0; }
.mf-weeks span { flex: 1; border-radius: 1.5px 1.5px 0 0; background: var(--clr-brand-tint); }
.mf-weeks span.on { background: var(--clr-brand); }

/* The ad audit, drawn as the day it describes. */
.mf-day { margin: 10px 0 0; }
.mf-track-day { position: relative; height: 9px; border-radius: 999px; background: repeating-linear-gradient(135deg, var(--clr-panel) 0 4px, var(--clr-card) 4px 8px); overflow: hidden; }
.mf-spent { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--clr-brand); }
.mf-cap { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--clr-flag); }
.mf-daylab { display: flex; justify-content: space-between; margin-top: 4px; font-size: 7px; color: var(--clr-quiet); }
.mf-daylab b { font-weight: 600; color: var(--clr-flag); }

.mf-pct { display: flex; align-items: center; gap: 7px; margin-top: 6px; }
.mf-pct b { font-size: 25px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: var(--clr-flag); }
.mf-pct span { font-size: 8.5px; line-height: 1.3; color: var(--clr-body); }

/* Numerals line up column to column; the small detail that stops a table
   looking hand-made. */
.mf-kv b, .mf-kv em, .mf-big, .mf-pct b, .mf-metric b { font-variant-numeric: tabular-nums; }

/* The readout's two supporting metrics, as cards under the headline. */
.mf-pair { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; margin-top: auto; }
.mf-card { padding: 9px 8px; background: var(--clr-bg-warm); border-radius: var(--radius-sm); }
.mf-card span { display: block; font-size: 8px; color: var(--clr-body); }
.mf-card b { display: block; margin-top: 2px; font-size: 14px; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--clr-ink); }
.mf-card em { display: block; margin-top: 1px; font-size: 8px; font-style: normal; font-weight: 600; }

/* The ad audit, as the day's demand with the served part marked off. */
.mf-hours { position: relative; display: flex; align-items: flex-end; gap: 2.5px; height: 46px; margin-top: 8px; }
.mf-hours span { flex: 1; border-radius: 1.5px 1.5px 0 0; background: var(--clr-brand); }
.mf-hours span.off { background: var(--clr-panel-line); }
.mf-cut { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--clr-flag); border-radius: 1px; }
.mf-hourlab { position: relative; display: flex; justify-content: space-between; margin-top: 4px; font-size: 7.5px; color: var(--clr-quiet); }
.mf-hourlab b { position: absolute; transform: translateX(-50%); font-weight: 600; color: var(--clr-flag); white-space: nowrap; }

/* Rating column only: the colour says how bad, the row stays quiet. */
.mf-rate-lo  { font-weight: 600; color: var(--clr-flag); }
.mf-rate-mid { font-weight: 600; color: #b8862b; }
.mf-rate-hi  { font-weight: 600; color: #2d8a5f; }

/* Platform marks, inline with the line they attribute. The paths are the
   Simple Icons set (CC0); the marks themselves remain OpenAI's and Reddit's,
   so check both brand guidelines before this ships. */
.mf-mark { display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1.5px; fill: var(--clr-ink); }
.mf-mark-reddit { fill: #ff4500; }

/* 6 — start from scratch: the empty composer, with a job already half typed.
   The space under the sentence is the input field; it is meant to be open. */
.mock-scratch { justify-content: flex-start; }
.mf-typed { margin: 9px 0 0; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--clr-ink); }
.mf-caret { display: inline-block; width: 1.5px; height: 13px; margin-left: 2px; vertical-align: -2px; background: var(--clr-brand); animation: mf-blink 1.1s steps(1) infinite; }
@keyframes mf-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mf-caret { animation: none; } }
.mf-send { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
/* The product's own composer tools: attach, then voice with its chevron. */
.mf-tools { display: flex; align-items: center; gap: 11px; color: var(--clr-body); }
.mf-tool { display: inline-flex; align-items: center; gap: 2px; }
.mf-tool svg { width: 14px; height: 14px; }
.mf-tool .mf-chev { width: 10px; height: 10px; color: var(--clr-quiet); }
.mf-send-btn { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; background: var(--clr-brand); color: #fff; }
.mf-send-btn svg { width: 12px; height: 12px; }

/* ── Team: product chat pieces ────────────────────────────────────────
   Only things the product's chat actually renders: work lines, prose and
   the user's bubble. Used by the team tiles below. */
/* The product's work lines: small, grey, a chevron, no bubble. */
.ap-work { display: block; margin: 0; font-size: 11px; color: var(--clr-quiet); }
.ap-work svg { width: 11px; height: 11px; margin-right: 3px; vertical-align: -1.5px; }
.ap-msg { margin: 0; font-size: 13px; color: var(--clr-ink); }
/* The user's bubble, as the product draws it. */
.ap-user { align-self: flex-end; max-width: 80%; margin: 4px 0 0; padding: 8px 16px; background: #edeae6; border-radius: 12px; font-size: 13px; color: var(--clr-ink); }

/* Team tiles: one under each point.
   The chat tile reuses the ap-* chat styles at the small tile scale. */
/* min-width: 0 so the no-wrap share row cannot widen a tile past its column. */
.mock-team { min-width: 0; height: 244px; margin: 0; padding: 14px; gap: 7px; line-height: 1.4; }

/* 1 — the share modal, cropped to its working parts. */
.mock-share { justify-content: flex-start; gap: 7px; }
.sh-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: -0.01em; color: var(--clr-ink); }
.sh-x { flex: none; width: 12px; height: 12px; color: var(--clr-body); }
.sh-invite { display: flex; align-items: center; gap: 6px; }
.sh-field { flex: 1; min-width: 0; overflow: hidden; padding: 6px 8px; border: 1px solid var(--clr-panel-line); border-radius: 6px; font-size: 9.5px; color: var(--clr-quiet); white-space: nowrap; text-overflow: ellipsis; }
.sh-role { flex: none; font-size: 9.5px; font-weight: 500; color: var(--clr-ink); white-space: nowrap; }
.sh-role i { display: inline-block; width: 5px; height: 5px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.sh-btn { flex: none; padding: 6px 9px; border-radius: 6px; background: color-mix(in srgb, var(--clr-brand) 55%, #fff); font-size: 9.5px; font-weight: 600; color: #fff; }
.sh-label { margin-top: 2px; font-size: 10.5px; font-weight: 600; color: var(--clr-ink); }
.sh-select { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border: 1px solid var(--clr-panel-line); border-radius: 6px; font-size: 10px; color: var(--clr-ink); }
.sh-select i { width: 5px; height: 5px; margin-right: 2px; border-right: 1.5px solid var(--clr-body); border-bottom: 1.5px solid var(--clr-body); transform: translateY(-1px) rotate(45deg); }
.sh-row { display: flex; align-items: center; gap: 8px; }
.sh-av { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--clr-brand-tint); font-size: 8.5px; font-weight: 600; color: var(--clr-brand); }
.sh-org { background: #edeae6; color: var(--clr-body); }
.sh-av-3 { background: #2f6b55; color: #fff; }
.sh-org svg { width: 11px; height: 11px; }
.sh-who { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 1px; }
.sh-who b { overflow: hidden; font-size: 10.5px; font-weight: 600; color: var(--clr-ink); white-space: nowrap; text-overflow: ellipsis; }
.sh-who span { overflow: hidden; font-size: 8.5px; color: var(--clr-quiet); white-space: nowrap; text-overflow: ellipsis; }
.sh-right { flex: none; font-size: 9px; color: var(--clr-quiet); }

/* 2 — the tool-call approval card, as the product draws it: amber frame,
   amber dot, the script as a code chip, Deny on the left, the run on the
   right. */
.mock-ask { justify-content: flex-start; padding-bottom: 0; gap: 10px; }
.tc-card { --tc: #b8862b; display: flex; flex-direction: column; gap: 6px; padding: 10px 11px; border: 1.5px solid color-mix(in srgb, var(--tc) 70%, transparent); border-radius: 8px; }
.tc-title { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--clr-ink); }
.tc-title i { width: 7px; height: 7px; border-radius: 50%; background: var(--tc); }
.tc-line { margin: 0; font-size: 10px; color: var(--clr-text); }
.tc-line code { padding: 1px 4px; border-radius: 4px; background: #edeae6; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; color: var(--clr-ink); }
.tc-more { font-size: 9.5px; color: var(--clr-text); }
.tc-actions { display: flex; justify-content: space-between; margin-top: 2px; }
.tc-deny, .tc-run { display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 10px; border-radius: 6px; font-size: 9.5px; font-weight: 600; line-height: 1; }
.tc-deny { border: 1px solid var(--clr-panel-line); color: var(--clr-ink); }
.tc-run { background: var(--clr-brand); color: #fff; }
/* The composer fills what is left under the card and runs off the tile. */
.tc-composer { flex: 1; min-height: 0; padding-bottom: 6px; }
.tc-input { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 9px 10px 8px; border: 1px solid var(--clr-panel-line); border-radius: 8px; }
.tc-ph { font-size: 11px; color: var(--clr-quiet); }
/* Nothing typed yet, so the send is the resting grey, as in the app. */
.tc-send { background: #edeae6; color: var(--clr-body); }

/* 3 — the record: the run's own work lines, with the chat around them
   fading out towards the tile's top and bottom edges. */
.mock-trace { justify-content: flex-start; padding-top: 0; padding-bottom: 0; gap: 9px; }
/* One size and one rhythm for everything in the trace, chat and work lines alike. */
.mock-trace .ap-work, .mock-trace .ap-msg, .mock-trace .ap-user { font-size: 12.5px; line-height: 1.4; }
.mock-trace .ap-work { color: var(--clr-text); }
.mock-trace .ap-work svg { width: 12px; height: 12px; }
.tr-lines { display: flex; flex-direction: column; gap: 9px; }
.tr-fade { display: flex; flex-direction: column; gap: 9px; }
.tr-top { padding-top: 10px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 100%); mask-image: linear-gradient(180deg, transparent 0, #000 100%); }
/* Takes whatever height is left and fades out inside it, so the response
   reads as running on past the tile. */
.tr-bottom { flex: 1; min-height: 0; overflow: hidden; padding-bottom: 0; -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 100%); mask-image: linear-gradient(180deg, #000 0, transparent 100%); }
.mock-team .ap-msg { font-size: 11.5px; }
.mock-team .ap-user { padding: 6px 12px; font-size: 11.5px; }
.mock-team .ap-work { font-size: 10px; }

/* ── Step icons ──────────────────────────────────────────────────────
   One Lucide icon per step (ISC licence, lucide.dev) as a two-tone brand
   mark on a beige tile. The <ol> carries the order; no numerals, no rail. */
.step-ico { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 16px; background: var(--clr-panel); color: var(--clr-brand); }
/* Two-tone: the closed shapes take the brand tint under the brand stroke,
   so the marks have body rather than reading as bare outlines. */
.step-ico svg { width: 28px; height: 28px; fill: var(--clr-brand-tint); stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }