/* Page composition and local exceptions. Shared primitives: ../../design-system/. */
/* ============================================================
   Tokens — aligned to specs/design-system.md §2 Typography,
   §3 Spacing, §4 Border Radius
   ============================================================ */
:root {

  /* Colors */

  --text-quote: #2E2D2A;

    /* soft teal-sage — same as work-sidebar inactive */

  /* Layout */

  /* Spacing scale (§3): 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 / 80 / 96 */

  /* Radius (§4) */

  /* Fonts (§2) */

}

body {

   text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   Type primitives — all sizes/weights from system §2
   Eyebrow letter-spacing 0.1em (system max)
   ============================================================ */

.h-section {

  margin-bottom: var(--s-24);

}

/* ============================================================
   HERO — frost slab (Neptune brand light), project title = Red Hat (Structure voice)
   ============================================================ */


.hero .inner {
  max-width: var(--content-wide); margin: 0 auto;
  padding: var(--s-80) var(--gutter) var(--s-64);
  position: relative; z-index: 1;
}
.hero h1 {

  --cover-title-size: clamp(44px, 5vw, 72px);
  --cover-title-leading: 1.05; --cover-title-tracking: -0.025em;

  max-width: 18ch;
}
.hero .lede {

   max-width: 720px;
  margin-top: var(--s-24);
}

/* ============================================================
   ToC — fixed overlay; hidden until hero fully scrolls off,
   then fades in on case body. Minor version of work-sidebar:
   same Red Hat Display voice, reduced volume.
   ============================================================ */
.toc-sidebar {
  position: fixed; left: var(--gutter); top: 96px;
  width: 200px; max-height: calc(100vh - 136px); overflow: hidden;
  pointer-events: none;
  z-index: 30;
  /* visibility paired with opacity so Safari can't paint the un-faded ToC over Hero */
  opacity: 0; visibility: hidden;
  transform: translateX(-8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
.toc-sidebar.in-view {
  opacity: 1; visibility: visible;
  transform: translateX(0);
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear 0s;
}
.toc-sidebar .nav { pointer-events: auto; display: flex; flex-direction: column; gap: 4px; }
.toc-sidebar .nav a {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--text-primary);
  padding: var(--s-8) 0 var(--s-8) var(--s-16);
  border-left: 2px solid rgba(28,27,24,0.12);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.toc-sidebar .nav a.active {
  color: var(--depth);
  border-left-color: var(--depth);
}
.toc-sidebar .nav a:hover { color: var(--depth); }

/* ToC on dark sections (cobalt North Star Vision) — invert */
.toc-sidebar.on-dark .nav a { color: var(--on-dark); border-left-color: rgba(255,255,255,0.22); }
.toc-sidebar.on-dark .nav a.active { color: #FFFFFF; border-left-color: var(--signal); }
.toc-sidebar.on-dark .nav a:hover { color: #FFFFFF; }

@media (max-width: 1799px) { .toc-sidebar { display: none; } }

/* ============================================================
   IMPACT — cream base; h2 + intro; 3 tiles row, 1 accented
   ============================================================ */
.impact { background: var(--bg); }

.impact .eyebrow { margin-bottom: var(--s-16); }
.impact .intro { max-width: 780px; font-size: var(--body-large-size); line-height: 1.65; color: var(--text-primary); }
.impact .tiles {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-16); margin-top: var(--s-48);
}
.impact .tile {
  background: var(--bg); border-radius: var(--r-lg);
  padding: var(--s-24);
}
.impact .tile.accent { background: var(--depth); color: var(--on-dark); }
.impact .tile.accent p { color: var(--on-dark-soft); }
.impact .tile h3 {
  font-family: var(--f-display); font-weight: 700; font-size: 22px;
  line-height: 1.2; letter-spacing: -0.01em;
  margin-bottom: var(--s-12);
}
.impact .tile p { font-size: 16px; line-height: 1.7; color: var(--text-primary); }
.impact .closing { max-width: 820px; margin-top: var(--s-48); font-size: 16px; line-height: 1.7; color: var(--text-primary); }
.impact .closing + .closing { margin-top: var(--s-12); }

/* ============================================================
   PROBLEM — h2 shortened; kicker above carousel; subs below
   ============================================================ */
.problem { background: var(--bg); }
.problem .top {
  max-width: var(--content-wide); margin: 0 auto;
  padding: 0 var(--gutter) 0;
}
.problem .eyebrow { margin-bottom: var(--s-16); }

.carousel {
  --slide-w: 100%;
  max-width: var(--content-wide); margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}
.carousel .kicker {
  color: var(--text-secondary);
  margin-bottom: var(--s-16);
}
.carousel .track-wrap {
  position: relative; overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
  cursor: pointer;
}
.carousel .track { display: flex; transition: transform .45s var(--ease); will-change: transform; touch-action: pan-y; }
.carousel .slide { flex: 0 0 var(--slide-w); user-select: none; }
.carousel .slide img { display: block; width: 100%; height: auto; aspect-ratio: 3024/1964; object-fit: cover; pointer-events: none; }
.carousel .controls {
  margin-top: var(--s-16);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-16);
}
.carousel .label {
  font-family: var(--f-body); font-size: 13px; font-weight: 600;
  color: var(--text-secondary); letter-spacing: 0.1em; text-transform: uppercase;
}
.carousel .arrows { display: flex; gap: var(--s-8); }
.carousel .arrow {
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--surface); color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; transition: background .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}
.carousel .arrow:hover { background: var(--text-primary); color: var(--on-dark); }
.carousel .arrow[disabled] { opacity: .35; cursor: default; }
.carousel .arrow[disabled]:hover { background: var(--surface); color: var(--text-primary); }
.carousel .dots { display: flex; gap: var(--s-8); align-items: center; }
.carousel .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: background .2s var(--ease); cursor: pointer; }
.carousel .dot.active { background: var(--text-primary); }

.problem .subs {
  max-width: var(--content-wide); margin: var(--s-48) auto 0;
  padding: 0 var(--gutter) var(--section-pad-y);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-32);
}
.problem .sub h3 {
  font-family: var(--f-display); font-weight: 700; font-size: 22px;
  line-height: 1.2; letter-spacing: -0.01em;
  margin-bottom: var(--s-12);
}
.problem .sub p { font-size: 16px; line-height: 1.7; color: var(--text-primary); }

