/* AI & WORKFLOWS — bespoke editorial experience for expertise.html's
   ai-workflows tab only. Every other category keeps the generic
   .expertise-detail__grid / .expertise-capabilities markup untouched
   (js/expertise.js hides that generic content and shows #aiw-experience
   only while this one category is active — see that file's
   renderCategoryContent).

   Visual-quality rebuild note: the first pass of this file used a
   repeated grey-rectangle-and-arrow "flowchart" vocabulary
   (.aiw-node/.aiw-arrow/.aiw-diagram/.aiw-flow) for every visual on the
   page. That vocabulary has been removed entirely per explicit feedback
   ("no flowchart made from a sequence of grey rectangular boxes may
   remain"). What replaces it: one reusable illustrative interface-frame
   component for the two production/operational visuals (.aiw-frame), a
   plain hairline-divided editorial-columns component (.aiw-columns)
   everywhere short items are compared side by side, and — for Agentic
   Workflows specifically — plain copy with no diagram at all, followed by
   five .aiw-card cards using the site's established card language. A
   second pass (this one) also removed a radial line-and-label agent
   diagram (.aiw-agent, since deleted) that had briefly stood in for that
   section; it is being rebuilt one section at a time per explicit
   instruction, and this pass is Agentic Workflows' turn. Grey rectangles
   still exist inside .aiw-frame, but only as small modules within an
   actual interface composition, never as the page's primary storytelling
   device.

   Containment: every split/grid layout below uses minmax(0, 1fr) tracks
   and min-width: 0 on flex/grid children, and every visual container is
   width: 100%; max-width: 100%; box-sizing: border-box — no negative
   margins, no fixed oversized widths, no absolutely-positioned elements
   that can extend past their own section. */

.aiw[hidden] {
  display: none;
}

/* Required for the same reason as .category-visual[hidden] /
   .strategy-motion[hidden] in expertise.css: an author display rule beats
   the UA [hidden] stylesheet at equal specificity once source order
   favours the author sheet. .expertise-detail__grid sets `display: grid`
   unconditionally (not just above a breakpoint), so its own [hidden] needs
   the same explicit override here. */
.expertise-detail__grid[hidden] {
  display: none;
}

/* ============================================================
   SHARED — reveal-on-scroll, section rhythm, typography
   ============================================================ */

.aiw-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--cb-duration-slow) var(--cb-ease-standard),
    transform var(--cb-duration-slow) var(--cb-ease-standard);
}

.aiw-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.aiw-section-heading {
  margin: var(--cb-space-3) 0 0;
  max-width: 20ch;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-medium);
  font-size: var(--cb-text-page-heading-size);
  line-height: var(--cb-text-page-heading-leading);
  letter-spacing: var(--cb-text-page-heading-tracking);
  color: var(--cb-color-ink);
}

.aiw-section-body {
  margin: var(--cb-space-4) 0 0;
  max-width: 46ch;
  /* Typography-scale test (2026-08-16): 16px flat at every width, down
     from the --cb-text-subheading-size clamp (19-20px) — part of the
     across-the-board body-copy reduction, scoped to this page only. */
  font-size: 16px;
  line-height: 1.6;
  color: var(--cb-color-text-secondary);
}

.aiw-section-body--wide {
  max-width: 62ch;
}

/* Every section after the hero shares the same vertical rhythm, reusing
   the sitewide --cb-section-gap token rather than inventing new spacing —
   brief: "sections can occupy significant vertical space". */
.aiw > section {
  margin-top: var(--cb-section-gap);
  min-width: 0;
}

.aiw > section:first-child {
  margin-top: 0;
}

/* ============================================================
   1. HERO
   ============================================================ */

/* No max-width here (previously 44rem/1000px) — .aiw-hero already carries
   .container, so a max-width on it directly would cap the OUTER box
   including that class's own 100px/90px edge padding, leaving less than
   the intended width for children. Same pattern as .aiw-section below:
   the section itself stays full-width, and each child (heading, intro
   paragraph) constrains and centres itself independently. */
.aiw-hero {
  text-align: center;
  padding-bottom: var(--cb-space-6);
}

@media (min-width: 50.0625rem) {
  .aiw-hero {
    padding-bottom: var(--cb-space-7);
  }
}

.aiw-hero__eyebrow {
  display: block;
}

