/* GENERATED by scripts/build-engine-css.mjs from lib/engine-identity.mjs.
 * Do not edit by hand — edit the module and re-run the script.
 *
 * Scoped to body.theme-<slug>, which every engine page already carries.
 *
 * --accent is set per engine to the SAME value tokens.mjs already holds,
 * so tests/vertical-contrast.test.js still governs it. The --text/--bg
 * remaps cover .engine-hero and, on engine pages (body.arch-*), the whole page.
 */

body.theme-creative {
  --engine-accent: #F96A3C;
  /* Text twin. The fill is never the text: white on these fills measured
     1.20-2.93:1, and the fill used AS text measured 3.64-4.12:1 on cards. */
  --engine-accent-text: #FA8D6A;
  --engine-ground: #1A0F0B;
  --engine-ink: #F6E9E2;
  --engine-secondary: #E08B5C;
  --engine-glow: #FF7A45;

  /* Only estate, seo and flow ever had a theme block in
     design-system.css. creative set color-scheme and nothing else;
     social, intel and freelance had none at all, so four of the seven
     engines had never once shown their own accent. Generated for all
     seven here, from the same values, so they cannot diverge again. */
  --accent: var(--engine-accent);
  --accent-text: var(--engine-accent-text);
  --grad-brand: var(--engine-accent);
}
body.theme-social {
  --engine-accent: #4FA8E8;
  /* Text twin. The fill is never the text: white on these fills measured
     1.20-2.93:1, and the fill used AS text measured 3.64-4.12:1 on cards. */
  --engine-accent-text: #63B2EB;
  --engine-ground: #08131F;
  --engine-ink: #E4EEF8;
  --engine-secondary: #4FA8E8;
  --engine-glow: #37D2FF;

  /* Only estate, seo and flow ever had a theme block in
     design-system.css. creative set color-scheme and nothing else;
     social, intel and freelance had none at all, so four of the seven
     engines had never once shown their own accent. Generated for all
     seven here, from the same values, so they cannot diverge again. */
  --accent: var(--engine-accent);
  --accent-text: var(--engine-accent-text);
  --grad-brand: var(--engine-accent);
}
body.theme-intel {
  --engine-accent: #FFD166;
  /* Text twin. The fill is never the text: white on these fills measured
     1.20-2.93:1, and the fill used AS text measured 3.64-4.12:1 on cards. */
  --engine-accent-text: #FFD166;
  --engine-ground: #12130E;
  --engine-ink: #F4F0DF;
  --engine-secondary: #D8B45A;
  --engine-glow: #FFD166;

  /* Only estate, seo and flow ever had a theme block in
     design-system.css. creative set color-scheme and nothing else;
     social, intel and freelance had none at all, so four of the seven
     engines had never once shown their own accent. Generated for all
     seven here, from the same values, so they cannot diverge again. */
  --accent: var(--engine-accent);
  --accent-text: var(--engine-accent-text);
  --grad-brand: var(--engine-accent);
}
body.theme-flow {
  --engine-accent: #C6E385;
  /* Text twin. The fill is never the text: white on these fills measured
     1.20-2.93:1, and the fill used AS text measured 3.64-4.12:1 on cards. */
  --engine-accent-text: #C6E385;
  --engine-ground: #0E140A;
  --engine-ink: #ECF3DF;
  --engine-secondary: #9BC24A;
  --engine-glow: #C6E385;

  /* Only estate, seo and flow ever had a theme block in
     design-system.css. creative set color-scheme and nothing else;
     social, intel and freelance had none at all, so four of the seven
     engines had never once shown their own accent. Generated for all
     seven here, from the same values, so they cannot diverge again. */
  --accent: var(--engine-accent);
  --accent-text: var(--engine-accent-text);
  --grad-brand: var(--engine-accent);
}
body.theme-estate {
  --engine-accent: #FF6F91;
  /* Text twin. The fill is never the text: white on these fills measured
     1.20-2.93:1, and the fill used AS text measured 3.64-4.12:1 on cards. */
  --engine-accent-text: #FF85A2;
  --engine-ground: #160A10;
  --engine-ink: #F8E7EE;
  --engine-secondary: #D2738F;
  --engine-glow: #FF6F91;

  /* Only estate, seo and flow ever had a theme block in
     design-system.css. creative set color-scheme and nothing else;
     social, intel and freelance had none at all, so four of the seven
     engines had never once shown their own accent. Generated for all
     seven here, from the same values, so they cannot diverge again. */
  --accent: var(--engine-accent);
  --accent-text: var(--engine-accent-text);
  --grad-brand: var(--engine-accent);
}
body.theme-seo {
  --engine-accent: #50E8F4;
  /* Text twin. The fill is never the text: white on these fills measured
     1.20-2.93:1, and the fill used AS text measured 3.64-4.12:1 on cards. */
  --engine-accent-text: #50E8F4;
  --engine-ground: #04171A;
  --engine-ink: #DFF3F4;
  --engine-secondary: #2FA9B4;
  --engine-glow: #50E8F4;

  /* Only estate, seo and flow ever had a theme block in
     design-system.css. creative set color-scheme and nothing else;
     social, intel and freelance had none at all, so four of the seven
     engines had never once shown their own accent. Generated for all
     seven here, from the same values, so they cannot diverge again. */
  --accent: var(--engine-accent);
  --accent-text: var(--engine-accent-text);
  --grad-brand: var(--engine-accent);
}
body.theme-freelance {
  --engine-accent: #6FE3A8;
  /* Text twin. The fill is never the text: white on these fills measured
     1.20-2.93:1, and the fill used AS text measured 3.64-4.12:1 on cards. */
  --engine-accent-text: #6FE3A8;
  --engine-ground: #0A1611;
  --engine-ink: #E2F1E9;
  --engine-secondary: #58A57C;
  --engine-glow: #6FE3A8;

  /* Only estate, seo and flow ever had a theme block in
     design-system.css. creative set color-scheme and nothing else;
     social, intel and freelance had none at all, so four of the seven
     engines had never once shown their own accent. Generated for all
     seven here, from the same values, so they cannot diverge again. */
  --accent: var(--engine-accent);
  --accent-text: var(--engine-accent-text);
  --grad-brand: var(--engine-accent);
}

