/* ── Automated Work - applied design system ─────────────
   Bone background · ink type · slate-teal accent
   Geist (body) · JetBrains Mono (labels)
   Numbered sections · hairline rules · generous whitespace
   ───────────────────────────────────────────────────── */

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

:root {
  /* ── Bootstrap defaults ─────────────────────────────────
     theme.js is the source of truth - app.js (injectTheme)
     overwrites these on boot from `theme.modes.<defaultMode>`
     and `theme.fonts`. The few values kept here are only the
     ones consumed BEFORE injectTheme runs: the boot loader
     and the body's base bg/colour/font. Everything else is
     consumed inside .section[data-mode="…"] wrappers (which
     don't exist pre-JS anyway), so it doesn't need a fallback.
     Aligned with industries/theme.js light mode so the loader
     doesn't flash on the default white-label PR route. */
  --background: #f3efe6;
  --card-bg:    #f3efe6;
  --card-hover: #faf7f0;
  --ink:        #15171b;
  --mute:       #7a7d83;
  --line:       rgba(21,23,27,.14);
  --accent:     #2d7d92;

  /* Platform-mark fills, consumed by the inlined logo SVG's
     .logo-primary / .logo-accent classes (see renderPlatformMark in
     app.js). --logo-primary is a fixed pair flipped per section mode
     (#3c3f46 on light, #ffffff on dark - see the data-mode blocks);
     --logo-accent tracks the route's --accent so the mark inherits the
     brand accent, defaulting to slate-teal here. */
  --logo-primary: #3c3f46;
  --logo-accent:  var(--accent);

  --f-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Font weight for card headings (principle title, domain name, moat
     title, journey stage name, approach question). Override via
     theme.cards.headingWeight in theme.js. */
  --card-heading-weight: 500;

  /* Font weight for body / running text. Override via
     theme.fonts.bodyWeight in theme.js - match the weight the brand
     actually sets on its body copy (most brands are 400; some lighter
     brands run 300). Make sure theme.fonts.googleFontsUrl loads the
     weight you set here. */
  --body-weight: 400;

  /* font-weight applied to the hero .headline (base) and its <strong>
     emphasis span. Override via theme.headline.fontWeight /
     theme.headline.strongWeight in theme.js to match the brand's hero
     weight - e.g. a light 300 display brand, or a bold 700+ one. Keep
     strongWeight heavier than fontWeight so the emphasised words still
     read as emphasis, and ensure googleFontsUrl loads both weights. */
  --headline-weight:        500;
  --headline-strong-weight: 600;

  /* Colour of the hero .headline <strong> emphasis span (the "AI-first"
     phrase). Left UNSET here on purpose: .headline strong falls back to
     var(--accent) at the element (so it tracks the section's flipped
     accent). Override via theme.headline.strongColor in theme.js to pin
     the emphasis to a fixed brand colour - app.js then sets
     --headline-strong-color on :root and the fallback no longer applies.
     (Do NOT declare it as `var(--accent)` here: a custom property
     resolves var() where it's DECLARED - at :root that captures the
     default-mode accent and stops tracking the section, which renders
     the emphasis invisible on an opposite-mode band.) */

  /* text-transform applied to the hero .headline. Override via
     theme.headline.uppercase (boolean) in theme.js - true sets this
     to `uppercase`, otherwise it stays `none`. */
  --headline-transform: none;

  /* font-style applied to the hero .headline. Override via
     theme.headline.italic (boolean) in theme.js - true sets this to
     `italic` (for brands whose hero heading is set in an italic /
     oblique cut), otherwise it stays `normal`. The italic face must be
     loaded via googleFontsUrl (the scaffold requests it automatically)
     or a self-hosted italic face, else the browser synthesises a faux
     slant. */
  --headline-style: normal;

  /* font-size applied to the hero .headline. Defaults to a fluid
     clamp(); override via theme.headline.fontSize in theme.js -
     accepts any CSS length / clamp() expression. */
  --headline-size: clamp(40px, 5.8vw, 84px);

  /* max-width applied to the hero .headline. Caps line length to a
     character count so the headline naturally wraps at a meaningful
     point even when no <br> is present in the content. Override via
     theme.headline.maxWidth in theme.js - accepts any CSS length.
     IMPORTANT: when content uses an explicit <br>, this cap must be
     at least as wide as the longest intended line, or wrap will fire
     before the <br>. */
  --headline-maxw: 22ch;

  /* Closing-section main line overrides. Mirror the hero --headline-*
     tokens but apply only to .closing-main, so a theme can dial the
     destination heading's case, size, and wrap cap independently of
     the hero. Override via theme.closing.{uppercase,fontSize,maxWidth}
     in theme.js. */
  --closing-transform: none;
  --closing-size:      clamp(28px, 4.2vw, 52px);
  --closing-maxw:      26ch;
  /* font-weight for the closing main line + its <strong> span; the
     closing twin of --headline-weight / --headline-strong-weight.
     Override via theme.closing.fontWeight / theme.closing.strongWeight. */
  --closing-weight:        400;
  --closing-strong-weight: 500;

  /* Corner radius for every card-grid container on the page
     (principles, domains, impact, moat, approach, journey). Defaults
     to the engine's structural --radius so existing themes look
     identical; override via theme.cards.radius in theme.js - accepts
     any CSS length (e.g. "20px", "1.5rem"). The inner cells inherit
     the rounded outer shape via `overflow: hidden` on the container,
     so no per-cell tweaks are needed. */
  --card-radius: var(--radius);

  /* ── Engine design tokens ──────────────────────────────
     Structural values not exposed via theme.js. */
  --radius:     6px;
  --transition: 280ms cubic-bezier(.2,.7,.2,1);
  --maxw:       1180px;
  --gutter:     clamp(20px, 4vw, 56px);
  --pad-sec:    clamp(72px, 9vw, 120px);
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-family: var(--f-sans);
  background: var(--background);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.6;
  font-weight: var(--body-weight);
  letter-spacing: -0.005em;
  padding: 0;
  /* Section wrappers extend backgrounds to the viewport edge via
     `margin-left: calc(50% - 50vw)`. On platforms with a classic
     scrollbar `100vw` is wider than the body, so without this clip
     the page gets a phantom horizontal scrollbar. */
  overflow-x: clip;
}

