/* ============================================================
   Case file: one decision on one paper sheet floating in the void.
   Part 1 is shared with the publication page (pub.html): the void, the way back, the sheet, the registers, the header plate,
   the side-heading sections, the sheet footer and the pager.
   Part 2 is the case sheet itself (.sheet.cv, 2026-10-14 v2): a reading width (880px) centred on the page, a type scale that reads
   at normal distance, the question and the answer on the first screen, every figure drawn from its own number, the moments as a
   reel of the session, voices as pull quotes. Part 3 opens the same sheet over the Use Cases page (case-overlay.js).
   ============================================================ */

/* ================= 1. shared with pub.html ================= */
.case-page{ --sheet:#FFFFFA; --ink:#0C0C0C; --ink-mid:#55524c; --ink-dim:#8c887f; --ink-hair:rgba(20,18,14,.12); --ink-wash:rgba(20,18,14,.045);
  --fig-l:clamp(44px, 2.4vw + 32px, 68px); --fig-m:clamp(22px, .8vw + 12px, 26px); --side:150px; --gapx:28px; --sec:16px;
  --s-h1:clamp(27px, .8vw + 22px, 34px); --s-stmt:clamp(19px, .45vw + 16px, 23px); --s-h2:17px; --s-h3:15px; --s-body:14.5px; --s-small:12.5px; --s-label:10.5px; }

.case-page .cf{ z-index:1; padding-top:72px; }
.cf{ position:relative; padding:2vh var(--edge) clamp(40px,6vh,72px); display:flex; flex-direction:column; align-items:center; gap:16px; }

/* the way back: slides in, then nudges toward the list while the reader is at the top */
.cf-back{ align-self:flex-start; display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:var(--t-ui); color:rgba(255,255,250,.8); transition:color .3s var(--ease); }
.cf-back svg{ width:14px; height:14px; transform:rotate(180deg); transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.cf-back:hover{ color:#fff; }
.cf-back:hover svg{ transform:translate(-6px,-6px) rotate(180deg); }
@media (prefers-reduced-motion:no-preference){
  .cf-back{ animation:backIn .6s cubic-bezier(.2,.7,.2,1) both; }
  .cf-back svg{ animation:arrowIn .6s cubic-bezier(.2,.7,.2,1) .2s both; }
  .cf-back.ready svg{ animation:none; }
  .cf-back.ready.nudge svg{ animation:arrowNudge 1.2s cubic-bezier(.3,.6,.2,1) both; }
  .cf-back.nudge span{ animation:textLift 1.2s ease both; }
  @keyframes backIn{ from{ opacity:0; transform:translateX(-22px); } to{ opacity:1; transform:none; } }
  @keyframes arrowIn{ from{ opacity:0; transform:translate(8px,8px) rotate(180deg); } to{ opacity:1; transform:rotate(180deg); } }
  @keyframes arrowNudge{ 0%{ transform:rotate(180deg); } 22%{ transform:translate(-3.5px,-3.5px) rotate(180deg); } 44%{ transform:rotate(180deg); } 66%{ transform:translate(-3.5px,-3.5px) rotate(180deg); } 100%{ transform:rotate(180deg); } }
  @keyframes textLift{ 0%{ color:rgba(255,255,250,.8); } 30%{ color:#fff; } 100%{ color:rgba(255,255,250,.8); } }
}

.sheet{ width:min(1180px,100%); background:var(--sheet); color:var(--ink); border-radius:6px; font-size:var(--s-body); line-height:1.5;
  box-shadow:0 1px 0 rgba(255,255,250,.5) inset, 0 70px 140px -50px rgba(0,0,0,1), 0 6px 26px rgba(0,0,0,.55);
  padding:clamp(20px,2.2vw,30px) clamp(20px,3.6vw,52px) clamp(18px,2vw,24px); display:grid; gap:0; }
.sheet[data-empty]{ min-height:60vh; }
.sheet :where(p,h1,h2,h3,h4,figure,ol,ul,blockquote,dl,dd){ margin:0; }

/* registers on paper */
.cs-label{ font-family:var(--mono); font-size:var(--s-label); letter-spacing:var(--ls-label); line-height:1.4; text-transform:uppercase; color:var(--ink-dim); display:flex; flex-wrap:wrap; gap:3px 12px; }
.cs-label b{ font-weight:400; color:var(--ink); }
.cs-label .cnt{ color:var(--ink-mid); }
.cs > h2{ font-size:var(--s-h2); letter-spacing:var(--ls-h3); line-height:1.3; font-weight:500; }

/* header with a plate on the right */
.cs-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,236px); gap:0 clamp(24px,3vw,48px); align-items:start; padding-bottom:var(--sec); }
.cs-head > *{ grid-column:1; }
.cs-head h1{ font-size:var(--s-h1); letter-spacing:var(--ls-h1); line-height:1.08; font-weight:500; max-width:26ch; text-wrap:balance; margin-top:10px; }
.cs-quiet{ font-size:var(--s-small); line-height:1.45; color:var(--ink-dim); display:flex; flex-wrap:wrap; gap:3px 10px; }
.cs-plate{ grid-column:2; grid-row:1 / span 4; display:grid; gap:8px; justify-items:end; align-content:start; }
.cs-plate .cs-quiet{ margin:0; justify-content:flex-end; text-align:right; }

/* a section: side heading + content */
.cs{ display:grid; grid-template-columns:var(--side) minmax(0,1fr); gap:8px var(--gapx); align-items:start; border-top:1px solid var(--ink-hair); padding:14px 0 var(--sec); }
.cs-body{ display:grid; gap:10px; min-width:0; }
.cs.wide{ grid-template-columns:1fr; gap:10px; }

/* sheet footer */
.cs-foot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 20px; border-top:1px solid var(--ink-hair); padding-top:12px; font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); }

