/* ============================================================
   Selrite.ai — "Beyond the Search Bar" animated explainer
   Ported from the React prototype in /hero to vanilla CSS.

   Everything is prefixed .ex-* and scoped under .ex-stage so it
   cannot collide with style.css (which owns .eyebrow, .card,
   .field, .gate, .dgm* and friends).

   Two deliberate departures from the prototype:
     1. No fixed scene heights. All scenes share one grid cell,
        so the board sizes to the tallest scene. Zero CLS, and
        longer DE/ES copy cannot be clipped by overflow:hidden.
     2. Colours resolve to the site tokens, not the prototype's
        near-identical second teal.
   ============================================================ */

.ex-stage {
  /* local aliases so the ported rules stay readable */
  --ex-teal:       var(--signal);
  --ex-teal-deep:  var(--signal-ink);
  --ex-teal-pale:  var(--signal-soft);
  --ex-ink:        var(--ink);
  --ex-muted:      var(--slate);
  --ex-line:       var(--line);
  --ex-amber:      var(--amber);
  --ex-amber-pale: #F7EDD2;

  --ex-teal-rgb: 20, 163, 139;   /* #14A38B */
  --ex-ink-rgb:  14, 17, 22;     /* #0E1116 */
  --ex-amb-rgb:  224, 163, 59;   /* #E0A33B */

  --ex-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --ex-mono:  var(--mono);
  --ex-sans:  var(--sans);
  --ex-ease:  cubic-bezier(.23, 1, .32, 1);
}

/* ---------- intro block above the board ---------- */

.ex-intro { width: min(720px, 100%); margin-bottom: clamp(24px, 3.5vw, 38px); }
/* sized so the authored <br> is the only break on desktop */
.ex-intro h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin-bottom: .45em; }
.ex-intro h1 em { color: var(--ex-teal-deep); font-style: normal; }
.ex-intro .lead { max-width: 52ch; margin-bottom: 0; }
.ex-intro-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 1.8rem; }

/* ---------- the board ---------- */

.ex-board {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--ex-line);
  background: linear-gradient(135deg, #ffffff, #fbfdfd);
  box-shadow: 0 10px 30px rgba(var(--ex-ink-rgb), .07),
              0 1px 0 rgba(255, 255, 255, .95) inset;
}
.ex-board::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(circle at 88% 12%, rgba(var(--ex-teal-rgb), .09), transparent 23%),
    radial-gradient(circle at 10% 88%, rgba(var(--ex-amb-rgb), .055), transparent 28%);
}
.ex-board::after {
  content: ""; position: absolute; inset: 14px; z-index: 4;
  border: 1px solid rgba(var(--ex-ink-rgb), .09);
  pointer-events: none;
}

.ex-board-label {
  position: absolute; z-index: 5;
  font: 500 8px var(--ex-mono); letter-spacing: .12em; color: #839095;
}
.ex-board-label.is-left  { top: 24px; left: 28px; }
.ex-board-label.is-right { top: 24px; right: 28px; }

.ex-grain {
  position: absolute; inset: 0; z-index: 3;
  opacity: .18; pointer-events: none; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
}

/* ---------- scene stack ----------
   Every scene occupies the same grid cell. The board's height is
   therefore the tallest scene, and never changes between states. */

.ex-scenes { display: grid; position: relative; z-index: 1; }

.ex-scene {
  grid-area: 1 / 1;
  display: grid; place-items: center;
  position: relative;
  width: 100%;
  min-height: 445px;
  padding: 58px 52px 44px;
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ex-ease), visibility 0s linear .45s;
}
.ex-scene.is-active {
  opacity: 1; visibility: visible;
  transition: opacity .45s var(--ex-ease), visibility 0s;
}
/* the teal decision marker carried by every scene */
.ex-scene::before {
  content: ""; position: absolute; right: 34px; bottom: 29px; z-index: 2;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ex-teal);
  box-shadow: 0 0 0 5px rgba(var(--ex-teal-rgb), .12);
}
.ex-scene.is-active > * { animation: ex-rise .6s var(--ex-ease) both; }

@keyframes ex-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ex-pop {
  from { opacity: 0; transform: scale(.45); }
  to   { opacity: 1; transform: scale(1); }
}