/* (Responsive consolidated at end of stylesheet) */

/* ============================================================
   DISCOVERY — v2 layout, ATS keyword chips, caption above image
   ============================================================ */
.discovery { background: var(--sage); }
.discovery .top { max-width: var(--content-wide); margin: 0 auto; padding: var(--section-pad-y) var(--gutter) var(--s-24); }
.discovery .eyebrow { margin-bottom: var(--s-16); }
.discovery .lede { font-size: var(--body-large-size); line-height: 1.65; max-width: 720px; color: var(--text-primary); }
.discovery .chips { margin-top: var(--s-24); display: flex; flex-wrap: wrap; gap: var(--s-8); }
.discovery .chips span { font-family: var(--f-body); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; padding: 6px 12px; border-radius: 999px; background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); }
.discovery .media { max-width: var(--page-max); margin: var(--s-24) auto 0; padding: 0 var(--gutter); }

.discovery .media img { width: 100%; border-radius: var(--r-md); border: 1px solid var(--border); }
.discovery .cols { max-width: var(--content-wide); margin: var(--s-32) auto 0; padding: 0 var(--gutter) var(--section-pad-y); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-48); }
.discovery .cols p { font-size: 16px; line-height: 1.7; }

/* ============================================================
   AI AS DESIGN PARTNER — custom scroll-animated diagram
   (Documents fly in from left → ML Engineer role rises from
   below → Structured Interview settles on the right.)
   ============================================================ */
.ai-partner { background: var(--frost); }

.ai-partner .top p { max-width: 820px; }
.ai-partner .eyebrow { margin-bottom: var(--s-16); color: var(--indigo); }
.ai-partner p { font-size: 16px; line-height: 1.7; }

/* ==== AI-PARTNER diagram — scroll-driven, no sticky ====
   The stage scrolls naturally; --p (0..1) is driven by the stage's
   own viewport progress. Builds in as it enters, continues past.
   Pattern: rAF + getBoundingClientRect, per decisions/2026-04-10. */
.ai-scroll-wrap { position: relative; margin-top: var(--s-64); }
.ai-sticky { position: static; }

.ai-stage {
  --p: 0;
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 160px 96px 1.4fr 96px 1.15fr;
  column-gap: var(--s-16);
  align-items: center;
}

/* LEFT — Knowledge base column (no label, no meta) */
.ai-stage .kb { grid-column: 1; }
.ai-stage .kb-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-24); }
.ai-stage .kb-item {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
  opacity: var(--v, 0);
  transform-origin: 50% 50%;
}
.ai-stage .doc-svg { width: 72px; height: 72px; filter: drop-shadow(0 6px 14px rgba(61,59,142,.16)); }
.ai-stage .doc-svg rect { fill: var(--bg); stroke: var(--indigo); }
.ai-stage .doc-svg rect.back { fill: var(--frost); }
.ai-stage .doc-svg rect.mid  { fill: var(--indigo-soft); }
.ai-stage .doc-svg line { stroke: var(--indigo); stroke-opacity: .28; }
.ai-stage .kb-item .count { font-family: var(--f-display); font-weight: 900; font-size: 26px; color: var(--depth); line-height: 1; margin-top: var(--s-8); letter-spacing: -0.015em; }
.ai-stage .kb-item .name { font-family: var(--f-body); font-size: var(--label-size); font-weight: 500; color: var(--text-secondary); line-height: 1.3; text-align: center; }

/* ARROWS — three chevrons of escalating opacity, revealing one-by-one
   on scroll. Suggests flow without a long line; reads as "kinetic." */