/* pager in the void */
.cf-pager{ width:min(1180px,100%); display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:12px; align-items:stretch; }
.cf-pager a{ display:grid; gap:4px; align-content:center; padding:10px 16px; border-radius:12px; background:rgba(255,255,250,.055); min-width:0;
  box-shadow:inset 0 1px 0 rgba(255,255,250,.11), 0 40px 80px -36px rgba(0,0,0,.95); transition:background .25s var(--ease); }
.cf-pager a:hover{ background:rgba(255,255,250,.09); }
.cf-pager a.next{ text-align:right; }
.cf-pager a.all{ text-align:center; justify-items:center; background:rgba(255,255,250,.035); box-shadow:inset 0 1px 0 rgba(255,255,250,.07), 0 24px 56px -30px rgba(0,0,0,.9); }
.cf-pager span{ font-family:var(--mono); font-size:var(--s-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--fg-dim); }
.cf-pager strong{ font-weight:500; font-size:15px; letter-spacing:var(--ls-h3); line-height:1.3; }
.cf-pager a.all strong{ font-size:var(--t-ui); font-weight:400; color:var(--fg-mid); }

@media (max-width:860px){
  .case-page{ --side:auto; --sec:18px; --fig-l:48px; --fig-m:22px; --s-h1:26px; --s-stmt:19px; --s-h2:16px; }
  .sheet{ padding:18px 16px 22px; }
  .cs-head{ grid-template-columns:1fr; }
  .cs-plate{ grid-column:1; grid-row:auto; justify-items:start; margin-top:14px; }
  .cs-plate .cs-quiet{ justify-content:flex-start; text-align:left; }
  .cs,.cs.wide{ grid-template-columns:1fr; gap:8px; padding:12px 0 var(--sec); }
  .cf-pager{ grid-template-columns:1fr; gap:8px; } .cf-pager a.next{ text-align:left; } .cf-pager a.all{ order:3; }
}
@media (prefers-reduced-motion:no-preference){
  .sheet{ animation:sheetIn .9s var(--ease) both; }
  @keyframes sheetIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
}


/* ================= 2. the case sheet (v2) ================= */
/* the page: the sheet at a reading width in the middle, the way back on its left edge, the pager under it at the same width */
.uc-page .cf{ --cv-w:880px; }
.uc-page .cf-back{ margin-left:max(0px, calc((100% - var(--cv-w)) / 2)); }
.uc-page .cf-pager{ width:min(var(--cv-w),100%); }