/* ── page architectures ──────────────────────────────────────────────
 * Each engine re-composes the SAME four beats — hero, feature grid,
 * CTA band, FAQ — into a different structure. Scoped to body.arch-<name>.
 * See lib/archetypes.mjs for why this is a stylesheet and not seven
 * hand-written page templates.
 */

/* Not a row of three equal cards: an asymmetric two-column plate grid with a
   dropped second column, the way a printed portfolio sets an opening spread. */
body.arch-gallery :is(.grid-3, .grid-2) { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8) var(--space-10); }
body.arch-gallery :is(.grid-3, .grid-2) > :is(.feature, .card):nth-child(even) { margin-top: var(--space-10); }
body.arch-gallery :is(.grid-3, .grid-2) > :is(.feature, .card) {
  display: block; padding: 0; border: 0; background: none;
  border-top: 2px solid var(--accent); padding-top: var(--space-4);
}
body.arch-gallery :is(.grid-3, .grid-2) > :is(.feature, .card) h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.1; margin-bottom: var(--space-3);
}
body.arch-gallery :is(.grid-3, .grid-2) > :is(.feature, .card) p { font-size: var(--fs-sm); max-width: 44ch; color: var(--text-muted); }
/* A two-column plate spread is a desktop composition. Held at phone width it
   gave 105px columns — roughly one word per line. Collapse it, and drop the
   stagger with it: an offset second column means nothing in a single file. */
@media (max-width: 760px) {
  body.arch-gallery :is(.grid-3, .grid-2) { grid-template-columns: 1fr; gap: var(--space-7); }
  body.arch-gallery :is(.grid-3, .grid-2) > :is(.feature, .card):nth-child(even) { margin-top: 0; }
}
/* Plates are numbered like figures, not bulleted like features. */
body.arch-gallery .faq-list { counter-reset: plate; }
body.arch-gallery .faq-item { border: 0; border-top: 1px solid var(--border); background: none; }
body.arch-gallery .faq-question::before {
  counter-increment: plate; content: "PL." counter(plate, decimal-leading-zero);
  display: block; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: .16em; color: var(--accent); margin-bottom: var(--space-2);
}

/* One column, read top to bottom like a timeline, with a rail running the
   length of the section and a node on each entry. */
