/*
 * home.css — the homepage layer.
 *
 * Loaded after site.css, on index.html only, and every rule is scoped to
 * body[data-home], so no other page changes. It restyles the existing markup
 * and adds no behaviour: the content, the anchors and the script hooks are the
 * ones site.css and boot.js already know.
 *
 * The page now alternates two grounds, the pattern product sites use to give a
 * long page a rhythm:
 *
 *   - light bands follow the theme (white in light, near-black in dark);
 *   - grey bands (Apple's section grey in light, ink in dark) frame a product
 *     panel or a bento grid as an object set on the page.
 *
 * A band is a token remap, not a second set of rules. `.band-ink` points the
 * page ramp (--c-text, --c-surface, --c-line, ...) at the band's ramp for
 * everything inside it, so the demo and the form re-skin themselves
 * with the rules they already have.
 *
 * Colour: tokens only, the same rule as site.css. Anything translucent is a
 * color-mix of a token. Nothing here loops: every motion plays once, behind
 * prefers-reduced-motion: no-preference.
 */

/* ---- The band ------------------------------------------------------------
   A band is Apple's section grey in light and ink in dark (--band* in
   tokens.css). The rules inside a band are written against the ink ramp, so
   the band points that ramp at its own colours and everything inside it, the
   demo and the form, re-skins itself with the rules it already
   has. Gradients and shadows are left to the theme. */
body[data-home] .band-ink {
  --c-ink: var(--band);
  --c-on-ink: var(--band-text);
  --c-on-ink-dim: var(--band-text-dim);
  --c-on-ink-mute: var(--band-text-mute);
  --c-ink-line: var(--band-line);

  --c-bg: var(--c-ink);
  --c-bg-elev: var(--band-elev);
  --c-surface: var(--band-surface);
  --c-surface-2: var(--band-surface-2);
  --c-line: var(--c-ink-line);
  --c-line-strong: color-mix(in srgb, var(--c-on-ink) 26%, transparent);
  --c-text: var(--c-on-ink);
  --c-text-dim: var(--c-on-ink-dim);
  --c-text-mute: var(--c-on-ink-mute);
  --c-accent: var(--c-on-ink);
  --c-accent-press: var(--c-on-ink);
  --c-accent-soft: color-mix(in srgb, var(--c-on-ink) 12%, transparent);
  --c-accent-fill: var(--c-on-ink);
  --c-on-accent: var(--c-ink);
  --focus-ring: 0 0 0 2px var(--c-ink), 0 0 0 4px var(--c-on-ink);

  background: var(--c-ink);
  color: var(--c-on-ink-dim);
  color-scheme: var(--band-scheme);
}

/* The page's own grounds, captured on <body> before any band remaps them, for
   the places where a band has to blend into the page below it. */
body[data-home] {
  --page-bg: var(--c-bg);
  --page-bg-elev: var(--c-bg-elev);
}

/* ---- Buttons: pills ------------------------------------------------------- */
body[data-home] .btn { border-radius: var(--radius-pill); }
body[data-home] .btn-primary {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--c-on-accent) 14%, transparent),
    var(--shadow-2);
}
body[data-home] .btn-quiet { border-color: transparent; }

/* ---- Hero ------------------------------------------------------------------
   A light, dotted ground for the introduction, followed directly by RAG.
   The same reading order applies on desktop and narrow screens. */
body[data-home] .hero {
  padding-top: clamp(7.5rem, 12vw, 9.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--c-text) 13%, transparent) 0 1px,
      transparent 1.5px
    ) 0 0 / 10px 10px,
    var(--cine-ground);
}
/* The bloom used to breathe forever; it now simply sits there. */
body[data-home] .hero::before { animation: none; opacity: 0.9; }
/* Where the vignette was, the dots fade into the ground the next band sits on. */
body[data-home] .hero::after {
  background: linear-gradient(to bottom, transparent 38%, var(--c-bg) 94%);
}
body[data-home] .hero__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 3.5rem);
  align-items: start;
}
body[data-home] .hero__copy { max-width: 48rem; }
body[data-home] .hero .studio-lead { max-width: 52ch; }