.sheet.cv{
  --sheet:#FFFFFA; --ink:#0C0C0C; --ink-mid:#4f4c46; --ink-dim:#6f6a62;
  /* the client's palette (2026-10-15): case.js paint() sets --sheet, --ink, --ink-mid, --ink-dim, the accents and the band from the case's
     palette, each text pairing measured; everything below is derived from the ink and the paper, so hairlines, washes, chart tones and
     the plates beneath images follow a dark ground as well as a light one. Without paint() the sheet is Talp's paper and the industry ink. */
  --ink-hair:color-mix(in srgb, var(--ink) 13%, transparent); --ink-wash:color-mix(in srgb, var(--ink) 5%, transparent);
  --off:color-mix(in srgb, var(--ink) 11%, transparent); --mid:color-mix(in srgb, var(--ink) 36%, transparent);
  --t1:color-mix(in srgb, var(--ink) 64%, var(--sheet)); --t2:color-mix(in srgb, var(--ink) 32%, var(--sheet)); --t3:color-mix(in srgb, var(--ink) 14%, var(--sheet));
  --plate:color-mix(in srgb, var(--ink) 8%, var(--sheet));
  --acc-mark:var(--blue,#2a2bf2); --acc-ink:var(--blue,#2a2bf2); --on-acc:#FFFFFA;
  --band:var(--acc-mark); --on-band:#FFFFFA; --on-band-dim:#FFFFFA;
  --tint:color-mix(in srgb, var(--acc-mark) 7%, var(--sheet));
  --tint-2:color-mix(in srgb, var(--acc-mark) 13%, var(--sheet));
  --c-sans:'Satoshi',"Helvetica Neue",Helvetica,Arial,sans-serif;
  --c-lab:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --c-h1:clamp(28px, 1vw + 21px, 37px);
  --c-st:clamp(20px, .5vw + 16.5px, 25px);
  --c-body:16px; --c-small:14px; --c-tiny:12.5px;
  --c-big:clamp(54px, 2.4vw + 38px, 78px);
  --c-fig:clamp(28px, .8vw + 20px, 34px);
  width:min(880px,100%); font-family:var(--c-sans); font-size:var(--c-body); line-height:1.55; letter-spacing:0;
  padding:clamp(22px,3vw,40px) clamp(18px,4.4vw,48px) 20px; border-radius:10px; text-align:left; }
/* the paper in the client's colours: its ground, and the brand's accent as a thin edge along the top of the sheet (the same edge the
   case's cover carries on the Use Cases stack). A dark ground is lifted off the void by a
   faint rim; its scrollbars and form controls go dark with it. */
.sheet.cv{ background:linear-gradient(var(--band), var(--band)) top / 100% 5px no-repeat, var(--sheet); color:var(--ink); }
.sheet.cv[data-ground="dark"]{ color-scheme:dark;
  box-shadow:0 0 0 1px rgba(255,255,250,.09), 0 1px 0 rgba(255,255,250,.08) inset, 0 70px 140px -50px rgba(0,0,0,1), 0 6px 26px rgba(0,0,0,.55); }
.sheet.cv[data-ground="dark"] .cv-shot{ box-shadow:0 14px 28px -20px rgba(0,0,0,.9), 0 0 0 1px var(--ink-hair); }
/* resets at zero weight, so every rule below wins over them */
:where(.sheet.cv) *{ box-sizing:border-box; }
:where(.sheet.cv) :where(ol,ul){ padding:0; list-style:none; }
:where(.sheet.cv) img{ max-width:100%; }
:where(.sheet.cv) a{ color:inherit; }
:where(.sheet.cv) :where(i,em){ font-style:normal; }
.cv .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.cv-k{ font-family:var(--c-lab); font-size:11px; font-weight:400; letter-spacing:.08em; line-height:1.4; text-transform:uppercase; color:var(--ink-dim); }
.cv-k .cnt{ color:var(--ink-mid); margin-left:4px; }

/* ---------- 1. header: the question ---------- */
.cv-head{ display:grid; grid-template-columns:minmax(0,1fr) 196px; column-gap:clamp(20px,3vw,36px); align-items:start; padding-bottom:22px; }
.cv-head > *{ grid-column:1; }
.cv-eye{ font-family:var(--c-lab); font-size:11px; letter-spacing:.08em; line-height:1.4; text-transform:uppercase; color:var(--ink-dim); display:flex; flex-wrap:wrap; gap:2px 12px; }
.cv-eye b{ font-weight:400; color:var(--ink); }
/* no brand logo between the line and the title (2026-11-04): the title comes up a little further from the line instead */
.cv-head h1{ font-size:var(--c-h1); line-height:1.08; letter-spacing:-.03em; font-weight:500; margin-top:18px; max-width:20ch; text-wrap:balance; }
.cv-q{ margin-top:12px; font-size:17px; line-height:1.5; color:var(--ink-mid); max-width:54ch; text-wrap:pretty; }
.cv-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:16px; }
.cv-chip{ display:inline-flex; align-items:baseline; gap:7px; padding:5px 11px; border-radius:999px; background:var(--ink-wash); font-size:13px; line-height:1.35; color:var(--ink-mid); }
.cv-chip.pop b{ font-weight:500; color:var(--acc-ink); }
.cv-metaq{ align-self:center; font-size:13px; line-height:1.35; color:var(--ink-dim); padding:0 4px; }
.cv-photo{ grid-column:2; grid-row:1 / span 6; display:grid; gap:6px; }
.cv-photo img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; display:block; background:var(--plate); }
.cv-photo figcaption{ font-size:12.5px; line-height:1.4; color:var(--ink-dim); }

/* ---------- 2. summary: the figure drawn from its number, and the headline ---------- */
.cv-sum{ display:grid; grid-template-columns:auto auto minmax(0,1fr); grid-template-rows:auto 1fr; gap:10px clamp(18px,3vw,34px); align-items:center;
  padding:16px clamp(18px,2.6vw,28px) clamp(18px,2.4vw,24px); background:var(--band); color:var(--on-band); border-radius:12px; }
