/* =========================================================
   Growth page
   Type/grid aligned with Foundations
   ========================================================= */

/* ---------- Kicker ---------- */
.growth-kicker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding: 96px 0 56px;
  align-items: start;
}
.growth-kicker h1 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-h0);
  letter-spacing: -0.022em;
  line-height: 0.92;
  margin: 0;
  margin-top: -0.18em; /* cap-align with intro */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.growth-kicker__intro p {
  font-size: var(--fs-h2);
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0;
  max-width: 32ch;
}

/* ---------- Section grid ---------- */
.growth-section {
  padding: 56px 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.growth-section h2 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-h1);
  letter-spacing: -0.015em;
  line-height: 1;
  margin: 0;
}
.growth-section__body p {
  font-size: var(--fs-body);
  line-height: 1.5;
  margin: 0 0 14px;
  max-width: 54ch;
}
.growth-section__body p:last-child { margin-bottom: 0; }
.growth-section__cta { margin-top: 20px; }
.growth-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  transition: gap 200ms ease, border-color 160ms ease;
  font-size: var(--fs-small);
  text-decoration: none;
}
.growth-link:hover { gap: 10px; border-color: var(--ink); }

/* Capabilities — let its body span full column */
.growth-section--capabilities {
  grid-template-columns: 1fr;
  gap: 36px;
}
.growth-section--capabilities h2 {
  max-width: none;
}
.cap-intro {
  font-size: var(--fs-h2);
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0 0 28px;
  max-width: 42ch;
  color: var(--ink);
}

/* ---------- View switcher ---------- */
.cap-viewswitch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  margin-bottom: 36px;
  background: var(--bg);
}
.cap-viewswitch__btn {
  font: inherit;
  font-size: var(--fs-small);
  background: transparent;
  border: 0;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 180ms ease, color 180ms ease;
}
.cap-viewswitch__btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.cap-viewswitch__btn:hover { background: var(--rule-soft); }
.cap-viewswitch__btn.is-on {
  background: var(--ink);
  color: #fff;
}

.cap-view {
  animation: capFade 320ms ease;
}
@keyframes capFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   VIEW 1 — Layered Slabs
   ========================================================= */
.slabs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 1040px;
}
.slab {
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  transition: background 200ms ease;
}
.slab--expression { background: #d34d2f; }
.slab--identity   { background: #5b6bd6; }
.slab--foundation { background: #1a1a1a; }
/* Widths create the layered/pyramid effect */
.slab--expression { width: 100%; }
.slab--identity   { width: 88%; margin-left: 6%; }
.slab--foundation { width: 72%; margin-left: 14%; }

.slab__head {
  all: unset;
  display: grid;
  grid-template-columns: 120px 1fr 1fr 40px;
  gap: 24px;
  align-items: center;
  padding: 28px 32px;
  cursor: pointer;
  width: calc(100% - 64px);
  transition: padding 220ms ease;
}
.slab__eyebrow {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
}
.slab__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.slab__tease {
  font-size: var(--fs-body);
  line-height: 1.4;
  opacity: 0.8;
  max-width: 46ch;
}
.slab__sign {
  position: relative;
  width: 22px; height: 22px;
  justify-self: end;
}
.slab__sign::before,
.slab__sign::after {
  content: '';
  position: absolute;
  background: #fff;
  transition: transform 260ms ease, opacity 260ms ease;
}
.slab__sign::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.slab__sign::after  { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.slab.is-open .slab__sign::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }

.slab__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 360ms cubic-bezier(.2,.8,.2,1);
}
.slab__body > div { overflow: hidden; }
.slab.is-open .slab__body { grid-template-rows: 1fr; }

.slab__body-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 8px 32px 40px;
}
.slab__body-inner h5 {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0 0 12px;
}
.slab__body-inner p {
  font-size: var(--fs-body);
  line-height: 1.5;
  opacity: 0.9;
  margin: 0 0 12px;
}
.slab__body-inner p:last-child { margin-bottom: 0; }
.slab__deliv ul { list-style: none; margin: 0; padding: 0; }
.slab__deliv li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: var(--fs-body);
  line-height: 1.4;
  align-items: baseline;
}
.slab__deliv li:first-child { border-top: 0; }
.slab__deliv .tag {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
}