/* ---- Section headers --------------------------------------------------------
   The sections that open a block of cards or a panel centre their header over
   it. Left-aligned copy stays where a header sits beside its content. */
body[data-home] :is(.offers, .examples, .process, .resources) :is(.section-head, h2) {
  margin-inline: auto;
  text-align: center;
}
body[data-home] :is(.offers, .examples, .resources) .section-head { max-width: 46rem; }
body[data-home] :is(.offers, .examples, .resources) .section-head > p {
  margin-inline: auto;
  max-width: 54ch;
}
body[data-home] :is(.offers, .examples, .resources) .section-action {
  justify-content: center;
}

/* Where an ink band hands over to the page, it melts rather than cuts: the
   ink fades out under a soft lift of light, the way the page's glow reads on
   a product site. Pure paint; it takes no space and sits under the content. */
body[data-home] .examples { position: relative; isolation: isolate; }
body[data-home] .examples::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  height: clamp(5rem, 9vw, 8rem);
  pointer-events: none;
  background:
    radial-gradient(
      55% 100% at 50% 0%,
      color-mix(in srgb, var(--c-on-ink) 26%, transparent),
      transparent 72%
    ),
    linear-gradient(to bottom, var(--c-ink), transparent);
}

/* ---- RAG assistants: the flagship --------------------------------------------
   The largest statement on the page after the hero: a centred headline over
   three figure cards, a framed board (the data, the six modules, the answer,
   and the week beneath), then the audience line and the two calls to action.
   The board is a band, so it re-skins itself with the band ramp like the
   examples and contact form. */
body[data-home] .rag {
  padding-block: clamp(4rem, 9vw, 8rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  background: var(--c-bg);
}
body[data-home] .rag .section-head {
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
}
body[data-home] .rag .studio-kicker { margin-bottom: var(--space-4); }
body[data-home] .rag h2 {
  max-width: 16ch;
  margin-inline: auto;
  font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
body[data-home] .rag__lead {
  max-width: 60ch;
  margin: var(--space-5) auto 0;
  font-size: var(--step-1);
  line-height: 1.5;
}
body[data-home] .rag__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-7);
}
body[data-home] .rag__pillar {
  padding: clamp(1.25rem, 2.4vw, 2rem);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
}
body[data-home] .rag__figure {
  margin: 0 0 var(--space-5);
  font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.6rem);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: -0.03em;
}
body[data-home] .rag__pillar h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--step-1);
  line-height: 1.2;
}
body[data-home] .rag__pillar > p:last-child {
  margin: 0;
  color: var(--c-text-dim);
  font-size: var(--step-0);
  line-height: 1.55;
}

/* The board: data on the left, modules in the middle, the answer on the right,
   the week across the bottom. Decorative; the cards above say the same. */
body[data-home] .rag__board {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--c-ink-line);
  border-radius: var(--radius-xl);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--c-text) 6%, transparent),
    0 50px 110px -50px color-mix(in srgb, var(--c-text) 34%, transparent);
}
body[data-home] .rag__flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.35fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
}
body[data-home] .rag__col { display: grid; gap: var(--space-3); align-content: start; }
body[data-home] .rag__col-title {
  margin: 0;
  color: var(--c-on-ink-mute);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body[data-home] .rag__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
body[data-home] .rag__chips li {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--c-ink-line);
  border-radius: var(--radius-pill);
  color: var(--c-on-ink-dim);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
}
body[data-home] .rag__modules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
body[data-home] .rag__modules li {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--c-ink-line);
  border-radius: var(--radius-md);
  background: var(--band-raise);
  color: var(--c-on-ink);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}