body.arch-stream :is(.grid-3, .grid-2) { grid-template-columns: 1fr; gap: 0; max-width: 68ch; margin-inline: auto; }
body.arch-stream :is(.grid-3, .grid-2) { position: relative; }
body.arch-stream :is(.grid-3, .grid-2)::before {
  content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px;
  width: 2px; background: linear-gradient(var(--accent), transparent);
}
body.arch-stream :is(.grid-3, .grid-2) > :is(.feature, .card) {
  display: block; position: relative; border: 0; background: none;
  padding: 0 0 var(--space-8) var(--space-8);
}
body.arch-stream :is(.grid-3, .grid-2) > :is(.feature, .card)::before {
  content: ""; position: absolute; left: 4px; top: 6px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--accent);
}
body.arch-stream :is(.grid-3, .grid-2) > :is(.feature, .card) h3 { font-size: var(--fs-md); margin-bottom: var(--space-2); }
/* Answers read as replies under the question, indented and ruled. */
body.arch-stream .faq-item { border: 0; border-left: 2px solid var(--border); background: none; padding-left: var(--space-5); }
body.arch-stream .faq-answer { border-left: 2px solid var(--accent); padding-left: var(--space-4); margin-left: var(--space-3); }

/* A panel of gauges rather than a marketing row: tight tiles, ruled, mono
   labels, everything aligned to a grid you can feel. */
/* Three columns, not auto-fit. The hairline effect comes from the container's
   background showing through 1px gaps, which means any cell the items do not
   fill is painted dead grey: auto-fit gave five columns for six tiles and left
   a four-column slab of empty panel under the last one. Three divides the six
   tiles into two full rows. */