.ai-stage .arr {
  grid-row: 1;
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-8);
  color: var(--indigo);
  height: 18px;
}
.ai-stage .arr-1 { grid-column: 2; }
.ai-stage .arr-2 { grid-column: 4; }
.ai-stage .arr .chev {
  width: 14px; height: 18px;
  opacity: calc(var(--cv, 0) * var(--end-op, 0.6));
  transform: translateX(calc((1 - var(--cv, 0)) * -8px));
}
.ai-stage .arr .chev svg { display: block; width: 100%; height: 100%; }
.ai-stage .arr .chev path { stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ai-stage .arr .chev.c1 { --end-op: 0.35; }
.ai-stage .arr .chev.c2 { --end-op: 0.6; }
.ai-stage .arr .chev.c3 { --end-op: 0.95; }
.ai-stage .arr-1 .chev.c1 { --cv: clamp(0, calc((var(--p) - 0.10) * 7), 1); }
.ai-stage .arr-1 .chev.c2 { --cv: clamp(0, calc((var(--p) - 0.15) * 7), 1); }
.ai-stage .arr-1 .chev.c3 { --cv: clamp(0, calc((var(--p) - 0.20) * 7), 1); }
.ai-stage .arr-2 .chev.c1 { --cv: clamp(0, calc((var(--p) - 0.45) * 7), 1); }
.ai-stage .arr-2 .chev.c2 { --cv: clamp(0, calc((var(--p) - 0.50) * 7), 1); }
.ai-stage .arr-2 .chev.c3 { --cv: clamp(0, calc((var(--p) - 0.55) * 7), 1); }

/* CENTER — GPT card */
.ai-stage .gpt-card {
  grid-column: 3;
  background: var(--bg);
  border: 1.5px solid var(--indigo);
  border-radius: var(--r-md);
  padding: var(--s-24) var(--s-24) var(--s-20);
  box-shadow:
    0 2px 6px rgba(61, 59, 142, .08),
    0 40px 80px -36px rgba(61, 59, 142, .3);
  opacity: var(--v, 0);
  transform:
    translateY(calc((1 - var(--v, 0)) * 40px))
    scale(calc(0.96 + 0.04 * var(--v, 0)));
}
.ai-stage .gpt-head { margin-bottom: var(--s-4); }
.ai-stage .gpt-eyebrow { font-family: var(--f-body); font-size: var(--label-size); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--quiet); margin-bottom: var(--s-4); }
.ai-stage .gpt-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-12); }
.ai-stage .gpt-title { font-family: var(--f-display); font-weight: 800; font-size: 19px; color: var(--depth); letter-spacing: -0.01em; line-height: 1.2; }
.ai-stage .gpt-badge { font-family: var(--f-body); font-size: var(--label-size); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-ink); padding: 3px 8px; border: 1px solid var(--signal); border-radius: 999px; white-space: nowrap; }
.ai-stage .gpt-divider { height: 1px; background: rgba(61, 59, 142, .28); margin: var(--s-16) 0; }
.ai-stage .gpt-body { font-family: var(--f-body); font-size: 14px; line-height: 1.6; color: var(--text-primary); }
.ai-stage .gpt-body p + p { margin-top: var(--s-12); }
.ai-stage .gpt-body ul { list-style: none; margin: var(--s-8) 0 0; padding: 0; font-size: 14px; }
.ai-stage .gpt-body ul li { padding: 3px 0 3px 18px; position: relative; line-height: 1.55; }
.ai-stage .gpt-body ul li::before { content: '—'; position: absolute; left: 0; color: var(--indigo); font-weight: 700; }
.ai-stage .gpt-footer { margin-top: var(--s-16); padding-top: var(--s-12); border-top: 1px solid rgba(61, 59, 142, .14); font-family: var(--f-display); font-weight: 700; font-size: var(--label-size); letter-spacing: 0.1em; text-transform: uppercase; color: var(--indigo); }

/* RIGHT — Structured interview */
.ai-stage .interview {
  grid-column: 5;
  opacity: var(--v, 0);
  transform: translateX(calc((1 - var(--v, 0)) * 16px));
}
.ai-stage .chat { background: var(--frost); border: 1px solid rgba(61, 59, 142, .18); border-radius: var(--r-md); padding: var(--s-16); display: flex; flex-direction: column; gap: var(--s-12); box-shadow: 0 1px 2px rgba(61, 59, 142, .04); }
.ai-stage .msg-wrap { display: flex; flex-direction: column; opacity: var(--v, 0); transform: translateY(calc((1 - var(--v, 0)) * 8px)); }
.ai-stage .msg-label { font-family: var(--f-body); font-size: var(--label-size); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--quiet); margin-bottom: var(--s-4); }
.ai-stage .msg { padding: var(--s-12) var(--s-16); font-family: var(--f-body); font-size: 14px; line-height: 1.55; }
.ai-stage .msg.user { background: var(--indigo); color: var(--on-dark); border-radius: 10px 10px 2px 10px; }
.ai-stage .msg.ai { background: var(--bg); color: var(--text-primary); border: 1px solid rgba(61, 59, 142, .16); border-radius: 2px 10px 10px 10px; }
.ai-stage .msg.ai p + p { margin-top: var(--s-8); }

/* Scroll-progress → per-element local progress (clamped 0..1). */
/* Docs: all four share the same progress window — fly in simultaneously
   from different vectors on the left (varied offsets + rotations). */