body[data-home] .rag__modules li span {
  display: block;
  margin-top: 0.15rem;
  color: var(--c-on-ink-dim);
  font-size: 0.8em;
  font-weight: var(--weight-regular);
}
body[data-home] .rag__arrow { color: var(--c-on-ink-mute); font-size: 1.6rem; line-height: 1; }
body[data-home] .rag__arrow::before { content: "→"; }
body[data-home] .rag__answer {
  display: grid;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--c-ink-line);
  border-radius: var(--radius-md);
  background: var(--band-raise);
  color: var(--c-on-ink);
  font-size: var(--step--1);
  line-height: 1.45;
}
body[data-home] .rag__answer p { margin: 0; }
body[data-home] .rag__answer .rag__q { color: var(--c-on-ink-dim); }
body[data-home] .rag__answer .rag__src { color: var(--c-on-ink-dim); font-size: 0.85em; }
body[data-home] .rag__week {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--c-ink-line);
  list-style: none;
  counter-reset: day;
}
body[data-home] .rag__week li {
  display: grid;
  gap: 0.25rem;
  align-content: start;
  font-size: var(--step--1);
  line-height: 1.4;
}
body[data-home] .rag__week li::before {
  content: "Day " counter(day);
  counter-increment: day;
  color: var(--c-on-ink-mute);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body[data-home] .rag__week b { color: var(--c-on-ink); font-weight: var(--weight-semibold); }
body[data-home] .rag__week span { color: var(--c-on-ink-dim); }

body[data-home] .rag__cta {
  max-width: 64ch;
  margin: var(--space-7) auto 0;
  text-align: center;
}
body[data-home] .rag__cta > p {
  margin: 0 0 var(--space-5);
  color: var(--c-text-dim);
  font-size: var(--step-0);
  line-height: 1.55;
}
body[data-home] .rag__cta .studio-actions { justify-content: center; margin-top: 0; }

@media (max-width: 960px) {
  body[data-home] .rag__grid { grid-template-columns: minmax(0, 1fr); }
  body[data-home] .rag__flow { grid-template-columns: minmax(0, 1fr); }
  body[data-home] .rag__arrow { justify-self: start; }
  body[data-home] .rag__arrow::before { content: "↓"; }
  body[data-home] .rag__week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  body[data-home] .rag__modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-home] .rag__week { grid-template-columns: minmax(0, 1fr); }
}

/* ---- What we build: a bento -------------------------------------------------
   One large card for the flagship, two stacked beside it. The cards are light
   objects on the band; each carries a miniature screen of its product. */
body[data-home] .offers {
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
  border-top: 0;
}
body[data-home] .offers__grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(15rem, auto));
  gap: var(--space-4);
}
body[data-home] .offer {
  --c-ink: var(--band-card-text);
  --c-on-ink: var(--band-card);
  --c-text: var(--c-ink);
  --c-text-dim: color-mix(in srgb, var(--c-ink) 66%, transparent);
  --c-line: color-mix(in srgb, var(--c-ink) 11%, transparent);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-2);
  min-height: 15rem;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--c-on-ink);
  color: var(--c-text);
  box-shadow: 0 30px 60px -36px color-mix(in srgb, black 45%, transparent);
}
body[data-home] .offer:nth-child(3) { grid-column: 1; grid-row: 1 / span 2; }
body[data-home] .offer:nth-child(1) { grid-column: 2; grid-row: 1; }
body[data-home] .offer:nth-child(2) { grid-column: 2; grid-row: 2; }
body[data-home] .offer h3 {
  margin: 0;
  color: var(--c-text);
  font-size: var(--step-1);
  /* The page paints headings with a metal gradient; on a light card that is
     plain ink, so it is turned off here. */
  background: none;
  -webkit-text-fill-color: currentColor;
}
body[data-home] .offer > p { max-width: 44ch; margin: 0; color: var(--c-text-dim); font-size: var(--step--1); }
body[data-home] .offer:nth-child(3) h3 { font-size: var(--step-2); }
body[data-home] .offer:nth-child(3) > p { font-size: var(--step-0); }

body[data-home] .offer__art {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  align-content: start;
  gap: 0.6rem;
  min-height: 7rem;
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
  pointer-events: none;
}
/* ---- The miniature screens -------------------------------------------------
   Each card carries a small, readable screen made from sample data. It is
   decorative (hidden from assistive tech; the card copy says the same thing)
   and labelled "Sample data" so it cannot be read as client work.

   The finished frame is the default: with reduced motion, without JavaScript,
   or before the reveal script runs, every screen shows its outcome. Once the
   card is revealed it plays its steps once and stops on that same frame.
     .m-in   appears at --t ms
     .m-pre  shows until --t ms, then gives way to the outcome stacked with it
     .m-hl   is highlighted from --t ms
     .m-tap  a single press ring at --t ms */