.cap-overview {
  max-width: 60ch;
  margin: 32px 0 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
}
.cap-overview b { font-weight: 500; }

/* =========================================================
   VIEW 2 — Editorial Split
   ========================================================= */
.split { border-top: 1px solid var(--rule); }
.split__tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule);
}
.split__tab {
  font: inherit;
  background: transparent;
  border: 0;
  padding: 18px 24px 18px 0;
  margin-right: 36px;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 10px;
  position: relative;
  color: var(--ink-soft);
  transition: color 200ms ease;
}
.split__tab:last-child { margin-right: 0; }
.split__tab-num {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
}
.split__tab-name {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  letter-spacing: -0.005em;
}
.split__tab.is-on { color: var(--ink); }
.split__tab.is-on::after {
  content: '';
  position: absolute;
  left: 0; right: 24px; bottom: -1px;
  height: 2px;
  background: var(--ink);
}

.split__stage {
  display: grid;
  grid-template-columns: minmax(320px, 1.05fr) 1fr;
  gap: 48px;
  padding: 40px 0 0;
  align-items: start;
}
.split__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #1a1a1a;
}
.split__figure {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 360ms ease;
  pointer-events: none;
}
.split__figure.is-on { opacity: 1; pointer-events: auto; }
.split-illo { width: 100%; height: 100%; display: block; }
.split__figure figcaption {
  position: absolute;
  left: 20px; right: 20px; bottom: 16px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7);
}