/* Typography-scale test (2026-08-16): explicit 32/36/40px tiers (was the
   --cb-text-page-heading-size clamp, 32-40px fluid) — same page-heading
   scale as .expertise-detail__headline in spirit, just pinned to this
   test's own concrete breakpoint values rather than the fluid token, so
   it can be tuned independently of the rest of the site while this
   experiment is being compared. Still clearly the only H1 on the page. */
.aiw-hero__heading {
  margin: var(--cb-space-3) auto 0;
  max-width: 22ch;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-medium);
  font-size: 32px;
  line-height: var(--cb-text-page-heading-leading);
  letter-spacing: var(--cb-text-page-heading-tracking);
  color: var(--cb-color-ink);
}

@media (min-width: 50.0625rem) {
  .aiw-hero__heading {
    font-size: 36px;
  }
}

@media (min-width: 80rem) {
  .aiw-hero__heading {
    font-size: 40px;
  }
}

/* Typography-scale test (2026-08-16): body copy reduced to a flat 16px
   at every width (was 17px mobile / 18px desktop) — part of the
   across-the-board reduction described in this file's own header
   comment, still scoped to this one AI & Workflows page only. Shared by
   every centred paragraph on this page — the hero intro, Agentic
   Workflows' own two intro paragraphs and its closing paragraph — so all
   of them wrap at the same 1000px width, not a narrower per-section
   value. */
.aiw-hero__intro,
.aiw-agentic__intro .aiw-section-body--wide,
.aiw-agentic__closing {
  max-width: 1000px;
  margin-inline: auto;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--cb-color-text-secondary);
}

.aiw-hero__intro {
  margin-top: var(--cb-space-4);
}

/* ============================================================
   SYSTEM MAP — one bounded editorial diagram sitting directly under the
   hero paragraph, inside .aiw-hero itself (not a new section, no heading
   of its own) so it fades in with the same .aiw-reveal the rest of the
   hero already uses rather than needing its own animation. A CSS grid
   (6 lanes x 3 tiers) places every node in real, wrapping-safe document
   flow; js/expertise.js's initSystemMap() measures each node's actual
   rendered centre with ResizeObserver and draws the connecting lines into
   the overlaid SVG (#aiw-map-lines), so alignment stays exact regardless
   of text length or viewport width — never hand-guessed percentage
   coordinates. Below the tablet breakpoint the grid collapses to one
   reordered column and the JS-drawn lines are hidden in favour of plain
   CSS connectors between the stacked nodes (see the media query at the
   end of this block).
   ============================================================ */

.aiw-map {
  position: relative;
  max-width: 1280px;
  margin: var(--cb-space-8) auto 0;
  text-align: left;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--cb-space-3);
  row-gap: var(--cb-space-5);
  align-items: center;
  justify-items: center;
}

@media (min-width: 80rem) {
  .aiw-map {
    column-gap: var(--cb-space-4);
  }
}