body[data-home] .mini {
  --mini-line: color-mix(in srgb, var(--c-ink) 10%, transparent);
  --mini-dim: color-mix(in srgb, var(--c-ink) 60%, transparent);
  --mini-ok: color-mix(in srgb, var(--c-ok) 62%, var(--c-ink));
  --mini-ok-soft: color-mix(in srgb, var(--c-ok) 14%, var(--c-white));
  align-content: start;
  gap: 0;
  color: var(--c-ink);
  font-size: 0.75rem;
  line-height: 1.35;
}
body[data-home] .mini p { margin: 0; max-width: none; color: inherit; font-size: inherit; }
body[data-home] .mini .mini__tag {
  justify-self: start;
  margin-bottom: var(--space-3);
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--mini-line);
  border-radius: var(--radius-pill);
  color: var(--mini-dim);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
body[data-home] .mini__screen {
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem;
  border: 1px solid var(--mini-line);
  border-radius: var(--radius-md);
  background: var(--c-white);
  box-shadow: 0 18px 36px -28px color-mix(in srgb, var(--c-ink) 60%, transparent);
}
body[data-home] .mini__label {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--mini-dim);
  font-size: 0.6875rem;
  font-weight: 600;
}
body[data-home] .mini__btns { display: inline-flex; gap: 0.4rem; }
body[data-home] .mini__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--c-ink);
  color: var(--c-on-ink);
  font-weight: 600;
  white-space: nowrap;
}
body[data-home] .mini__btn--quiet {
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-ink) 22%, transparent);
  color: var(--c-ink);
}
body[data-home] .mini__done {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.75rem;
  color: var(--mini-ok);
  font-weight: 600;
}
body[data-home] .mini__done::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.75rem;
  margin: -0.2rem 0.15rem 0 0.2rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* Two states in one cell: the step before the decision and its outcome. */
body[data-home] .mini__swap { display: grid; align-items: center; justify-items: start; }
body[data-home] .mini__swap > * { grid-area: 1 / 1; }
body[data-home] .m-pre { visibility: hidden; }
body[data-home] .m-tap {
  position: absolute;
  inset: -0.3rem;
  border-radius: inherit;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-ink) 45%, transparent);
  opacity: 0;
}

/* Personal: a short conversation and a draft. */
body[data-home] .mini__bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--mini-line);
}
body[data-home] .mini__bar span:last-child { margin-left: auto; color: var(--mini-dim); }
body[data-home] .mini__avatar {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-on-ink);
  font-size: 0.625rem;
  font-weight: 700;
}
body[data-home] .mini .mini__bubble {
  justify-self: start;
  max-width: 88%;
  padding: 0.5rem 0.7rem;
  border-radius: 0.2rem var(--radius-md) var(--radius-md) var(--radius-md);
  background: color-mix(in srgb, var(--c-ink) 6%, var(--c-white));
}
body[data-home] .mini__draft {
  padding: 0.55rem 0.7rem;
  border-left: 2px solid var(--c-ink);
  border-radius: 0.2rem;
  background: color-mix(in srgb, var(--c-ink) 3%, var(--c-white));
}

/* Mobile: a phone, fading out at the bottom, turning a screenshot into a
   suggestion. */