.split__copy { position: relative; min-height: 420px; }
.split__pane {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms ease, transform 320ms ease;
  pointer-events: none;
}
.split__pane.is-on { opacity: 1; transform: none; pointer-events: auto; }
.split__eyebrow {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.split__pane h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 36px);
  letter-spacing: -0.012em;
  line-height: 1.1;
  margin: 0 0 16px;
}
.split__pane p {
  font-size: var(--fs-body);
  line-height: 1.5;
  margin: 0 0 12px;
  max-width: 52ch;
}
.split__pane h5 {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 24px 0 10px;
}
.split__pane ul { list-style: none; margin: 0; padding: 0; }
.split__pane li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-body);
  line-height: 1.4;
  align-items: baseline;
}
.split__pane li:first-of-type { border-top: 0; }
.split__pane .tag {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* =========================================================
   VIEW 3 — Expanding Rail
   ========================================================= */
.rail {
  display: grid;
  grid-template-columns: 1fr 0.45fr 0.45fr;
  gap: 14px;
  min-height: 520px;
  transition: grid-template-columns 420ms cubic-bezier(.2,.8,.2,1);
}
.rail:has([data-rail-card="foundation"].is-open) {
  grid-template-columns: 1fr 0.35fr 0.35fr;
}
.rail:has([data-rail-card="identity"].is-open) {
  grid-template-columns: 0.35fr 1fr 0.35fr;
}
.rail:has([data-rail-card="expression"].is-open) {
  grid-template-columns: 0.35fr 0.35fr 1fr;
}
.rail__card {
  position: relative;
  background: #f6f4ef;
  border: 1px solid var(--rule);
  overflow: hidden;
  cursor: pointer;
  transition: background 300ms ease;
}
.rail__card[data-rail-card="foundation"] { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.rail__card[data-rail-card="identity"]   { background: #eae7e0; }
.rail__card[data-rail-card="expression"] { background: var(--accent, #e8ff5c); }

.rail__card:not(.is-open):hover {
  filter: brightness(0.95);
}
.rail__card[data-rail-card="foundation"]:not(.is-open):hover {
  filter: brightness(1.1);
}

.rail__spine {
  position: absolute;
  inset: 0;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 1;
  transition: opacity 240ms ease;
  pointer-events: none;
}
.rail__card.is-open .rail__spine {
  opacity: 0;
}
.rail__num {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.18em;
  opacity: 0.6;
}
.rail__name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: -0.005em;
  line-height: 1.15;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  align-self: center;
  white-space: nowrap;
}
.rail__kw {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.5;
}

.rail__body {
  padding: 36px 36px 36px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 360ms ease, transform 420ms ease;
  pointer-events: none;
  max-width: 560px;
}
.rail__card.is-open .rail__body {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.rail__body h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: -0.012em;
  line-height: 1.1;
  margin: 0 0 12px;
}
.rail__body p {
  font-size: var(--fs-body);
  line-height: 1.5;
  margin: 0 0 10px;
  max-width: 44ch;
}
.rail__body h5 {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  margin: 20px 0 10px;
}
.rail__body ul { list-style: none; margin: 0; padding: 0; }
.rail__body li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px solid currentColor;
  border-top-color: color-mix(in oklab, currentColor 22%, transparent);
  font-size: var(--fs-body);
  line-height: 1.35;
  align-items: baseline;
}
.rail__body li:first-of-type { border-top: 0; }
.rail__body .tag {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* =========================================================
   VIEW — Concentric Rings
   ========================================================= */
.rings {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) 1fr;
  gap: 48px;
  align-items: start;
}
.rings__diagram {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 560px;
  justify-self: center;
}
.rings__svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* ring fills */
.rings__fill {
  stroke-width: 1.2;
  transition: fill 320ms ease, stroke 320ms ease, transform 420ms cubic-bezier(.2,.8,.2,1);
  transform-origin: 260px 260px;
}
.rings__fill--3 { fill: #f2ede4; stroke: #c9c4bb; }
.rings__fill--2 { fill: #1a1a1a; stroke: #1a1a1a; }
.rings__fill--1 { fill: var(--accent, #e8ff5c); stroke: var(--accent, #e8ff5c); }

.rings__hit {
  fill: transparent;
  stroke: transparent;
  cursor: pointer;
}
.rings__ring { cursor: pointer; transform-origin: 260px 260px; transition: transform 420ms cubic-bezier(.2,.8,.2,1); }
.rings__ring:hover .rings__fill { filter: brightness(1.02); }

.rings__ring.is-active .rings__fill {
  filter: drop-shadow(0 0 0 var(--ink));
  stroke-width: 3;
  stroke: var(--ink);
}
.rings__ring.is-active { transform: scale(1.025); }

/* labels */
.rings__label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 400;
  letter-spacing: 0.22em;
  pointer-events: none;
  user-select: none;
}
.rings__label--outer {
  font-size: 12px;
  fill: var(--ink);
}
.rings__label--mid {
  font-size: 12px;
  fill: #f2ede4;
}
.rings__label--inner {
  font-size: 11px;
  letter-spacing: 0.14em;
  fill: var(--ink);
  font-weight: 500;
}
.rings__micro {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  fill: var(--ink);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}
.rings__micro--mid { fill: #f2ede4; opacity: 0.55; }
.rings__micro--inner { fill: var(--ink); opacity: 0.5; }

.rings__ticks line {
  stroke: var(--rule);
  stroke-width: 1;
  transition: opacity 300ms ease;
}
.rings.is-selected .rings__ticks line { opacity: 0.3; }

/* Right-side content panel */
.rings__panel {
  position: relative;
  min-height: 480px;
  padding-top: 8px;
}
.rings__pane {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 360ms ease, transform 360ms ease;
  pointer-events: none;
}
.rings__pane.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.rings__eyebrow {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.rings__pane h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 2.8vw, 40px);
  letter-spacing: -0.014em;
  line-height: 1.05;
  margin: 0 0 16px;
}
.rings__lede {
  font-size: var(--fs-h2);
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
  max-width: 30ch;
}
.rings__pane > p {
  font-size: var(--fs-body);
  line-height: 1.5;
  margin: 0 0 12px;
  max-width: 52ch;
}
.rings__pane h5 {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 28px 0 10px;
}
.rings__pane ul { list-style: none; margin: 0; padding: 0; }
.rings__pane li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-body);
  line-height: 1.4;
  align-items: baseline;
}
.rings__pane li:first-of-type { border-top: 0; }
.rings__pane .tag {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* =========================================================
   Resources
   ========================================================= */
.resource-list {
  display: flex; flex-direction: column;
  margin-top: 8px;
}
.resource-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
  align-items: end;
}
.resource-row:last-child { border-bottom: 1px solid var(--rule); }
.resource-row__main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.resource-row__type {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.resource-row__name {
  font-family: var(--font-sans);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0;
}
.resource-row__desc {
  font-size: var(--fs-body);
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.4;
  max-width: 56ch;
}
.resource-row__cta {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  padding: 10px 18px;
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
}
.resource-row__cta.is-live {
  color: var(--ink);
  border-color: var(--ink);
}
.resource-row__cta.is-live:hover {
  background: var(--ink); color: #fff;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
  .growth-kicker,
  .growth-section {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 64px 0 40px;
  }
  .growth-section--capabilities { gap: 24px; }

  /* Slabs — stack full width */
  .slab--identity,
  .slab--foundation { width: 100%; margin-left: 0; }
  .slab__head {
    grid-template-columns: 1fr 36px;
    gap: 12px;
    padding: 22px 22px;
  }
  .slab__eyebrow { grid-column: 1; font-size: 10px; }
  .slab__title  { grid-column: 1; }
  .slab__tease  { grid-column: 1; }
  .slab__sign   { grid-column: 2; grid-row: 1 / span 3; align-self: start; margin-top: 4px; }
  .slab__body-inner { grid-template-columns: 1fr; gap: 24px; padding: 8px 22px 28px; }

  /* Split */
  .split__stage { grid-template-columns: 1fr; gap: 24px; }
  .split__tabs { flex-wrap: wrap; gap: 8px; }
  .split__tab { margin-right: 20px; padding: 14px 0; }
  .split__copy { min-height: 380px; }

  /* Rail — become vertical stack with full open cards */
  .rail { grid-template-columns: 1fr !important; min-height: 0; }
  .rail__card { min-height: 120px; }
  .rail__card:not(.is-open) { min-height: 76px; }
  .rail__spine { padding: 18px 22px; flex-direction: row; align-items: center; gap: 16px; }
  .rail__num { flex-shrink: 0; }
  .rail__name { writing-mode: horizontal-tb; transform: none; align-self: auto; }
  .rail__kw { margin-left: auto; }
  .rail__body { padding: 24px 22px 28px; max-width: none; }

  .resource-row { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; align-items: start; }
  .resource-row__cta { justify-self: start; }
}
@media (max-width: 600px) {
  .cap-viewswitch__btn span { display: none; }
  .cap-viewswitch__btn { padding: 10px; }
}

/* =========================================================
   CAPABILITIES  \u2014  single editorial layout
   Replaces the old Layers/Rings/Editorial/Rail experiment.
   ========================================================= */

.cap-frame {
  margin-top: 40px;
}

/* Subnav: pill tabs, matches .gloss-find__tab on Foundations */
.cap-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 24px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--rule);
}
.cap-subnav__tab {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: transparent;
  font-family: var(--font-sans);
  color: var(--ink);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.cap-subnav__tab:hover { border-color: var(--ink); }
.cap-subnav__tab.is-on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.cap-subnav__num {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--rule);
  color: var(--ink-soft);
}
.cap-subnav__tab.is-on .cap-subnav__num {
  background: rgba(255,255,255,0.22);
  color: #fff;
}
.cap-subnav__name {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.002em;
  line-height: 1.2;
}

/* Stage: layered panes with crossfade */
.cap-stage {
  position: relative;
  min-height: 560px;
}
.cap-pane {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 64px;
  align-items: start;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 360ms ease, transform 360ms ease;
  pointer-events: none;
}
.cap-pane.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Copy column (left) */
.cap-copy { max-width: 68ch; }
.cap-eyebrow {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.cap-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(32px, 3.2vw, 48px);
  letter-spacing: -0.018em;
  line-height: 1.02;
  margin: 0 0 20px;
}
.cap-lede {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(18px, 1.5vw, 22px);
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 12px;
}
.cap-body {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 56px;
  max-width: 52ch;
}

/* Two-column bulleted grid */
.cap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 44px;
}
.cap-grid__head {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 36px 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  line-height: 1.5;
}
.cap-grid__head br + * { /* noop; markup uses text nodes */ }
.cap-grid__col:not(:has(.cap-grid__sub)) .cap-grid__head {
  margin-bottom: 18px;
}
.cap-grid__head em {
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
  margin-left: 2px;
}
.cap-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cap-grid__list li {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--ink);
  padding: 6px 0;
  position: relative;
  padding-left: 14px;
}
.cap-grid__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 4px;
  height: 4px;
  background: var(--ink);
  border-radius: 50%;
}

