/* =====================================================================
   Editorial layout system for case studies. Opt in with <main class="… ed">.
   Loaded after a page's own styles, so it can tidy existing components
   without touching copy or markup.

   Rules
   1. One content edge. Every section, band included, starts at the same x.
   2. A 12-column grid. Section heads: heading in columns 1–7, intro in 8–12.
   3. One type scale (tokens below). No one-off sizes.
   4. Surfaces: paper by default. A tinted band only for key stages,
      the dark band only for the problem. Cards only sit on a band,
      never inside another card. No decorative divider lines.
   5. One screenshot treatment. Explanations sit next to or right under
      the screen they describe, always on the same side.
   ===================================================================== */

.ed {
  /* grid */
  --ed-col-gap: clamp(16px, 2vw, 24px);
  --ed-edge: max(var(--gutter, 24px), calc(50vw - var(--wrap, 1180px) / 2 + var(--gutter, 24px)));
  --ed-read: 62ch;

  /* spacing */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: clamp(36px, 4vw, 48px);
  --sp-6: clamp(48px, 5vw, 64px);
  --sp-section: clamp(72px, 8vw, 112px);

  /* type */
  --fs-h1: clamp(40px, 5vw, 68px);
  --fs-chapter: clamp(36px, 4.2vw, 56px);
  --fs-h2: clamp(30px, 3.2vw, 44px);
  --fs-h3: clamp(22px, 2vw, 26px);
  --fs-title: 18px;      /* item titles in grids and cards */
  --fs-lead: 18.5px;     /* section intros */
  --fs-body: 16.5px;
  --fs-small: 15px;      /* text inside grids and cards */
  --fs-caption: 14px;
  --fs-meta: 12px;       /* labels, kickers, step numbers */

  /* surfaces */
  --surf-card: #fff;
  --surf-band: var(--spot-bg, #eef0ec);
  --surf-ink: #16181d;
  --r-card: 16px;
  --r-shot: 10px;
  --shot-line: rgba(22, 24, 29, .10);
  --shot-shadow: 0 1px 2px rgba(22, 24, 29, .06), 0 18px 40px -22px rgba(22, 24, 29, .35);
}

/* ---------- 1 · one content edge ---------- */
.ed .sec.spot,
.ed .next.band,
.ed .next.band + .site-foot { padding-inline: var(--ed-edge) !important; }
.ed .prob-band > *:not(.wave-top) { padding-inline: var(--ed-edge) !important; }

/* ---------- vertical rhythm ---------- */
.ed .sec { padding-top: var(--sp-section) !important; }
.ed .sec.spot { padding-block: var(--sp-section) !important; }
.ed .sec + .sec.spot { margin-top: var(--sp-section) !important; }
.ed .sec.spot + .sec { padding-top: var(--sp-section) !important; }

/* ---------- 2 · section head template ---------- */
.ed .sec-head {
  display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ed-col-gap); row-gap: 12px;
  align-items: start; margin: 0 0 var(--sp-5) !important;
}
.ed .sec-head > div { display: contents; }
.ed .sec-head .kicker { grid-column: 1 / -1; margin: 0 !important; }
.ed .sec-head h2 { grid-column: 1 / span 7; font-size: var(--fs-h2) !important; line-height: 1.1; max-width: 18ch; }
.ed .sec-head > p { grid-column: 8 / -1; margin: 0 !important; padding-top: .45em; font-size: var(--fs-lead) !important; line-height: 1.55; color: var(--ink-2); max-width: none !important; }
@media (max-width: 860px) {
  .ed .sec-head h2, .ed .sec-head > p { grid-column: 1 / -1; }
  .ed .sec-head > p { padding-top: 4px; }
}

/* ---------- sub-section head template ---------- */
/* one h3 style for every block inside a section, with an optional line under it */
.ed .sub { margin: var(--sp-6) 0 var(--sp-3); display: grid; gap: 6px; justify-items: start; }
.ed .sub h3 { margin: 0; font-family: var(--display); font-weight: 300; font-size: var(--fs-h3) !important; line-height: 1.2; }
.ed .sub p, .ed .sub > span:not(.lbl) { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--ink-2); max-width: var(--ed-read); }

/* ---------- labels ---------- */
.ed .lbl, .ed .kicker { font-size: var(--fs-meta) !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- one screenshot treatment ---------- */
.ed .shot img, .ed img.shot { display: block; width: 100%; height: auto; border-radius: var(--r-shot); border: 1px solid var(--shot-line); box-shadow: var(--shot-shadow); background: #fff; }

/* ---------- text grid: plain columns, no boxes ---------- */
.ed .tgrid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--sp-4) var(--ed-col-gap); }
@media (max-width: 860px) { .ed .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ed .tgrid { grid-template-columns: 1fr; } }