.ai-stage .kb-item { --v: clamp(0, calc(var(--p) * 4), 1); }
.ai-stage .kb-item.d1 { transform: translate(calc((1 - var(--v)) * -160px), calc((1 - var(--v)) * -70px)) rotate(calc((1 - var(--v)) * -10deg)); }
.ai-stage .kb-item.d2 { transform: translate(calc((1 - var(--v)) * -120px), calc((1 - var(--v)) * -25px)) rotate(calc((1 - var(--v)) *   6deg)); }
.ai-stage .kb-item.d3 { transform: translate(calc((1 - var(--v)) * -140px), calc((1 - var(--v)) *  20px)) rotate(calc((1 - var(--v)) *  -5deg)); }
.ai-stage .kb-item.d4 { transform: translate(calc((1 - var(--v)) * -180px), calc((1 - var(--v)) *  60px)) rotate(calc((1 - var(--v)) *   8deg)); }

/* Concurrent: docs + arr-1 + GPT card overlap heavily — they animate
   together as the user crosses the first half of the section. */
.ai-stage .arr-1      { --v: clamp(0, calc((var(--p) - 0.10) * 4),  1); }
.ai-stage .gpt-card   { --v: clamp(0, calc((var(--p) - 0.15) * 4),  1); }
.ai-stage .arr-2      { --v: clamp(0, calc((var(--p) - 0.45) * 5),  1); }
.ai-stage .interview  { --v: clamp(0, calc((var(--p) - 0.50) * 5),  1); }
.ai-stage .interview .msg-wrap:nth-of-type(1) { --v: clamp(0, calc((var(--p) - 0.58) * 8), 1); }
.ai-stage .interview .msg-wrap:nth-of-type(2) { --v: clamp(0, calc((var(--p) - 0.72) * 8), 1); }
.ai-stage .interview .msg-wrap:nth-of-type(3) { --v: clamp(0, calc((var(--p) - 0.86) * 8), 1); }

.ai-partner .footer-note { margin-top: var(--s-48); font-size: 16px; line-height: 1.7; max-width: 820px; color: var(--text-primary); }

@media (max-width: 1099px) {
  /* Collapse scrollytelling on narrow screens — all visible, no sticky scrub */
  .ai-scroll-wrap { height: auto; }
  .ai-sticky { position: static; height: auto; display: block; }
  .ai-stage { --p: 1 !important; grid-template-columns: 1fr; row-gap: var(--s-32); padding: var(--s-24) var(--gutter); }
  .ai-stage .kb, .ai-stage .gpt-card, .ai-stage .interview { grid-column: 1; }
  .ai-stage .arr { display: none; }
  .ai-stage .kb-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
   KEY INSIGHT — V5 layout: sticky hypothesis + 6 workflow cards.
   Personal voice headline (DM Serif). Hypothesis artifact rendered
   as a callout below the grid; open questions kept honest, short.
   ============================================================ */
.insight { background: var(--frost); }
.insight .inner {
  max-width: var(--content-wide); margin: 0 auto;
  padding: 0 var(--gutter) var(--section-pad-y);
}
.insight .grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: var(--s-64); align-items: start;
}
.insight .anchor { position: sticky; top: var(--s-96); }
.insight .eyebrow { margin-bottom: var(--s-16); }
.insight .lede {
  margin-top: var(--s-24); max-width: 44ch;
  font-size: var(--body-size); line-height: 1.65; color: var(--text-primary);
}
.insight .meta {
  margin-top: var(--s-20); padding-top: var(--s-16);
  border-top: 1px solid var(--border);
  font-family: var(--f-body); font-size: 13px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary);
  max-width: 32ch; line-height: 1.6;
}

.insight .cards { display: grid; grid-template-columns: 1fr; gap: var(--s-12); }
.insight .card {
  background: var(--bg);
  border-radius: var(--r-lg);
  padding: var(--s-24);
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.insight.in-view .card { opacity: 1; transform: translateY(0); }
.insight.in-view .card:nth-child(1) { transition-delay: .05s; }
.insight.in-view .card:nth-child(2) { transition-delay: .12s; }
.insight.in-view .card:nth-child(3) { transition-delay: .19s; }
.insight.in-view .card:nth-child(4) { transition-delay: .26s; }
.insight.in-view .card:nth-child(5) { transition-delay: .33s; }
.insight.in-view .card:nth-child(6) { transition-delay: .40s; }
.insight .card .n {
  font-family: var(--f-display); font-size: var(--label-size); font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary);
}
.insight .card h3 {
  font-family: var(--f-display); font-weight: 700; font-size: 19px;
  line-height: 1.2; letter-spacing: -0.01em; margin: var(--s-4) 0 var(--s-4);
  color: var(--text-primary);
}
.insight .card p { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }

.insight .artifact {
  margin-top: var(--s-80);
  background: var(--depth); color: var(--on-dark);
  border-radius: var(--r-lg);
  padding: var(--s-48) var(--s-48) var(--s-32);
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-48);
}
.insight .artifact .a-eyebrow {
  font-family: var(--f-body); font-size: var(--label-size); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-on-dark);
  margin-bottom: var(--s-16);
}
.insight .artifact .a-title {
  font-family: var(--f-display); font-weight: 800; font-size: 26px;
  line-height: 1.2; letter-spacing: -0.015em; margin-bottom: var(--s-16);
  color: #FFFFFF;
}
.insight .artifact .a-sub {
  font-family: var(--f-quote); font-style: italic;
  font-size: 19px; line-height: 1.55; color: var(--on-dark);
}
.insight .artifact .a-questions h4 {
  font-family: var(--f-body); font-size: var(--label-size); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #FFFFFF;
  margin-bottom: var(--s-16);
}
.insight .artifact .a-questions ul { list-style: none; padding: 0; margin: 0; }
.insight .artifact .a-questions li {
  font-family: var(--f-body); font-size: 14px; line-height: 1.55;
  color: var(--on-dark-soft);
  padding: var(--s-12) 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.insight .artifact .a-questions li:first-child { border-top: 0; padding-top: 0; }
.insight .closer {
  margin-top: var(--s-48); max-width: 760px;
  font-size: 16px; line-height: 1.7; color: var(--text-primary);
}

/* ============================================================
   DESIGN — three sub-steps:
   1) Inventory: 2-col text + HTML entity diagram
   2) Wireframes inset: small static images of early mockups
   3) Canvas concept: cobalt slab + live Figma embed + 3 pillars
   4) AI-informed: text + 6 workflow metric tiles
   ============================================================ */
.design { background: var(--bg); }
.design .inner { max-width: var(--content-wide); margin: 0 auto; padding: 0 var(--gutter); }
.design .inner.first { padding-top: var(--section-pad-y); }
.design .inner.last { padding-bottom: var(--section-pad-y); }
.design .top { margin-bottom: 0; }
.design .top .eyebrow { margin-bottom: var(--s-16); }
.design h3 { font-family: var(--f-display); font-weight: 700; font-size: 28px; line-height: 1.2; letter-spacing: -0.015em; color: var(--text-primary); margin-bottom: var(--s-24); }

/* Inventory */
.design .inventory { margin-bottom: var(--s-80); }
.design .inventory .cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-48); margin-bottom: var(--s-48); }
.design .inventory .cols p { font-size: 16px; line-height: 1.7; color: var(--text-primary); }