.cv-sum > .cv-k{ grid-column:1 / -1; color:var(--on-band-dim); }
.cv-fig b{ display:block; font-weight:300; font-size:var(--c-big); line-height:.92; letter-spacing:-.045em; color:var(--on-band); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cv-fig b small{ font-size:.34em; letter-spacing:-.01em; color:var(--on-band-dim); margin-left:3px; }
.cv-fig > span{ display:block; margin-top:8px; font-size:var(--c-small); line-height:1.35; color:var(--on-band-dim); max-width:17ch; }
.cv-vis{ display:grid; gap:6px; }
.cv-dots{ width:100px; height:100px; display:block; overflow:visible; }
.cv-dots circle.on{ fill:var(--on-band); }
.cv-dots circle.off{ fill:color-mix(in srgb, var(--on-band) 24%, transparent); }
.cv-meter{ display:grid; grid-template-columns:repeat(10,12px); gap:4px; }
.cv-meter i{ position:relative; display:block; height:30px; border-radius:3px; background:color-mix(in srgb, var(--on-band) 24%, transparent); overflow:hidden; }
.cv-meter i::before{ content:""; position:absolute; inset:0; background:var(--on-band); transform-origin:left; transform:scaleX(var(--f)); }
.cv-ends{ display:flex; justify-content:space-between; font-family:var(--c-lab); font-size:11px; color:var(--on-band-dim); }
.cv-headline{ font-size:var(--c-st); line-height:1.25; letter-spacing:-.02em; font-weight:500; max-width:30ch; text-wrap:pretty; }

/* ---------- sections ---------- */
.cv-sec{ padding:30px 0 6px; }
.cv-h{ display:flex; align-items:center; gap:10px; font-size:15px; line-height:1.3; font-weight:500; letter-spacing:-.01em; margin-bottom:14px; }
.cv-h::after{ content:""; flex:1; height:1px; background:var(--ink-hair); }
.cv-h .cnt{ font-family:var(--c-lab); font-size:11px; font-weight:400; color:var(--ink-dim); }

/* ---------- 3. findings: figure first ---------- */
.cv-find{ display:grid; }
.cv-find li{ display:grid; grid-template-columns:112px minmax(0,1fr); gap:4px clamp(16px,2.6vw,26px); align-items:start; padding:14px 0; border-top:1px solid var(--ink-hair); }
.cv-find li:first-child{ border-top:0; padding-top:2px; }
.cv-ff b{ display:block; font-weight:300; font-size:var(--c-fig); line-height:1; letter-spacing:-.035em; color:var(--acc-mark); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cv-ff b small{ font-size:.48em; letter-spacing:0; color:var(--ink-mid); margin-left:1px; }
.cv-ff .cv-bar{ margin-top:9px; }
.cv-ff.ord b{ font-family:var(--c-lab); font-size:12px; letter-spacing:.08em; color:var(--ink-dim); padding-top:6px; }
.cv-find p{ font-size:var(--c-body); line-height:1.5; max-width:60ch; }
.cv-find p b{ font-weight:500; color:var(--ink); }
.cv-find p span{ display:block; margin-top:3px; font-size:var(--c-small); line-height:1.5; color:var(--ink-dim); }

/* a thin bar: track and fill */
.cv-bar{ display:block; height:5px; border-radius:3px; background:var(--off); overflow:hidden; }
.cv-bar i{ display:block; height:100%; width:calc(var(--w) * 100%); border-radius:3px; background:var(--c, var(--acc-mark)); transform-origin:left; }

/* ---------- 4. results of the study: the question, then the move as its answer ---------- */
.cv-qa{ display:grid; gap:16px; }
.cv-qrow{ display:grid; grid-template-columns:32px minmax(0,1fr); gap:14px; align-items:start; }
.cv-badge{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:500; line-height:1; color:var(--ink-mid); box-shadow:inset 0 0 0 1px var(--ink-hair); }
.cv-badge.a{ background:var(--acc-mark); color:var(--on-acc); box-shadow:none; }
.cv-qtext{ font-size:var(--c-body); line-height:1.5; color:var(--ink-mid); padding-top:4px; max-width:60ch; }
.cv-ans{ font-size:var(--c-st); line-height:1.25; letter-spacing:-.02em; font-weight:500; padding-top:1px; max-width:34ch; text-wrap:pretty; }
.cv-then{ display:grid; gap:7px; margin-top:12px !important; }
.cv-then li{ position:relative; padding-left:22px; font-size:var(--c-body); line-height:1.5; max-width:60ch; }
.cv-then li::before{ content:""; position:absolute; left:1px; top:.74em; width:11px; height:2px; border-radius:1px; background:var(--acc-mark); }
.cv-next{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:14px 32px; margin-top:22px; padding-top:16px; border-top:1px solid var(--ink-hair); }
.cv-next > div{ display:grid; gap:4px; align-content:start; }
.cv-next p{ font-size:var(--c-small); line-height:1.5; color:var(--ink-mid); }
.cv-next a{ color:var(--acc-ink); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--acc-ink) 40%, transparent); text-underline-offset:2px; }

/* ---------- 5. evidence ---------- */
.cv-ev{ display:grid; gap:34px; }
.cv-sub{ display:grid; gap:12px; min-width:0; }
.cv-subh{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:400; min-height:30px; }