body[data-home] .mini--phone { justify-items: center; }
body[data-home] .mini__phone {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  width: min(100%, 15rem);
  min-height: 12.5rem;
  padding: 0.6rem 0.65rem 1rem;
  border: 5px solid var(--c-ink);
  border-bottom: 0;
  border-radius: 1.6rem 1.6rem 0 0;
  background: color-mix(in srgb, var(--c-ink) 4%, var(--c-white));
  -webkit-mask-image: linear-gradient(to bottom, black 78%, transparent);
  mask-image: linear-gradient(to bottom, black 78%, transparent);
}
body[data-home] .mini .mini__status {
  display: flex;
  justify-content: space-between;
  padding: 0 0.35rem;
  color: var(--mini-dim);
  font-size: 0.625rem;
  font-weight: 600;
}
body[data-home] .mini__shot {
  display: grid;
  gap: 0.1rem;
  justify-self: end;
  width: 82%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--mini-line);
  border-radius: var(--radius-sm);
  background: var(--c-white);
  transform: rotate(-1.5deg);
}
body[data-home] .mini__shot span:last-child { color: var(--mini-dim); }
body[data-home] .mini__suggest {
  display: grid;
  gap: 0.45rem;
  padding: 0.6rem 0.65rem;
  border-radius: var(--radius-md);
  background: var(--c-white);
  box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--c-ink) 55%, transparent);
}
body[data-home] .mini__suggest p { font-weight: 600; }

/* Enterprise: a request list with the agent's proposal under one row. */
body[data-home] .mini--desk { align-content: center; font-size: 0.875rem; }
body[data-home] .mini--desk .mini__tag { margin-bottom: var(--space-4); }
body[data-home] .mini--desk .mini__screen { padding: 0; overflow: hidden; gap: 0; }
body[data-home] .mini .mini__appbar {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  background: var(--c-ink);
  color: var(--c-on-ink);
}
body[data-home] .mini__appbar span { color: color-mix(in srgb, var(--c-on-ink) 65%, transparent); }
body[data-home] .mini__table { display: grid; padding: 0.3rem 0.4rem 0.4rem; }
body[data-home] .mini__row {
  display: grid;
  grid-template-columns: 6.6em minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.2rem;
  padding: 0.3rem 0.45rem;
  border-bottom: 1px solid var(--mini-line);
  border-radius: 0.35rem;
}
body[data-home] .mini__row > span:nth-child(-n + 2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-home] .mini__row > span:first-child { color: var(--mini-dim); font-variant-numeric: tabular-nums; }
body[data-home] .mini .mini__row--head {
  min-height: 1.7rem;
  color: var(--mini-dim);
  font-size: 0.6875rem;
  font-weight: 600;
}
body[data-home] .mini__row--on > span:nth-child(2) { white-space: normal; }
body[data-home] .mini__row--on {
  border-bottom-color: transparent;
  background: color-mix(in srgb, var(--c-ink) 6%, var(--c-white));
  box-shadow: inset 2px 0 0 var(--c-ink);
  font-weight: 600;
}
body[data-home] .mini__state {
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--c-ink) 7%, transparent);
  font-weight: 600;
  white-space: nowrap;
}
body[data-home] .mini__state--ok { background: var(--mini-ok-soft); color: var(--mini-ok); }
body[data-home] .mini__row .mini__swap { justify-items: end; }
body[data-home] .mini__proposal {
  display: grid;
  gap: 0.45rem;
  margin: 0.15rem 0 0.35rem 1rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--mini-line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--c-ink) 2%, var(--c-white));
}
body[data-home] .mini__checks { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin: 0; padding: 0; list-style: none; }
body[data-home] .mini__checks li { display: inline-flex; align-items: center; gap: 0.35rem; }
body[data-home] .mini__checks li::before {
  content: "";
  width: 0.3rem;
  height: 0.55rem;
  margin: -0.15rem 0.1rem 0 0.1rem;
  border: solid var(--mini-ok);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
body[data-home] .mini__propose { font-weight: 600; }

body[data-home] .offer__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: var(--tap);
  margin-bottom: -0.5rem;
  color: var(--c-ink);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--c-ink) 30%, transparent);
  text-underline-offset: 0.2em;
}
body[data-home] .offer__link:hover { text-decoration-color: currentColor; }
body[data-home] .offer__link:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 2px var(--c-on-ink), 0 0 0 4px var(--c-ink);
}