::selection { background: var(--accent); color: var(--card-hover); }

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

/* ── LOADER ─────────────────────────────────────────────── */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 360ms ease;
}
.loader.hidden {
  opacity: 0;
  pointer-events: none;
}
.loader-spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  border-top-color: var(--accent);
  animation: loader-spin 900ms linear infinite;
}
@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

.shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Per-section mode wrapper ─────────────────────────────
   Every rendered block is wrapped in <section class="section" data-mode="…">
   by wrapSection() in app.js. The wrapper:
     • Extends its background to the viewport edges via the symmetric
       margin/padding trick (full-bleed), while inner content keeps the
       shell width.
     • Owns the vertical spacing between sections (was section-lbl margin-top).
     • Optionally flips the local CSS variables when data-mode is set, so
       you can have a black-on-white section adjacent to a white-on-black
       one without touching markup or per-element styles.
   Mode values come from THEME.theme.modes in theme.js; section→mode
   mapping comes from THEME.theme.sectionModes. */
.section {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  background: var(--background);
  color: var(--ink);
  /* Section vertical spacing is split top + bottom so content sits
     centred within its colour band rather than flush against the
     next section's top edge. Adjacent sections each contribute
     pad-sec/2, summing to the same total gap as a single pad-sec. */
  padding-top: calc(var(--pad-sec) / 2);
  padding-bottom: calc(var(--pad-sec) / 2);
  /* Establish a block formatting context so child top/bottom margins
     don't collapse out of the section. Without this, the first child's
     margin-top (e.g. .platform-mark) escapes the section, leaving a
     strip of the body's background above the dark header - visible
     whenever the page's default mode disagrees with the header mode. */
  display: flow-root;
}
/* Header is the first section - the page top is its top boundary,
   so let the header element's own padding-top do that work. */
.section:first-child { padding-top: 0; }