body.arch-instrument :is(.grid-3, .grid-2) { grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
@media (max-width: 900px) { body.arch-instrument :is(.grid-3, .grid-2) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { body.arch-instrument :is(.grid-3, .grid-2) { grid-template-columns: 1fr; } }
body.arch-instrument :is(.grid-3, .grid-2) > :is(.feature, .card) {
  display: block; border: 0; border-radius: 0; background: var(--surface);
  padding: var(--space-5) var(--space-5) var(--space-6);
}
body.arch-instrument :is(.grid-3, .grid-2) > :is(.feature, .card) h3 {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  margin-bottom: var(--space-3); padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
body.arch-instrument :is(.grid-3, .grid-2) > :is(.feature, .card) p { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
/* The FAQ is a specification table, ruled and monospaced on the question side. */
body.arch-instrument .faq-item { border: 0; border-bottom: 1px solid var(--border); background: none; border-radius: 0; }
body.arch-instrument .faq-question { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: .01em; }

/* Orchestration is a sequence, so the layout is a sequence: numbered nodes
   with the connector drawn between them, not three peers in a row. */
body.arch-nodal :is(.grid-3, .grid-2) { grid-template-columns: 1fr; gap: var(--space-6); counter-reset: step; max-width: 74ch; margin-inline: auto; }
body.arch-nodal :is(.grid-3, .grid-2) > :is(.feature, .card) {
  display: grid; grid-template-columns: 52px 1fr; gap: var(--space-5);
  position: relative; border: 0; background: none; padding: 0 0 var(--space-6);
}
body.arch-nodal :is(.grid-3, .grid-2) > :is(.feature, .card)::before {
  counter-increment: step; content: counter(step);
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-sm);
  color: var(--accent); background: var(--tint-1); border: 1px solid var(--accent);
}
body.arch-nodal :is(.grid-3, .grid-2) > :is(.feature, .card) > * { grid-column: 2; }
body.arch-nodal :is(.grid-3, .grid-2) > :is(.feature, .card)::before { grid-column: 1; grid-row: 1; }
/* The path between one step and the next. Not drawn after the last. */
body.arch-nodal :is(.grid-3, .grid-2) > :is(.feature, .card):not(:last-child)::after {
  content: ""; position: absolute; left: 22px; top: 50px; bottom: 6px;
  width: 2px; background: repeating-linear-gradient(var(--accent) 0 5px, transparent 5px 11px);
}
body.arch-nodal .faq-list { counter-reset: branch; }
body.arch-nodal .faq-item { border: 0; border-left: 2px dashed var(--border-strong); background: none; padding-left: var(--space-5); }

/* Property marketing is spatial: wide alternating bands with drafting rules,
   read like a floorplan sheet rather than a card wall. */
body.arch-plan :is(.grid-3, .grid-2) { grid-template-columns: 1fr; gap: 0; }
body.arch-plan :is(.grid-3, .grid-2) > :is(.feature, .card) {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center;
  border: 0; border-top: 1px dashed var(--border-strong); background: none;
  padding: var(--space-8) 0;
}
body.arch-plan :is(.grid-3, .grid-2) > :is(.feature, .card):last-child { border-bottom: 1px dashed var(--border-strong); }
body.arch-plan :is(.grid-3, .grid-2) > :is(.feature, .card):nth-child(even) { direction: rtl; }
body.arch-plan :is(.grid-3, .grid-2) > :is(.feature, .card):nth-child(even) > * { direction: ltr; }
body.arch-plan :is(.grid-3, .grid-2) > :is(.feature, .card) h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.95rem); line-height: 1.15;
}
body.arch-plan :is(.grid-3, .grid-2) > :is(.feature, .card) p { color: var(--text-muted); }
/* Schedule of accommodation: label left, detail right, ruled. */
body.arch-plan .faq-item { border: 0; border-bottom: 1px dashed var(--border); background: none; border-radius: 0; padding-block: var(--space-4); }
@media (max-width: 760px) {
  body.arch-plan :is(.grid-3, .grid-2) > :is(.feature, .card) { grid-template-columns: 1fr; gap: var(--space-4); }
  body.arch-plan :is(.grid-3, .grid-2) > :is(.feature, .card):nth-child(even) { direction: ltr; }
}

/* Authority in AI search is a citation problem, so the page is set as a
   reference document: numbered clauses with the reference living in the
   margin, the way a standard or a paper is typeset. */
body.arch-document :is(.grid-3, .grid-2) { grid-template-columns: 1fr; gap: var(--space-7); counter-reset: clause; max-width: 76ch; margin-inline: auto; }
body.arch-document :is(.grid-3, .grid-2) > :is(.feature, .card) {
  display: grid; grid-template-columns: 6ch 1fr; gap: var(--space-5);
  border: 0; background: none; padding: 0 0 var(--space-5);
  border-bottom: 1px solid var(--border);
}
body.arch-document :is(.grid-3, .grid-2) > :is(.feature, .card)::before {
  counter-increment: clause; content: "[" counter(clause) "]";
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent);
  padding-top: 0.35em;
}
/* Every child goes in column two. The ::before number is itself a grid item,
   so with two columns and three items the THIRD (the paragraph) wrapped back
   into the 6ch number column and rendered one word per line. */
body.arch-document :is(.grid-3, .grid-2) > :is(.feature, .card) > * { grid-column: 2; }
body.arch-document :is(.grid-3, .grid-2) > :is(.feature, .card)::before { grid-column: 1; grid-row: 1; }
body.arch-document :is(.grid-3, .grid-2) > :is(.feature, .card) h3 { font-size: var(--fs-md); margin-bottom: var(--space-2); }
body.arch-document :is(.grid-3, .grid-2) > :is(.feature, .card) p { color: var(--text-muted); }
/* Footnotes, not an accordion of cards. */
body.arch-document .faq-list { counter-reset: note; }
body.arch-document .faq-item { border: 0; border-top: 1px solid var(--border); background: none; border-radius: 0; }
body.arch-document .faq-question::before {
  counter-increment: note; content: counter(note) ". ";
  font-family: var(--font-mono); color: var(--accent);
}

/* An agency workspace looks like a board, so the section is columns of stacked
   cards with a ruled column head — the surface the product actually is. */
body.arch-board :is(.grid-3, .grid-2) { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); align-items: start; }
body.arch-board :is(.grid-3, .grid-2) > :is(.feature, .card) {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--accent); border-radius: var(--r-md);
  padding: var(--space-5); box-shadow: var(--shadow-1);
}
body.arch-board :is(.grid-3, .grid-2) > :is(.feature, .card) h3 {
  font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-3);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--border);
}
body.arch-board :is(.grid-3, .grid-2) > :is(.feature, .card) p { font-size: var(--fs-sm); color: var(--text-muted); }
/* A checklist, which is what a workspace FAQ actually is. */
body.arch-board .faq-item { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); margin-bottom: var(--space-3); }
body.arch-board .faq-question::before {
  content: "\2713"; display: inline-grid; place-items: center;
  width: 1.1em; height: 1.1em; margin-right: 0.55em; border-radius: 4px;
  font-size: 0.7em; color: var(--accent); border: 1px solid var(--accent);
}