/* Illustration column (right) */
.cap-illo {
  position: sticky;
  top: 120px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8px;
}
.cap-illo img {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
}

/* Responsive */
@media (max-width: 960px) {
  .cap-pane {
    position: static;
    grid-template-columns: 1fr;
    gap: 40px;
    opacity: 0;
    transform: none;
    display: none;
  }
  .cap-pane.is-on { display: grid; opacity: 1; }
  .cap-stage { min-height: auto; }
  .cap-illo { position: static; order: -1; padding-top: 0; }
  .cap-illo img { max-width: 380px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .cap-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* =========================================================
   SHARED CONTENT SHAPES (new: lede + two-column deliverables)
   Applies across slabs / rings / split / rail panes
   ========================================================= */

/* Sub-intro block under the big intro */
.cap-intro--sub {
  font-size: var(--fs-body);
  color: var(--ink-soft);
  line-height: 1.55;
  margin-top: 14px;
  max-width: 78ch;
}
.cap-intro--prompt {
  margin-top: 28px;
  font-size: var(--fs-h3, 18px);
  color: var(--ink);
  max-width: 64ch;
}

/* Lede lines */
.slab__lede,
.split__lede,
.rail__lede,
.rings__lede {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(18px, 1.5vw, 22px);
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 12px;
}

/* Two-column deliverable groups */
.slab__deliv,
.rings__grid,
.split__grid,
.rail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 32px;
}
.slab__group h5,
.rings__grid h5,
.split__grid h5,
.rail__grid h5 {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px;
}
.slab__group h5 em,
.rings__grid h5 em,
.split__grid h5 em,
.rail__grid h5 em {
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 12px;
  margin-left: 2px;
}
.slab__group ul,
.rings__grid ul,
.split__grid ul,
.rail__grid ul {
  list-style: disc;
  margin: 0;
  padding: 0 0 0 18px;
}
.slab__group li,
.rings__grid li,
.split__grid li,
.rail__grid li {
  display: list-item;
  grid-template-columns: none;
  padding: 3px 0;
  border-top: 0;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Expression & Experience: its Content list is longer; let the grid breathe */
.rings__grid, .split__grid, .rail__grid { align-items: start; }

/* Rings panel doesn't need the old ul styles now */
.rings__pane h5 { margin: 22px 0 10px; }

/* When the grid is too narrow, stack */
@media (max-width: 760px) {
  .slab__deliv,
  .rings__grid,
  .split__grid,
  .rail__grid { grid-template-columns: 1fr; gap: 20px; }
}

/* Resource row — tag-over-title layout */
.resource-row__desc { margin: 0; }