/* =====================================================================
   Smart Replenishment: existing components mapped onto the system
   ===================================================================== */

/* hero */
.ed.srp .cs-head h1 { font-size: var(--fs-h1); line-height: 1.06; max-width: 16ch; }
.ed.srp .cs-head .lede { font-size: var(--fs-lead) !important; max-width: var(--ed-read); }
.ed.srp .facts { border-top: 0; padding-top: 0; margin-top: var(--sp-4); }
.ed.srp .facts dd { font-size: var(--fs-small); line-height: 1.5; }
.ed.srp .r-hero2 { margin-top: var(--sp-6); }
.ed.srp .h2-shot { border-radius: var(--r-shot); border-color: var(--shot-line); box-shadow: var(--shot-shadow); }
.ed.srp .h2-tag { margin-bottom: 10px; }
.ed.srp .h2-cap { font-size: var(--fs-caption); margin-top: 12px; }

/* problem band: aligned, no rules */
.ed.srp .prob-band { margin-top: var(--sp-section) !important; padding-block: var(--sp-section) !important; }
.ed.srp .r-probs li { border-top: 0; padding-top: 0; }
.ed.srp .r-probs b { font-size: var(--fs-h3); }
.ed.srp .r-probs span { font-size: var(--fs-small); }

/* chapter markers (Part 1 / Part 2) */
.ed.srp .r-part { margin-top: var(--sp-section) !important; gap: 10px; }
.ed.srp .r-part h2 { font-size: var(--fs-chapter) !important; line-height: 1.05; }
.ed.srp .r-part p { font-size: var(--fs-lead); color: var(--ink-2); }
.ed.srp .r-part + .sec { padding-top: var(--sp-6) !important; }
.ed.srp .r-part.in { margin: 0 0 var(--sp-6) !important; }

/* every sub-section head inside a section looks the same */
.ed.srp :is(.r-bhead, .ba-h, .ev-h, .r-try, .p1-dh) { margin: var(--sp-6) 0 var(--sp-3) !important; display: grid !important; gap: 6px; justify-items: start; justify-content: start; }
.ed.srp :is(.r-bhead, .ba-h, .ev-h, .r-try, .p1-dh) h3,
.ed.srp .r-val-t,
.ed.srp .p1-start > h3 { margin: 0 !important; font-family: var(--display); font-weight: 300; font-size: var(--fs-h3) !important; line-height: 1.2; }
.ed.srp .r-val-t, .ed.srp .p1-start > h3 { margin: var(--sp-6) 0 var(--sp-3) !important; }
.ed.srp .r-val > .r-val-t:first-child { margin-top: 0 !important; }
.ed.srp .p1-start > h3 + p, .ed.srp .p1-dh + p { margin: calc(-1 * var(--sp-2)) 0 var(--sp-3) !important; font-size: var(--fs-body) !important; line-height: 1.55; color: var(--ink-2); max-width: var(--ed-read); }
.ed.srp .sec-head + :is(.r-board, figure, .bx, .r-val, .p1-gh) { margin-top: 0 !important; }
.ed.srp .sec-head + figure .r-board > .r-bhead { margin-top: 0 !important; }
/* the decision number becomes a label, not a pill */
.ed.srp .p1-dn { background: none; color: var(--spot-ink); padding: 0; border-radius: 0; font-size: var(--fs-meta); }
.ed.srp .r-bhead .r-lbl { color: var(--muted); }
/* "The final flow" reads as a sub-section head */
.ed.srp .p1-final { margin: var(--sp-6) 0 var(--sp-3) !important; display: grid !important; gap: 6px; }
.ed.srp .p1-final b { font-family: var(--display); font-weight: 300; font-size: var(--fs-h3) !important; line-height: 1.2; color: var(--ink); }
.ed.srp .p1-final span { font-size: var(--fs-body) !important; color: var(--ink-2); }
/* collapsible "How the concept took shape" */
.ed.srp .r-more { margin-top: var(--sp-6); }
.ed.srp .r-more > summary { font-family: var(--display); font-weight: 300; font-size: var(--fs-h3) !important; line-height: 1.2; }
.ed.srp .r-more > summary span { display: block; font-family: var(--text); font-size: var(--fs-body) !important; color: var(--ink-2); margin-top: 6px; }