/* German compounds — Entscheidungsprotokoll, Untergrundzustand, Produktpassung —
   have to be able to break inside the board's narrow cells. Same treatment
   style.css already gives .dgm-node. :where() keeps specificity at zero. */
.ex-stage :where(.ex-tab-label, .ex-level small, .ex-band span, .ex-row span,
  .ex-node span, .ex-node strong, .ex-missing span, .ex-record-row span,
  .ex-record-row strong, .ex-shortlist-row i, .ex-sku strong,
  .ex-expert-card b, .ex-expert-card small, .ex-axis span) {
  overflow-wrap: break-word; hyphens: auto;
}

/* shared scene furniture */
.ex-mono {
  margin: 0; color: var(--ex-teal-deep);
  font: 600 10px/1.2 var(--ex-mono); letter-spacing: .14em; text-transform: uppercase;
}
.ex-note { color: var(--ex-muted); margin: 0; }

/* ---------- 01 · the premise ---------- */

.ex-premise { display: grid; place-items: center; text-align: center; }
.ex-premise h2 {
  margin: 18px 0 12px;
  font: 400 clamp(29px, 3.5vw, 48px)/1 var(--ex-serif); letter-spacing: -.035em;
}
.ex-dot {
  width: 15px; height: 15px; border-radius: 50%; margin-bottom: 22px;
  background: var(--ex-teal); box-shadow: 0 0 0 9px rgba(var(--ex-teal-rgb), .11);
}
.ex-scene.is-active .ex-dot { animation: ex-pop .7s var(--ex-ease) both; }
.ex-brand { margin-bottom: 12px; }

.ex-wordmark {
  display: inline-flex; align-items: center; gap: 9px; color: var(--ex-ink);
  font: 600 12px var(--ex-mono); letter-spacing: .11em;
}
.ex-wordmark span span { color: var(--ex-teal-deep); }
.ex-wordmark-mark { position: relative; width: 22px; height: 22px; display: inline-grid; place-items: center; }
.ex-wordmark-mark::before {
  content: ""; position: absolute; width: 21px; height: 21px; border-radius: 50%;
  border: 1px solid var(--ex-ink); border-left-color: transparent; transform: rotate(-34deg);
}
.ex-wordmark-mark i {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ex-teal); box-shadow: 0 0 0 4px rgba(var(--ex-teal-rgb), .12);
}

/* ---------- 02 · symptoms vs SKUs ---------- */

.ex-mismatch {
  display: grid; grid-template-columns: 1fr 1px 1fr; grid-template-rows: 1fr auto;
  gap: 0 50px; align-items: center;
}
.ex-panel { position: relative; display: flex; flex-direction: column; min-height: 236px; }
.ex-panel blockquote {
  margin: 34px 0 auto;
  font: 400 clamp(25px, 3vw, 39px)/1.04 var(--ex-serif); letter-spacing: -.03em;
}
.ex-panel small { color: var(--ex-muted); font: 500 9px var(--ex-mono); letter-spacing: .12em; }
.ex-panel--buyer     { padding: 14px 24px 14px 14px; }
.ex-panel--catalogue { padding: 14px 14px 14px 24px; }
.ex-split { height: 205px; background: linear-gradient(var(--ex-line), var(--ex-teal), var(--ex-line)); }
/* stops just past the split rule — the prototype ran it to 68%, where the
   arrowhead landed on top of the SKU card */