/* charts: up to two side by side; a long or wide one takes the row */
.cv-charts{ grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:30px 36px; align-items:start; }
.cv-chart{ display:grid; gap:12px; min-width:0; }
.cv-chart.full{ grid-column:1 / -1; }
.cv-chart figcaption{ display:grid; gap:3px; }
.cv-chart figcaption b{ font-size:var(--c-body); font-weight:500; line-height:1.35; letter-spacing:-.005em; }
.cv-note{ font-size:13px; line-height:1.5; color:var(--ink-dim); max-width:70ch; }
.cv-legend{ display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px; line-height:1.4; color:var(--ink-mid); }
.cv-legend i{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px; background:var(--c); }
.cv-legend i.dash{ height:3px; vertical-align:3px; background:repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 6px); }
.cv-legend .u{ color:var(--ink-dim); }
.cv-bars,.cv-stacks{ display:grid; gap:10px; }
.cv-br{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 12px; font-size:var(--c-small); line-height:1.3; color:var(--ink-mid); }
.cv-br .v{ font-variant-numeric:tabular-nums; color:var(--ink); }
.cv-br .v small{ color:var(--ink-dim); font-size:12px; }
.cv-br .cv-bar{ grid-column:1 / -1; height:7px; }
.cv-br .cv-bar i{ background:var(--mid); }
.cv-br.me{ color:var(--ink); font-weight:500; }
.cv-br.me .cv-bar i{ background:var(--acc-mark); }
.cv-chart.full .cv-bars{ gap:2px; }
.cv-chart.full .cv-br{ grid-template-columns:minmax(0,16em) minmax(0,1fr) 3.6em; column-gap:18px; align-items:center; min-height:30px; }
.cv-chart.full .cv-br .k{ grid-column:1; grid-row:1; }
.cv-chart.full .cv-br .cv-bar{ grid-column:2; grid-row:1; }
.cv-chart.full .cv-br .v{ grid-column:3; grid-row:1; text-align:right; }
.cv-pairs{ display:grid; gap:12px; }
.cv-pairs.many{ grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:12px 36px; }
.cv-pr{ display:grid; gap:4px; font-size:var(--c-small); line-height:1.3; }
.cv-pr .k{ color:var(--ink); }
.cv-pr .pp{ display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:10px; align-items:center; line-height:1; }
.cv-pr .cv-bar{ height:6px; }
.cv-pr .v{ font-size:12.5px; color:var(--ink-mid); font-variant-numeric:tabular-nums; text-align:right; }
.cv-dbs{ display:grid; gap:0; }
.cv-db{ display:grid; grid-template-columns:minmax(0,16em) minmax(0,1fr) 92px; gap:2px 18px; align-items:center; min-height:32px; padding:4px 10px; border-radius:6px; font-size:var(--c-small); line-height:1.3; color:var(--ink); }
.cv-db:nth-child(odd):not(.ax){ background:var(--ink-wash); }
.cv-db .tr{ position:relative; display:block; height:16px; }
.cv-db .tr::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--ink-hair); }
.cv-db .ln{ position:absolute; top:50%; height:3px; margin-top:-1.5px; border-radius:2px; background:var(--mid); opacity:.55; transform-origin:left; }
.cv-db i{ position:absolute; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; background:var(--c); box-shadow:0 0 0 2px var(--sheet); }
.cv-db i.acc{ z-index:1; }
.cv-db .v{ display:flex; justify-content:flex-end; gap:12px; font-size:12.5px; font-variant-numeric:tabular-nums; color:var(--ink-mid); }
.cv-db .v b{ font-weight:400; min-width:2.6em; text-align:right; }
.cv-db .v b.acc{ color:var(--acc-ink); font-weight:500; }
.cv-db.ax{ min-height:22px; padding-top:2px; }
.cv-db.ax .tr::before{ display:none; }
.cv-db.ax .tr{ display:flex; justify-content:space-between; font-family:var(--c-lab); font-size:11px; color:var(--ink-dim); height:auto; }
.cv-st{ display:grid; gap:5px; font-size:var(--c-small); line-height:1.3; }
.cv-st .k{ color:var(--ink); }
.cv-st .k small{ color:var(--ink-dim); font-size:12.5px; margin-left:4px; }
.cv-st .track{ display:flex; gap:2px; height:26px; border-radius:4px; overflow:hidden; }
.cv-st .track i{ position:relative; flex:0 0 auto; width:calc(var(--w) * 100% - 2px); min-width:2px; background:var(--c); display:flex; align-items:center; padding-left:8px; transform-origin:left; }
.cv-st .track i:first-child{ border-radius:4px 0 0 4px; }
.cv-st .track span{ font-size:12px; font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap; }
.cv-st .track i.dk span{ color:var(--sheet); }
.cv-st .track i.ac span{ color:var(--on-acc); }
.cv-curve{ overflow-x:auto; overscroll-behavior-x:contain; }
.cv-curve svg{ width:100%; min-width:560px; height:auto; display:block; font-family:var(--c-lab); }
.cv-curve text{ fill:var(--ink-dim); font-size:19px; }
.cv-curve .mkt{ fill:var(--ink-mid); }
.cv-curve .ax{ stroke:var(--ink-hair); }
.cv-curve .mk{ stroke:color-mix(in srgb, var(--ink) 30%, transparent); stroke-dasharray:3 5; }