/* Entity diagram — built from Figma node 40000199:70058. Larger, breathier. */
.entity-diagram {
  background: #C6BBD6;
  border-radius: var(--r-lg);
  padding: var(--s-32);
  display: flex; flex-direction: column; gap: var(--s-20);
  align-items: stretch;
}
.entity-diagram .ed-title {
  font-family: var(--f-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.18em; color: #5A4B78;
}
.entity-diagram .ed-content { display: grid; grid-template-columns: 1fr 240px; gap: var(--s-24); align-items: stretch; }
.entity-diagram .ed-dashboard {
  background: rgba(214,205,230,0.6);
  border: 1.5px solid #BCB2D2;
  border-radius: var(--r-md);
  padding: var(--s-32);
  display: flex; flex-direction: column; gap: var(--s-24); align-items: center;
}
.entity-diagram .ed-dashboard .ed-label {
  font-family: var(--f-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.18em; color: #5A4B78;
}
.entity-diagram .ed-cards { display: flex; align-items: center; gap: var(--s-8); width: 100%; }
.entity-diagram .ed-card {
  background: #FFFFFF; border: 2px solid #6C5CE7;
  border-radius: var(--r-md); padding: var(--s-24) var(--s-32);
  display: flex; flex-direction: column; gap: var(--s-8);
  flex: 1 1 0; min-width: 0;
}
.entity-diagram .ed-card .ed-name {
  font-family: var(--f-display); font-weight: 800; font-size: 20px; color: #2D1B69; margin-bottom: 4px;
}
.entity-diagram .ed-card .ed-divider {
  height: 1px; background: linear-gradient(to right, #BCB2D2 0%, #BCB2D2 50%, transparent 50%);
  background-size: 8px 1px; background-repeat: repeat-x;
  width: 100%; margin: 6px 0 10px;
}
.entity-diagram .ed-card .ed-attr { font-family: var(--f-body); font-size: 14px; color: #82769B; line-height: 1.55; }
.entity-diagram .ed-rel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 80px; flex-shrink: 0;
  font-family: var(--f-display); font-weight: 800; font-size: 14px; color: #6C5CE7;
  letter-spacing: 0.06em;
  position: relative;
}
.entity-diagram .ed-rel::before, .entity-diagram .ed-rel::after {
  content: ''; position: absolute; top: 50%; height: 2px; background: #6C5CE7;
}
.entity-diagram .ed-rel::before { left: 0; right: 50%; margin-right: 18px; }
.entity-diagram .ed-rel::after { right: 0; left: 50%; margin-left: 18px; }
.entity-diagram .ed-report {
  background: rgba(255,255,255,0.25);
  border: 1.5px dashed #A094B9;
  border-radius: var(--r-md);
  padding: var(--s-32);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-12);
}
.entity-diagram .ed-report .ed-label { font-family: var(--f-display); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; color: #5A4B78; }
.entity-diagram .ed-report .ed-sub { font-family: var(--f-body); font-size: 13px; color: #5A4B78; }
.entity-diagram .ed-ghost {
  background: rgba(255,255,255,0.4);
  border: 1px dashed #8B7CA8;
  border-radius: var(--r-sm);
  padding: var(--s-12) var(--s-16);
  font-family: var(--f-body); font-size: 14px; color: #5A4B78;
  width: 100%; text-align: center;
}
.entity-diagram .ed-frozen { font-family: var(--f-body); font-style: italic; font-size: 13px; color: #5A4B78; margin-top: var(--s-8); }
.entity-diagram figcaption { text-align: center; }

/* Canvas concept / North Star Vision — cobalt slab, the one peak moment */
.canvas-concept { background: var(--depth); color: var(--on-dark); padding: var(--section-pad-y) 0; }
.canvas-concept .cc-inner { max-width: var(--content-wide); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; }
.canvas-concept .cc-head { margin-bottom: var(--s-32); }
.canvas-concept .cc-head .eyebrow { margin-bottom: var(--s-16); }
.canvas-concept .h-section { color: #FFFFFF; }
.canvas-concept .cc-lede { font-size: 16px; line-height: 1.65; color: var(--on-dark-soft); max-width: 62ch; }
.canvas-concept .canvas-pillars .pillar h3 { color: #FFFFFF; }
.canvas-concept .canvas-pillars .pillar p { color: var(--on-dark-soft); }

.canvas-frame-wrap {
  position: relative;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-heavy);
  background: #1a1a1a;
}
.canvas-frame-wrap iframe {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%; border: 0; background: #1a1a1a;
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease);
}
.canvas-frame-wrap.is-loaded iframe { opacity: 1; pointer-events: auto; }
/* Posters use the source image's intrinsic ratio; iframe fills the wrap once loaded */
#validation-frame { aspect-ratio: 9240 / 4408; }
#handoff-frame    { aspect-ratio: 19570 / 6514; }
.canvas-frame-wrap .cc-toolbar {
  position: absolute; top: var(--s-12); right: var(--s-12);
  display: flex; gap: var(--s-8);
  z-index: 2;
}
.canvas-frame-wrap .cc-btn {
  background: rgba(28,27,24,0.75); color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px; padding: 8px 12px;
  font-family: var(--f-body); font-size: var(--label-size); font-weight: 600; letter-spacing: 0.04em;
  cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: inline-flex; align-items: center; gap: 6px;
}
.canvas-frame-wrap .cc-btn:hover { background: rgba(28,27,24,0.9); }
.canvas-frame-wrap .cc-btn svg { width: 14px; height: 14px; }

.canvas-frame-wrap .frame-poster {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  background: #1a1a1a;
}
.canvas-frame-wrap.is-loaded .frame-poster { display: none; }

.cc-artifact { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #1a1a1a; box-shadow: var(--shadow-heavy); }
.cc-artifact img { display: block; width: 100%; height: auto; }

/* AI attribution chip — the card's only job is to tell the reader
   this artifact was AI-generated. Compact, high-contrast, top-right,
   stays out of the mockup's way. */
.cc-credit {
  position: absolute; left: 50%; bottom: var(--s-24);
  transform: translateX(-50%);
  padding: var(--s-12) var(--s-24);
  background: var(--signal-tint);
  color: var(--text-primary);
  border-radius: 999px;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.35);
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--label-size); letter-spacing: 0.16em; text-transform: uppercase;
  white-space: nowrap;
}

.canvas-pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-32); margin-top: var(--s-32); }
.canvas-pillars .pillar h3 { font-family: var(--f-display); font-weight: 700; font-size: 17px; color: var(--text-primary); margin-bottom: var(--s-8); }
.canvas-pillars .pillar p { font-size: 14px; line-height: 1.6; color: var(--text-secondary); }

/* AI-informed content — 6 metric tiles V3 */
.design .ai-content { padding-top: var(--s-96); }
.design .ai-content .lede { font-size: 16px; line-height: 1.7; color: var(--text-primary); max-width: 62ch; margin-bottom: var(--s-32); }
.metric-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-12); }
.metric-grid .m { background: var(--surface); border-radius: var(--r-lg); padding: var(--s-24); }
.metric-grid .m .lab { font-family: var(--f-display); font-size: var(--label-size); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); }
.metric-grid .m .name { font-family: var(--f-display); font-weight: 700; font-size: 19px; color: var(--text-primary); margin: var(--s-4) 0 var(--s-12); line-height: 1.2; letter-spacing: -0.01em; }
.metric-grid .m .vals { font-family: var(--f-mono); font-size: var(--label-size); color: var(--text-secondary); line-height: 1.55; }
.metric-grid .m .vals span { display: block; }
.design .ai-content .closing { font-size: 16px; line-height: 1.7; color: var(--text-primary); max-width: 62ch; margin-top: var(--s-32); }

/* AI-roles circle-diagram — lives inside Takeaways (.results) */
.results .ar-diagram {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-32);
  position: relative;
  margin-top: var(--s-64);
}
.results .ar-diagram::before {
  content: ""; position: absolute;
  top: 60px; left: calc(100% / 8); right: calc(100% / 8);
  height: 0; border-top: 1px dashed var(--border);
  z-index: 0;
}
.results .ar-step { position: relative; z-index: 1; text-align: center; }
.results .circle {
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--text-primary); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--s-20);
  box-shadow: 0 12px 28px -12px rgba(28,27,24,0.35);
}
.results .circle svg { width: 44px; height: 44px; }
.results .stage {
  font-family: var(--f-display); font-weight: 700; font-size: 20px;
  color: var(--text-primary); margin-bottom: var(--s-4);
}
.results .role {
  font-family: var(--f-display); font-weight: 800; font-size: var(--label-size);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: var(--s-16);
}
.results .ar-step p {
  font-size: 14px; line-height: 1.6; color: var(--text-secondary);
  text-align: left;
}