.section[data-mode="light"] {
  --background:      var(--mode-light-background);
  --card-bg:         var(--mode-light-card-bg);
  --card-hover:      var(--mode-light-card-hover);
  --ink:             var(--mode-light-ink);
  --ink-2:           var(--mode-light-ink-2);
  --mute:            var(--mode-light-mute);
  --line:            var(--mode-light-line);
  --line-soft:       var(--mode-light-line-soft);
  --accent:          var(--mode-light-accent);
  --accent-deep:     var(--mode-light-accent-deep);
  --accent-soft:     var(--mode-light-accent-soft);
  --highlight:       var(--mode-light-highlight);
  --highlight-hover: var(--mode-light-highlight-hover);
  --highlight-ink:   var(--mode-light-highlight-ink);
  --highlight-ink-2: var(--mode-light-highlight-ink-2);
  --highlight-mute:  var(--mode-light-highlight-mute);
  --cta-rest:        var(--mode-light-cta-rest);
  --cta-fill:        var(--mode-light-cta-fill);
  --cta-on-fill:     var(--mode-light-cta-on-fill);
  /* Platform mark: dark wordmark + brand accent on a light band.
     --logo-accent is re-derived here (not just at :root) so var(--accent)
     resolves against this section's accent, not the page default. */
  --logo-primary:    #3c3f46;
  --logo-accent:     var(--accent);
}
.section[data-mode="dark"] {
  --background:      var(--mode-dark-background);
  --card-bg:         var(--mode-dark-card-bg);
  --card-hover:      var(--mode-dark-card-hover);
  --ink:             var(--mode-dark-ink);
  --ink-2:           var(--mode-dark-ink-2);
  --mute:            var(--mode-dark-mute);
  --line:            var(--mode-dark-line);
  --line-soft:       var(--mode-dark-line-soft);
  --accent:          var(--mode-dark-accent);
  --accent-deep:     var(--mode-dark-accent-deep);
  --accent-soft:     var(--mode-dark-accent-soft);
  --highlight:       var(--mode-dark-highlight);
  --highlight-hover: var(--mode-dark-highlight-hover);
  --highlight-ink:   var(--mode-dark-highlight-ink);
  --highlight-ink-2: var(--mode-dark-highlight-ink-2);
  --highlight-mute:  var(--mode-dark-highlight-mute);
  --cta-rest:        var(--mode-dark-cta-rest);
  --cta-fill:        var(--mode-dark-cta-fill);
  --cta-on-fill:     var(--mode-dark-cta-on-fill);
  /* Platform mark: white wordmark + brand accent on a dark band. */
  --logo-primary:    #ffffff;
  --logo-accent:     var(--accent);
}