/* ---------- discovery: no box around the board, no boxes inside it ---------- */
.ed.srp .r-board { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0; gap: var(--sp-5); }
.ed.srp .r-days { gap: var(--ed-col-gap); }
.ed.srp .r-day { background: none; border: 0; padding: 0; gap: 8px; }
.ed.srp .r-day b, .ed.srp .r-job b { font-family: var(--display); font-weight: 300; font-size: var(--fs-title) !important; line-height: 1.3; }
.ed.srp .r-day dd, .ed.srp .r-job span, .ed.srp .r-winner span { font-size: var(--fs-small) !important; line-height: 1.5; }
.ed.srp .r-day dt { font-size: var(--fs-meta); }
.ed.srp .r-synth { border: 0 !important; padding-top: 0 !important; }
.ed.srp .r-themes span { border: 0; background: rgba(22, 24, 29, .04); font-size: var(--fs-small); }
.ed.srp .r-themes span.win { background: var(--sr-soft); }
.ed.srp .r-jobs { gap: var(--ed-col-gap); }
.ed.srp .r-job { border: 0; box-shadow: none; padding: 16px; border-radius: 12px; }
.ed.srp .r-job.top { background: var(--sr-soft); box-shadow: none; }
.ed.srp .r-star { border: 0 !important; }