@media (prefers-reduced-motion: no-preference) {
  :root[data-motion="on"] body[data-home] .offer:not(.is-in) :is(.m-in, .m-pre) { opacity: 0; }
  :root[data-motion="on"] body[data-home] .offer.is-in .m-in {
    animation: mini-in 360ms var(--ease-out) both;
    animation-delay: calc(var(--t, 0) * 1ms + var(--d, 0ms) + 380ms);
  }
  :root[data-motion="on"] body[data-home] .offer.is-in .m-pre {
    animation: mini-pre calc(var(--t, 0) * 1ms + var(--d, 0ms) + 380ms) linear;
  }
  :root[data-motion="on"] body[data-home] .offer.is-in .m-hl {
    animation: mini-hl 420ms var(--ease-out) both;
    animation-delay: calc(var(--t, 0) * 1ms + var(--d, 0ms) + 380ms);
  }
  :root[data-motion="on"] body[data-home] .offer.is-in .m-tap {
    animation: mini-tap 520ms var(--ease-out) both;
    animation-delay: calc(var(--t, 0) * 1ms + var(--d, 0ms) + 380ms);
  }
}
@keyframes mini-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes mini-pre {
  from, to { visibility: visible; }
}
@keyframes mini-hl {
  from { background: transparent; box-shadow: inset 0 0 0 transparent; border-bottom-color: var(--mini-line); }
}
@keyframes mini-tap {
  from { opacity: 0; transform: scale(0.7); }
  35% { opacity: 1; }
  to { opacity: 0; transform: scale(1.15); }
}

@media (max-width: 860px) {
  body[data-home] .offers__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  body[data-home] .offer:nth-child(n) { grid-column: auto; grid-row: auto; }
  body[data-home] .offer:nth-child(3) { order: -1; }
}
@media (max-width: 480px) {
  body[data-home] .mini--desk { font-size: 0.75rem; }
  body[data-home] .mini__row { grid-template-columns: minmax(0, 1fr) auto; }
  body[data-home] .mini__row > span:first-child { display: none; }
  body[data-home] .mini__proposal { margin-left: 0; }
}

/* ---- Examples: the demo player ---------------------------------------------- */
body[data-home] .examples { padding-top: clamp(6.5rem, 12vw, 10rem); }
body[data-home] .demo.is-enhanced .demo__tabs {
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  background: var(--c-bg-elev);
}
body[data-home] .demo__tab {
  border-color: transparent;
  border-radius: calc(var(--radius-xl) - 6px);
  background: transparent;
}
body[data-home] .demo__tab:hover { background: color-mix(in srgb, var(--c-text) 5%, transparent); }
body[data-home] .demo__tab[aria-selected="true"] {
  border-color: var(--c-line);
  background: var(--c-surface);
  box-shadow: var(--shadow-2);
}
body[data-home] .demo__stage {
  box-shadow: 0 40px 90px -50px color-mix(in srgb, var(--c-text) 50%, transparent);
}