/* said and did: two bars on one scale */
.cv-saydo .sd{ display:grid; grid-template-columns:44px auto minmax(0,1fr); grid-template-areas:"tag n bar" "tag cap cap"; gap:2px 14px; align-items:center; }
.cv-saydo .tag{ grid-area:tag; align-self:start; margin-top:8px; font-family:var(--c-lab); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); }
.cv-saydo .n{ grid-area:n; font-weight:300; font-size:var(--c-fig); line-height:1.1; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.cv-saydo .cv-bar{ grid-area:bar; height:8px; }
.cv-saydo .said .cv-bar i{ background:var(--mid); }
.cv-saydo .did .n{ color:var(--acc-mark); }
.cv-saydo .cap{ grid-area:cap; font-size:13px; line-height:1.4; color:var(--ink-mid); }

/* creatives: what was tested */
.cv-crs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr)); gap:20px 18px; }
.cv-crs.n2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.cv-crs.n1{ grid-template-columns:minmax(0,420px); }
.cv-cr{ display:grid; gap:10px; align-content:start; min-width:0; }
.cv-cr-frames{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
.cv-cr-frames[data-n="1"]{ grid-template-columns:1fr; }
.cv-cr-frames[data-n="2"]{ grid-template-columns:1fr 1fr; }
.cv-cr-frames img{ width:100%; aspect-ratio:9/16; object-fit:cover; border-radius:4px; background:var(--plate); display:block; }
.cv-cr-frames.square{ grid-template-columns:1fr 1fr; }
.cv-cr-frames.square img{ aspect-ratio:1/1; }
.cv-cr-frames.square img:nth-child(n+3){ display:none; }
.cv-cr-frames.wide{ grid-template-columns:1fr; }
.cv-cr-frames.wide img{ aspect-ratio:16/9; border-radius:6px; }
.cv-cr-frames.wide img:not(:first-child){ display:none; }
.cv-cr figcaption{ display:grid; gap:4px; }
.cv-cr-name{ display:flex; gap:8px; align-items:baseline; font-size:var(--c-small); line-height:1.35; }
.cv-cr-name b{ font-weight:500; }
.cv-id{ flex:none; display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:var(--ink-wash); font-size:11px; font-weight:500; color:var(--ink-mid); transform:translateY(-1px); }
.cv-cr-score{ display:flex; align-items:baseline; gap:8px; }
.cv-cr-score b{ font-weight:300; font-size:26px; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--ink); }
.cv-cr-score span{ font-family:var(--c-lab); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--acc-ink); }
.cv-cr.top .cv-cr-score b{ color:var(--acc-mark); }
.cv-cr.top .cv-id{ background:var(--acc-mark); color:var(--on-acc); }
.cv-cr-more{ font-size:12.5px; line-height:1.45; color:var(--ink-dim); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* moments: a reel of the session. Ticks on a timeline, the screen, the persona's thought as a bubble, who thought it */
.cv-reel-nav{ display:flex; gap:6px; }
.cv-reel-nav button{ width:32px; height:32px; border-radius:50%; border:0; display:grid; place-items:center; cursor:pointer; color:var(--ink); background:transparent;
  box-shadow:inset 0 0 0 1px var(--ink-hair); transition:background .2s, box-shadow .2s, opacity .2s; }
.cv-reel-nav button svg{ width:14px; height:14px; }
.cv-reel-nav button:hover:not(:disabled){ background:var(--ink-wash); box-shadow:inset 0 0 0 1px var(--mid); }
.cv-reel-nav button:disabled{ opacity:.3; cursor:default; }
.cv-sub.fits .cv-reel-nav{ visibility:hidden; }
.cv-reel-wrap{ position:relative; min-width:0; }
.cv-reel{ display:flex; gap:20px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; padding:2px 2px 12px; scrollbar-width:thin; scrollbar-color:var(--off) transparent; outline:none; }
.cv-reel:focus-visible{ box-shadow:0 0 0 2px var(--acc-mark); border-radius:6px; }
.cv-reel-wrap:not(.at-end) .cv-reel{ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent); }
.cv-reel-wrap:not(.at-end):not(.at-start) .cv-reel{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 64px),transparent); mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 64px),transparent); }
.cv-reel-wrap.at-end:not(.at-start) .cv-reel{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px); mask-image:linear-gradient(90deg,transparent,#000 40px); }
.cv-fr{ flex:0 0 284px; scroll-snap-align:start; display:grid; grid-template-rows:auto auto auto 1fr; gap:10px; align-content:start; min-width:0; }
.cv-fr.tall{ flex-basis:204px; }
.cv-fr.square{ flex-basis:240px; }
.cv-fr.square .cv-shot{ aspect-ratio:1/1; }
.cv-tick{ position:relative; display:flex; align-items:center; height:16px; }
.cv-tick::before{ content:""; position:absolute; left:0; right:-20px; top:50%; height:1px; background:var(--ink-hair); }
.cv-fr:last-child .cv-tick::before{ right:0; }
.cv-tick span{ position:relative; display:inline-flex; align-items:center; gap:8px; padding-right:10px; background:var(--sheet); font-family:var(--c-lab); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mid); font-variant-numeric:tabular-nums; }
.cv-tick span::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--acc-mark); box-shadow:0 0 0 3px var(--tint-2); }
.cv-shot{ display:block; border-radius:8px; overflow:hidden; background:var(--plate); aspect-ratio:16/10; box-shadow:0 14px 28px -20px rgba(20,18,14,.55), 0 0 0 1px var(--ink-hair); }
.cv-fr.tall .cv-shot{ aspect-ratio:9/16; }
.cv-shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform .6s var(--ease,ease); }
.cv-shot:hover img{ transform:scale(1.03); }
.cv-thought{ position:relative; margin-top:4px !important; padding:10px 13px 11px; border-radius:4px 14px 14px 14px; background:var(--tint); font-size:15px; line-height:1.45; color:var(--ink); }
.cv-thought::before{ content:""; position:absolute; left:0; top:-7px; border:7px solid transparent; border-left-color:var(--tint); border-bottom-color:var(--tint); border-width:0 0 7px 10px; }
.cv-who{ display:flex; align-items:center; gap:8px; font-size:12.5px; line-height:1.35; color:var(--ink-dim); }
.cv-who img{ width:26px; height:26px; border-radius:50%; object-fit:cover; flex:none; background:var(--ink-wash); }
.cv-who b{ font-weight:500; color:var(--ink); margin-right:3px; }