/* ── Scroll fade-in ─────────────────────────────────────── */
.fade {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.fade.in { opacity: 1; transform: none; }

/* ── PLATFORM MARK ──────────────────────────────────────── */
/* Builder/platform attribution rendered at the top-left of every
   route's header by renderPlatformMark() in app.js. A single inline
   SVG (the twin of shared/logo.svg) recolours itself per section via
   the --logo-primary / --logo-accent custom properties: --logo-primary
   flips #3c3f46 ⇄ #ffffff with the section's data-mode, and --logo-accent
   tracks the route's --accent (both wired in :root and the data-mode
   blocks above). No second asset or show/hide swap is needed. */
.platform-mark {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: clamp(40px, 5vw, 64px);
  margin-bottom: clamp(40px, 6vw, 80px);
  margin-left: auto;
  color: var(--ink);
  text-decoration: none;
  opacity: .82;
  transition: opacity .2s ease;
  width: max-content;
  max-width: 100%;
}
.platform-mark:hover { opacity: 1; }
.platform-mark-svg {
  height: 40px;
  width: auto;
  display: block;
}

/* ── HEADER ─────────────────────────────────────────────── */
.header {
  padding-top: clamp(8px, 1vw, 16px);
  padding-bottom: clamp(56px, 8vw, 96px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
.headline {
  font-family: var(--f-heading, var(--f-sans));
  font-size: var(--headline-size);
  font-weight: var(--headline-weight);
  color: var(--ink);
  line-height: 1.02;
  letter-spacing: -0.028em;
  max-width: var(--headline-maxw);
  text-transform: var(--headline-transform);
  font-style: var(--headline-style);
}
.headline strong {
  font-weight: var(--headline-strong-weight);
  /* Fall back to the live section accent when no theme pins a fixed
     colour - resolving var(--accent) HERE (not at :root) keeps it
     tracking the section's flipped accent. */
  color: var(--headline-strong-color, var(--accent));
}
.subhead {
  font-size: clamp(17px, 1.35vw, 21px);
  color: var(--ink-2);
  max-width: 64ch;
  line-height: 1.5;
  font-weight: 400;
}

/* ── CONTACT CTA ────────────────────────────────────────── */
/* A restrained, optional contact prompt rendered as a ghost button
   (outline + accent text at rest, accent fill on hover). The same
   `.cta.cta-button` is used in the hero, the "Why us" footer and the
   closing block, so all three match. Colours inherit the section's
   accent, so the button flips with the mode system.

   On hover the button fills with --accent; the text then uses
   --cta-on-accent (a light bone by default) so it stays legible on the
   teal fill in BOTH the light sections and the dark closing band. A
   theme whose accent needs dark text can override --cta-on-accent.

   --cta-rest / --cta-fill / --cta-on-fill are set per mode by app.js
   (ctaTreatment). Normally they resolve to the accent treatment above,
   but when a band's accent is too close to its background to be seen,
   they fall back to the mode ink (rest text + outline) and invert on
   hover (ink fill, background-coloured text) so the button can't vanish.
   The var() fallbacks below keep the historical accent behaviour when a
   mode hasn't supplied the tokens (e.g. an unthemed context). */
.cta {
  --cta-on-accent: #faf7f0;
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cta-rest, var(--accent));
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.cta .cta-arrow {
  transition: transform var(--transition);
}
.cta:hover .cta-arrow {
  transform: translateX(3px);
}

/* Ghost button - shared by the hero, the moat footer and the closing. */
.cta-button {
  padding: 13px 24px;
  border: 1px solid var(--cta-rest, var(--accent));
  border-radius: var(--radius);
}
.cta-button:hover {
  background: var(--cta-fill, var(--accent));
  border-color: var(--cta-fill, var(--accent));
  color: var(--cta-on-fill, var(--cta-on-accent));
}

/* Hero CTA - left-aligned so the button doesn't stretch the header column. */
.header-cta-wrap { justify-self: start; }

/* Compact ghost button - used inline beside lead text in the "Why us"
   footer and the closing, so the button reads as part of the sentence
   rather than a standalone block. The hero button keeps the full size. */
.moat-cta .cta-button,
.closing-cta-row .cta-button,
.journey-cta .cta-button,
.closing-end-cta .cta-button {
  padding: 7px 15px;
  font-size: 11px;
  letter-spacing: .12em;
}

/* Quiet "Why us" footer line: lead text + compact CTA button on one row. */
.moat-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.moat-cta-lead {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Closing CTA - lead text + compact button on the same line. */
.closing-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}

/* "Path to get there" CTA: an optional lead line + compact button sitting
   between the engagement options and the maturity-curve intro. Mirrors the
   "Why us" footer line. */
.journey-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 36px;
}
.journey-cta-lead {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Standalone closing CTA - a compact button on its own row at the very
   foot of the page, below the closing sub-line. */
.closing-end-cta {
  margin-top: 28px;
}

/* ── Section structure ──────────────────────────────────── */
.section-lbl {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}
.section-lbl::before {
  content: attr(data-num);
  font-family: var(--f-mono);
  color: var(--mute);
  letter-spacing: .14em;
}

/* ── PRINCIPLES ─────────────────────────────────────────── */
.principles-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  overflow: hidden;
  margin-bottom: 0;
}
.principle {
  background: var(--card-bg);
  padding: 36px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background var(--transition);
  min-height: 240px;
}
.principle:hover { background: var(--card-hover); }
.principle-num {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--accent-deep);
  letter-spacing: .14em;
  font-weight: 500;
}
.principle-title {
  font-family: var(--f-sans);
  font-size: 22px;
  font-weight: var(--card-heading-weight);
  color: var(--ink);
  letter-spacing: -0.018em;
  line-height: 1.15;
  margin: 0;
}
.principle-body {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}

/* ── DOMAINS GRID ───────────────────────────────────────── */
.journey-intro {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 36px;
}
.domains {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  overflow: hidden;
  margin-bottom: 0;
}
.domain {
  background: var(--card-bg);
  padding: 32px 28px;
  cursor: pointer;
  transition: background var(--transition), padding var(--transition);
  position: relative;
  border-top: 2px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 220px;
}
.domain:hover { background: var(--card-hover); }

/* Active = expanded in place to full grid width */
.domain.active {
  grid-column: 1 / -1;
  cursor: default;
  padding: 40px 44px 52px;
}
.domain.active .domain-name {
  font-size: clamp(24px, 2.4vw, 30px);
}

.domain-name {
  font-family: var(--f-sans);
  font-size: 20px;
  font-weight: var(--card-heading-weight);
  color: var(--ink);
  letter-spacing: -0.018em;
  line-height: 1.15;
  margin: 0;
}
.domain-sub {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}
.workflows {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
}
.wf-tag {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--card-bg);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

/* Per-domain accent - driven by [data-accent="<palette>"] set by
   renderDomains() in app.js. Each domain card sets four locals
   (--d-accent, --d-text, --d-tint, --d-tint-border) off the chosen
   palette, and the structural rules below consume those locals.
   The per-palette [data-accent="<key>"] rules that wire those four
   locals are generated dynamically by injectDomainAccentRules() in
   app.js - one rule per palette declared in THEME.theme.palettes -
   so adding a new palette in theme.js needs no edit here. */
.domain {
  --d-accent:      var(--accent);
  --d-text:        var(--ink-2);
  --d-tint:        var(--card-bg);
  --d-tint-border: var(--line);
  border-top-color: var(--d-accent);
  color: var(--d-text);
}
.domain .wf-tag { background: var(--d-tint); color: var(--d-text); border-color: var(--d-tint-border); }
.domain.active { background: var(--d-tint); }
.domain.active .wf-tag { background: var(--card-hover); }

.hint {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: center;
  margin: 28px 0 0;
}

/* ── DOMAIN DETAIL (in-place expansion) ─────────────────── */
/* Close button sits absolutely inside the card; hidden until active */
.close-btn {
  appearance: none;
  background: var(--card-hover);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 22px;
  color: var(--ink-2);
  font-family: var(--f-sans);
  font-weight: 300;
  line-height: 1;
  position: absolute;
  top: 20px;
  right: 20px;
  opacity: 0;
  pointer-events: none;
  transform: scale(.85);
  transition: opacity 240ms ease, transform 240ms cubic-bezier(.2,.7,.2,1), background 200ms ease, color 200ms ease, border-color 200ms ease;
  z-index: 2;
}
.domain.active .close-btn {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.close-btn:hover {
  background: var(--ink);
  color: var(--card-hover);
  border-color: var(--ink);
}

/* Expanding region - collapses to zero height when not active */
.domain-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 720ms cubic-bezier(.2,.7,.2,1);
}
.domain.active .domain-detail {
  grid-template-rows: 1fr;
}
.detail-inner {
  min-height: 0;
  overflow: hidden;
}
.detail-inner > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(.2,.7,.2,1);
}
.domain.active .detail-inner > * {
  opacity: 1;
  transform: none;
  transition-delay: 340ms;
}