/* Takeaways — sage mid closing, bookends Discovery (investigation → reflection) */
.results { background: var(--sage); padding: var(--section-pad-y) 0; }
.results .r-inner { max-width: var(--content-wide); margin: 0 auto; padding: 0 var(--gutter); }
.results .r-head { margin-bottom: 0; }
.results .r-head .eyebrow { margin-bottom: var(--s-16); }
.results .r-body { max-width: 68ch; }
.results .r-body p { font-size: var(--body-size); line-height: 1.75; color: var(--text-primary); }
.results .r-body p + p { margin-top: var(--s-24); }
.results .r-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-48); margin-top: var(--s-64); }
.results .r-cols p { font-size: 16px; line-height: 1.75; color: var(--text-primary); }

/* Roadmap (phased delivery) — cream, 2-col: prose + stylized pull-quote */
.phased { background: var(--bg); padding: 0 0 var(--section-pad-y); }
.phased .p-inner { max-width: var(--content-wide); margin: 0 auto; padding: 0 var(--gutter); }
.phased .p-head { margin-bottom: 0; }
.phased .p-head .eyebrow { margin-bottom: var(--s-16); }
.phased .p-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-80); align-items: start; }
.phased .p-text p { font-size: 16px; line-height: 1.75; color: var(--text-primary); max-width: 52ch; }
.phased .p-text p + p { margin-top: var(--s-20); }
.phased .p-quote {   max-width: 44ch; }

/* Validation and Refinement — cream, continues execution rhythm */
.validation { background: var(--bg); color: var(--text-primary); padding: 0 0 var(--section-pad-y); }
.validation .v-text { max-width: var(--content-wide); margin: 0 auto; padding: 0 var(--gutter); }
.validation .v-media { max-width: var(--page-max); margin: var(--s-48) auto 0; padding: 0 var(--gutter); }
.validation .v-head { margin-bottom: 0; }
.validation .v-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-48); }
.validation .v-cols p { font-size: 16px; line-height: 1.7; color: var(--text-primary); }
.validation .v-cols em { color: var(--primary); font-style: italic; font-weight: 500; }
.validation .v-caption { margin-bottom: var(--s-12); }
.validation .eyebrow { margin-bottom: var(--s-16); }

/* Specification and Handoff — cream, same layout as Validation */
.handoff { background: var(--bg); color: var(--text-primary); padding: 0 0 var(--section-pad-y); }
.handoff .v-text { max-width: var(--content-wide); margin: 0 auto; padding: 0 var(--gutter); }
.handoff .v-media { max-width: var(--page-max); margin: var(--s-48) auto 0; padding: 0 var(--gutter); }
.handoff .eyebrow { margin-bottom: var(--s-16); }
.handoff .v-head { margin-bottom: 0; }
.handoff .v-body { font-size: 16px; line-height: 1.7; color: var(--text-primary); max-width: 70ch; }

/* ============================================================
   RESPONSIVE — two breakpoints, all section overrides consolidated
   • Tablet ≤ 1024px : multi-col layouts collapse, paddings shrink
   • Phone  ≤ 640px  : scroll patterns, hides, mobile typography
   ============================================================ */
