/* v4 of the Debi case (06.11.2026): the v3 parts retold as one story for a 30-second scan and a longer read.
   New here: keyword chips, chapter heads, the "in short" block, the ecosystem route on the map, the agentic pipeline,
   the proof tabs, the outcome grid and the folded typography. Everything else comes from case.css, system.css, eco.css, ai.css. */

/* ── keyword chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chips li { padding: 6px 12px; border-radius: 999px; background: #F2F4F4; font-size: 13.5px; font-weight: 500; line-height: 1.2; color: var(--ink-2); }
.hero-chips { margin-top: 22px; }
.hero-chips li { background: #fff; box-shadow: inset 0 0 0 1px #E3E6E6; }

/* ── chapter head: number and name in the marker, a statement, one line of summary, chips */
.ch h2 { margin-top: 14px; }
.ch .ch-sum { max-width: 640px; }

/* ── in short */
.tldr { margin-top: 120px; }
.tl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tl-c { padding: 26px 26px 28px; border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.tl-k { display: block; font: 500 13px/1 var(--pop); letter-spacing: .02em; color: var(--g-ink); }
.tl-c p { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.tl-facts { margin-top: 36px; }
.tl-nums { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 44px; }
.tl-nums li { display: grid; align-content: start; gap: 10px; padding: 0 0 0 clamp(14px, 3vw, 36px); border-left: 1px solid #D6D6D6; }
.tl-nums li:first-child { padding-left: 0; border-left: 0; }
.tl-nums b { font: 500 clamp(30px, 3.6vw, 46px)/1 var(--pop); color: var(--g); letter-spacing: -.01em; }
.tl-nums span { font-size: 15px; line-height: 1.4; color: var(--ink-2); }
@media (max-width: 900px) {
  .tl-grid { grid-template-columns: 1fr; gap: 12px; }
  .tl-nums { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .tl-nums li:nth-child(4) { padding-left: 0; border-left: 0; }
}
@media (max-width: 520px) {
  .tldr { margin-top: 88px; }
  .tl-c { padding: 20px; border-radius: 18px; }
  .tl-nums { grid-template-columns: repeat(2, 1fr); }
  .tl-nums li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .tl-nums li:nth-child(4) { padding-left: clamp(14px, 3vw, 36px); border-left: 1px solid #D6D6D6; }
}

/* ── 03 ecosystem: the map with the route on it, three steps next to it */
.eco4 { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: center; gap: 32px 64px; }
.eco4 .eco-side { position: static; padding-top: 0; }
.eco-hub em { font-style: normal; font-size: 10.5px; color: var(--muted); margin-top: -3px; }
.eco4 .eco-n[data-n="ai"], .eco4 .eco-hub { outline: 0; }
.route { display: grid; gap: 12px; }
.route > li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 18px 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); cursor: default; transition: box-shadow .3s, background-color .3s; outline: 0; }
.route > li:hover, .route > li:focus-visible, .route > li.on { box-shadow: 0 0 0 2px var(--g), var(--shadow); }
.route .eco-k { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--g-50); color: var(--g-ink); font-size: 14px; }
.route h3 { font: 500 19px/1.3 var(--pop); letter-spacing: -.01em; }
.route p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.route .eco-win { margin-top: 14px; }
.route .eco-link { margin-top: 10px; }
@media (max-width: 900px) { .eco4 { grid-template-columns: minmax(0, 1fr); } }

/* ── 04 design system: typography folded */
.ds-more { margin-top: 64px; }
.ds-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; list-style: none; font: 500 17px/1.3 var(--pop); transition: box-shadow .25s; }
.ds-more > summary::-webkit-details-marker { display: none; }
.ds-more > summary:hover { box-shadow: 0 0 0 1px #CFD6D6, var(--shadow); }
.ds-more > summary .ic { width: 20px; height: 20px; color: var(--g-ink); transition: transform .3s; }
.ds-more[open] > summary .ic { transform: rotate(180deg); }
.ds-more > .ds-b { margin-top: 28px; }

/* the proof, in three tabs */
.proof { margin-top: 48px; }
.proof-tabs { flex-wrap: wrap; }
.proof-p { margin-top: 22px; }
.proof-sum { max-width: 640px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.proof-p .ai-row { margin-top: 22px; }
@media (max-width: 520px) { .proof-tabs button { padding: 8px 10px; } }

/* ── 06 outcome */
.oc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.oc li { display: grid; align-content: start; gap: 10px; padding: 24px 24px 26px; border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.oc b { font: 500 clamp(20px, 2vw, 24px)/1.2 var(--pop); color: var(--ink); letter-spacing: -.01em; white-space: nowrap; }
.oc p { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.oc .eco-link { margin-top: 2px; }
.oc-more { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.oc-more .chips { margin-top: 12px; }
.oc-more p { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 900px) { .oc-more { grid-template-columns: 1fr; } }

/* chapters carry the numbers; blocks inside a chapter don't */
#system .ds-n { display: none; }
#system .ds-h h3 { margin-top: 0; }

/* ?clean: product screens without the case's annotations, for still images */
.clean .pin { display: none !important; }
.clean .report [data-rule] { opacity: 1 !important; box-shadow: none !important; }

/* ───────── second round (06.11.2026) ───────── */

/* what I designed: the three products at a glance */
.scope { margin-top: 120px; }
.sc-k { font: 500 13px/1 var(--pop); letter-spacing: .02em; color: var(--g-ink); }
.sc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 18px; }
.sc-grid li { display: grid; align-content: start; gap: 6px; }
.sc-shot { display: block; aspect-ratio: 16 / 10; margin-bottom: 10px; overflow: hidden; border-radius: 18px; background: #F3F6F6; box-shadow: 0 0 0 1px rgb(17 17 17 / .06), 0 22px 40px -26px rgb(17 17 17 / .35); }
.sc-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.sc-grid b { font: 500 18px/1.3 var(--pop); letter-spacing: -.01em; }
.sc-grid li > span:last-child { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.scope .tl-facts { margin-top: 36px; }
@media (max-width: 700px) { .scope { margin-top: 88px; } .sc-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } }

/* 05 setup and result */
.ai-who > div + div dt { color: var(--ink); }

.clean .stage > .phone { display: none; }

/* ───────── third round (06.11.2026) ───────── */

/* 01 context: today and the goal side by side, then the five users from the brief */
.cx-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; margin-top: 52px; }
.cx-pair > div { padding-top: 22px; border-top: 1px solid var(--line); }
.cx-pair dt { font: 500 13px/1 var(--pop); letter-spacing: .02em; color: var(--g-ink); }
.cx-pair dd { display: grid; gap: 8px; margin-top: 14px; }
.cx-pair b { font: 500 22px/1.3 var(--pop); letter-spacing: -.015em; color: var(--ink); }
.cx-pair dd span { max-width: 470px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.cx-users { margin-top: 56px; }
.cx-k { max-width: 640px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.cx-users ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 24px; margin-top: 18px; }
.cx-users li { display: grid; align-content: start; gap: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.cx-users b { font: 500 16px/1.3 var(--pop); letter-spacing: -.01em; }
.cx-users li span { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 900px) { .cx-users ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 24px; } }
@media (max-width: 640px) {
  .cx-pair { grid-template-columns: minmax(0, 1fr); }
  .cx-pair b { font-size: 19px; }
  .cx-users ul { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cx-users li { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 12px 0; }
  .cx-users b { font-size: 15px; }
}

/* 02 research: what was reviewed, as a quiet line */
@media (max-width: 420px) { .nw-s { white-space: normal; } }
.ch-ref { max-width: 640px; margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.ch-ref span { margin-right: 10px; font: 500 13px/1 var(--pop); letter-spacing: .02em; color: var(--g-ink); }

/* 03 product: the fifth screen (questionnaire 2/2) and five phones in a row on a wide screen */
.m-info { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; margin: 18px 16px 0; padding: 14px; border-radius: 16px; background: #EAF4FB; font-size: 13.5px; line-height: 1.45; color: var(--ui-2); }
.m-info .ic { width: 20px; height: 20px; color: #016AAE; }
.m-info b { display: block; margin-bottom: 2px; font-size: 14.5px; font-weight: 600; color: var(--ui-ink); }
.m-q { margin: 26px 2px 12px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ui-ink); }
.m-rad { display: flex; align-items: center; gap: 22px; margin: 0 2px; font-size: 15px; color: var(--ui-ink); }
.rd { display: inline-flex; align-items: center; gap: 8px; }
.rd::before { content: ''; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px #C9CDD2; }
.rd.on::before { box-shadow: inset 0 0 0 6px var(--ui-brand); }
.m-rad em { margin-left: auto; font-style: normal; font-size: 13.5px; color: var(--ui-brand); text-decoration: underline; text-underline-offset: 3px; }
.m-cbs { display: grid; gap: 12px; margin: 0 2px; }
.cb { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ui-ink); }
.cb::before { content: ''; flex: none; width: 20px; height: 20px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1.5px #C9CDD2; }
/* five phones inside the page column, with the same side margins as every other block */
@media (min-width: 1100px) {
  #screens .track { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
  #screens .s-cap { margin-top: 24px; font-size: 17px; }
  #screens .s-txt { font-size: 14.5px; }
  /* option B (?phones=scroll): four phones at the earlier size, the row scrolls inside the column */
  .ph-scroll #screens .track { display: flex; gap: 32px; margin: 0 -6px; padding: 40px 6px 30px; overflow-x: auto; scroll-padding-left: 6px; }
  .ph-scroll #screens .slide { width: calc((100% - 96px) / 4); }
  .ph-scroll #screens .s-cap { margin-top: 30px; font-size: 18px; }
  .ph-scroll #screens .s-txt { font-size: 15px; }
}

/* 04 the client journey: three stops that advance by themselves, like stories; a click jumps */
.jr { margin-top: 52px; }
.jr-stops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.jr-stops button { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; align-content: space-between; column-gap: 10px; width: 100%; height: 100%; padding-top: 6px; text-align: left; color: var(--muted); transition: color .3s; }
.jr-n { font: 500 14px/1 var(--pop); font-variant-numeric: tabular-nums; }
.jr-l { font: 500 17px/1.3 var(--pop); letter-spacing: -.01em; }
.jr-bar { grid-column: 1 / -1; position: relative; display: block; height: 3px; margin-top: 14px; overflow: hidden; border-radius: 2px; background: #E2E8E7; }
.jr-bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--g); transform: scaleX(0); transform-origin: left; }
.jr-stops button.done .jr-bar i { transform: none; }
.jr-stops button:hover, .jr-stops button[aria-pressed="true"] { color: var(--ink); }
.jr-stops button[aria-pressed="true"] .jr-n { color: var(--g-ink); }
.jr-stops button[aria-pressed="true"] .jr-bar i { animation: jr-fill 7s linear forwards; }
.jr.paused .jr-stops button[aria-pressed="true"] .jr-bar i { animation-play-state: paused; }
.jr.manual .jr-stops button[aria-pressed="true"] .jr-bar i { animation: none; transform: none; }
.jr-stops button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
@keyframes jr-fill { to { transform: none; } }
/* the panes share one cell, so the block keeps the height of the tallest and the page doesn't jump */
.jr-stage { display: grid; margin-top: 36px; }
.jr-p { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: 28px 52px; }
/* a crossfade: the old stop fades out while the new one fades in, its text rising a little */
.jr-p { transition: opacity .7s cubic-bezier(.4,0,.2,1), visibility 0s; }
.jr-p[hidden] { display: grid !important; visibility: hidden; opacity: 0; transition: opacity .5s cubic-bezier(.4,0,.2,1), visibility 0s .5s; }
.jr-win { margin-top: 0; }
.jr-win img { aspect-ratio: 16 / 10; height: auto; object-fit: cover; object-position: top center; }
.jr-bar i { transition: transform .5s cubic-bezier(.4,0,.2,1); }
.jr-t h3 { font: 500 24px/1.25 var(--pop); letter-spacing: -.015em; }
.jr-t p:not(.jr-k) { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.jr-k { margin-top: 22px; font: 500 12.5px/1 var(--pop); letter-spacing: .02em; color: var(--g-ink); }
.jr-t .chips { margin-top: 10px; }
.jr-t .eco-link { display: inline-flex; margin-top: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .jr-p .jr-t, .jr-p .jr-win img { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
  .jr-p[hidden] .jr-t { transform: translateY(12px); }
  .jr-p[hidden] .jr-win img { transform: scale(1.02); }
  .jr-p[hidden] .jr-t, .jr-p[hidden] .jr-win img { transition: transform 0s .5s; }   /* the leaving stop doesn't move; it resets once it's gone */
}
.ds-still .jr-p, .ds-still .jr-p *, .jr.manual .jr-p, .jr.manual .jr-p * { transition: none !important; }
@media (max-width: 860px) { .jr-p { grid-template-columns: minmax(0, 1fr); align-items: start; } }
@media (max-width: 520px) { .jr-stops { gap: 12px; } .jr-l { font-size: 14px; } .jr-n { font-size: 12.5px; } }

/* 05 type: every display and heading style at its real size; Desktop / Mobile resizes them all */
@media (min-width: 961px) { #system .ty { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.ty-scale li { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ty-scale li:first-child { padding-top: 0; }
.tn b { display: block; font-size: 13.5px; font-weight: 600; }
.tn em { font-style: normal; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ts { overflow: hidden; font: 700 var(--d)/var(--dl) var(--sans); white-space: nowrap; text-overflow: ellipsis; transition: font-size .45s cubic-bezier(.2,.7,.2,1), line-height .45s cubic-bezier(.2,.7,.2,1); }
.type[data-v="m"] .ts { font-size: var(--m); line-height: var(--ml); }
.type.now .ts, .ds-still .ts { transition: none !important; }
.mx-k { margin-bottom: 4px; font-size: 13px; color: var(--muted); }
@media (max-width: 960px) { .mx-wrap { margin-top: 8px; } }
@media (max-width: 520px) { .ty-scale li { grid-template-columns: minmax(0, 1fr); gap: 2px; } .tn { display: flex; align-items: baseline; gap: 8px; } }

/* 06 AI: the loop a task runs through; who does each step is marked */
.loop-card { margin-top: 56px; padding: 26px 28px 20px; }
.loop { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.loop li { position: relative; display: grid; align-content: start; justify-items: start; gap: 8px; padding: 16px 14px 18px; border-radius: 18px; background: #F5F7F7; cursor: default; outline: 0; transition: box-shadow .25s, background-color .25s; }
.loop li.me { background: var(--g-50); }
.loop li + li::before { content: ''; position: absolute; left: -11px; top: 27px; width: 7px; height: 7px; border-top: 2px solid #B9C4C3; border-right: 2px solid #B9C4C3; transform: rotate(45deg); }
.lp-who { padding: 3px 9px; border-radius: 999px; font: 500 11.5px/1.3 var(--pop); letter-spacing: .02em; }
.lp-who.me { background: var(--g-ink); color: #fff; }
.lp-who.ag { background: #fff; color: var(--ink-2); box-shadow: inset 0 0 0 1px #DCE2E1; }
.loop b { font: 500 16px/1.3 var(--pop); letter-spacing: -.01em; }
.lp-d { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.loop li:hover, .loop li:focus-visible, .loop li.on { background: #fff; box-shadow: 0 0 0 1.5px var(--g); }
.loop-back { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.loop-back .ic { flex: none; width: 26px; height: 18px; color: var(--g); stroke-width: 1.6; }
.loop-cap { min-height: 3.2em; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 1000px) { .loop { grid-template-columns: repeat(3, minmax(0, 1fr)); } .loop li:nth-child(3n+1)::before { display: none; } }
@media (max-width: 640px) { .loop { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .loop li::before { display: none; } }
@media (max-width: 420px) { .loop { grid-template-columns: minmax(0, 1fr); } .loop-card { padding: 18px; } .loop-cap { min-height: 4.6em; } }

/* the seven English pages get a heading */
.ai-pages-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 44px; }
.ai-pages-h b { font: 500 18px/1.3 var(--pop); letter-spacing: -.01em; }
.ai-pages-h span { font-size: 14.5px; color: var(--muted); }
.ai-pages-h + .ai-pages { margin-top: 16px; }

/* 07 outcome: live and bilingual on the left, the handoff on the right */
.oc { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "live hand" "lang hand"; }
.oc-live { grid-area: live; }
.oc-lang { grid-area: lang; }
.oc-hand { grid-area: hand; }
.oc-links { display: grid; gap: 6px; margin-top: 4px; }
.oc-list { display: grid; margin-top: 6px; }
.oc-list > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.oc-list > div:last-child { padding-bottom: 0; }
.oc-list dt { font: 500 13.5px/1.5 var(--pop); color: var(--g-ink); }
.oc-list dd { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 760px) { .oc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "live" "lang" "hand"; } }
@media (max-width: 420px) { .oc-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ───────── fourth round (06.11.2026) ───────── */

/* 05 colour map: the roles column holds the longest list (set by system.js); each role shows what it paints */
#system .roles { min-height: 0; justify-content: flex-start; }
#system .ro-l li { display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px 5px 6px; }
.rs { position: relative; flex: none; display: inline-grid; place-items: center; width: 26px; height: 18px; border-radius: 6px; }
.rs-fill { background: var(--c); box-shadow: inset 0 0 0 1px rgb(17 17 17 / .08); }
.rs-btn { border-radius: 999px; background: var(--c); }
.rs-btn::after { content: ''; width: 11px; height: 2px; border-radius: 1px; background: rgb(255 255 255 / .9); }
.rs-btn.lt::after { background: rgb(17 17 17 / .45); }
.rs-btn.lt { box-shadow: inset 0 0 0 1px rgb(17 17 17 / .08); }
.rs-line { background: #fff; box-shadow: inset 0 0 0 1.5px var(--c); }
.rs-text { background: #fff; }
.rs-text::after { content: 'Aa'; font: 700 11.5px/1 var(--sans); color: var(--c); }
.rs-text.lt { background: #05857B; }
.rs-icon::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.rs-ring::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--c); }
.rs-bar { background:
  linear-gradient(var(--c), var(--c)) 3px 100% / 5px 55% no-repeat,
  linear-gradient(var(--c), var(--c)) 10.5px 100% / 5px 100% no-repeat,
  linear-gradient(var(--c), var(--c)) 18px 100% / 5px 35% no-repeat; border-radius: 2px; }

/* 06 AI: the loop as one line, then eight cards on how the agents are set up */
.know-card { margin-top: 56px; padding: 26px 28px 20px; }
.kn-k { font: 500 13px/1 var(--pop); letter-spacing: .02em; color: var(--g-ink); }
.kn-k2 { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.kn-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 14px; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }
.flow li { position: relative; padding: 8px 14px; border-radius: 999px; background: #F2F4F4; font: 500 14.5px/1.2 var(--pop); color: var(--ink); }
.flow li.me { background: var(--g-50); box-shadow: inset 0 0 0 1px #BFE6E2; }
.flow li + li::before { content: ''; position: absolute; left: -17px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-top: 2px solid #B9C4C3; border-right: 2px solid #B9C4C3; transform: rotate(45deg); }
.flow-key { display: flex; gap: 16px; font-size: 13px; color: var(--muted); }
.flow-key span { display: inline-flex; align-items: center; gap: 6px; }
.flow-key span::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #E3E7E7; }
.flow-key .me::before { background: var(--g-50); box-shadow: inset 0 0 0 1px #9FD9D3; }
.flow-back { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.flow-back .ic { flex: none; width: 24px; height: 18px; color: var(--g); stroke-width: 1.6; }
.know { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.know li { display: grid; align-content: start; gap: 8px; padding: 16px 16px 18px; border-radius: 18px; background: #F5F7F7; cursor: default; outline: 0; transition: background-color .25s, box-shadow .25s; }
.know b { font: 500 16px/1.3 var(--pop); letter-spacing: -.01em; }
.know span { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.know li:hover, .know li:focus-visible, .know li.on { background: #fff; box-shadow: 0 0 0 1.5px var(--g); }
.know-cap { min-height: 3.2em; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 1000px) { .know { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .flow li + li::before { display: none; } .flow { gap: 8px; } }
@media (max-width: 520px) { .know { grid-template-columns: minmax(0, 1fr); } .know-card { padding: 18px; } .know-cap { min-height: 4.6em; } }

/* ───────── no hanging words (06.11.2026) ─────────
   Headings and short labels are balanced; running text uses "pretty", so a paragraph never ends on one word. */
main { text-wrap: pretty; }
main :is(h1, h2, h3, .s-cap, .sc-grid b, .cx-pair b, .cx-users b, .jr-t h3, .oc b, .rules b, .know b, .ds-h h3, .tn b, .ai-pages-h b) { text-wrap: balance; }
/* on a phone the five users stack (name, then what they need), so a two-word name never wraps onto its own line */
@media (max-width: 640px) { .cx-users li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.facts dd { text-wrap: balance; }

/* ───────── fifth round (06.11.2026): what the vacancies ask for — flows, decisions, code prototypes, what didn't work, takeaways ───────── */

/* 04 flow: the main path in three groups, branch arcs drawn by v4.js, five branch cards, the platform map */
.fl { margin-top: 52px; padding: 28px 28px 22px; }
.fl-map { position: relative; padding: 46px 0 74px; }
.fl-path { position: relative; z-index: 1; display: grid; grid-template-columns: 3fr 5fr 2fr; gap: 24px; }
.fl-g { display: grid; align-content: start; gap: 12px; }
.fl-k { font: 500 12.5px/1 var(--pop); letter-spacing: .02em; color: var(--g-ink); }
.fl-g ol { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 14px; }
.fl-g ol li { position: relative; display: grid; place-items: center; min-height: 60px; padding: 8px 6px; border-radius: 14px; background: #F2F4F4; text-align: center; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--ink); transition: background-color .25s, box-shadow .25s; }
.fl-g:nth-child(2) ol li { background: var(--g-50); }
.fl-g ol li + li::before, .fl-g + .fl-g ol li:first-child::before { content: ''; position: absolute; left: -10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-top: 1.5px solid #B9C4C3; border-right: 1.5px solid #B9C4C3; transform: rotate(45deg); }
.fl-g + .fl-g ol li:first-child::before { left: -15px; }
.fl-g ol li.hit { background: #fff; box-shadow: 0 0 0 1.5px var(--g); }
.fl-arcs { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fl-arcs path.arc { fill: none; stroke: #BCCBC9; stroke-width: 1.5; stroke-dasharray: 4 4; transition: stroke .25s, opacity .5s; }
.fl-arcs path.arc.on { stroke: var(--g); stroke-width: 2; stroke-dasharray: none; }
.fl-arcs.dim path.arc:not(.on) { opacity: .35; }
.fl-br { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.fl-br li { display: grid; align-content: start; gap: 6px; padding: 14px 14px 16px; border-radius: 16px; background: #F5F7F7; cursor: default; outline: 0; transition: background-color .25s, box-shadow .25s; }
.fl-br b { font: 500 15.5px/1.3 var(--pop); letter-spacing: -.01em; }
.fl-br em { font-style: normal; font-size: 12.5px; line-height: 1.4; color: var(--g-ink); }
.fl-br span { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.fl-br li:hover, .fl-br li:focus-visible, .fl-br li.on { background: #fff; box-shadow: 0 0 0 1.5px var(--g); }
.fl-ia { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.fl-ia span { font: 500 12.5px/1.6 var(--pop); letter-spacing: .02em; color: var(--g-ink); }
@media (prefers-reduced-motion: no-preference) {
  .fl-arcs path.arc { opacity: 0; }
  .fl.in .fl-arcs path.arc { opacity: 1; transition-delay: calc(var(--i, 0) * 120ms); }
}
.ds-still .fl-arcs path.arc { opacity: 1 !important; transition: none !important; }
@media (max-width: 1000px) {
  .fl-map { padding: 0 0 20px; }
  .fl-path { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .fl-arcs { display: none; }
  .fl-g + .fl-g ol li:first-child::before { display: none; }
  .fl-br { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .fl { padding: 18px; }
  .fl-g ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .fl-g ol li::before { display: none; }
  .fl-br { grid-template-columns: minmax(0, 1fr); }
}

/* 05 decisions behind the screens: decision · what it replaced · why, on hairlines */
.dc { margin-top: 72px; }
.dc-k { font: 500 13px/1 var(--pop); letter-spacing: .02em; color: var(--g-ink); }
.dc-l { margin-top: 16px; border-top: 1px solid var(--line); }
.dc-l li { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, .8fr) minmax(0, 1.6fr); gap: 6px 32px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.dc-l b { font: 500 17px/1.35 var(--pop); letter-spacing: -.01em; }
.dc-l em { font-style: normal; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.dc-l span { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 860px) { .dc-l li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* 07 AI: the tools line, what didn't work, the code prototype proof */
.kn-tools { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.kn-tools span { margin-right: 10px; font: 500 12.5px/1 var(--pop); letter-spacing: .02em; color: var(--g-ink); }
.wdw { margin-top: 56px; }
.wdw-l, .tk-l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 16px; }
.wdw-l li, .tk-l li { display: grid; align-content: start; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.wdw-l b, .tk-l b { font: 500 17px/1.35 var(--pop); letter-spacing: -.01em; }
.wdw-l span, .tk-l span { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 860px) { .wdw-l, .tk-l { grid-template-columns: minmax(0, 1fr); gap: 22px; } }
.ai-proto { padding: 14px; }
.ai-proto .eco-win { margin-top: 0; }
.ai-proto .sk-note { margin: 12px 4px 2px; }

/* 08 takeaways */
.tk-out { margin-top: 48px; }
.fl-g ol li, .fl-br b, .dc-l b, .wdw-l b, .tk-l b { text-wrap: balance; }
@media (min-width: 1001px) and (max-width: 1200px) { .fl-br { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* eight chapters in the top bar: tighter gaps on narrower screens, hidden where they would touch the button */
@media (max-width: 1240px) { .nav { gap: 26px; } }
@media (max-width: 1080px) { .nav { gap: 18px; } .nav a { font-size: 14px; } }
@media (max-width: 980px) { .nav { display: none; } }

/* 01 context, trimmed (06.11.2026): today and PrimeGrip AI in one panel, then the five users in one row */
.cx-vs { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 48px; overflow: hidden; border-radius: 24px; box-shadow: 0 0 0 1px var(--line); }
.cx-vs > div { display: grid; align-content: start; gap: 10px; padding: 30px 36px 32px; }
.cx-vs > div:first-child { background: #F6F7F7; }
.cx-vs > div:last-of-type { padding-left: 52px; background: var(--g-50); }
.cx-l { font: 500 12.5px/1 var(--pop); letter-spacing: .02em; color: var(--muted); }
.cx-vs > div:last-of-type .cx-l { color: var(--g-ink); }
.cx-vs b { font: 500 clamp(20px, 2.1vw, 26px)/1.25 var(--pop); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.cx-vs > div > span:last-child { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.cx-arr { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 8px 18px -10px rgb(17 17 17 / .25); color: var(--g-ink); }
.cx-arr .ic { width: 18px; height: 18px; }
.cx-u { margin-top: 44px; }
.cx-u ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 24px; margin-top: 14px; }
.cx-u li { display: grid; align-content: start; gap: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.cx-u b { font: 500 16px/1.3 var(--pop); letter-spacing: -.01em; }
.cx-u li span { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 900px) { .cx-u ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; } }
@media (max-width: 640px) {
  .cx-vs { grid-template-columns: minmax(0, 1fr); }
  .cx-vs > div { padding: 24px 22px 26px; }
  .cx-vs > div:last-of-type { padding: 30px 22px 26px; }
  .cx-arr { display: none; }
  .cx-u ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .cx-vs b { font-size: 18px; }
  .cx-u ul { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* ───────── sixth round (06.11.2026): the phone version ───────── */

/* icons inside the new markup */
.dc-l b, .dc-l em, .wdw-l b { display: flex; align-items: flex-start; gap: 10px; }
.dc-l b .ic, .dc-l em .ic, .wdw-l b .ic { flex: none; width: 18px; height: 18px; margin-top: .18em; padding: 3px; border-radius: 50%; box-sizing: content-box; stroke-width: 2.4; }
.dc-l b .ic { background: var(--g-50); color: var(--g-ink); }
.dc-l em .ic, .wdw-l b .ic { width: 12px; height: 12px; margin-top: .3em; padding: 4px; background: #F1F2F2; color: #9AA3A3; }
.tk-n { font: 500 13px/1 var(--pop); font-style: normal; letter-spacing: .02em; color: var(--g); }
.fl-x { display: none; }
.rv { display: none; }

@media (max-width: 700px) {
  /* what I designed: smaller titles, quieter lines, tighter rhythm */
  .scope { margin-top: 72px; }
  .sc-grid { gap: 30px; margin-top: 16px; }
  .sc-grid li { gap: 3px; }
  .sc-shot { margin-bottom: 10px; border-radius: 14px; box-shadow: 0 0 0 1px rgb(17 17 17 / .06), 0 14px 26px -20px rgb(17 17 17 / .35); }
  .sc-grid b { font-size: 17px; }
  .sc-grid li > span:last-child { font-size: 14px; color: var(--muted); }

  /* research: the laptop is too small to read, so each rule card shows its own part of the report at real size */
  #research .desk { display: none; }
  .rules { margin-top: 40px; gap: 12px; }
  .rules button, .rules button.on { box-shadow: 0 0 0 1px var(--line); transform: none; cursor: default; }
  .rules button.on .rn { background: #F1F1F1; color: var(--ink-2); }
  .rules .rv { display: block; grid-column: 1 / -1; margin-top: 14px; padding: 10px; border-radius: 16px; background: #F4F7F7; overflow: hidden; pointer-events: none; text-align: left; }
  .rv .bar i { transform: none !important; }
  .rv .card { box-shadow: 0 0 0 1px var(--ui-line), 0 6px 14px -10px rgb(17 17 17 / .2); }
  .rv .rep-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'id' 'val' 'btns'; gap: 10px; margin: 0; padding: 16px; border-radius: 16px; background: linear-gradient(160deg, var(--ui-brand-50), #F2FAF9); }
  .rv .rep-badge { display: none; }
  .rv .rep-name { font-size: 17px; }
  .rv .rep-meta { font-size: 11.5px; }
  .rv .rep-val { justify-self: start; text-align: left; }
  .rv .rep-val .num.xl { font-size: 34px; }
  .rv .rep-btns { justify-content: flex-start; flex-wrap: wrap; margin-top: 0; }
  .rv .rep-row { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
  .rv .rep-row .kpi:nth-child(-n+3) { display: none; }
  .rv .rep-row .kpi:nth-child(4) { border-left: 0; }
  .rv .rep-row .kpi { padding: 14px; }
  .rv .r2-head { padding: 14px 16px; }
  .rv .r2-row { margin: 0 16px; }
  .rv .r2-row:nth-child(n+4) { display: none; }
  .rv .r2-row:nth-child(3) { padding-bottom: 16px; }
  .rv .rec, .rv .ratios { padding: 16px; }
  .rv .rec p { font-size: 15px; }
  .rv .term { padding: 0 8px; }
  .rv .term .num { font-size: 18px; }

  /* ecosystem: calmer type and tighter gaps */
  .jr { margin-top: 36px; }
  .jr-stage { margin-top: 22px; }
  .jr-p { gap: 18px; }
  .jr-win { border-radius: 14px; }
  .jr-t h3 { font-size: 20px; }
  .jr-t p:not(.jr-k) { margin-top: 6px; font-size: 15px; }
  .jr-k { margin-top: 16px; }
  .jr-t .chips { gap: 6px; }
  .jr-t .chips li { padding: 5px 10px; font-size: 13px; }
  .jr-t .eco-link { margin-top: 14px; }

  /* flow: a vertical timeline; each branch sits under the step it leaves from */
  .fl { padding: 20px 18px 18px; }
  .fl-map { padding: 0; }
  .fl-path { gap: 0; }
  .fl-g { position: relative; gap: 0; padding: 0 0 6px 28px; }
  .fl-g::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: #DCE6E4; }
  .fl-g:first-child::before { top: 44px; }
  .fl-g:last-child::before { bottom: 30px; }
  .fl-k { padding: 16px 0 10px; }
  .fl-g:first-child .fl-k { padding-top: 0; }
  .fl-g ol { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fl-g ol li { display: block; min-height: 0; padding: 12px 14px; text-align: left; font-size: 15px; border-radius: 12px; }
  .fl-g ol li::before { display: none; }
  .fl-g ol li::after { content: ''; position: absolute; left: -25px; top: 17px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--g); }
  .fl-x { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: 13.5px; font-weight: 400; line-height: 1.45; color: var(--ink-2); }
  .fl-x b { font-weight: 600; color: var(--g-ink); }
  .fl-x .ic { width: 16px; height: 16px; margin-top: 1px; color: var(--g); }
  .fl-xg { margin: -2px 0 10px; }
  .fl-br { display: none; }
  .fl-ia { margin-top: 12px; }

  /* decisions: one card each, what shipped (✓) over what it replaced (✕) */
  .dc { margin-top: 56px; }
  .dc-l { display: grid; gap: 10px; border-top: 0; }
  .dc-l li { gap: 8px; padding: 18px 18px 20px; border: 0; border-radius: 18px; background: #F5F7F7; }
  .dc-l b { font-size: 16.5px; }
  .dc-l em { font-size: 14px; }
  .dc-l span { font-size: 14.5px; }

  /* AI: the eight set-up cards and what didn't work become swipeable rows; setup lists hide */
  .know, .wdw-l { display: flex; gap: 10px; margin-right: calc(-1 * var(--sh-pad, 24px)); padding: 2px var(--sh-pad, 24px) 12px 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .know::-webkit-scrollbar, .wdw-l::-webkit-scrollbar { display: none; }
  .know li, .wdw-l li { flex: none; width: 78%; scroll-snap-align: start; }
  .know-card { margin-right: 0; }
  .know { margin-right: -18px; padding-right: 18px; }
  .wdw-l li { padding: 16px 16px 18px; border: 0; border-radius: 18px; background: #F5F7F7; }
  .wdw-l b { font-size: 16px; }
  .wdw-l span { font-size: 14px; }
  .kn-flow { gap: 10px; }
  .flow li { padding: 7px 12px; font-size: 13.5px; }
  .flow-back { font-size: 13.5px; }
  .kn-tools { font-size: 13.5px; }
  .proof .ai-who { display: none; }

  /* outcome: shorter cards, the handoff list as label over line, takeaways as cards */
  .oc li { padding: 20px 18px 22px; }
  .oc-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; }
  .oc-list dd { font-size: 14.5px; }
  .tk-l { display: grid; gap: 10px; }
  .tk-l li { padding: 16px 16px 18px; border: 0; border-radius: 18px; background: #F5F7F7; }
  .tk-l b { font-size: 16px; }
  .tk-l span { font-size: 14px; }
}
/* phone screens are pictures of an app: no text selection, the inside scrolls with a finger or a mouse drag */
.ui.m { -webkit-user-select: none; user-select: none; }
.ui.m .m-body { -webkit-overflow-scrolling: touch; }   /* no touch-action limit: a sideways swipe on a phone still moves the row */
@media (max-width: 700px) {
  .fl-g ol li { justify-items: stretch; place-items: normal; }
  .proof-tabs { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .proof-tabs::-webkit-scrollbar { display: none; }
  .proof-tabs button { flex: none; padding: 8px 11px; font-size: 13px; }
  .proof-sum { font-size: 15px; }
}
@media (max-width: 700px) {
  .rv .r4-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv .term:first-child { display: none; }
  .rv .term:nth-child(2) { padding-left: 0; border-left: 0; }
}
/* a sideways swipe that starts on a phone screen passes on to the row of phones */
.ui.m .m-body { overflow-x: hidden; overscroll-behavior-x: auto; }
/* the report fragment on a phone: both buttons the same width */
@media (max-width: 700px) {
  .rv .rep-btns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rv .rep-btns .btn { justify-content: center; }
}
/* what I designed on a phone: each product is one card — the screenshot inset, then the name and the line under it */
@media (max-width: 700px) {
  .sc-k { margin-bottom: 2px; }
  .sc-grid { gap: 14px; margin-top: 14px; }
  .sc-grid li { gap: 4px; padding: 8px 8px 18px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 16px 30px -24px rgb(17 17 17 / .32); }
  .sc-shot { margin-bottom: 12px; border-radius: 15px; box-shadow: 0 0 0 1px rgb(17 17 17 / .06); }
  .sc-grid b, .sc-grid li > span:last-child { padding: 0 10px; }
  .sc-grid b { font-size: 17px; line-height: 1.3; }
  .sc-grid li > span:last-child { font-size: 14px; line-height: 1.45; color: var(--muted); }
  .scope .tl-facts { margin-top: 28px; }
}
/* the facts on a narrow phone: two even columns, a touch smaller, so "Product designer," fits */
@media (max-width: 400px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; } .facts dd { font-size: 15px; } }
/* what I designed: abstract images of the three products instead of the screenshots (Lev, 08.11.2026), drawn by scope.js.
   Without the script the class is never set and the screenshots stay. */
.sc-abs .sc-shot { position: relative; container-type: inline-size; background: #E3F3F1; box-shadow: 0 0 0 1px rgb(0 46 42 / .04), 0 22px 40px -26px rgb(0 46 42 / .4); }
.sc-abs .sc-shot img { display: none; }
.sc-ab { position: absolute; inset: 0; display: block; overflow: hidden; }
.sc-ab .f, .sc-ab .e { position: absolute; display: block; box-sizing: border-box; }
.sc-ab .f { overflow: hidden; background: #fff; border-radius: 2.4cqw; box-shadow: 0 2.6cqw 6cqw rgb(0 46 42 / .16), 0 .3cqw 1cqw rgb(0 46 42 / .08); will-change: transform, opacity; }
.sc-ab .e { opacity: 0; font-style: normal; will-change: transform, opacity; }
.sc-ab .card { box-shadow: 0 1cqw 2.4cqw rgb(0 46 42 / .12); }
.sc-ab .logo { background: url("img/cube.svg") center / contain no-repeat; }
.sc-ab .val { font: 600 1em/1 Inter, system-ui, sans-serif; letter-spacing: -.03em; color: #141414; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .sc-abs .sc-shot { box-shadow: none; } }

/* The last chapter gets the same space below as every chapter gets above, so the next-case block
   doesn't start right under the "How I'd measure it" chips (08.11.2026; the page used to end with .end-space) */
main > .sec:last-child { padding-bottom: 160px; }
@media (max-width: 700px) { main > .sec:last-child { padding-bottom: 112px; } }
/* the set-up cards on a phone slide out under the edges of their block on both sides, not into its inner padding
   (Lev, 08.11.2026); at rest the first card still lines up with the text */
@media (max-width: 700px) { .know { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; scroll-padding-inline: 18px; } }