.aiw-map__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.aiw-map__lines line {
  stroke: var(--cb-color-line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.aiw-map__lines line.aiw-map__line--dotted {
  stroke-dasharray: 1 4;
  stroke-linecap: round;
}

.aiw-map__lines circle {
  fill: var(--cb-color-line);
}

/* Explicit lane (column) / tier (row) placement — see this file's own
   comment above for the full 6-lane / 3-tier layout this maps out. Every
   node shares this base treatment; .aiw-map__node--sm/--lg only change
   size, and .aiw-map__node--agent alone inverts to a filled Ink surface. */
.aiw-map__node {
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  background: var(--cb-color-paper);
  border: var(--cb-border-width) solid var(--cb-color-line);
  border-radius: 16px;
  padding: 14px;
}

.aiw-map__node--sm {
  max-width: 128px;
  text-align: center;
}

.aiw-map__node--sm .aiw-map__icon {
  margin-inline: auto;
}

.aiw-map__node--lg {
  max-width: 180px;
}

.aiw-map__icon {
  display: block;
  width: 20px;
  height: 20px;
  color: var(--cb-color-graphite);
}

.aiw-map__node-title {
  margin: var(--cb-space-2) 0 0;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-medium);
  font-size: var(--cb-text-small-size);
  line-height: 1.3;
  color: var(--cb-color-ink);
}

.aiw-map__node-body {
  margin: 6px 0 0;
  font-size: var(--cb-text-metadata-size);
  line-height: 1.45;
  color: var(--cb-color-text-secondary);
}

/* The one dark module — Ink fill, Paper text, per explicit visual
   hierarchy instruction. */
.aiw-map__node--agent {
  background: var(--cb-color-ink);
  border-color: var(--cb-color-ink);
}

.aiw-map__node--agent .aiw-map__icon {
  color: var(--cb-color-paper);
}

.aiw-map__node--agent .aiw-map__node-title {
  color: var(--cb-color-paper);
}

.aiw-map__node--agent .aiw-map__node-body {
  color: color-mix(in srgb, var(--cb-color-paper) 72%, var(--cb-color-ink));
}

/* Lane (column) placement, tier (row) placement. */
.aiw-map__node--datasources {
  grid-column: 2;
  grid-row: 1;
}
.aiw-map__node--knowledge {
  grid-column: 3;
  grid-row: 1;
}
.aiw-map__node--tools {
  grid-column: 4;
  grid-row: 1;
}
.aiw-map__node--problem {
  grid-column: 1;
  grid-row: 2;
}
.aiw-map__node--information {
  grid-column: 2;
  grid-row: 2;
}
.aiw-map__node--agent {
  grid-column: 4;
  grid-row: 2;
}
.aiw-map__node--review {
  grid-column: 5;
  grid-row: 2;
}
.aiw-map__node--output {
  grid-column: 6;
  grid-row: 2;
}
.aiw-map__node--systems {
  grid-column: 2;
  grid-row: 3;
}
.aiw-map__node--rules {
  grid-column: 3;
  grid-row: 3;
}
.aiw-map__node--automation {
  grid-column: 4;
  grid-row: 3;
}
.aiw-map__node--human {
  grid-column: 5;
  grid-row: 3;
}

/* MOBILE ONLY — hidden entirely (user visual review, U-5), not shown as a
   reordered single column. The prior mobile treatment (a 12-node stacked
   column with CSS connector segments standing in for the desktop SVG
   lines) read as a very long stack of large cards and connector fragments
   in practice — confirmed by review, not merely a style preference.

   FINAL REVIEW (F-4): the cutoff was raised from 50.0625rem to 79.9375rem
   — the old cutoff still left the diagram showing (in its 6-column grid
   form) at genuine tablet widths like 820px, which final review found
   still looked poor there (cramped/illegible node text, not just the
   already-addressed mobile stack). Decision: hide through the whole
   mobile+tablet range and only show the diagram once there's real
   laptop-width room for it — 80rem (1280px), where the grid has
   consistently read as the intended, genuinely usable composition. No
   replacement/simplified diagram on smaller screens (per brief — plain
   copy only, same as mobile already had). Hiding the whole box (not just
   visually, `display:none`) means it contributes zero height/margin, so
   the gap between the hero intro paragraph and the Agentic Workflows
   section below closes naturally with no extra rule needed. */
@media (max-width: 79.9375rem) {
  .aiw-map {
    display: none;
  }
}

/* ============================================================
   3. AGENTIC WORKFLOWS — the only substantial section rebuilt in this
   pass. No diagram beside the copy; the intro (eyebrow, H2, both
   paragraphs) is centred as its own block — a clear H2/section-heading
   scale, deliberately smaller than every other H2 on this page so it
   reads as subordinate to the AI & Workflows H1 above it, not a second
   page heading — then five cards using the site's established card
   language (left-aligned, unaffected by this centring), then one centred
   closing paragraph.
   ============================================================ */

.aiw-agentic__intro {
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
}

/* Overrides .aiw-section-heading's own page-heading scale (32-40px clamp,
   1.05 line-height, tracked) — deliberately smaller/tighter so this reads
   as a section heading, not a second H1, plus explicit px sizes per spec
   rather than the shared clamp() token. Typography-scale test
   (2026-08-16): tiers dropped from 30/34/38 to 28/31/34 — same treatment
   mirrored on .aiw-human__heading/.aiw-closing__heading below, so every
   "main section H2" on the page (Agentic Workflows, Systems & Workflows,
   Human Control, the closing heading) shares this exact scale. */
.aiw-section-heading--wide {
  max-width: 900px;
  margin-inline: auto;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: normal;
}

@media (min-width: 50.0625rem) {
  .aiw-section-heading--wide {
    font-size: 31px;
  }
}

@media (min-width: 80rem) {
  .aiw-section-heading--wide {
    font-size: 34px;
  }
}

.aiw-cards {
  /* Was tuned for the gap below the now-removed "How we design agentic
     workflows" eyebrow; with that label gone, .aiw-cards sits directly
     under the intro paragraphs and needs its own full section-level gap
     instead. */
  margin-top: var(--cb-space-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cb-space-4);
}

@media (min-width: 30rem) {
  .aiw-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .aiw-cards {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.aiw-card {
  min-width: 0;
  box-sizing: border-box;
  /* The exact background used by the "Les Clés de Charlotte" Featured
     Project card on index.html (.feature-panel) — reused verbatim rather
     than approximated, per explicit instruction. Noticeably rounder
     corners than the site's standard --cb-radius-button (8px), though not
     .feature-panel's own 32px — that value is tuned for a full-bleed
     1260px panel, not a card this size. */
  background: color-mix(in srgb, var(--cb-color-ink) 2%, var(--cb-color-paper));
  border: var(--cb-border-width) solid var(--cb-color-line);
  border-radius: var(--cb-radius-card);
  padding: var(--cb-space-5) var(--cb-space-4);
}

/* Centered horizontally only — .aiw-card__title/__body below stay in
   normal left-aligned block flow. display:block + margin-inline:auto
   centers the icon without affecting the text beneath it. */
.aiw-card__icon {
  display: block;
  width: 36px;
  height: 36px;
  margin: 0 auto var(--cb-space-4);
  color: var(--cb-color-graphite);
}

/* Reserves a consistent two-line-tall zone on every card — same pattern
   as .bureau-access-promo__card-title on index.html — so a one-line title
   ("Define agent roles") still pushes its own body copy down to the same
   Y position as a two-line title ("Connect knowledge & tools") beside it,
   instead of every card's body starting wherever its own title happened
   to wrap. Text itself stays top-aligned within that reserved zone, not
   vertically centred inside it. */
/* Typography-scale test (2026-08-16): "standard card title" bucket,
   explicit flat 18px (was the --cb-text-subheading-size clamp, 19-20px)
   — the min-height reservation below is recalculated to match (same 1.3
   leading ratio as that token used) so the two-line title zone still
   lines up exactly with the new, slightly smaller text. */
.aiw-card__title {
  margin: 0;
  min-height: calc(18px * 1.3 * 2);
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-medium);
  font-size: 18px;
  line-height: 1.3;
  color: var(--cb-color-ink);
}

/* Typography-scale test (2026-08-16): "card/body copy" bucket, flat 16px
   (was --cb-text-small-size, 14px fixed) — brought up into the same
   15-16px band as .aiw-system-card__body rather than left smaller. */
.aiw-card__body {
  margin: var(--cb-space-2) 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--cb-color-text-secondary);
}

.aiw-agentic__closing {
  margin-top: var(--cb-space-6);
  text-align: center;
}

/* ============================================================
   4. Section 6's three custom-tools examples & Human Control — plain
   editorial columns, hairline dividers, no card fill, no icons.
   ============================================================ */

.aiw-columns__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cb-space-5);
  text-align: left;
}