/* voices: pull quotes with the persona's face */
.cv-voices{ columns:2 300px; column-gap:24px; }
.cv-vo{ break-inside:avoid; display:grid; grid-template-columns:36px minmax(0,1fr); grid-template-areas:"av q" ". c"; gap:4px 10px; margin:0 0 18px !important; }
.cv-vo > img,.cv-vo > .ph{ grid-area:av; align-self:end; width:36px; height:36px; border-radius:50%; object-fit:cover; background:var(--ink-wash); display:block; }
.cv-vo blockquote{ grid-area:q; padding:11px 14px 12px; border-radius:16px 16px 16px 4px; background:var(--ink-wash); font-size:15.5px; line-height:1.45; letter-spacing:-.005em; color:var(--ink); }
.cv-vo.t blockquote{ background:var(--tint); }
.cv-vo blockquote::before{ content:"\201C"; } .cv-vo blockquote::after{ content:"\201D"; }
.cv-vo .en{ display:block; margin-top:6px; font-size:13px; color:var(--ink-mid); }
.cv-vo figcaption{ grid-area:c; padding-left:4px; font-size:12.5px; line-height:1.4; color:var(--ink-dim); }
.cv-vo figcaption b{ font-weight:500; color:var(--ink); margin-right:3px; }
/* a simulated persona says so (2026-11-04): beside each voice, and once over the moments, in the quietest ink */
.cv-sim{ white-space:nowrap; }
.cv-sim::before{ content:"\00B7"; margin:0 6px 0 5px; }
.cv-sim-k{ margin-left:10px; text-transform:none; letter-spacing:0; font-size:12.5px; }
.cv-sim-k::before{ content:"\00B7"; margin-right:10px; }

/* ---------- 6. about this study, folded ---------- */
.cv-about{ margin-top:30px; border-top:1px solid var(--ink-hair); }
.cv-about summary{ list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding:14px 0; font-size:15px; font-weight:500; }
.cv-about summary::-webkit-details-marker{ display:none; }
.cv-about summary::before{ content:"+"; display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; box-shadow:inset 0 0 0 1px var(--ink-hair); font-size:14px; font-weight:400; color:var(--ink-mid); transform:translateY(3px); transition:transform .3s var(--ease,ease); }
.cv-about[open] summary::before{ transform:translateY(3px) rotate(45deg); }
.cv-about summary span{ font-size:13px; font-weight:400; color:var(--ink-dim); }
.cv-about summary:hover::before{ box-shadow:inset 0 0 0 1px var(--mid); }
.cv-about dl{ display:grid; gap:12px; padding:0 0 18px 32px; }
.cv-about dl > div{ display:grid; grid-template-columns:110px minmax(0,1fr); gap:4px 18px; }
.cv-about dt{ font-family:var(--c-lab); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); padding-top:3px; }
.cv-about dd{ font-size:var(--c-small); line-height:1.5; color:var(--ink-mid); max-width:64ch; }
.cv-about dd b{ font-weight:500; color:var(--acc-ink); }
.cv-about dd span{ display:block; margin-top:4px; font-size:13px; color:var(--ink-dim); }
.sheet.cv .cs-foot{ margin-top:0; font-family:var(--c-lab); font-size:10.5px; }
/* the small print (2026-11-04): how Talp stands to the company, and the way to have something corrected; low on the sheet, small,
   in the quietest ink, above the footer's hairline */
.cv-legal{ display:grid; gap:4px; padding:4px 0 16px; font-size:12.5px; line-height:1.5; color:var(--ink-dim); max-width:560px; }
.cv-legal p{ max-width:none; text-wrap:balance; }
.cv-legal a{ text-decoration:underline; text-decoration-color:var(--ink-hair); text-underline-offset:2px; }
.cv-legal a:hover{ color:var(--ink-mid); }

/* ---------- arrival: figures draw as they come into view (script adds .in; without script or with reduced motion they simply stand) ---------- */
.cv-js .pg .cv-bar i{ transition:transform 1.1s cubic-bezier(.16,1,.3,1) .1s; }
.cv-js .pg .cv-st .track i{ transition:transform 1s cubic-bezier(.16,1,.3,1) .1s; }
.cv-js .pg .cv-dots circle.on{ transition:opacity .45s ease calc(var(--i) * 9ms); }
.cv-js .pg .cv-meter i::before{ transition:transform .5s cubic-bezier(.16,1,.3,1) calc(var(--i) * 70ms); }
.cv-js .pg:not(.in) .cv-bar i,.cv-js .pg:not(.in) .cv-st .track i{ transform:scaleX(0); }
.cv-js .pg:not(.in) .cv-dots circle.on{ opacity:.16; }
.cv-js .pg:not(.in) .cv-meter i::before{ transform:scaleX(0); }
.cv-js .pg .cv-db i{ transition:left 1.1s cubic-bezier(.16,1,.3,1) .1s; }
.cv-js .pg .cv-db .ln{ transition:transform .8s cubic-bezier(.16,1,.3,1) .5s; }
.cv-js .pg:not(.in) .cv-db i{ left:0 !important; }
.cv-js .pg:not(.in) .cv-db .ln{ transform:scaleX(0); }

@media (prefers-reduced-motion:reduce){
  .cv-shot img,.cv-about summary::before{ transition:none; }
  .cv-shot:hover img{ transform:none; }
  .cv-reel{ scroll-behavior:auto; }
}