/* ---- How we work: four steps in a row ------------------------------------------ */
body[data-home] .process { border-top: 0; padding-top: 0; }
body[data-home] .process__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
}
body[data-home] .process__item {
  display: block;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--c-line-strong);
}
body[data-home] .process__item:last-child { border-bottom: 0; }
body[data-home] .process__item > span {
  display: block;
  margin-bottom: var(--space-5);
  color: var(--c-text-dim);
  font-size: var(--step-0);
}
body[data-home] .process__item h3 { margin-bottom: var(--space-3); }
@media (max-width: 960px) {
  body[data-home] .process__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body[data-home] .process__list { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Platforms: header beside the cards ------------------------------------------ */
body[data-home] .platforms { padding-block: clamp(4rem, 9vw, 8rem); }
body[data-home] .platforms > .container {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
body[data-home] .platforms .section-head { margin: 0; }
body[data-home] .platforms__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
body[data-home] .platform {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border-radius: var(--radius-lg);
  background: var(--band-raise);
}
body[data-home] .platform h3 { color: var(--c-on-ink); }
@media (max-width: 860px) {
  body[data-home] .platforms > .container { grid-template-columns: minmax(0, 1fr); }
}

/* ---- People and control: one statement ------------------------------------------- */
body[data-home] .control {
  border-top: 0;
  padding-block: clamp(4.5rem, 10vw, 9rem);
  background: var(--c-bg);
}
body[data-home] .control h2 {
  max-width: 18ch;
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
  line-height: 1.06;
}
body[data-home] .control p { font-size: var(--step-1); line-height: 1.55; }

/* ---- About: an ink band -------------------------------------------------------------- */
body[data-home] .about { padding-block: clamp(4rem, 9vw, 8rem); }
body[data-home] .about__actions { margin-top: var(--space-6); }

/* ---- Resources: tall cards ----------------------------------------------------------- */
body[data-home] .resources { background: var(--c-bg); }
body[data-home] .resources__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  border-top: 0;
}
body[data-home] .resources__list li {
  position: relative;
  display: flex;
  /* The tag is second in the source and first on the card; the title sits at
     the bottom, the way a card in a deck reads. */
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-5);
  min-height: 19rem;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(
      70% 60% at 90% 0%,
      color-mix(in srgb, var(--c-text) 4%, transparent),
      transparent 70%
    ),
    var(--c-surface);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
body[data-home] .resources__list li:hover { border-color: var(--c-line-strong); }
body[data-home] .resources__list a {
  flex: none;
  max-width: none;
  font-size: var(--step-1);
  font-weight: var(--weight-semibold);
  line-height: 1.22;
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
}
body[data-home] .resources__list a:hover { text-decoration: none; }
/* The whole card is the link. */
body[data-home] .resources__list a::after { content: ""; position: absolute; inset: 0; }
body[data-home] .resources__list a:focus-visible { outline: none; }
body[data-home] .resources__list li:has(a:focus-visible) { box-shadow: var(--focus-ring); }
body[data-home] .resources__list span {
  padding: 2px 10px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-pill);
  color: var(--c-text-dim);
}
/* Stacked on small screens: a strip that scrolls sideways hides its second and
   third card behind a gesture nothing on the page announces. */
@media (max-width: 860px) {
  body[data-home] .resources__list { grid-template-columns: minmax(0, 1fr); }
  body[data-home] .resources__list li { min-height: 11rem; }
}

/* ---- Contact: a band that melts into the footer --------------------------------- */
body[data-home] .contact {
  padding-block: clamp(4rem, 9vw, 8rem) clamp(7rem, 14vw, 12rem);
  border-top: 0;
  background: linear-gradient(
    to bottom,
    var(--c-ink) 0 56%,
    var(--band-glow) 84%,
    var(--page-bg-elev) 100%
  );
}
body[data-home] .contact-form {
  border-radius: var(--radius-xl);
  background: var(--band-raise);
  box-shadow: 0 40px 90px -50px color-mix(in srgb, black 45%, transparent);
}

/* ---- Footer: the wordmark, drawn in outline ------------------------------------------- */
body[data-home] .footer { overflow: hidden; border-top: 0; }
/* The footer's grey link colour is 4.47:1 on its ground; a touch darker clears 4.5. */
body[data-home] .footer li a { color: color-mix(in srgb, var(--c-text-dim) 78%, var(--c-text)); }
body[data-home] .footer-wordmark {
  margin: var(--space-7) 0 calc(-1 * clamp(0.6rem, 2.6vw, 2.4rem));
  padding-inline: var(--space-5);
  /* Filled with the footer's own ground and stroked underneath: the fill hides
     the inner half of the stroke, including the lines a variable font draws
     where its glyph contours overlap. */
  color: var(--page-bg-elev);
  paint-order: stroke fill;
  font-size: clamp(3.2rem, 15.5vw, 14rem);
  font-weight: var(--weight-semibold);
  line-height: 0.92;
  letter-spacing: -0.055em;
  text-align: center;
  white-space: nowrap;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--c-text) 22%, var(--page-bg-elev));
  user-select: none;
  pointer-events: none;
}

/* ---- Primary nav: the section being read ----------------------------------------------
   Set by chrome.js as the page scrolls; a quiet grey pill. */
body[data-home] .nav .nav-links a[aria-current="location"] {
  color: var(--c-text);
  background: var(--c-bar-fill);
}