@media (max-width: 1024px) {
  /* Inner gutters */
  .hero .inner,
  .impact .inner,
  .problem .top,
  .carousel,
  .problem .subs,
  .discovery .top,
  .discovery .media,
  .discovery .cols,
  .ai-partner .inner,
  .insight .inner,
  .design .inner,
  .canvas-concept .cc-inner,
  .validation .v-text,
  .validation .v-media,
  .phased .p-inner,
  .handoff .v-text,
  .handoff .v-media,
  .results .r-inner { padding-left: var(--s-32); padding-right: var(--s-32); }

  /* 2-col → 1-col text layouts */
  .discovery .cols,
  .design .inventory .cols,
  .validation .v-cols,
  .phased .p-cols,
  .insight .grid { grid-template-columns: 1fr; gap: var(--s-32); }

  /* Insight: anchor unsticks; cards 3×2 */
  .insight .anchor { position: static; }
  .insight .cards { grid-template-columns: repeat(3, 1fr); }
  .insight .artifact { grid-template-columns: 1fr; gap: var(--s-32); padding: var(--s-32); }

  /* Takeaways: 4 → 2×2, hide flow line */
  .results .ar-diagram { grid-template-columns: repeat(2, 1fr); gap: var(--s-48); }
  .results .ar-diagram::before { display: none; }

  /* Entity diagram stack */
  .entity-diagram .ed-content { grid-template-columns: 1fr; }
  .entity-diagram .ed-cards { flex-direction: column; align-items: stretch; gap: var(--s-12); }
  .entity-diagram .ed-rel { width: 100%; height: 40px; }
  .entity-diagram .ed-rel::before, .entity-diagram .ed-rel::after { display: none; }

  /* Metric grid 3 → 2 */
  .metric-grid { grid-template-columns: repeat(2, 1fr); }

  /* AI-partner stage: 5 cols → row-1 (KB · arrow · GPT) + row-2 (chat) */
  .ai-stage {
    grid-template-columns: 140px 64px 1fr;
    grid-template-rows: auto auto;
    row-gap: var(--s-32);
  }
  .ai-stage .kb        { grid-column: 1; grid-row: 1; }
  .ai-stage .arr-1     { grid-column: 2; grid-row: 1; }
  .ai-stage .gpt-card  { grid-column: 3; grid-row: 1; }
  .ai-stage .arr-2     { display: none; }
  .ai-stage .interview { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 640px) {
  /* Mobile gutters */
  .hero .inner,
  .impact .inner,
  .problem .top,
  .carousel,
  .problem .subs,
  .discovery .top,
  .discovery .media,
  .discovery .cols,
  .ai-partner .inner,
  .insight .inner,
  .design .inner,
  .canvas-concept .cc-inner,
  .validation .v-text,
  .validation .v-media,
  .phased .p-inner,
  .handoff .v-text,
  .handoff .v-media,
  .results .r-inner { padding-left: var(--s-24); padding-right: var(--s-24); }

  /* Vertical rhythm */
  :root { --section-pad-y: var(--s-64); }
  .hero .inner { padding-top: var(--s-64); padding-bottom: var(--s-64); }
  .canvas-concept,
  .phased,
  .validation,
  .handoff,
  .results { padding-top: var(--s-64); padding-bottom: var(--s-64); }

  /* HERO */
  .hero h1 { --cover-title-size: clamp(36px, 9vw, 44px); }

  /* h2 line-breaks were composed for desktop rhythm — let mobile wrap naturally */
  h2 br, .design h3 br { display: none; }

  /* Validation + Handoff posters — source aspects are ultra-wide (2.1:1 and 3:1).
     Honor the ratio via horizontal scroll at fixed height so the artwork stays readable. */
  .canvas-frame-wrap {
    aspect-ratio: auto;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .canvas-frame-wrap .frame-poster {
    width: auto; max-width: none; height: 360px;
    object-fit: cover; object-position: left top;
  }

  /* IMPACT — horizontal scroll with peek; first tile breathes off the left edge */
  .impact .tiles {
    grid-template-columns: none;
    display: flex; gap: var(--s-12);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--s-24);
    margin-left: calc(-1 * var(--s-24)); margin-right: calc(-1 * var(--s-24));
    padding: 0 var(--s-24) var(--s-12);
    scrollbar-width: none;
  }
  .impact .tiles::-webkit-scrollbar { display: none; }
  .impact .tile { flex: 0 0 82%; scroll-snap-align: start; padding: var(--s-24); }

  /* PROBLEM — subs stack. Carousel becomes a plain scroll-snap strip
     identical to Impact tiles. JS transform is overridden, controls hidden. */
  .problem .subs { grid-template-columns: 1fr; gap: var(--s-24); }
  .carousel .track-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--s-24);
    margin-left: calc(-1 * var(--s-24)); margin-right: calc(-1 * var(--s-24));
    padding: 0 var(--s-24);
    background: transparent; border: 0;
    border-radius: 0;
    cursor: default;
  }
  .carousel .track { transform: none !important; transition: none; gap: var(--s-12); }
  .carousel .slide { flex: 0 0 82%; scroll-snap-align: start; }
  .carousel .slide img { border-radius: var(--r-md); border: 1px solid var(--border); }
  .carousel .controls { display: none; }

  /* DISCOVERY — JTBD table scrolls inside its bleed */
  .discovery .media-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * var(--s-24)); margin-right: calc(-1 * var(--s-24));
    padding: 0 var(--s-24);
  }
  .discovery .media-scroll img { width: auto; max-width: none; height: 320px; border-radius: var(--r-md); }

  /* AI-PARTNER mid-case — KB icons row + GPT card; chat & arrows hidden */
  .ai-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: var(--s-24);
  }
  .ai-stage .kb        { grid-column: 1; grid-row: 1; }
  .ai-stage .gpt-card  { grid-column: 1; grid-row: 2; }
  .ai-stage .arr-1, .ai-stage .arr-2, .ai-stage .interview { display: none; }
  .ai-stage .kb-grid { grid-template-columns: repeat(4, 1fr); gap: var(--s-12); }
  .ai-stage .kb-item .count { font-size: 20px; }
  .ai-stage .doc-svg { width: 48px; height: 48px; }

  /* INSIGHT — cards stack, artifact unchanged (already 1-col from tablet) */
  .insight .cards { grid-template-columns: 1fr; }

  /* DESIGN — entity diagram hidden; canvas wireframe scrolls */
  .entity-diagram { display: none; }
  .canvas-pillars { grid-template-columns: 1fr; }
  .cc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cc-scroll img { width: auto; max-width: none; height: 360px; }
  .cc-credit { padding: var(--s-8) var(--s-16); }
  .metric-grid { grid-template-columns: 1fr; }

/* PHASED quote */

  /* VALIDATION + HANDOFF — hide overlay buttons on the static poster */
  .canvas-frame-wrap .cc-toolbar { display: none; }

  /* TAKEAWAYS — hide circles; lessons stack as text blocks; aftermath single column */
  .results .ar-diagram { grid-template-columns: 1fr; gap: var(--s-32); margin-top: var(--s-48); }
  .results .circle { display: none; }
  .results .ar-step { text-align: left; }
  .results .ar-step p { text-align: left; }
  .results .r-cols { grid-template-columns: 1fr; gap: var(--s-24); }
}