.detail-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
  margin: 32px 0 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}

.steps { display: flex; flex-direction: column; gap: 22px; }
.step  { display: flex; gap: 18px; align-items: flex-start; padding-right: 48px; }
.step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--card-hover);
  border: 1px solid var(--line);
  font-size: 12px;
  font-family: var(--f-mono);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink);
  margin-top: 2px;
  font-weight: 500;
}
.step-body { flex: 1; }
.step-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  letter-spacing: -0.005em;
}
.step-detail {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.6;
}
.step-tag {
  font-size: 10px;
  font-family: var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 500;
}
.tag-auto   { background: var(--card-hover); color: var(--teal-text);  border: 1px solid var(--teal-tint-border); }
.tag-ai     { background: var(--card-hover); color: var(--blue-text);  border: 1px solid var(--blue-tint-border); }
.tag-human  { background: var(--card-hover); color: var(--ink); border: 1px solid var(--line); }
.tag-assist { background: var(--card-hover); color: var(--amber-text); border: 1px solid var(--amber-tint-border); }

.impact-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  overflow: hidden;
}
.impact-card {
  background: var(--card-hover);
  padding: 24px 22px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.impact-num {
  font-family: var(--f-sans);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
}
.impact-lbl {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ── HUMAN MOAT ─────────────────────────────────────────── */
.moat-section { /* spacing handled by section-lbl */ }
.moat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  overflow: hidden;
}
.moat-card {
  background: var(--card-bg);
  padding: 36px 32px 40px;
  transition: background var(--transition);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.moat-card:hover { background: var(--card-hover); }
.moat-title {
  font-family: var(--f-sans);
  font-size: 20px;
  font-weight: var(--card-heading-weight);
  color: var(--ink);
  letter-spacing: -0.018em;
  line-height: 1.15;
  margin: 0;
}
.moat-body {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}

/* ── APPROACH (wrong vs right starting question) ────────── */
.approach {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  overflow: hidden;
  margin-bottom: 40px;
}
.approach-card {
  background: var(--card-bg);
  padding: 32px 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background var(--transition);
}
.approach-card:hover { background: var(--card-hover); }
.approach-full { grid-column: 1 / -1; }
.approach-right { background: var(--highlight); }
.approach-right:hover { background: var(--highlight-hover); }
.approach-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
}
.approach-wrong .approach-label { color: var(--mute); }
.approach-right .approach-label { color: var(--highlight-mute); }
.approach-q {
  font-family: var(--f-sans);
  font-size: 20px;
  font-weight: var(--card-heading-weight);
  color: var(--ink);
  letter-spacing: -0.018em;
  line-height: 1.15;
  margin: 0;
}
.approach-wrong .approach-q {
  color: var(--mute);
  text-decoration: line-through;
  text-decoration-color: var(--ink);
  text-decoration-thickness: 2px;
}
.approach-right .approach-q { color: var(--highlight-ink); }
.approach-body {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
}
.approach-right .approach-body { color: var(--highlight-ink-2); }

/* ── JOURNEY ────────────────────────────────────────────── */
.journey {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  overflow: hidden;
}
.journey-track { display: none; } /* using grid hairlines instead */
.journey-stage {
  background: var(--card-bg);
  padding: 32px 24px 36px;
  position: relative;
  transition: background var(--transition);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.journey-stage:hover { background: var(--card-hover); }
.stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.stage-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--mute);
  font-weight: 500;
}
.stage-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--card-hover);
  border: 1.5px solid var(--mute);
}
.stage-name {
  font-family: var(--f-sans);
  font-size: 20px;
  font-weight: var(--card-heading-weight);
  color: var(--ink);
  letter-spacing: -0.018em;
  line-height: 1.1;
  margin: 0;
}
.stage-tag {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--mute);
  text-transform: uppercase;
  margin: 4px 0 12px;
}
.stage-body {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}