@media (min-width: 50.0625rem) {
  .aiw-columns__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }
}

.aiw-columns__item {
  min-width: 0;
  padding: var(--cb-space-4) 0;
  border-top: var(--cb-border-width) solid var(--cb-color-line);
}

@media (min-width: 50.0625rem) {
  .aiw-columns__item {
    padding: 0 var(--cb-space-5);
    border-top: none;
    border-left: var(--cb-border-width) solid var(--cb-color-line);
  }

  .aiw-columns__item:first-child {
    padding-left: 0;
    border-left: none;
  }

  .aiw-columns__item:last-child {
    padding-right: 0;
  }
}

.aiw-columns__title {
  margin: 0;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-medium);
  font-size: var(--cb-text-subheading-size);
  line-height: var(--cb-text-subheading-leading);
  color: var(--cb-color-ink);
}

.aiw-columns__body {
  margin: var(--cb-space-2) 0 0;
  font-size: var(--cb-text-body-size);
  line-height: var(--cb-text-body-leading);
  color: var(--cb-color-text-secondary);
}

/* ============================================================
   SYSTEMS & WORKFLOWS — replaces the previous illustrative-interface-frame
   sections. Two large rounded cards, no dashboard visuals: the exact
   background .feature-panel (the "Les Clés de Charlotte" Featured Project
   card on index.html) uses, reused verbatim rather than approximated —
   same reasoning as .aiw-card's own background a section earlier.
   ============================================================ */