/* The backdrop layer itself. Static, not per-engine: only the palette and
 * the renderer differ. The canvas sits BEHIND the hero content and is
 * inert to pointers — it is decoration, and must never intercept a click
 * meant for the call to action in front of it. */
.engine-hero {
  position: relative;
  isolation: isolate;
  background: var(--engine-ground, var(--bg));
  overflow: hidden;
}
.engine-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
}
/* Content rides above the canvas. */
.engine-hero > *:not(.engine-backdrop) {
  position: relative;
  z-index: 1;
}

/* Remap the text/border/tint tokens for the engine ground, the same way
 * design-system.css remaps them inside a dark panel. Setting only `color`
 * on the direct children was not enough and looked fine in a screenshot
 * of the headline: .btn-ghost and .hero-meta carry their OWN light-theme
 * colours, so "View pricing" and the meta line rendered near-black on a
 * near-black ground — present, focusable, and effectively invisible.
 *
 * Derived from --engine-ink with color-mix so each engine follows its own
 * palette and no value has to be hand-tuned seven times.
 */
/* 2026-09-26: the same remap now covers the WHOLE engine page (every
 * engine body carries an arch-* class; checkout carries theme-creative
 * without one, so it is unaffected). Scoped to the hero only, each
 * engine's world ended at the fold and every page fell back to the same
 * shared navy below it: one template in seven hats, again. */
.engine-hero, body[class*="arch-"] {
  --text: var(--engine-ink);
  --text-soft: color-mix(in srgb, var(--engine-ink) 82%, transparent);
  --text-muted: color-mix(in srgb, var(--engine-ink) 72%, transparent);
  --text-dim: color-mix(in srgb, var(--engine-ink) 60%, transparent);
  --border: color-mix(in srgb, var(--engine-ink) 22%, transparent);
  --border-strong: color-mix(in srgb, var(--engine-ink) 34%, transparent);
  --border-control: color-mix(in srgb, var(--engine-ink) 34%, transparent);
  --tint-1: color-mix(in srgb, var(--engine-ink) 8%, transparent);
  --tint-2: color-mix(in srgb, var(--engine-ink) 12%, transparent);
  --tint-3: color-mix(in srgb, var(--engine-ink) 18%, transparent);
  color: var(--engine-ink);
}

/* Panels inside the hero must follow the ground too. Remapping only the
 * TEXT tokens left .terminal on --bg-elev, which is still the light page
 * surface: the panel kept its cream background while its contents turned
 * light ink, and most of the terminal output became unreadable. */
.engine-hero, body[class*="arch-"] {
  --bg: var(--engine-ground);
  --bg-elev: color-mix(in srgb, var(--engine-ink) 7%, var(--engine-ground));
  --surface: color-mix(in srgb, var(--engine-ink) 7%, var(--engine-ground));
  --surface-2: color-mix(in srgb, var(--engine-ink) 12%, var(--engine-ground));
  --scrim: var(--engine-ground);
  --scrim-solid: var(--engine-ground);
}
/* The accent is fitted for contrast on the LIGHT page ground, so on the
 * engine ground it is too dark to read as text. The engine glow is the
 * on-dark counterpart. */
.engine-hero .accent,
.engine-hero .eyebrow,
.engine-hero em,
body[class*="arch-"] main :is(.accent, .eyebrow, em) {
  color: var(--engine-glow);
}
body[class*="arch-"] { background: var(--engine-ground); color: var(--engine-ink); }
/* A readability floor under the text, independent of what the renderer
 * happens to draw there on any given frame — a moving backdrop cannot be
 * relied on to stay dark behind a paragraph. */
.engine-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--engine-ground, #000) 88%, transparent) 0%,
    color-mix(in srgb, var(--engine-ground, #000) 62%, transparent) 45%,
    color-mix(in srgb, var(--engine-ground, #000) 20%, transparent) 100%
  );
}