/* ---------- Lena: one card (the persona), the journey sits on the page ---------- */
.ed.srp .ba-main { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.ed.srp .ba-body { gap: var(--sp-4); }
.ed.srp .ba-p { background: var(--surf-band); color: var(--ink); }
.ed.srp .ba-p dt { color: var(--spot-ink); }
.ed.srp .ba-p dl div { border-top: 0; padding: 6px 0; }
.ed.srp .ba-p dd { font-size: var(--fs-small); color: var(--ink-2); }
.ed.srp .ba-p > p { font-size: var(--fs-title); }
.ed.srp .ba-pid span { color: var(--muted); }
.ed.srp .ba-av { background: var(--spot-ink); color: #fff; }
.ed.srp .ba-title { font-family: var(--display); font-weight: 300; font-size: var(--fs-title) !important; margin-bottom: var(--sp-2); }
.ed.srp .ba-tools { border-top: 0; padding-top: var(--sp-3); gap: var(--ed-col-gap); }
.ed.srp .ba-tools img { border-radius: var(--r-shot); border: 1px solid var(--shot-line); box-shadow: var(--shot-shadow); }
.ed.srp .ba-tools figcaption { font-size: var(--fs-caption); }

/* ---------- North Star prototype: notes without rules or boxes ---------- */
.ed.srp .r-notes2 li { border-top: 0; padding: 10px 0; }
.ed.srp .r-notes2 li em.why { background: none; padding: 0; margin-top: 4px; }
.ed.srp .r-notes2 > p { font-size: var(--fs-h3); }
.ed.srp .ev-body { box-shadow: none !important; border: 0 !important; }
.ed.srp .ev-map { background: none; padding: 0; }
.ed.srp .ev-notes div { border-top: 0; padding: 6px 0; }
.ed.srp .ev-vis img { border-color: var(--shot-line); }

/* ---------- validation: off the band, plain columns ---------- */
.ed.srp #validate.sec { background: none !important; margin-inline: 0 !important; padding-inline: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; }
.ed.srp .r-val { gap: 0; }
.ed.srp .r-fz { gap: var(--sp-4) var(--ed-col-gap); }
.ed.srp .r-fz li { background: none; padding: 0; border-radius: 0; }
.ed.srp .r-fz b, .ed.srp .r-fz strong { font-family: var(--display); font-weight: 300; font-size: var(--fs-title); line-height: 1.3; }
.ed.srp .r-fz span:not(.r-fz-ic), .ed.srp .r-fz p { font-size: var(--fs-small); }
.ed.srp .r-said { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ed-col-gap); }
.ed.srp .r-said-ar { display: none; }
.ed.srp .r-said-col, .ed.srp .r-said-col.out { background: none; color: var(--ink); padding: 0; border-radius: 0; gap: 6px; }
.ed.srp .r-said-col.out small { color: var(--spot-ink); }
.ed.srp .r-said-col p { font-size: var(--fs-h3); }
@media (max-width: 700px) { .ed.srp .r-said { grid-template-columns: 1fr; gap: var(--sp-4); } }

/* ---------- phase 1: cards sit on the band, nothing inside them is boxed ---------- */
.ed.srp .p1-gh { gap: var(--ed-col-gap); }
.ed.srp .p1-gh > div { border-top: 0; border-radius: var(--r-card); }
.ed.srp .p1-gh p { font-size: var(--fs-title) !important; line-height: 1.45; }
.ed.srp .p1-card { box-shadow: none !important; border: 0 !important; border-radius: var(--r-card); }
.ed.srp .p1-vs { gap: var(--ed-col-gap); }
.ed.srp .p1-opt { border-radius: var(--r-card); }
.ed.srp .p1-opt img, .ed.srp .sx-col > img { border-color: var(--shot-line); border-radius: var(--r-shot); }
.ed.srp .p1-trade { gap: var(--ed-col-gap); }
.ed.srp .p1-trade div { border-top: 0; padding-top: 0; font-size: var(--fs-small); }
.ed.srp .sx-col { border-radius: var(--r-card); }
.ed.srp .sx-dia { background: none !important; padding: 0 !important; }

/* ---------- testing: findings as plain columns ---------- */
.ed.srp .p1-find { gap: var(--ed-col-gap); margin: 0; }
.ed.srp .p1-find div { background: none; padding: 0; border-radius: 0; font-family: var(--display); font-weight: 300; font-size: var(--fs-title); line-height: 1.4; }
.ed.srp .p1-find small { font-family: var(--text); font-size: var(--fs-meta); }
.ed.srp .p1-shot img { border-radius: var(--r-shot); }

/* ---------- impact + learnings: one 3-column pattern ---------- */
.ed.srp .im3, .ed.srp .lr3 { gap: var(--sp-4) var(--ed-col-gap); }
.ed.srp .im3 > div { border-top: 0; padding-top: 0; }
.ed.srp .im3 small { border-top: 0; padding-top: var(--sp-1); }
.ed.srp .im3 b, .ed.srp .lr3 b { font-size: var(--fs-h3); }
.ed.srp .im3 p, .ed.srp .lr3 p { font-size: var(--fs-small); line-height: 1.6; }
.ed.srp .im-next { background: none; color: var(--ink); padding: 0; border-radius: 0; margin-top: var(--sp-6); }
.ed.srp .im-next .kicker b { color: var(--spot-ink); }
.ed.srp .im-next p { color: var(--ink-2); font-size: var(--fs-small); }
.ed.srp .im-next li { border-color: var(--line); background: #fff; }
.ed.srp .lr-copy { border: 0 !important; background: none !important; padding: 0 !important; }

/* ---------- final check: no stray divider lines in content ---------- */
.ed.srp :is(.r-who li, .role-list li, .ev-notes div, .lr3 > div, .r-day dl) { border-top: 0 !important; }

/* ---------- fixes after the first pass ---------- */
.ed .sec-head h2 { max-width: none; }
/* every decision: heading, text under it, then the evidence. Never text on the side. */
.ed.srp .p1-d3 { grid-template-columns: 1fr !important; gap: var(--sp-3); }
.ed.srp .p1-d3 > p { max-width: var(--ed-read); margin: 0; font-size: var(--fs-body); color: var(--ink-2); }
/* the slider label and its number never collide */
.ed.srp .p1-calc label { gap: 16px; align-items: baseline; }
.ed.srp .p1-calc label span { min-width: 0; }
.ed.srp .p1-calc { border-left: 0 !important; }
/* the discovery board: blocks spaced evenly, the heading sits close to its columns */
.ed.srp .r-board > .r-bhead { margin-bottom: calc(var(--sp-3) - var(--sp-5)) !important; }
/* the highlighted job keeps its text on the same edge as the others */
.ed.srp .r-job { padding: 0; border-radius: 0; }
.ed.srp .r-job.top { margin: -16px; padding: 16px; border-radius: 12px; }
.ed.srp .r-more > summary { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: start; }
.ed.srp .r-more > summary span { grid-column: 1; }
/* readable minimums: labels 12px, any running text 14px */
.ed.srp .r-lbl { font-size: var(--fs-meta) !important; }
.ed.srp .ba-c > span, .ed.srp .ba-pid span, .ed.srp .p1-path span { font-size: var(--fs-caption) !important; line-height: 1.45; }
.ed.srp .sx-card span { font-size: var(--fs-meta) !important; }


/* =====================================================================
   Shared across case studies: pieces several pages use
   ===================================================================== */
/* about + role: the same 7 / 5 split as the section heads */
.ed .scope { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; column-gap: var(--ed-col-gap) !important; }
.ed .scope > :first-child { grid-column: 1 / span 7; }
.ed .scope > :last-child { grid-column: 8 / -1; }
@media (max-width: 860px) { .ed .scope > * { grid-column: 1 / -1 !important; } }
/* role lists: no rules, the labels carry the structure */
.ed :is(.who, .role-list) li { border-top: 0 !important; }
/* sub-section heads: heading, then its line underneath */
.ed .k-sub { display: grid !important; gap: 6px; justify-content: start; margin: var(--sp-6) 0 var(--sp-3) !important; }
.ed .k-sub h3 { font-size: var(--fs-h3) !important; }
.ed .k-sub p { font-size: var(--fs-body) !important; color: var(--ink-2) !important; max-width: var(--ed-read) !important; }
/* "more detail" disclosures: a quiet sub-head with a plus, no rules above and below */
.ed .xtra { border-top: 0 !important; border-bottom: 0 !important; margin-top: var(--sp-5) !important; }
.ed .xtra > summary { font-size: var(--fs-title) !important; justify-content: flex-start !important; padding: 8px 0 !important; }
/* quotes: one card each on the band, no rule above the name */
.ed .k-voices li { box-shadow: none !important; }
.ed .k-voices cite { border-top: 0 !important; padding-top: var(--sp-2) !important; }
.ed .k-voices blockquote { font-size: var(--fs-title) !important; }
/* tables: one light rule per row, nothing heavier */
.ed :is(.k-tbl, .tbl) :is(td, th) { border-color: var(--line) !important; }

/* =====================================================================
   Design system page
   ===================================================================== */
.ed.dsp .atom { background: none !important; box-shadow: none !important; padding: 0 !important; border: 0 !important; }
.ed.dsp .who li b { font-size: var(--fs-meta); letter-spacing: .08em; text-transform: uppercase; }
.ed.dsp .who li span { font-size: var(--fs-small); }
.ed.dsp .scope .big { font-size: var(--fs-h3); line-height: 1.3; }

/* =====================================================================
   UKTV page
   ===================================================================== */
/* no heavy rules between items: spacing and numbers separate them */
.ed.ukp :is(.ruled > div, .nums, .plats li, .teams li, .tt, .feat, .sub-h, .more-dev, .tst-list li, .swatches div, .iag-tests > div, .iax-more) { border-top: 0 !important; }
.ed.ukp :is(.more-dev details, .iax-more) { border-bottom: 0 !important; }
.ed.ukp .qcard .find { border-top: 0 !important; }
.ed.ukp .ruled > div, .ed.ukp .tst-list li, .ed.ukp .iag-tests > div, .ed.ukp .swatches div { padding-top: 0 !important; }
.ed.ukp .feat { padding-top: 0 !important; margin-top: var(--sp-6) !important; }
.ed.ukp .feat + .feat { margin-top: var(--sp-6) !important; }
/* sub-section heads */
.ed.ukp .sub-t, .ed.ukp .sub-h h3, .ed.ukp .uk-mob-h h3, .ed.ukp .more-dev summary { font-size: var(--fs-h3) !important; }
.ed.ukp .sub-t { margin: var(--sp-6) 0 var(--sp-3) !important; }
.ed.ukp .sub-h { margin: var(--sp-6) 0 var(--sp-3) !important; padding-top: 0 !important; }
.ed.ukp .iax-more > summary { font-size: var(--fs-title) !important; }
.ed.ukp .feat h3 { font-size: var(--fs-h3) !important; }

/* shared: hero facts, outcome row, lessons, ruled lists and test rounds without rules */
.ed .facts { border-top: 0 !important; padding-top: 0 !important; }
.ed .imp > div { border-top: 0 !important; padding-top: 0 !important; }
.ed .lessons div, .ed .lessons > * { border-top: 0 !important; padding-top: 0 !important; }
.ed :is(.ruled > div, .tst-list li) { border-top: 0 !important; padding-top: 0 !important; }
.ed .lessons b { font-size: var(--fs-h3) !important; }

/* =====================================================================
   Bwin page
   ===================================================================== */
.ed.bwp .mg-steps li { border-top: 0 !important; padding-top: 0 !important; }
/* the live demo: a dark stage aligned to the content edge, close to its heading */
.ed .demo-band { margin-top: calc(var(--sp-5) + 60px) !important; padding: var(--sp-6) var(--ed-edge) !important; }
.ed .rules li { border-top: 0 !important; }

/* SR visual-first pass (18 Oct): small diagrams instead of prose */
.ed.srp .r-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: var(--sp-2) 0 var(--sp-3); }
.ed.srp .r-chain span { font-size: var(--fs-small); padding: 7px 12px; border-radius: 8px; background: #fff; border: 1px solid var(--line); color: var(--ink); }
.ed.srp .r-chain span.hot { background: #fbe9e6; border-color: #f2c9c2; color: #8a2d1f; }
.ed.srp .r-chain i { font-style: normal; color: var(--muted); }
.ed.srp .r-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); max-width: 560px; }
.ed.srp .r-nums b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(28px, 2.6vw, 36px); line-height: 1; color: var(--ink); margin-bottom: 6px; }
.ed.srp .r-nums span { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.45; }
.ed.srp .r-day .r-out { font-size: var(--fs-small); color: var(--spot-ink, #2f6b4f); font-weight: 500; line-height: 1.45; }
.ed.srp .r-star3 { list-style: none; margin: 0; padding: 0 !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.ed.srp .r-star3 li { margin: 0; font-family: var(--display); font-weight: 300; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; color: var(--ink); display: grid; gap: 10px; }
.ed.srp .r-star3 i { font-style: normal; font-family: var(--body, inherit); font-size: 12px; font-weight: 700; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #cfe8d9; color: #2f6b4f; }
@media (max-width: 760px) { .ed.srp .r-star3, .ed.srp .r-nums { grid-template-columns: 1fr; } }
.ed.srp .r-synth { padding-bottom: 0 !important; }

/* =====================================================================
   SR grouping (18 Oct, Greta: "text floating everywhere").
   One rule: every block is a card (.gp) with its own header (.gp-h),
   and the header is ruled off from its content. Parallel items in a row
   are separate cards (.gcards). Inside a card, columns are split by thin
   dividers, never by more boxes.
   ===================================================================== */
.ed.srp { --gp-pad: clamp(20px, 2.6vw, 36px); --gp-gap: clamp(14px, 1.6vw, 20px); --gp-zone: #f5f4ef; }
.ed.srp .gps { display: grid; gap: var(--gp-gap); }
.ed.srp .gps2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--gp-gap) !important; align-items: stretch; }
.ed.srp .gp { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: var(--gp-pad) !important; margin: 0 !important; box-shadow: none !important; min-width: 0; }
.ed.srp .spot .gp { border-color: transparent; }
.ed.srp .sec > .gp + .gp, .ed.srp .sec > .gp + .gps, .ed.srp .sec > .gps + .gp, .ed.srp .sec > div > .gps + .gp,
.ed.srp .p1-gh + .gp, .ed.srp .gp + .p1-dec, .ed.srp .gp + .r-more { margin-top: var(--gp-gap) !important; }
.ed.srp .sec-head + :is(.gp, .gps, .gps2, .gcards, div) { margin-top: 0 !important; }

/* card header: label, title, optional line, then a rule */
.ed.srp .gp-h, .ed.srp .gp > .ba-h, .ed.srp .gp > .p1-dh, .ed.srp .gp > .kicker:first-child {
  display: grid !important; gap: 6px; justify-items: start; margin: 0 0 clamp(20px, 2.4vw, 28px) !important;
  padding: 0 0 clamp(14px, 1.8vw, 20px) !important; border-bottom: 1px solid var(--line); }
.ed.srp .gp-h small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--spot-ink, #2f6b4f); }
.ed.srp .gp-h h3 { margin: 0; font-family: var(--display); font-weight: 300; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; color: var(--ink); }
.ed.srp .gp-h p { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.ed.srp .gp > .kicker:first-child { width: 100%; }
.ed.srp .gp > .ba-h { grid-template-columns: 1fr auto; align-items: end; }
.ed.srp .gp > .ba-h h3 { margin: 0; }

/* rows of parallel items: one card each */
.ed.srp .gcards { display: grid !important; gap: var(--gp-gap) !important; }
.ed.srp .gcards > :is(div, li) { background: #fff; border: 1px solid var(--line) !important; border-radius: 20px; padding: clamp(20px, 2.2vw, 28px) !important; margin: 0; }
.ed.srp .prob-band .gcards > li { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .08) !important; }

/* inside a card: columns split by dividers */
.ed.srp .gp :is(.r-days, .r-fz, .r-said, .p1-find, .r-star3) > * + * { border-left: 1px solid var(--line); padding-left: clamp(16px, 2vw, 28px) !important; }
.ed.srp .gp .r-days, .ed.srp .gp .r-fz, .ed.srp .gp .p1-find, .ed.srp .gp .r-said, .ed.srp .gp .r-star3 { gap: clamp(16px, 2vw, 28px) !important; margin: 0 !important; }
.ed.srp .gp .r-said { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.ed.srp .gp .r-said-col p { font-size: var(--fs-title); }
.ed.srp .gp .p1-find div { background: none; padding: 0; }

/* discovery */
.ed.srp .gp .r-themes { margin: 0; }
.ed.srp .gp .r-themes span { background: var(--gp-zone); }
.ed.srp .gp .r-themes span.win { background: var(--sr-soft); }
.ed.srp .gp .r-winner { margin-top: 16px; background: none; padding: 16px 0 0; border-top: 1px solid var(--line); border-radius: 0; }
.ed.srp .gp .r-star3 li { font-size: clamp(20px, 2vw, 26px); }
.ed.srp .gp .r-jobs { gap: 12px; }
.ed.srp .gp .r-job, .ed.srp .gp .r-job.top { margin: 0; padding: 16px; border-radius: 12px; background: var(--gp-zone); }
.ed.srp .gp .r-job.top { background: var(--sr-soft); }

/* Lena's week: persona and journey split by a divider */
.ed.srp .gp .ba-p { background: none; padding: 0 clamp(16px, 2vw, 24px) 0 0; border-radius: 0; border-right: 1px solid var(--line); align-self: stretch; }
.ed.srp .gp .ba-main { border: 0; padding: 0; background: none; }
.ed.srp .gp .ba-tools { border-top: 1px solid var(--line) !important; padding-top: clamp(16px, 2vw, 24px); margin-top: clamp(16px, 2vw, 24px); }

/* prototype + concept history */
.ed.srp .gp-ns .r-cockpit { margin: 0; }
.ed.srp .r-more.gp > summary { padding: 0; }
.ed.srp .r-more.gp[open] > summary { padding-bottom: clamp(14px, 1.8vw, 20px); border-bottom: 1px solid var(--line); margin-bottom: clamp(20px, 2.4vw, 28px); }

/* validation */
.ed.srp .gp .r-fz li { padding-top: 0 !important; }

/* phase 1 */
.ed.srp .p1-start.gp .p1-card { background: none; padding: 0; border-radius: 0; }
.ed.srp .p1-dec.gp .p1-dl { margin: 0 0 20px; }
.ed.srp .p1-dec.gp .p1-opt, .ed.srp .p1-dec.gp .sx-col { background: #fff; border: 1px solid var(--line); box-shadow: none; }
.ed.srp .p1-dec.gp .p1-opt.on, .ed.srp .p1-dec.gp .sx-col.on { border-color: var(--sr); box-shadow: 0 0 0 1px var(--sr); }
.ed.srp .p1-dec.gp .p1-trade { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.ed.srp .p1-dec.gp .p1-path div { border: 1px solid var(--line); }
.ed.srp .p1-dec.gp .p1-path .ok { border-color: var(--sr); }
.ed.srp .p1-dec.gp .p1-dn { color: var(--spot-ink, #2f6b4f); }

/* impact */
.ed.srp .im3.gcards > div { gap: 14px; }
.ed.srp .im-next.gp { display: block; margin-top: var(--gp-gap) !important; }
.ed.srp .im-next.gp ul { margin: 0; }
.ed.srp .im-next.gp li { background: var(--gp-zone); border-color: transparent; }

@media (max-width: 860px) {
  .ed.srp .gps2 { grid-template-columns: 1fr !important; }
  .ed.srp .gp :is(.r-days, .r-fz, .r-said, .p1-find, .r-star3) > * + * { border-left: 0; padding-left: 0 !important; border-top: 1px solid var(--line); padding-top: 16px !important; }
  .ed.srp .gp .r-said, .ed.srp .gp .r-fz, .ed.srp .gp .r-days, .ed.srp .gp .p1-find, .ed.srp .gp .r-star3 { grid-template-columns: 1fr !important; }
}
@media (max-width: 1000px) {
  .ed.srp .gp .ba-p { border-right: 0; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
}
/* grouping fixes */
.ed.srp .gp .r-star3 { grid-template-columns: 1fr !important; gap: 0 !important; }
.ed.srp .gp .r-star3 > li { grid-template-columns: 26px 1fr; align-items: center; gap: 14px; padding: 14px 0 !important; }
.ed.srp .gp .r-star3 > li:first-child { padding-top: 0 !important; }
.ed.srp .gp .r-star3 > * + * { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--line); }
.ed.srp .gp .ba-p { align-content: start; align-self: start; position: static; }
.ed.srp .gp > .p1-dh .p1-dl { margin: 4px 0 0 !important; max-width: var(--ed-read); font-size: var(--fs-small); color: var(--ink-2); }
.ed.srp .p1-dec.gp .p1-d3 { margin: 0; }

/* =====================================================================
   DS grouping (18 Oct): same card system as SR. Every block is a card
   (.gp) with a header (.gp-h); rows of parallel items are .gcards.
   ===================================================================== */
.ed.dsp { --gp-pad: clamp(20px, 2.6vw, 36px); --gp-gap: clamp(14px, 1.6vw, 20px); --gp-zone: #f5f4ef; }
.ed.dsp .gps2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--gp-gap) !important; align-items: stretch; }
.ed.dsp .gp { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: var(--gp-pad) !important; margin: 0 !important; box-shadow: none !important; min-width: 0; }
.ed.dsp .spot .gp { border-color: transparent; }
.ed.dsp .sec > .gp + .gp, .ed.dsp .sec > .gcards + .gp, .ed.dsp .sec > .gp + .gcards, .ed.dsp .sec > .gp + .k-end, .ed.dsp .sec > .gcards + .k-end, .ed.dsp .sec > .gcards + details { margin-top: var(--gp-gap) !important; }
.ed.dsp .sec-head + :is(.gp, .gcards, .gps2) { margin-top: 0 !important; }
.ed.dsp .gp-h { display: grid !important; gap: 6px; justify-items: start; margin: 0 0 clamp(20px, 2.4vw, 28px) !important; padding: 0 0 clamp(14px, 1.8vw, 20px) !important; border-bottom: 1px solid var(--line); }
.ed.dsp .gp-h small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--spot-ink, var(--red)); }
.ed.dsp .gp-h h3 { margin: 0; font-family: var(--display); font-weight: 300; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; color: var(--ink); }
.ed.dsp .gp-h p { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.ed.dsp .gcards { list-style: none; padding: 0 !important; margin: 0; display: grid !important; gap: var(--gp-gap) !important; }
.ed.dsp .gcards > li { background: #fff; border: 1px solid var(--line) !important; border-radius: 20px; padding: clamp(20px, 2.2vw, 28px) !important; margin: 0; display: grid; gap: 10px; align-content: start; }
.ed.dsp .gp > .compare, .ed.dsp .gp > .k-pair, .ed.dsp .gp > figure, .ed.dsp .gp > .atom, .ed.dsp .gp > .mrow, .ed.dsp .gp > .k-led, .ed.dsp .gp > .k-rules, .ed.dsp .gp > .k-voices { margin-top: 0 !important; }
.ed.dsp .gp .k-cons-cap { margin: 16px 0 0 !important; font-size: var(--fs-small); color: var(--muted); }
/* investigate: found → decided */
.ed.dsp .k-find { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ed.dsp .k-find small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ed.dsp .k-find p { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--ink-2); }
.ed.dsp .k-find b { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 600; color: var(--ink); font-size: var(--fs-small); }
.ed.dsp .k-find b::before { content: "→ "; color: var(--red); }
/* direction: library options as zones inside the card */
.ed.dsp .gp .crit { margin: 0 0 20px; }
.ed.dsp .gp .lib .card { background: var(--gp-zone); border: 0; box-shadow: none; }
.ed.dsp .gp .lib .card.pick { background: #eef0ff; box-shadow: inset 0 0 0 1.5px #4630D2; }
/* reflection: decisions */
.ed.dsp .k-calls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ed.dsp .k-calls b { font-family: var(--display); font-weight: 300; font-size: var(--fs-h3); line-height: 1.2; color: var(--ink); }
.ed.dsp .k-calls > li > span { font-size: var(--fs-small); color: var(--ink-2); }
.ed.dsp .k-calls dl { margin: 6px 0 0; padding-top: 12px; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; font-size: var(--fs-small); }
.ed.dsp .k-calls dt { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.ed.dsp .k-calls dt:nth-of-type(2), .ed.dsp .k-calls dl dt:only-of-type { color: var(--sr, #2f6b4f); }
.ed.dsp .k-calls dd { margin: 0; color: var(--ink); }
.ed.dsp .k-end.gps2 { margin-top: var(--gp-gap) !important; }
.ed.dsp .k-end .gp { border-top: 1px solid var(--line) !important; }
.ed.dsp details.xtra.gp > summary { padding: 0; }
@media (max-width: 1000px) { .ed.dsp .k-calls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ed.dsp .k-find, .ed.dsp .k-calls, .ed.dsp .gps2 { grid-template-columns: 1fr !important; } }
.ed.dsp .gp .lib .card.pick { box-shadow: none; }
.ed.dsp .gp .k-panel { background: var(--gp-zone); box-shadow: none !important; border: 0 !important; }
.ed.dsp .gp .k-panel.k-after { background: #f4f3ff; }
.ed.dsp .gp .mrow > figure img { max-height: 460px; width: 100%; object-fit: cover; object-position: top; }

/* 18 Oct review round: outcome and about read as one block on every case study */
.ed #impact.imp-top { padding-bottom: 0 !important; }
.ed #impact + #about { padding-top: clamp(32px, 4vw, 48px) !important; margin-top: 0 !important; }
.ed .k-led li, .ed .k-led li.eng, .ed .k-led li.org { border-top-color: var(--ink) !important; }