/* Shared intro (eyebrow/H2/supporting sentence) centred as its own block
   — .aiw-agentic__intro already supplies max-width/margin-inline:auto/
   text-align:center, but .aiw-section-heading and .aiw-section-body
   themselves only ever centre-align their own TEXT, not their own block
   box (their base margins are "0 0", not auto) — the same gap fixed for
   Agentic Workflows' own heading via .aiw-section-heading--wide, scoped
   here to this section only so Creative/Connected/Human Control's own
   (deliberately left-aligned) headings stay untouched. */
.aiw-systems .aiw-section-body {
  margin-inline: auto;
}

.aiw-systems__grid {
  margin-top: var(--cb-space-7);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cb-space-5);
}

@media (min-width: 64rem) {
  .aiw-systems__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cb-space-6);
  }
}

.aiw-system-card {
  position: relative;
  min-width: 0;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--cb-color-ink) 2%, var(--cb-color-paper));
  border-radius: var(--cb-radius-feature);
  /* Extra bottom padding (vs. the equal space-6 used on every other side)
     reserves clearance for the "+" button now sitting in that same
     bottom-right corner, so it can never overlap the body copy above it
     regardless of how many lines that paragraph wraps to. */
  padding: var(--cb-space-6) var(--cb-space-5) 88px;
}

/* A quiet circular icon-button, not a filled/coloured CTA — deliberately
   understated ("+" only, no label text visible) since its accessible name
   comes from the visually-hidden span beside it. Bottom-right corner, not
   top-right — inset consistently from both edges in both cards. */
.aiw-system-card__plus {
  position: absolute;
  bottom: var(--cb-space-4);
  right: var(--cb-space-4);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: var(--cb-border-width) solid var(--cb-color-line);
  background: var(--cb-color-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cb-font-sans);
  font-size: 20px;
  font-weight: var(--cb-weight-regular);
  line-height: 1;
  color: var(--cb-color-ink);
  cursor: pointer;
  transition: background-color 200ms var(--cb-ease-standard);
}

.aiw-system-card__plus:hover,
.aiw-system-card__plus:focus-visible {
  background: color-mix(in srgb, var(--cb-color-ink) 6%, var(--cb-color-paper));
}

/* Explicit px sizes (not the page-heading clamp) — reads clearly as a
   card title now, not a page heading. Typography-scale test
   (2026-08-16): "large feature-card title" bucket, tiers dropped from
   27/29/31 to 23/25/27. */
.aiw-system-card__title {
  margin: var(--cb-space-3) 0 0;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-medium);
  font-size: 23px;
  line-height: 1.1;
  color: var(--cb-color-ink);
}

@media (min-width: 50.0625rem) {
  .aiw-system-card__title {
    font-size: 25px;
  }
}

@media (min-width: 80rem) {
  .aiw-system-card__title {
    font-size: 27px;
  }
}

.aiw-system-card__body {
  margin: var(--cb-space-4) 0 0;
  /* Typography-scale test (2026-08-16): "card/body copy" bucket, flat
     16px (was the --cb-text-body-size clamp, 16-17px). */
  font-size: 16px;
  line-height: var(--cb-text-body-leading);
  color: var(--cb-color-text-secondary);
}

/* ============================================================
   SYSTEMS & WORKFLOWS — card pop-ups. Centred modals, not drawers: fixed
   full-viewport wrapper + flex-centred panel, [inert] as the single
   source of truth for open/closed (see initSystemsModals in
   js/expertise.js), same restrained fade used sitewide rather than a
   slide-in — "light, premium, calm" per brief, not a heavy overlay.
   ============================================================ */

.aiw-modal-root {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cb-space-4);
  visibility: hidden;
  pointer-events: none;
}

.aiw-modal-root:not([inert]) {
  visibility: visible;
  pointer-events: auto;
}

.aiw-modal-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--cb-color-ink) 35%, transparent);
  opacity: 0;
  transition: opacity var(--cb-duration-slow) var(--cb-ease-standard);
}

.aiw-modal-root:not([inert]) .aiw-modal-backdrop {
  opacity: 1;
}

.aiw-modal {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 32rem;
  max-height: min(80vh, 640px);
  overflow-y: auto;
  box-sizing: border-box;
  background: var(--cb-color-paper);
  border-radius: var(--cb-radius-modal);
  padding: var(--cb-space-6) var(--cb-space-5);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity var(--cb-duration-slow) var(--cb-ease-standard),
    transform var(--cb-duration-slow) var(--cb-ease-standard);
}