.ex-thread {
  position: absolute; left: 32%; right: 47%; top: 51%; height: 1px; z-index: 1;
  border-top: 1px dashed rgba(var(--ex-teal-rgb), .72); transform: translateY(-50%);
}
.ex-thread::after {
  content: ""; position: absolute; right: -1px; top: -4px; width: 7px; height: 7px;
  border-right: 1px solid var(--ex-teal); border-top: 1px solid var(--ex-teal);
  transform: rotate(45deg);
}
.ex-prompt { margin: 17px 0 0; color: #59666c; font-size: 13px; }

/* The catalogue does not answer with one SKU — it answers with a shortlist of
   look-alikes. Two rows above the resolved card and one below put the right
   answer inside the noise rather than at the end of it. */
.ex-shortlist {
  position: relative; z-index: 2;
  width: 208px; margin: 14px 0 auto; display: flex; flex-direction: column; gap: 3px;
}
.ex-shortlist-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 26px; padding: 0 10px;
  border: 1px solid var(--ex-line); background: rgba(255, 255, 255, .62);
  color: #8b959a; font: 500 9px var(--ex-mono); letter-spacing: .05em;
}
.ex-shortlist-row { white-space: nowrap; }   /* the SKU code must never break */
.ex-shortlist-row i { font-style: normal; font-size: 8px; color: #aab3b6; text-align: right; white-space: normal; }
.ex-shortlist-more { padding: 6px 0 0 1px; color: #9aa3a7; font: 500 8px var(--ex-mono); letter-spacing: .08em; }
/* the shortlist is taller than the buyer panel's quote, so the auto margin
   collapses and the role label needs its own clearance */
.ex-panel--catalogue small { margin-top: 12px; }

.ex-sku {
  position: relative; z-index: 2;
  width: 208px; min-height: 137px; margin: 18px 0 auto; padding: 16px;
  display: flex; flex-direction: column;
  color: #fff; background: #1c262a; font-family: var(--ex-mono);
  box-shadow: 9px 10px 0 rgba(var(--ex-ink-rgb), .09);
}
.ex-sku span   { color: #8ce0d4; font-size: 10px; letter-spacing: .09em; }
.ex-sku strong { margin-top: 17px; font-size: 18px; line-height: 1.03; }
.ex-sku em     { margin-top: auto; color: #b8c8c6; font-size: 10px; font-style: normal; }
/* the resolved one: full detail, and the only card carrying the teal marker.
   The standalone card's hard offset shadow is dropped — inside a list it lands
   on the row below. Dark fill plus the teal edge is enough separation. */
.ex-shortlist .ex-sku {
  width: 100%; min-height: 0; margin: 0; padding: 12px 13px;
  border-left: 3px solid var(--ex-teal); box-shadow: none;
}
.ex-shortlist .ex-sku strong { margin-top: 9px; font-size: 16px; }
.ex-shortlist .ex-sku em     { margin-top: 9px; }
.ex-insight { grid-column: 1 / -1; margin: 0; color: var(--ex-teal-deep); font: 400 20px var(--ex-serif); }

/* ---------- 03 · retrieve evidence ---------- */

.ex-evidence { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; }
.ex-symptoms { display: flex; flex-direction: column; gap: 12px; }
.ex-symptoms .ex-mono { margin-bottom: 5px; }
.ex-symptom {
  padding: 17px 18px; border-left: 4px solid var(--ex-teal);
  background: var(--ex-teal-pale); color: #40575a;
  font: 400 clamp(19px, 2.4vw, 29px)/1.15 var(--ex-serif);
}
.ex-bridge { position: relative; padding: 16px 0 16px 20px; border-left: 1px solid var(--ex-amber); }
.ex-bridge-arrow { display: block; margin-bottom: 12px; color: var(--ex-amber); font: 400 38px/1 var(--ex-serif); }
.ex-bridge strong {
  display: block; margin: 15px 0 12px;
  font: 400 clamp(24px, 2.8vw, 35px)/1.04 var(--ex-serif); letter-spacing: -.03em;
}
.ex-bridge small { color: #697579; font-size: 13px; }
.ex-conclusion {
  grid-column: 1 / -1; margin: 0; color: var(--ex-ink);
  font: 400 clamp(20px, 2.5vw, 30px)/1 var(--ex-serif);
}
.ex-conclusion strong { color: var(--ex-teal-deep); font-weight: 400; }

/* ---------- 04 · the decision pyramid ---------- */

.ex-pyramid {
  width: min(820px, 100%);
  display: grid; grid-template-rows: auto 1fr auto; row-gap: 10px; align-items: center;
}
.ex-pyramid-title { margin: 0; color: var(--ex-ink); font: 400 22px var(--ex-serif); }
.ex-pyramid-layout {
  display: grid; grid-template-columns: 122px minmax(320px, 1fr) 122px;
  gap: 20px; align-items: center;
}
.ex-axis { color: var(--ex-teal-deep); font: 500 8px/1.5 var(--ex-mono); letter-spacing: .1em; }
.ex-axis b { display: block; margin-top: 7px; font: 400 35px/1 var(--ex-serif); }
.ex-axis.is-left  { align-self: start; padding-top: 34px; }
.ex-axis.is-right { align-self: end; padding-bottom: 27px; text-align: right; }

.ex-stack { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.ex-level {
  min-height: 58px; display: grid; grid-template-columns: 142px 1fr;
  align-items: center; padding: 0 17px;
}
.ex-level strong { font: 600 11px var(--ex-mono); letter-spacing: .1em; }
.ex-level small  { margin: 0; text-align: center; font-size: 11px; font-weight: 600; }
.ex-level--decide     { width: 66%; color: #fff; background: var(--ex-ink); }
.ex-level--knowledge  { width: 84%; color: var(--ex-ink); background: var(--ex-teal-pale); border: 1px solid var(--ex-teal); }
.ex-level--understand { width: 100%; color: var(--ex-ink); background: rgba(255, 255, 255, .6); border: 1px solid var(--ex-ink); }
.ex-band {
  width: 114%; min-height: 53px; margin-top: 1px;
  display: grid; grid-template-columns: 142px 1fr; align-items: center; padding: 0 18px;
  background: #f2f3f0; border: 1px solid #cfd3cf;
  font: 500 10px var(--ex-mono); letter-spacing: .09em;
}
.ex-band span { color: var(--ex-ink); text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0; }
.ex-pyramid-caption { margin: 0; color: var(--ex-muted); text-align: center; font-size: 11px; }

/* ---------- 05 · separate layers ---------- */

.ex-responsibility { width: min(850px, 100%); display: grid; grid-template-columns: .78fr 1.22fr; gap: 46px; align-items: center; }
.ex-responsibility-copy h2 {
  margin: 13px 0 16px;
  font: 400 clamp(31px, 3.4vw, 45px)/.98 var(--ex-serif); letter-spacing: -.035em;
}
.ex-responsibility-copy h2 em { color: var(--ex-teal-deep); font-style: normal; }
.ex-responsibility-context { max-width: 255px; margin: 0; color: #57646a; font-size: 15px; line-height: 1.42; }
.ex-boundary {
  display: flex; align-items: center; gap: 8px; width: max-content;
  margin: 24px 0 0; padding-top: 8px; border-top: 1px solid var(--ex-amber);
  color: var(--ex-teal-deep); font: 500 8px var(--ex-mono); letter-spacing: .1em;
}
.ex-table {
  align-self: stretch; display: flex; flex-direction: column; justify-content: center;
  padding: 0 0 0 18px; border-left: 1px solid rgba(var(--ex-amb-rgb), .72);
}
.ex-table-intro { margin: 0 0 10px; color: #526167; font: 400 15px var(--ex-serif); }
.ex-row, .ex-row-head {
  display: grid; grid-template-columns: .8fr 1.55fr; align-items: center;
  min-height: 31px; padding: 0 12px;
}
.ex-row-head { color: #fff; background: var(--ex-ink); font: 600 8px var(--ex-mono); letter-spacing: .08em; }
.ex-row { color: #2c373b; border-bottom: 1px solid #d4dad6; font-size: 11px; }
.ex-row:nth-of-type(even) { background: rgba(230, 235, 232, .54); }
.ex-row span:first-child { font-weight: 600; }
.ex-row span:last-child  { color: #47555a; }

/* ---------- 06 · when to escalate ---------- */

.ex-expert { display: grid; grid-template-columns: 1fr 1.18fr; grid-template-rows: 1fr auto; gap: 30px 55px; align-items: center; }
.ex-expert-copy h2 {
  margin: 15px 0 17px;
  font: 400 clamp(31px, 3.4vw, 45px)/.98 var(--ex-serif); letter-spacing: -.035em;
}
.ex-expert-copy h2 em { color: var(--ex-amber); font-style: normal; }
.ex-expert-copy p:last-child { max-width: 310px; margin: 0; color: #57646a; font-size: 15px; line-height: 1.45; }
.ex-route { display: flex; align-items: center; gap: 16px; }
.ex-route > i { color: var(--ex-amber); font: 400 34px var(--ex-serif); font-style: normal; }
.ex-missing { display: flex; flex-direction: column; gap: 7px; }
.ex-missing span {
  padding: 9px 10px; color: #6d5828; background: var(--ex-amber-pale);
  border-left: 3px solid var(--ex-amber); font: 500 9px var(--ex-mono); letter-spacing: .06em;
}
.ex-expert-card {
  width: 185px; min-height: 98px; padding: 14px;
  display: flex; flex-direction: column; justify-content: center;
  color: #fff; background: var(--ex-ink); box-shadow: 8px 9px 0 rgba(var(--ex-ink-rgb), .09);
}
.ex-expert-card b     { color: #94e0d4; font: 600 10px var(--ex-mono); letter-spacing: .08em; }
.ex-expert-card small { margin-top: 10px; color: #d0d9d7; font-size: 11px; line-height: 1.25; }
.ex-expert-note { grid-column: 1 / -1; margin: 0; color: var(--ex-teal-deep); font: 400 20px var(--ex-serif); }

/* ---------- 07 · the system ---------- */

.ex-system { width: 100%; display: grid; justify-items: center; align-content: center; row-gap: 26px; }
.ex-chain { width: min(720px, 100%); display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.ex-node {
  min-height: 86px; padding: 12px 9px;
  display: flex; flex-direction: column; justify-content: space-between;
  border: 1px solid #c3d2ce; background: rgba(var(--ex-teal-rgb), .07);
}
.ex-node strong { color: #265c57; font: 600 8px var(--ex-mono); letter-spacing: .07em; }
.ex-node span   { color: #617076; font-size: 10px; line-height: 1.18; }
.ex-node.is-active        { color: #fff; background: var(--ex-ink); border-color: var(--ex-ink); }
.ex-node.is-active strong { color: #a1e5d9; }
.ex-node.is-active span   { color: #d8e5e2; }
.ex-resolution { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ex-arrival {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--ex-teal-deep); font: 500 8px var(--ex-mono); letter-spacing: .11em;
}
.ex-arrival span { width: 46px; height: 1px; background: var(--ex-teal); }
.ex-arrival i    { color: var(--ex-amber); font: 400 15px/1 var(--ex-serif); font-style: normal; }
.ex-cta-card {
  position: relative; width: min(520px, 100%); padding: 24px 28px 21px;
  border: 1px solid var(--ex-ink); background: rgba(255, 255, 255, .62);
  box-shadow: 12px 12px 0 rgba(var(--ex-teal-rgb), .16);
}
.ex-cta-card h2 {
  margin: 13px 0 18px;
  font: 400 clamp(29px, 3.2vw, 43px)/.98 var(--ex-serif); letter-spacing: -.035em;
}
.ex-cta-card h2 em { color: var(--ex-teal-deep); font-style: normal; }
.ex-cta-card a {
  width: fit-content; display: flex; align-items: center; gap: 9px; padding-bottom: 5px;
  border-bottom: 1px solid var(--ex-teal-deep); color: var(--ex-ink); text-decoration: none;
  font: 600 14px var(--ex-sans);
  transition: color .18s var(--ex-ease), transform .18s var(--ex-ease);
}
.ex-cta-card a:hover { color: var(--ex-teal-deep); transform: translateX(3px); text-decoration: none; }

/* ---------- 08 · the outcome ---------- */

.ex-outcome { width: min(840px, 100%); display: grid; grid-template-rows: auto 1fr auto; row-gap: 14px; align-items: center; }
.ex-outcome > .ex-mono { justify-self: start; }
.ex-outcome-grid { width: 100%; display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.ex-outcome h2 {
  margin: 0 0 15px;
  font: 400 clamp(34px, 4vw, 54px)/.94 var(--ex-serif); letter-spacing: -.045em;
}
.ex-outcome h2 em { color: var(--ex-teal-deep); font-style: normal; }
.ex-outcome-copy { max-width: 440px; margin: 0; color: #58666b; font-size: 16px; line-height: 1.45; }
.ex-record {
  position: relative; border: 1px solid var(--ex-ink); background: rgba(255, 255, 255, .78);
  box-shadow: 8px 8px 0 rgba(var(--ex-teal-rgb), .16);
}
.ex-record::before {
  content: ""; position: absolute; top: -1px; right: 28px;
  width: 46px; height: 4px; background: var(--ex-teal);
}
.ex-record-head, .ex-record-row { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }
.ex-record-head {
  min-height: 35px; color: #fff; background: var(--ex-ink);
  font: 500 8px var(--ex-mono); letter-spacing: .1em;
}
.ex-record-head span:last-child { color: #9de0d5; }
.ex-record-row {
  min-height: 38px; border-bottom: 1px solid var(--ex-line);
  color: #56656a; font: 500 9px var(--ex-mono); letter-spacing: .08em;
}
.ex-record-row strong { color: var(--ex-teal-deep); font-size: 9px; letter-spacing: .05em; }
.ex-record-cta {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 12px; padding: 12px 16px; border-radius: 8px;
  color: #fff; background: var(--ex-teal); border: 1px solid var(--ex-teal);
  text-decoration: none; font: 600 14px var(--ex-sans);
  transition: transform .18s var(--ex-ease), background .18s var(--ex-ease);
}
.ex-record-cta:hover { background: var(--ex-teal-deep); transform: translateY(-2px); text-decoration: none; color: #fff; }
.ex-footline {
  display: flex; align-items: center; gap: 10px;
  color: var(--ex-teal-deep); font: 500 8px var(--ex-mono); letter-spacing: .1em;
}
.ex-footline span { width: 38px; height: 1px; background: var(--ex-teal); }

/* ---------- timeline + controls ----------
   The prototype treated this as passive progress. Here it is the
   primary navigation, so it has to read as clickable. */

.ex-bar { border: 1px solid var(--ex-line); border-top: 0; background: var(--white); }

.ex-track { display: grid; grid-template-columns: repeat(8, 1fr); }
.ex-tab {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 5px;
  min-height: 74px; padding: 0 12px;
  color: var(--ex-muted); background: transparent; border: 0; text-align: left;
  font: 500 12px var(--ex-sans); cursor: pointer;
  transition: color .18s var(--ex-ease), background .18s var(--ex-ease);
}
.ex-tab::before {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 15px;
  height: 1px; background: #d9ddd6;
}
.ex-tab::after {
  content: ""; position: absolute; left: 12px; bottom: 15px;
  height: 2px; width: 0; background: var(--ex-teal);
  transition: width .35s var(--ex-ease);
}
.ex-tab:hover { color: var(--ex-ink); background: rgba(var(--ex-teal-rgb), .06); }
.ex-tab:focus-visible { outline: 2px solid var(--ex-teal); outline-offset: -2px; }
.ex-tab[aria-selected="true"] { color: var(--ex-ink); }
.ex-tab[aria-selected="true"]::after { width: calc(100% - 24px); }
.ex-tab-index { color: #8a938f; font: 500 8px var(--ex-mono); letter-spacing: .08em; }
.ex-tab-label { line-height: 1.2; }

.ex-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px; border-top: 1px solid var(--ex-line);
}
.ex-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--ex-line); border-radius: 999px;
  background: var(--white); color: var(--ex-ink);
  font: 500 .82rem/1 var(--ex-mono); letter-spacing: .04em; cursor: pointer;
  transition: border-color .18s var(--ex-ease), color .18s var(--ex-ease);
}
.ex-toggle[hidden] { display: none; }   /* beats the class's display:inline-flex */
.ex-toggle:hover { border-color: var(--ex-teal); color: var(--ex-teal-deep); }
.ex-toggle:focus-visible { outline: 2px solid var(--ex-teal); outline-offset: 2px; }
.ex-toggle-icon { font-size: .9em; line-height: 1; }

/* ---------- the "decision, not discovery" band ---------- */

.ex-band-note {
  display: flex; align-items: flex-start; gap: 30px;
  width: min(900px, 100%); margin: clamp(34px, 5vw, 54px) 0 0;
  padding-top: 20px; border-top: 1px solid var(--ex-line);
}
.ex-band-note .ex-mono { flex: 0 0 auto; padding-top: .35em; }
.ex-band-note p:last-child {
  max-width: 630px; margin: 0;
  font: 400 clamp(16px, 1.7vw, 19px)/1.45 var(--ex-serif); color: #405158;
}

/* ---------- the argument in prose ----------
   The board carries the argument visually; this carries it in words,
   for the visitor who will not sit through eight scenes and for the
   crawler that cannot see a carousel. */

.ex-argument { width: min(760px, 100%); margin: clamp(40px, 6vw, 68px) 0 0; }
.ex-argument .ex-mono { margin-bottom: 1.4rem; }
.ex-argument p {
  margin: 0 0 1.15em;
  font: 400 clamp(17px, 1.9vw, 21px)/1.5 var(--ex-serif); color: #33454c;
}
.ex-arg-lead {
  font-size: clamp(22px, 2.8vw, 31px) !important;
  line-height: 1.24 !important; letter-spacing: -.02em; color: var(--ex-ink) !important;
  margin-bottom: 1.5rem !important;
}
/* amber is the exclusion signal in this system — see BOOKMARK-field-guide-explainer */
.ex-arg-refuse {
  margin-top: 1.9em !important;
  padding: 2px 0 2px 20px; border-left: 2px solid var(--ex-amber);
}
.ex-arg-refuse + p {
  padding-left: 20px; border-left: 2px solid rgba(var(--ex-amb-rgb), .28);
  font-size: clamp(15px, 1.6vw, 17px) !important; color: #5b6b70 !important;
}

/* ---------- closing CTA ---------- */

.ex-close {
  width: min(760px, 100%); margin: clamp(34px, 5vw, 52px) 0 0;
  padding-top: clamp(26px, 4vw, 38px); border-top: 1px solid var(--ex-line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px;
}
.ex-close p {
  flex: 1 1 22ch; max-width: 42ch; margin: 0;
  font: 400 clamp(17px, 1.9vw, 21px)/1.4 var(--ex-serif); color: var(--ex-ink);
}
/* teal carries the title distinction. Italic would be synthesised — only the
   upright DM Serif face is loaded, and pulling the ital axis costs a second
   font file for one phrase. */
.ex-close p em { color: var(--ex-teal-deep); font-style: normal; }
.ex-close p em a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(var(--ex-teal-rgb), .38); }
.ex-close p em a:hover { text-decoration: none; border-bottom-color: var(--ex-teal); }

/* ============================================================
   Responsive
   The prototype shipped a single 760px breakpoint, which left
   761–900px broken: eight timeline columns at ~69px each, with
   labels that overflow into their neighbours.
   ============================================================ */

/* --- tablet / small laptop --- */
@media (max-width: 1000px) {
  .ex-scene { padding: 54px 34px 40px; }
  .ex-mismatch { gap: 0 30px; }
  .ex-evidence { gap: 32px; }
  .ex-pyramid-layout { grid-template-columns: 96px minmax(260px, 1fr) 96px; gap: 12px; }
  .ex-level, .ex-band { grid-template-columns: 118px 1fr; padding: 0 13px; }
  .ex-responsibility { gap: 28px; }
  .ex-expert { gap: 24px 32px; }
  .ex-outcome-grid { gap: 30px; }

  .ex-track { grid-template-columns: repeat(4, 1fr); }
  .ex-tab { min-height: 64px; padding: 10px 12px 0; }
  .ex-tab::before, .ex-tab::after { bottom: 8px; }
  .ex-tab[aria-selected="true"]::after { width: calc(100% - 24px); }
}

/* --- phone --- */
@media (max-width: 760px) {
  .ex-intro-cta { gap: 10px; }
  .ex-scene { min-height: 0; padding: 50px 20px 40px; }
  .ex-scene::before { right: 24px; bottom: 23px; width: 7px; height: 7px; }
  .ex-board-label.is-right { display: none; }

  .ex-mismatch { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 16px; }
  .ex-split { width: 100%; height: 1px; }
  .ex-thread { display: none; }
  .ex-panel { min-height: 0; padding: 0; }
  .ex-panel blockquote { margin: 14px 0 10px; }
  .ex-shortlist { width: 100%; margin: 12px 0 0; }
  .ex-insight { font-size: 18px; }

  .ex-evidence { grid-template-columns: 1fr; gap: 20px; }
  .ex-bridge { padding: 12px 0 12px 16px; }

  .ex-pyramid { width: 100%; row-gap: 8px; }
  .ex-pyramid-title { justify-self: center; font-size: 18px; }
  .ex-pyramid-layout { grid-template-columns: 1fr; gap: 6px; justify-items: center; }
  .ex-axis.is-left { align-self: auto; padding: 0; display: flex; align-items: center; gap: 8px; }
  .ex-axis.is-left b { margin: 0; font-size: 22px; }
  .ex-axis.is-right { display: none; }
  .ex-stack { width: 86%; }
  .ex-level { min-height: 50px; grid-template-columns: 104px 1fr; padding: 0 10px; }
  .ex-level strong { font-size: 8px; }
  .ex-level small { font-size: 9px; }
  .ex-band { width: 112%; min-height: 47px; grid-template-columns: 104px 1fr; padding: 0 10px; }
  .ex-band span { font-size: 9px; }
  .ex-pyramid-caption { font-size: 9px; }

  .ex-responsibility { grid-template-columns: 1fr; gap: 14px; }
  .ex-responsibility-copy { text-align: center; }
  .ex-responsibility-copy h2 { margin: 9px 0 8px; font-size: 31px; }
  .ex-responsibility-context { max-width: 300px; margin: 0 auto; font-size: 13px; }
  .ex-boundary { justify-content: center; margin: 12px auto 0; }
  .ex-table { width: 100%; padding: 0; border-left: 0; }
  .ex-table-intro { text-align: left; font-size: 13px; }
  .ex-row, .ex-row-head { min-height: 23px; padding: 0 8px; }
  .ex-row { font-size: 9px; }
  .ex-row-head { font-size: 7px; }

  .ex-expert { grid-template-columns: 1fr; gap: 18px; }
  .ex-expert-copy { text-align: center; }
  .ex-expert-copy p:last-child { margin: 0 auto; }
  .ex-route { justify-content: center; gap: 10px; }
  .ex-expert-card { width: 155px; min-height: 85px; }
  .ex-expert-note { text-align: center; font-size: 17px; }

  .ex-chain { grid-template-columns: repeat(3, 1fr); }
  .ex-node { min-height: 64px; }
  .ex-node span { font-size: 9px; }
  .ex-cta-card { padding: 20px 20px 18px; box-shadow: 8px 8px 0 rgba(var(--ex-teal-rgb), .16); }

  .ex-outcome { width: 100%; row-gap: 10px; }
  .ex-outcome > .ex-mono { justify-self: center; }
  .ex-outcome-grid { grid-template-columns: 1fr; gap: 13px; text-align: center; }
  .ex-outcome h2 { margin: 0 0 9px; font-size: 34px; }
  .ex-outcome-copy { max-width: 300px; margin: 0 auto; font-size: 13px; }
  .ex-record { width: min(280px, 100%); justify-self: center; margin-inline: auto; text-align: left; }
  .ex-record-head { min-height: 30px; font-size: 7px; }
  .ex-record-row { min-height: 28px; padding: 0 10px; font-size: 8px; }
  .ex-record-row strong { font-size: 8px; }
  .ex-record-cta { margin: 9px; padding: 10px 14px; font-size: 13px; }
  .ex-footline { justify-content: center; font-size: 7px; }

  /* the eight labelled buttons are unusable at this width — the
     timeline becomes a numbered strip plus prev/next */
  .ex-track { grid-template-columns: repeat(8, 1fr); }
  .ex-tab { min-height: 46px; padding: 0; align-items: center; justify-content: center; gap: 0; }
  .ex-tab::before, .ex-tab::after { left: 4px; right: 4px; bottom: 6px; }
  .ex-tab[aria-selected="true"]::after { width: calc(100% - 8px); }
  .ex-tab-label { display: none; }
  .ex-tab-index { font-size: 10px; color: inherit; }

  .ex-controls { flex-wrap: wrap; justify-content: center; padding: 10px 12px; }
  .ex-band-note { flex-direction: column; gap: 12px; }
  .ex-close { flex-direction: column; align-items: flex-start; gap: 18px; }
  .ex-close p { flex: 0 1 auto; }
}

/* ---------- reduced motion ----------
   The prototype only clamped CSS durations; its JS timer kept
   advancing. explainer.js reads the same query and disables
   autoplay outright, so this block only removes the transitions. */
@media (prefers-reduced-motion: reduce) {
  .ex-scene,
  .ex-scene.is-active { transition: none; }
  .ex-scene.is-active > *,
  .ex-scene.is-active .ex-dot { animation: none; }
  .ex-tab::after { transition: none; }
  .ex-grain { display: none; }
}