/* ---------- narrow screens ---------- */
@media (max-width:720px){
  .sheet.cv{ --c-h1:27px; --c-st:20px; --c-big:58px; --c-fig:28px; padding:20px 16px 18px; border-radius:8px; }
  .cv-head{ grid-template-columns:minmax(0,1fr); padding-bottom:18px; }
  .cv-photo{ display:none; }
  .cv-q{ font-size:16px; }
  .cv-sum{ grid-template-columns:minmax(0,1fr) auto; padding:14px 16px 18px; gap:10px 16px; }
  .cv-sum .cv-headline{ grid-column:1 / -1; }
  .cv-dots{ width:84px; height:84px; }
  .cv-meter{ grid-template-columns:repeat(10,9px); gap:3px; } .cv-meter i{ height:24px; }
  .cv-sec{ padding-top:26px; }
  .cv-find li{ grid-template-columns:78px minmax(0,1fr); gap:4px 14px; }
  .cv-qrow{ grid-template-columns:28px minmax(0,1fr); gap:12px; }
  .cv-badge{ width:26px; height:26px; font-size:12px; }
  .cv-reel{ margin:0 -16px; padding:2px 16px 12px; scroll-padding:0 16px; }
  .cv-reel-wrap:not(.at-end) .cv-reel,.cv-reel-wrap:not(.at-end):not(.at-start) .cv-reel,.cv-reel-wrap.at-end:not(.at-start) .cv-reel{ -webkit-mask-image:none; mask-image:none; }
  .cv-fr{ flex-basis:236px; } .cv-fr.tall{ flex-basis:188px; } .cv-fr.square{ flex-basis:210px; }
  .cv-crs{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 14px; }
  .cv-crs.n1{ grid-template-columns:1fr; }
  .cv-crs.n2{ grid-template-columns:1fr; }
  .cv-voices{ columns:1; }
  .cv-chart.full .cv-bars{ gap:10px; }
  .cv-chart.full .cv-br{ grid-template-columns:minmax(0,1fr) auto; min-height:0; }
  .cv-chart.full .cv-br .cv-bar{ grid-column:1 / -1; grid-row:2; }
  .cv-chart.full .cv-br .v{ grid-column:2; }
  .cv-db{ grid-template-columns:minmax(0,1fr) 84px; padding:6px 8px; }
  .cv-db .k{ grid-column:1 / -1; }
  .cv-db.ax .k{ display:none; }
  .cv-about dl{ padding-left:0; }
  .cv-about dl > div{ grid-template-columns:1fr; gap:2px; }
}


/* ================= 3. the same sheet over the Use Cases page (case-overlay.js) ================= */
.cv-ov{ position:fixed; inset:0; z-index:1000; visibility:hidden; pointer-events:none; color-scheme:light; }
.cv-ov.open{ visibility:visible; pointer-events:auto; }
.cv-ov-scrim{ position:absolute; inset:0; background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(16px) saturate(.85); backdrop-filter:blur(16px) saturate(.85); opacity:0; transition:opacity .4s cubic-bezier(.22,1,.36,1); }
.cv-ov.open .cv-ov-scrim{ opacity:1; }
.cv-ov-scroll{ position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; padding:clamp(36px,7vh,72px) 16px 56px; display:flex; flex-direction:column; align-items:center; gap:14px; outline:none; }
.cv-ov .sheet.cv{ flex:none; animation:none; opacity:0; transform:translateY(36px) scale(.985); transform-origin:50% 0; transition:opacity .4s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.cv-ov.open .sheet.cv{ opacity:1; transform:none; }
.cv-ov .cf-pager{ flex:none; width:min(880px,100%); opacity:0; transition:opacity .4s ease .2s; font-family:'Satoshi',"Helvetica Neue",Helvetica,Arial,sans-serif; color:#f3f3f1; }
.cv-ov.open .cf-pager{ opacity:1; }
.cv-ov .cf-pager span{ font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:10.5px; letter-spacing:.08em; color:#8a8a87; }
.cv-ov .cf-pager strong{ letter-spacing:-.015em; }
.cv-ov .cf-pager a.all strong{ font-size:13.5px; color:#a7a7a4; }
.cv-ov-close{ position:fixed; z-index:3; top:16px; right:16px; width:44px; height:44px; border:0; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  color:#f3f3f1; background:rgba(255,255,250,.12); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; transition:opacity .3s ease, background .2s ease; }
.cv-ov.open .cv-ov-close{ opacity:1; }
.cv-ov-close:hover{ background:rgba(255,255,250,.22); }
.cv-ov-close:focus-visible{ outline:2px solid #f3f3f1; outline-offset:2px; }
.cv-ov-close svg{ width:16px; height:16px; }
html.cv-lock,html.cv-lock body{ overflow:hidden; }
@media (max-width:720px){
  .cv-ov-scroll{ padding:68px 10px 40px; }
  .cv-ov-close{ top:12px; right:12px; width:40px; height:40px; }
  .cv-ov .cf-pager{ grid-template-columns:1fr; gap:8px; }
  .cv-ov .cf-pager a.next{ text-align:left; } .cv-ov .cf-pager a.all{ order:3; }
}
@media (prefers-reduced-motion:reduce){
  .cv-ov-scrim,.cv-ov .sheet.cv,.cv-ov .cf-pager,.cv-ov-close{ transition:none; }
  .cv-ov .sheet.cv{ transform:none; }
}