/* ---- Questions: header beside an open list ------------------------------------------- */
body[data-home] .faq {
  padding-block: clamp(4rem, 9vw, 8rem);
  border-top: 1px solid var(--c-line);
  background: var(--c-bg);
}
body[data-home] .faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
body[data-home] .faq .section-head { margin: 0; }
body[data-home] .faq h2 {
  max-width: 18ch;
  margin: 0;
  font-size: var(--step-3);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  text-wrap: pretty;
}
body[data-home] .faq__list { border-top: 1px solid var(--c-line-strong); }
body[data-home] .faq__item { border-bottom: 1px solid var(--c-line); }
body[data-home] .faq__item summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--space-5) var(--space-7) var(--space-5) 0;
  font-size: var(--step-1);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  letter-spacing: var(--tracking-snug);
  list-style: none;
  cursor: pointer;
}
body[data-home] .faq__item summary::-webkit-details-marker { display: none; }
/* A plus that turns into a minus: two bars, the vertical one folds away. */
body[data-home] .faq__item summary::before,
body[data-home] .faq__item summary::after {
  content: "";
  position: absolute;
  right: var(--space-2);
  top: 50%;
  width: 14px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--c-text-dim);
  transition: transform var(--dur-base) var(--ease-out);
}
body[data-home] .faq__item summary::after { transform: rotate(90deg); }
body[data-home] .faq__item[open] summary::after { transform: rotate(0deg); }
body[data-home] .faq__item summary:hover::before,
body[data-home] .faq__item summary:hover::after { background: var(--c-text); }
body[data-home] .faq__item summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}
body[data-home] .faq__answer { padding: 0 var(--space-7) var(--space-5) 0; }
body[data-home] .faq__answer p { max-width: 62ch; margin: 0; color: var(--c-text-dim); }
body[data-home] .faq__answer a { color: var(--c-text); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  body[data-home] .faq__item[open] .faq__answer { animation: faq-open 260ms var(--ease-out) both; }
}
@keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 860px) {
  body[data-home] .faq__grid { grid-template-columns: minmax(0, 1fr); }
  body[data-home] .faq__item summary { font-size: var(--step-0); }
  body[data-home] .faq__answer { padding-right: 0; }
}

/* ---- Contact: what happens after you write ------------------------------------------ */
body[data-home] .next-steps {
  max-width: 42ch;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-line);
}
body[data-home] .next-steps__title {
  margin: 0 0 var(--space-4);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}
body[data-home] .next-steps__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: next;
  display: grid;
  gap: var(--space-4);
}
body[data-home] .next-steps__list li {
  counter-increment: next;
  position: relative;
  min-height: 28px;
  padding-left: calc(28px + var(--space-3));
  color: var(--c-text-dim);
  font-size: var(--step--1);
  line-height: 1.5;
}
body[data-home] .next-steps__list li::before {
  content: counter(next);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--c-line-strong);
  color: var(--c-text);
  font-size: 0.8rem;
  font-weight: var(--weight-semibold);
}
body[data-home] .next-steps__list strong { display: block; color: var(--c-text); font-weight: var(--weight-medium); }

/* ---- Phone call-to-action ---------------------------------------------------------------
   The header drops its "Build with us" button at this width; this pill stands
   in for it between the hero and the form. chrome.js shows and hides it. */
body[data-home] .dock-cta { display: none; }
@media (max-width: 640px) {
  body[data-home] .dock-cta:not([hidden]) {
    position: fixed;
    z-index: 60;
    left: 50%;
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    min-height: var(--tap);
    padding: 0 var(--space-5);
    border-radius: var(--radius-pill);
    /* The header's glass, so it reads over light bands and ink bands alike. */
    background: color-mix(in srgb, var(--c-ink) 86%, transparent);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    color: var(--c-on-ink);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    text-decoration: none;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--c-on-ink) 22%, transparent),
      0 14px 34px -12px color-mix(in srgb, black 60%, transparent);
    transform: translate(-50%, 0);
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  }
  body[data-home] .dock-cta[data-away] { opacity: 0; transform: translate(-50%, 140%); pointer-events: none; }
  body[data-nav-open] .dock-cta { display: none !important; }
}