.aiw-modal:focus {
  outline: none;
}

.aiw-modal-root:not([inert]) .aiw-modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.aiw-modal__close {
  position: absolute;
  top: var(--cb-space-4);
  right: var(--cb-space-4);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: var(--cb-border-width) solid var(--cb-color-line);
  background: var(--cb-color-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cb-color-ink);
  cursor: pointer;
  transition: background-color 200ms var(--cb-ease-standard);
}

.aiw-modal__close:hover,
.aiw-modal__close:focus-visible {
  background: color-mix(in srgb, var(--cb-color-ink) 6%, var(--cb-color-paper));
}

.aiw-modal__close svg {
  width: 16px;
  height: 16px;
}

.aiw-modal__title {
  margin: var(--cb-space-3) 48px 0 0;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-medium);
  font-size: var(--cb-text-subheading-size);
  line-height: 1.3;
  color: var(--cb-color-ink);
}

.aiw-modal__list {
  margin: var(--cb-space-5) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-3);
}

.aiw-modal__list li {
  padding-top: var(--cb-space-3);
  border-top: var(--cb-border-width) solid var(--cb-color-line);
  font-size: var(--cb-text-body-size);
  line-height: var(--cb-text-body-leading);
  color: var(--cb-color-text-secondary);
}

.aiw-modal__list li:first-child {
  border-top: none;
  padding-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .aiw-modal {
    transform: none;
  }
}

/* ============================================================
   6. HUMAN CONTROL — deliberately the quietest section on the page.
   ============================================================ */

/* No max-width here — .aiw-human carries .container, so a max-width on it
   directly would cap the OUTER box including that class's own 100px/90px
   edge padding, leaving less room than intended for the heading/body
   below. Same fix as .aiw-hero's own equivalent bug earlier on this page:
   the section stays full-width, and .aiw-human__heading/__body each
   constrain and centre themselves independently. */
.aiw-human {
  text-align: center;
}

/* Typography-scale test (2026-08-16): same explicit 28/31/34 "main
   section H2" scale as .aiw-section-heading--wide, replacing the raw
   page-heading clamp this used before. */
.aiw-human__heading {
  margin: var(--cb-space-3) auto 0;
  max-width: 900px;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-medium);
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: normal;
  color: var(--cb-color-ink);
}

@media (min-width: 50.0625rem) {
  .aiw-human__heading {
    font-size: 31px;
  }
}

@media (min-width: 80rem) {
  .aiw-human__heading {
    font-size: 34px;
  }
}

.aiw-human__body {
  margin: var(--cb-space-4) auto 0;
  max-width: 1000px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--cb-color-text-secondary);
}

/* Human Control's own copy of .aiw-cards sits inside the centred
   .aiw-human text column, so it needs a left-align reset (the parent's
   text-align: center only applies to the heading/body above it) and its
   own, slightly larger top gap (matching the previous columns layout's
   own spacing here). */
.aiw-cards--human {
  margin-top: var(--cb-space-7);
  text-align: left;
}

/* ============================================================
   8. CLOSING
   ============================================================ */

/* No max-width here — .aiw-closing carries .container, so a max-width on
   it directly would cap the OUTER box including that class's own
   100px/90px edge padding, leaving less room than intended for the
   heading/body below (same fix as .aiw-hero/.aiw-human's own equivalent
   bug earlier on this page). Each child constrains and centres itself
   independently instead. */
.aiw-closing {
  text-align: center;
  padding-bottom: var(--cb-space-4);
}

/* Typography-scale test (2026-08-16): same explicit 28/31/34 "main
   section H2" scale as .aiw-section-heading--wide/.aiw-human__heading. */
.aiw-closing__heading {
  margin: var(--cb-space-3) auto 0;
  max-width: 20ch;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-medium);
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: normal;
  color: var(--cb-color-ink);
}

@media (min-width: 50.0625rem) {
  .aiw-closing__heading {
    font-size: 31px;
  }
}

@media (min-width: 80rem) {
  .aiw-closing__heading {
    font-size: 34px;
  }
}

.aiw-closing__body {
  margin: var(--cb-space-4) auto 0;
  max-width: 1000px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--cb-color-text-secondary);
}

.aiw-closing__actions {
  margin-top: var(--cb-copy-cta-gap);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .aiw-reveal {
    transform: none;
  }
}