/* progressive saturation along the journey - slate-teal ramp */
.j-1 .stage-num { color: var(--mute); }
.j-2 .stage-num { color: var(--accent); }
.j-3 .stage-num { color: var(--accent-deep); }
.j-4 .stage-num { color: var(--accent-deep); }

.j-1 .stage-dot { border-color: var(--mute); background: var(--card-hover); }
.j-2 .stage-dot { border-color: var(--accent); background: var(--accent-soft); }
.j-3 .stage-dot { border-color: var(--accent-deep); background: var(--accent); }
.j-4 .stage-dot { border-color: var(--accent-deep); background: var(--accent-deep); }

.stage-destination {
  background: var(--highlight);
}
.stage-destination:hover { background: var(--highlight-hover); }
.stage-destination .stage-tag { color: var(--highlight-mute); }
.stage-destination .stage-name { color: var(--highlight-ink); }
.stage-destination .stage-body { color: var(--highlight-ink-2); }

/* ── CLOSING STATEMENT ──────────────────────────────────── */
/* All closing colours come from the section's mode tokens, so the
   block flips light/dark with the rest of the section system. To
   keep the previous "dark card" look, set sectionModes.closing
   to "dark" in theme.js. */
.closing {
  padding: clamp(56px, 8vw, 96px) 0;
  position: relative;
  overflow: hidden;
}
.closing::before {
  content: attr(data-eyebrow);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
  display: block;
  margin-bottom: 36px;
}
.closing-main {
  font-family: var(--f-heading, var(--f-sans));
  font-size: var(--closing-size);
  font-weight: var(--closing-weight);
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin-bottom: 28px;
  max-width: var(--closing-maxw);
  text-transform: var(--closing-transform);
}
.closing-main strong {
  font-weight: var(--closing-strong-weight);
  color: var(--ink);
}
.closing-main .closing-lede {
  color: var(--accent);
}
.closing-sub {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--mute);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.closing-sub a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition);
}
.closing-sub a:hover {
  color: var(--accent-deep);
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 920px) {
  .journey { grid-template-columns: 1fr 1fr; }
  .principles-row { grid-template-columns: 1fr; }
  .domains { grid-template-columns: 1fr; }
  .moat-grid { grid-template-columns: 1fr; }
  .impact-row { grid-template-columns: 1fr 1fr; }
  .approach { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .journey { grid-template-columns: 1fr; }
  .impact-row { grid-template-columns: 1fr; }
  .domain.active { padding: 32px 24px 40px; }
  .step { gap: 14px; }
}