/* ============================================================
   case2.css: the shared frame for the REDESIGNED case studies
   (2026-10-11, first used by case-studies/xymbia-marketplace.html).
   Loaded after case.css; a redesigned page adds class "cs2" on <body>
   and keeps its accent class (case--xymbia etc.), which sets --case,
   --case-tint, --case-text. Every colour comes from colors.css.
   Rules (Arwa): balanced and premium; screens never scattered (same
   frames, same sizes, neat rows); no numbers; no draft tags.
   Each page keeps its own middle; this file gives the shared pieces.
   ============================================================ */
.cs2{ --cs2-w:1180px; }
.cs2-wrap{ max-width:var(--cs2-w); margin:0 auto; padding:0 var(--gutter); }

/* ---- hero ---- */
.cs2-hero{ padding:clamp(112px,12vw,156px) 0 0; }
.cs2-kicker{ display:flex; align-items:center; gap:.7em; font-size:13px; font-weight:500; color:var(--case-text); }
.cs2-kicker span{ display:inline-flex; align-items:center; gap:.7em; }
.cs2-kicker span::after{ content:""; width:22px; height:1px; background:currentColor; opacity:.6; }
.cs2-title{ margin:16px 0 18px; max-width:15ch; font-size:clamp(38px,5.4vw,76px); font-weight:500;
  letter-spacing:-.045em; line-height:1.02; text-wrap:balance; }
.cs2-title .hl{ color:var(--case-text); }
.cs2-lead{ max-width:40em; font-size:clamp(17px,1.5vw,21px); line-height:1.5; color:var(--ink-dim); text-wrap:pretty; }
.cs2-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:22px; padding:0; list-style:none; }
.cs2-chips li{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
  font-size:13px; font-weight:500; color:var(--ink); border:1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.cs2-chips .is-role{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.cs2-chips .is-role::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--case); }
.cs2-cover{ margin-top:clamp(32px,4vw,52px); border-radius:24px; overflow:hidden; aspect-ratio:2000/1131; background:var(--case-tint); }
.cs2-cover img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- snapshot strip: words only ---- */
.cs2-snap{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); margin-top:clamp(28px,3vw,40px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.cs2-snap > div{ padding:18px 22px 20px 0; }
.cs2-snap > div + div{ padding-left:22px; border-left:1px solid var(--line); }
.cs2-snap dt{ font-size:13px; color:var(--ink-faint); margin-bottom:6px; }
.cs2-snap dd{ margin:0; font-size:15px; line-height:1.45; color:var(--ink); }

/* ---- on this page ---- */
.cs2-toc{ display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:22px; padding:0; list-style:none; font-size:14px; }
.cs2-toc a{ color:var(--ink-faint); text-decoration:none; transition:color .2s; }
.cs2-toc a:hover, .cs2-toc a[aria-current="true"]{ color:var(--case-text); }

/* ---- sections ---- */
.cs2-sec{ padding-top:clamp(80px,10vw,140px); scroll-margin-top:90px; }
.cs2-head{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,5vw,72px); align-items:end; }
.cs2-num{ display:block; margin-bottom:12px; font-size:13px; font-weight:500; color:var(--case-text); }
.cs2-h2{ font-size:clamp(28px,3.2vw,46px); font-weight:500; letter-spacing:-.035em; line-height:1.06; text-wrap:balance; }
.cs2-p{ font-size:clamp(16px,1.25vw,18px); line-height:1.6; color:var(--ink-dim); text-wrap:pretty; }
.cs2-p + .cs2-p{ margin-top:14px; }
.cs2-h3{ font-size:clamp(19px,1.6vw,23px); font-weight:500; letter-spacing:-.02em; line-height:1.2; margin-bottom:10px; }
.cs2-small{ margin-top:14px; font-size:13px; color:var(--ink-faint); }

/* text + visual, always text left (5) and visual right (7) */
.cs2-split{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,72px);
  align-items:center; margin-top:clamp(40px,5vw,64px); }
/* the soft tinted stage every visual sits on */
.cs2-panel{ background:var(--case-tint); border-radius:24px; padding:clamp(24px,4vw,52px); }
.cs2-panel--wide{ margin-top:clamp(40px,5vw,64px); }
.cs2-panel img.cs2-img{ display:block; width:100%; height:auto; border-radius:12px; }
.cs2-cap{ margin-top:14px; font-size:13px; color:var(--ink-faint); text-align:center; }

/* phones: one frame size everywhere; tall screens are cropped from the top */
.cs2-dev{ position:relative; aspect-ratio:440/956; border-radius:24px; overflow:hidden; background:var(--surface);
  border:6px solid var(--ink); box-shadow:0 18px 40px -22px rgba(17,17,17,.5); }
.cs2-dev img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.cs2-phones{ display:flex; justify-content:center; align-items:flex-start; gap:clamp(14px,2.4vw,32px); }
.cs2-phones .cs2-dev{ width:clamp(150px,16vw,230px); }

/* a neat row of screens with names under them */
.cs2-row{ display:grid; grid-template-columns:repeat(var(--n,6), minmax(0,1fr)); gap:clamp(12px,1.6vw,22px); margin:0; padding:0; list-style:none; }
.cs2-row figcaption, .cs2-row .cs2-name{ display:block; margin-top:10px; font-size:13px; font-weight:500; color:var(--ink); text-align:center; }

/* quotes */
.cs2-quotes{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(14px,2vw,24px); margin-top:clamp(40px,5vw,64px); }
.cs2-quote{ margin:0; padding:26px 24px 22px; border-radius:20px; background:var(--surface);
  border:1px solid color-mix(in srgb, var(--ink) 8%, transparent); display:flex; flex-direction:column; justify-content:space-between; gap:18px; }
.cs2-quote blockquote{ margin:0; font-size:clamp(17px,1.35vw,20px); line-height:1.4; letter-spacing:-.01em; color:var(--ink); }
.cs2-quote blockquote::before{ content:"\201C"; display:block; font-size:44px; line-height:.6; color:var(--case); margin-bottom:10px; }
.cs2-quote figcaption{ font-size:13px; color:var(--ink-faint); }

/* people cards */
.cs2-people{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(12px,1.6vw,20px); margin-top:clamp(40px,5vw,64px); }
.cs2-person{ padding:24px 22px; border-radius:20px; background:var(--surface); border:1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.cs2-mono{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; margin-bottom:16px;
  background:var(--case-tint); color:var(--case-text); font-weight:600; }
.cs2-person h3{ font-size:20px; font-weight:500; letter-spacing:-.02em; margin-bottom:8px; }
.cs2-person p{ font-size:14.5px; line-height:1.5; color:var(--ink-dim); }
.cs2-person .cs2-need{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); color:var(--ink); }
.cs2-person .cs2-need b{ display:block; font-size:12px; font-weight:500; color:var(--ink-faint); margin-bottom:4px; }

/* plain ruled lists */
.cs2-list{ margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.cs2-list li{ padding:14px 0; border-bottom:1px solid var(--line); font-size:15.5px; line-height:1.5; color:var(--ink-dim); }
.cs2-list li b{ color:var(--ink); font-weight:500; }
.cs2-two{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(28px,5vw,72px); margin-top:clamp(40px,5vw,64px); }

/* findings from testing: image stage on top, words below */
.cs2-findings{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(14px,2vw,24px); margin-top:clamp(40px,5vw,64px); }
.cs2-finding{ border-radius:24px; overflow:hidden; background:var(--surface); border:1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.cs2-finding-art{ display:flex; justify-content:center; align-items:flex-start; gap:14px; height:300px; overflow:hidden;
  padding:28px 24px 0; background:var(--case-tint); }
.cs2-finding-art .cs2-dev{ width:150px; flex:none; border-bottom-left-radius:0; border-bottom-right-radius:0; }
.cs2-finding-body{ padding:24px 26px 26px; }
.cs2-finding-body h3{ font-size:20px; font-weight:500; letter-spacing:-.02em; line-height:1.25; margin-bottom:8px; }
.cs2-finding-body p{ font-size:15px; line-height:1.55; color:var(--ink-dim); }
.cs2-finding-body blockquote{ margin:14px 0 0; padding-left:14px; border-left:2px solid var(--case); font-size:15px; line-height:1.5; color:var(--ink); }
.cs2-fix{ margin-top:16px; padding:14px 16px; border-radius:14px; background:var(--case-tint); font-size:14px; line-height:1.5; color:var(--ink); }
.cs2-fix b{ display:block; font-size:12px; font-weight:500; color:var(--case-text); margin-bottom:4px; }

/* closing statement */
.cs2-statement{ margin-top:clamp(36px,4vw,56px); padding:clamp(32px,5vw,64px); border-radius:28px; background:var(--case-tint); }
.cs2-statement p{ max-width:22ch; font-size:clamp(26px,3vw,42px); font-weight:500; letter-spacing:-.035em; line-height:1.12; color:var(--ink); }
.cs2-statement span{ display:block; margin-bottom:16px; font-size:13px; font-weight:500; color:var(--case-text); }

/* next case study: the same cover as on the homepage */
.cs2-next{ position:relative; display:block; margin-top:clamp(80px,10vw,140px); border-radius:28px; overflow:hidden;
  aspect-ratio:2000/1131; color:var(--ink); text-decoration:none; background:var(--next-tint, var(--case-tint)); }
.cs2-next img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.22,1,.36,1); }
.cs2-next:hover img{ transform:scale(1.02); }
.cs2-next::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to right, color-mix(in srgb, var(--next-tint) 96%, transparent) 0%, color-mix(in srgb, var(--next-tint) 88%, transparent) 28%, transparent 52%); }
.cs2-next-text{ position:absolute; z-index:2; left:clamp(24px,4vw,56px); bottom:clamp(24px,4vw,56px); max-width:min(42%, 420px); }
.cs2-next-text .cs2-kicker{ color:var(--next-ink); }
.cs2-next-title{ margin:12px 0 10px; font-size:clamp(32px,4vw,56px); font-weight:500; letter-spacing:-.04em; line-height:1; color:var(--next-ink); }
.cs2-next-text p{ font-size:16px; line-height:1.5; color:var(--ink); margin-bottom:20px; }
.cs2-next-btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border-radius:999px; background:var(--ink); color:var(--bg); font-size:14px; font-weight:500; }
.cs2-end{ display:flex; justify-content:center; padding:clamp(40px,5vw,64px) 0 clamp(64px,8vw,110px); }
.cs2-end a{ font-size:14px; color:var(--ink-dim); }

/* the click-through prototype from case.css sits on the same stage */
.cs2 .ct{ margin-top:clamp(40px,5vw,64px); border-radius:24px; }

/* ---- smaller screens ---- */
@media (max-width:960px){
  .cs2-head, .cs2-split, .cs2-two{ grid-template-columns:1fr; }
  .cs2-quotes{ grid-template-columns:1fr; }
  .cs2-people{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cs2-findings{ grid-template-columns:1fr; }
  .cs2-snap{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cs2-snap > div:nth-child(3){ padding-left:0; border-left:0; }
  .cs2-row{ grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:42%; overflow-x:auto; padding-bottom:12px; scroll-snap-type:x mandatory; }
  .cs2-row > *{ scroll-snap-align:start; }
  .cs2-next{ aspect-ratio:auto; display:flex; flex-direction:column; }
  .cs2-next img{ position:relative; aspect-ratio:2000/1131; height:auto; }
  .cs2-next::before{ display:none; }
  .cs2-next-text{ position:static; max-width:none; padding:22px; }
}
@media (max-width:560px){
  .cs2-people{ grid-template-columns:1fr; }
  .cs2-snap{ grid-template-columns:1fr; }
  .cs2-snap > div + div{ padding-left:0; border-left:0; border-top:1px solid var(--line); }
}

/* CGIAR prototype: before the first tap the chat is empty, so it says what to do */
.cs2 .phone-body:empty{ display:flex; align-items:center; justify-content:center; }
.cs2 .phone-body:empty::before{ content:"Tap the farmer's question below to start the conversation"; max-width:16em;
  text-align:center; font-size:13px; line-height:1.5; color:var(--ink-faint); }

/* ---- Xymbia personas: the FigJam card layout, one persona at a time ---- */
.pt-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:clamp(20px,3vw,32px); }
.pt{ display:inline-flex; align-items:center; gap:10px; padding:6px 16px 6px 6px; border-radius:999px; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--ink) 12%, transparent); background:var(--surface); color:var(--ink);
  font:inherit; font-size:14px; font-weight:500; transition:background .2s, color .2s, border-color .2s; }
.pt img{ width:32px; height:32px; border-radius:50%; object-fit:cover; }
.pt[aria-selected="true"]{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.pc{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; max-width:980px; margin:0 auto; }
.pc[hidden]{ display:none; }
.pc-col{ display:flex; flex-direction:column; gap:14px; }
.pc-box{ padding:20px 22px; border-radius:14px; background:var(--surface); border:1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.pc-box h3{ font-size:clamp(24px,2.4vw,32px); font-weight:600; letter-spacing:-.03em; margin-bottom:10px; }
.pc-box h4{ font-size:17px; font-weight:600; margin-bottom:10px; }
.pc-box h5{ font-size:13px; font-weight:600; margin:12px 0 4px; }
.pc-box h5:first-of-type{ margin-top:0; }
.pc-box p, .pc-box li{ font-size:14px; line-height:1.5; color:var(--ink-dim); }
.pc-box ul{ margin:0; padding-left:18px; }
.pc-box li + li{ margin-top:3px; }
.pc-apps p + p{ margin-top:4px; }
.pc-apps b{ color:var(--ink); font-weight:600; }
.pc-photo{ padding:8px; }
.pc-photo img{ display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:10px; }
.pc-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:5px 0; font-size:13.5px; font-weight:500; color:var(--ink); }
.pc-dots{ display:inline-flex; gap:6px; }
.pc-dots i{ width:16px; height:16px; border-radius:50%; border:1.5px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.pc-dots i.on{ background:var(--ink); border-color:var(--ink); }
.fj-notes{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(14px,2vw,24px); align-items:start; }
.fj-notes figure{ margin:0; }
.fj-notes .cs2-img{ background:var(--surface); box-shadow:0 10px 26px -18px rgba(17,17,17,.4); }
@media (max-width:960px){ .pc, .fj-notes{ grid-template-columns:1fr; } }

/* ---- CGIAR: "Where the AI Hub sits" (clean, animated) ---- */
.hubmap{ position:relative; border:1.5px dashed color-mix(in srgb, var(--ink) 22%, transparent); border-radius:18px; padding:34px clamp(14px,2.4vw,26px) 26px; }
.hm-legend{ position:absolute; top:-10px; left:18px; padding:0 8px; background:var(--case-tint); font-size:13px; font-weight:600; color:var(--ink); }
.hm-grid{ display:grid; grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr) 72px minmax(0,1fr); align-items:center; }
.hm-node{ background:var(--surface); border:1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius:12px; padding:14px 6px; text-align:center; font-size:13px; font-weight:500; line-height:1.25; color:var(--ink);
  box-shadow:0 10px 24px -20px rgba(17,17,17,.5); opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease, background .6s ease, color .6s ease; transition-delay:calc(var(--i) * .18s); }
.hm-node--end{ border-color:var(--case); }
.hm-link{ position:relative; height:44px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.hm-link span{ position:absolute; bottom:calc(50% + 6px); font-size:11.5px; color:var(--ink-dim); white-space:nowrap; opacity:0; transition:opacity .5s ease; transition-delay:calc(var(--i) * .18s + .2s); }
.hm-link i{ position:relative; display:block; width:calc(100% - 10px); height:1.5px; background:var(--case); transform:scaleX(0); transform-origin:left; transition:transform .5s ease; transition-delay:calc(var(--i) * .18s); }
.hm-link i::after{ content:""; position:absolute; right:-1px; top:-3.5px; border:4px solid transparent; border-left:6px solid var(--case); border-right:0; }
.hm-link i::before{ content:""; position:absolute; top:-2.5px; left:0; width:6px; height:6px; border-radius:50%; background:var(--case); opacity:0; }
.hm-up{ grid-column:1; justify-self:center; width:1.5px; height:34px; background:var(--case); transform:scaleY(0); transform-origin:top; transition:transform .5s ease 1s; }
.hm-hub{ grid-column:1 / -1; justify-self:start; display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; padding:10px 16px; border-radius:999px; background:var(--case); color:var(--bg);
  opacity:0; transform:translateY(8px); transition:opacity .5s ease 1.2s, transform .5s ease 1.2s; }
.hm-hub b{ font-weight:600; font-size:15px; }
.hm-hub span{ font-size:12.5px; opacity:.85; }
.hubmap.is-in .hm-node, .hubmap.is-in .hm-hub{ opacity:1; transform:none; }
.hubmap.is-in .hm-link span{ opacity:1; }
.hubmap.is-in .hm-link i{ transform:none; }
.hubmap.is-in .hm-up{ transform:none; }
.hubmap.is-in .hm-node--end{ background:var(--case); color:var(--bg); transition-delay:calc(var(--i) * .18s), calc(var(--i) * .18s), 1.1s, 1.1s; }
.hubmap.is-in .hm-link i::before{ animation:hm-flow 2.6s ease-in-out infinite; animation-delay:calc(1.6s + var(--i) * .4s); }
@keyframes hm-flow{ 0%{ left:0; opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ left:calc(100% - 6px); opacity:0; } }

/* ---- CGIAR: the pipeline, after the "Process Flow" slide: an idea, grown ---- */
.grow{ max-width:1000px; margin:0 auto; }
.grow-kicker{ font-size:13px; font-weight:600; color:var(--case-text); margin:0 0 18px 2px; }
.grow-steps{ list-style:none; margin:0; padding:0; }
.grow-step{ position:relative; display:grid; grid-template-columns:44px minmax(0,1.15fr) minmax(0,1fr); align-items:center; column-gap:18px; padding:7px 0; }
.grow-step::before{ content:""; position:absolute; left:21px; top:0; bottom:0; width:1.5px; background:color-mix(in srgb, var(--case) 40%, transparent); transform:scaleY(0); transform-origin:top; transition:transform .45s linear; transition-delay:calc(var(--i) * .45s); }
.grow-step:first-child::before{ top:50%; }
.grow-step:last-child::before{ bottom:50%; }
.grow-icon{ position:relative; z-index:1; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--surface); border:1px solid color-mix(in srgb, var(--case) 30%, transparent); color:var(--case);
  transform:scale(.4); opacity:0; transition:transform .5s cubic-bezier(.3,1.6,.5,1), opacity .3s ease; transition-delay:calc(var(--i) * .45s + .15s); }
.grow-icon svg{ width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.grow-icon .fill{ fill:currentColor; stroke:none; }
.grow-zone{ display:flex; align-items:center; }
.grow-zone::after{ content:""; flex:1; min-width:16px; margin-left:12px; border-top:1.5px dashed color-mix(in srgb, var(--case) 45%, transparent); transform:scaleX(0); transform-origin:left; transition:transform .4s ease; transition-delay:calc(var(--i) * .45s + .55s); }
.grow-bar{ flex:0 0 72%; margin-left:calc(var(--i) * 6%); min-height:58px; display:grid; place-items:center; padding:10px 14px; border-radius:12px; text-align:center;
  background:var(--bar); color:var(--bar-ink, var(--ink)); clip-path:inset(0 100% 0 0 round 12px); transition:clip-path .6s cubic-bezier(.6,0,.2,1); transition-delay:calc(var(--i) * .45s + .2s); }
.grow-name{ font-size:clamp(15px,1.4vw,17px); font-weight:600; letter-spacing:-.01em; }
.grow-step:nth-child(1){ --bar:color-mix(in srgb, var(--case) 14%, var(--surface)); }
.grow-step:nth-child(2){ --bar:color-mix(in srgb, var(--case) 30%, var(--surface)); }
.grow-step:nth-child(3){ --bar:color-mix(in srgb, var(--case) 50%, var(--surface)); }
.grow-step:nth-child(4){ --bar:var(--case); --bar-ink:var(--bg); }
.grow-step:nth-child(5){ --bar:color-mix(in srgb, var(--case) 50%, var(--ink)); --bar-ink:var(--bg); }
.grow-desc{ margin:0; font-size:15px; line-height:1.5; color:var(--ink-dim); opacity:0; transform:translateX(-6px); transition:opacity .5s ease, transform .5s ease; transition-delay:calc(var(--i) * .45s + .75s); }
.grow-out{ display:flex; align-items:center; justify-content:center; gap:12px; margin:22px 0 0; padding:14px 18px; border-radius:12px; background:var(--surface); font-size:15px; font-weight:500; color:var(--ink);
  opacity:0; transform:translateY(8px); transition:opacity .6s ease 2.6s, transform .6s ease 2.6s; }
.grow-dot{ flex:none; width:10px; height:10px; border-radius:50%; background:var(--case); }
.grow.is-in .grow-step::before{ transform:none; }
.grow.is-in .grow-icon{ transform:none; opacity:1; }
.grow.is-in .grow-bar{ clip-path:inset(0 0 0 0 round 12px); }
.grow.is-in .grow-zone::after{ transform:none; }
.grow.is-in .grow-desc{ opacity:1; transform:none; }
.grow.is-in .grow-out{ opacity:1; transform:none; }
.grow.is-in .grow-dot{ animation:grow-pulse 2.4s ease-out 3.2s infinite; }
@keyframes grow-pulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--case) 45%, transparent); } 100%{ box-shadow:0 0 0 12px transparent; } }
@media (max-width:760px){
  .grow-step{ grid-template-columns:44px minmax(0,1fr); row-gap:8px; align-items:start; }
  .grow-zone::after{ display:none; }
  .grow-bar{ flex-basis:100%; margin-left:0; }
  .grow-desc{ grid-column:2; }
  .hm-grid{ grid-template-columns:minmax(0,1fr); }
  .hm-link{ height:48px; }
  .hm-link i{ width:1.5px; height:28px; transform-origin:top; }
  .hm-link i::after, .hm-link i::before{ display:none; }
  .hm-link span{ position:static; order:2; }
  .hm-up{ display:none; }
  .hm-hub{ margin-top:16px; }
}
@media (prefers-reduced-motion: reduce){
  .hubmap *, .grow *, .grow-step::before, .grow-zone::after{ transition:none !important; animation:none !important; }
}

/* ---- CGIAR round 2 (2026-10-12) ---- */

/* Snapshot as three cards: role, where, and "my part" as chips */
.cs2-snap--cards{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr); gap:14px; border:0; padding:0; }
.cs2-snap--cards > div{ position:relative; padding:22px 24px 24px !important; border:0 !important; border-radius:18px; background:var(--case-tint); }
.snap-ic{ display:grid; place-items:center; width:38px; height:38px; margin-bottom:16px; border-radius:50%; background:var(--surface); color:var(--case); }
.snap-ic svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.cs2-snap--cards dt{ font-size:13px; color:var(--ink-faint); margin-bottom:6px; }
.cs2-snap--cards dd{ font-size:16px; line-height:1.45; font-weight:500; color:var(--ink); }
.snap-chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 0; padding:0; }
.snap-chips li{ padding:6px 12px; border-radius:999px; background:var(--surface); font-size:14px; font-weight:500; }
@media (max-width:900px){ .cs2-snap--cards{ grid-template-columns:repeat(2, minmax(0,1fr)); } .cs2-snap--cards .snap-wide{ grid-column:1 / -1; } }
@media (max-width:600px){ .cs2-snap--cards{ grid-template-columns:1fr; } }

/* The problem: scattered pieces, drawn into one product story */
.scatter{ position:relative; height:clamp(360px,34vw,430px); }
.sc-label{ position:absolute; top:0; left:0; margin:0; font-size:13px; color:var(--ink-faint); }
.sc-cards{ z-index:1; list-style:none; margin:0; padding:0; position:absolute; top:34px; bottom:58px; left:0; right:42%; }
.sc-card{ position:absolute; display:flex; flex-direction:column; gap:2px; padding:10px 14px; border-radius:10px; background:var(--surface);
  border:1px dashed color-mix(in srgb, var(--ink) 28%, transparent); box-shadow:0 10px 22px -18px rgba(17,17,17,.5); white-space:nowrap;
  transform:rotate(var(--r)); animation:sc-float 6s ease-in-out infinite; animation-delay:calc(var(--k) * -.75s); transition:border-color .6s ease; }
.sc-card span{ font-size:11.5px; color:var(--ink-faint); }
.sc-card b{ font-size:14px; font-weight:600; color:var(--ink); }
.sc-card:nth-child(1){ left:1%;  top:2%;  --r:-5deg; }
.sc-card:nth-child(2){ left:42%; top:0%;  --r:4deg; }
.sc-card:nth-child(3){ left:14%; top:27%; --r:3deg; }
.sc-card:nth-child(4){ left:56%; top:24%; --r:-4deg; }
.sc-card:nth-child(5){ left:0%;  top:53%; --r:-2deg; }
.sc-card:nth-child(6){ left:36%; top:50%; --r:5deg; }
.sc-card:nth-child(7){ left:10%; top:80%; --r:4deg; }
.sc-card:nth-child(8){ left:52%; top:77%; --r:-5deg; }
@keyframes sc-float{ 0%,100%{ transform:translateY(0) rotate(var(--r)); } 50%{ transform:translateY(-7px) rotate(calc(var(--r) + 1.2deg)); } }
.sc-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.sc-lines path{ fill:none; stroke:var(--case); stroke-width:1.5; stroke-linecap:round; opacity:.75; stroke-dasharray:1; stroke-dashoffset:1; }
.scatter.is-in .sc-lines path{ stroke-dashoffset:0; transition:stroke-dashoffset 1.1s cubic-bezier(.5,0,.2,1); }
.sc-hub{ position:absolute; right:0; top:50%; transform:translateY(-50%); width:min(32%,270px); padding:24px 20px; border-radius:18px; text-align:center;
  background:var(--surface); border:1.5px solid var(--case); display:flex; flex-direction:column; gap:4px; transition:background .7s ease 1.2s, color .7s ease 1.2s; }
.sc-hub span{ font-size:12.5px; font-weight:600; color:var(--case-text); transition:color .7s ease 1.2s; }
.sc-hub b{ font-size:clamp(17px,1.6vw,20px); font-weight:600; letter-spacing:-.01em; color:var(--ink); transition:color .7s ease 1.2s; }
.sc-hub small{ font-size:13px; color:var(--ink-dim); transition:color .7s ease 1.2s; }
.scatter.is-in .sc-hub{ background:var(--case); }
.scatter.is-in .sc-hub span, .scatter.is-in .sc-hub b, .scatter.is-in .sc-hub small{ color:var(--bg); }
@media (max-width:760px){
  .scatter{ height:auto; }
  .sc-label{ position:static; margin-bottom:12px; }
  .sc-cards{ position:static; display:flex; flex-wrap:wrap; gap:10px; }
  .sc-card{ position:static; }
  .sc-lines{ display:none; }
  .sc-hub{ position:static; transform:none; width:auto; margin-top:22px; }
}

/* LivestockAI WhatsApp-style prototype, rebuilt from the Figma Make file */
.wa-fig{ margin:0; }
.wa{ display:flex; flex-direction:column; width:min(100%,360px); height:620px; margin:0 auto; overflow:hidden;
  border:10px solid var(--wa-ink); border-radius:38px; background:var(--wa-bg); box-shadow:0 30px 60px -36px rgba(17,17,17,.55); font-family:var(--sans); }
.wa-head{ display:flex; align-items:center; gap:8px; padding:14px 12px 10px; background:var(--wa-head); color:var(--wa-in); }
.wa-head svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.wa-av{ width:36px; height:36px; border-radius:50%; background:var(--wa-in); object-fit:cover; }
.wa-who{ flex:1; display:flex; flex-direction:column; line-height:1.2; }
.wa-who b{ font-size:15px; font-weight:600; }
.wa-who span{ font-size:12px; opacity:.8; }
.wa-icons{ display:flex; gap:14px; }
.wa-body{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding:12px 10px; scrollbar-width:thin; }
.wa-msg{ position:relative; max-width:84%; padding:7px 9px 5px; border-radius:9px; font-size:13.5px; line-height:1.42; color:var(--wa-ink); white-space:pre-line;
  box-shadow:0 1px .5px rgba(11,20,26,.13); animation:wa-pop .28s cubic-bezier(.3,1.4,.5,1); }
.wa-msg.in{ align-self:flex-start; background:var(--wa-in); border-top-left-radius:2px; }
.wa-msg.out{ align-self:flex-end; background:var(--wa-out); border-top-right-radius:2px; }
.wa-msg img{ display:block; width:210px; max-width:100%; height:auto; border-radius:6px; margin-bottom:2px; }
.wa-meta{ display:flex; justify-content:flex-end; align-items:center; gap:3px; margin-top:2px; font-size:10.5px; color:var(--wa-meta); }
.wa-tick{ color:var(--wa-tick); letter-spacing:-3px; padding-right:3px; }
.wa-typing{ display:flex; gap:4px; padding:12px 12px; }
.wa-typing i{ width:7px; height:7px; border-radius:50%; background:var(--wa-meta); opacity:.5; animation:wa-dot 1.1s ease-in-out infinite; }
.wa-typing i:nth-child(2){ animation-delay:.15s; } .wa-typing i:nth-child(3){ animation-delay:.3s; }
.wa-replies{ display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 8px 2px; animation:wa-pop .3s ease .1s both; }
.wa-reply{ border:0; padding:7px 12px; border-radius:999px; background:var(--wa-in); color:var(--wa-ink); font:inherit; font-size:12.5px; font-weight:500; cursor:pointer;
  box-shadow:0 1px 2px rgba(11,20,26,.18); transition:transform .15s ease, opacity .2s ease; }
.wa-reply:hover{ transform:translateY(-1px); }
.wa-reply:disabled{ opacity:.45; cursor:default; transform:none; }
.wa-reply:focus-visible{ outline:2px solid var(--wa-head); outline-offset:2px; }
.wa-foot{ display:flex; gap:8px; padding:8px; background:var(--wa-bg); }
.wa-input{ flex:1; min-width:0; border:0; border-radius:999px; padding:10px 14px; background:var(--wa-in); color:var(--wa-ink); font:inherit; font-size:13.5px; }
.wa-input:focus{ outline:2px solid var(--wa-head); }
.wa-send{ flex:none; display:grid; place-items:center; width:42px; height:42px; border:0; border-radius:50%; background:var(--wa-send); color:var(--wa-in); cursor:pointer; }
.wa-send svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@keyframes wa-pop{ from{ opacity:0; transform:translateY(6px) scale(.97); } to{ opacity:1; transform:none; } }
@keyframes wa-dot{ 0%,100%{ transform:translateY(0); opacity:.4; } 50%{ transform:translateY(-3px); opacity:.9; } }

/* The pipeline as a real funnel: each bar narrows into the next */
.grow-step{ padding:3px 0; }
.grow-zone{ position:relative; display:block; }
.grow-bar{ --s:calc(600% / (100 - 12 * var(--i))); --poly:polygon(0 0, 100% 0, calc(100% - var(--s)) 100%, var(--s) 100%);
  width:calc(100% - var(--i) * 12%); margin:0 auto; min-height:56px; border-radius:0; clip-path:var(--poly);
  transform:scaleX(0); transition:transform .6s cubic-bezier(.6,0,.2,1); transition-delay:calc(var(--i) * .45s + .2s); }
.grow.is-in .grow-bar{ clip-path:var(--poly); transform:none; }
.grow-zone::after{ position:absolute; top:50%; left:calc(100% - var(--i) * 6% + 12px); right:-14px; margin:0; min-width:0; }
.grow-out{ max-width:420px; margin:18px auto 0; }
@media (max-width:760px){ .grow-bar{ width:calc(100% - var(--i) * 8%); --s:calc(400% / (100 - 8 * var(--i))); } }
@media (prefers-reduced-motion: reduce){
  .sc-card, .wa-msg, .wa-replies, .wa-typing i{ animation:none !important; }
  .grow-bar, .sc-lines path, .sc-hub, .sc-hub *{ transition:none !important; }
}

/* Xymbia: provider appointment, Scheduled -> Delivered */
.appt-pair{ display:grid; grid-template-columns:minmax(0,300px) auto minmax(0,300px); justify-content:center; align-items:start; gap:clamp(14px,3vw,36px); }
.appt-arrow{ align-self:center; margin-top:-30px; }
.appt-pair figure{ margin:0; }
.appt-pair .cs2-img{ border-radius:18px; box-shadow:0 18px 40px -28px rgba(17,17,17,.5); }
.appt-pair .cs2-cap{ text-align:center; margin-top:12px; }
.appt-arrow svg{ width:40px; height:16px; fill:none; stroke:var(--case); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:640px){ .appt-pair{ grid-template-columns:1fr; } .appt-arrow{ justify-self:center; transform:rotate(90deg); } }

/* Marham: onboarding that plays on its own (no tapping needed) */
.ap{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.ap-dev{ position:relative; width:min(100%,280px); background:#fff; }
.ap-f{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; opacity:0; transform:translateX(18%);
  transition:opacity .45s ease, transform .55s cubic-bezier(.3,.7,.2,1); }
.ap-f:first-child{ position:relative; }
.ap-f.is-on{ opacity:1; transform:none; z-index:1; }
.ap-f.is-off{ opacity:0; transform:translateX(-12%); }
.ap-vid{ background:#fff; }
.ap-tap{ position:absolute; z-index:3; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; pointer-events:none; opacity:0;
  background:color-mix(in srgb, var(--case) 28%, transparent); box-shadow:0 0 0 2px color-mix(in srgb, var(--case) 60%, transparent); }
.ap-tap.is-tap{ animation:ap-tap .7s ease-out; }
@keyframes ap-tap{ 0%{ opacity:0; transform:scale(.4); } 30%{ opacity:1; transform:scale(1); } 100%{ opacity:0; transform:scale(1.5); } }
.ap-step{ display:flex; align-items:center; gap:12px; margin:0; font-size:13.5px; font-weight:500; color:var(--ink); }
.ap-dots{ display:flex; gap:5px; }
.ap-dots i{ width:6px; height:6px; border-radius:50%; background:color-mix(in srgb, var(--ink) 18%, transparent); transition:background .3s, width .3s; }
.ap-dots i.is-on{ width:16px; border-radius:3px; background:var(--case); }
@media (prefers-reduced-motion: reduce){ .ap-f, .ap-dots i{ transition:none; } .ap-tap{ display:none; } }

/* Marham "Every team at the table": six teams feeding into one decision */
.orbit{ position:relative; max-width:920px; margin:0 auto; aspect-ratio:2 / 1; }
.orb-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.orb-ring{ fill:none; stroke:color-mix(in srgb, var(--case) 22%, transparent); stroke-width:1.2; stroke-dasharray:3 7; vector-effect:non-scaling-stroke;
  transform-origin:50% 50%; transform-box:fill-box; }
.orb-spokes path{ fill:none; stroke:color-mix(in srgb, var(--case) 35%, transparent); stroke-width:1.2; vector-effect:non-scaling-stroke;
  stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .8s cubic-bezier(.5,0,.2,1); transition-delay:calc(.35s + var(--k) * .12s); }
.orb-flow{ fill:none; stroke:var(--case); stroke-width:2.4; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:.06 .94; stroke-dashoffset:1; opacity:0; }
.orb-core{ position:absolute; left:50%; top:50%; z-index:2; width:clamp(150px,22%,200px); aspect-ratio:1; transform:translate(-50%,-50%) scale(.85); opacity:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border-radius:50%; text-align:center;
  background:var(--case); color:var(--bg); box-shadow:0 0 0 10px color-mix(in srgb, var(--case) 10%, transparent), 0 24px 50px -24px color-mix(in srgb, var(--case) 70%, transparent);
  transition:opacity .6s ease, transform .7s cubic-bezier(.3,1.3,.5,1); }
.orb-core span{ font-size:clamp(13px,1.2vw,15px); opacity:.85; }
.orb-core b{ font-size:clamp(20px,2.2vw,28px); font-weight:600; letter-spacing:-.02em; }
.orb-nodes{ list-style:none; margin:0; padding:0; }
.orb-node{ position:absolute; left:var(--x); top:var(--y); z-index:2; display:flex; align-items:center; gap:10px; padding:9px 16px 9px 9px; border-radius:999px; white-space:nowrap;
  background:var(--surface); border:1px solid color-mix(in srgb, var(--ink) 9%, transparent); box-shadow:0 12px 28px -20px rgba(17,17,17,.45);
  font-size:clamp(13.5px,1.15vw,15px); font-weight:500; color:var(--ink);
  transform:translate(-50%,-50%) translateY(10px); opacity:0; transition:opacity .5s ease, transform .6s cubic-bezier(.3,1.3,.5,1); transition-delay:calc(var(--k) * .1s); }
.orb-ic{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--case-tint); color:var(--case); }
.orb-ic svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.orbit.is-in .orb-core{ opacity:1; transform:translate(-50%,-50%); }
.orbit.is-in .orb-node{ opacity:1; transform:translate(-50%,-50%); }
.orbit.is-in .orb-spokes path{ stroke-dashoffset:0; }
.orbit.is-in .orb-ring{ animation:orb-turn 60s linear infinite; }
.orbit.is-in .orb-flow{ opacity:1; animation:orb-flow 3.2s cubic-bezier(.45,0,.55,1) infinite; animation-delay:calc(1.4s + var(--k) * .53s); }
.orbit.is-in .orb-core{ animation:orb-breathe 3.2s ease-in-out 1.6s infinite; }
@keyframes orb-flow{ 0%{ stroke-dashoffset:1; opacity:0; } 10%{ opacity:1; } 80%{ opacity:1; } 100%{ stroke-dashoffset:.06; opacity:0; } }
@keyframes orb-turn{ to{ transform:rotate(360deg); } }
@keyframes orb-breathe{ 0%,100%{ box-shadow:0 0 0 10px color-mix(in srgb, var(--case) 10%, transparent), 0 24px 50px -24px color-mix(in srgb, var(--case) 70%, transparent); }
  50%{ box-shadow:0 0 0 18px color-mix(in srgb, var(--case) 6%, transparent), 0 24px 50px -24px color-mix(in srgb, var(--case) 70%, transparent); } }
@media (max-width:700px){
  .orbit{ aspect-ratio:auto; display:flex; flex-direction:column; align-items:center; gap:18px; }
  .orb-lines{ display:none; }
  .orb-core{ position:relative; left:auto; top:auto; transform:none; width:160px; }
  .orbit.is-in .orb-core{ transform:none; }
  .orb-nodes{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; }
  .orb-node, .orbit.is-in .orb-node{ position:static; transform:none; white-space:normal; }
}
@media (prefers-reduced-motion: reduce){
  .orbit *, .orbit.is-in *{ animation:none !important; transition:none !important; }
}

/* ---- CGIAR funnel, soft style (2026-10-13, Arwa: "make it soft, change the style") ----
   Overrides the slice look above: rounded pill layers in gentle greens, a quiet
   flow of "ideas" drifting down and gathering into one product, slow fades. */
.grow{ position:relative; }
.grow-steps{ position:relative; }
.grow-step{ padding:5px 0; }
.grow-bar{
  clip-path:none !important; border-radius:999px; min-height:54px;
  width:calc(100% - var(--i) * 11%); margin:0 auto;
  background:linear-gradient(180deg, color-mix(in srgb, var(--bar) 100%, #fff 0%), color-mix(in srgb, var(--bar) 86%, #fff));
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 14px 30px -22px color-mix(in srgb, var(--case) 70%, transparent);
  opacity:0; transform:translateY(10px) scale(.97);
  transition:opacity .9s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--i) * .22s + .15s);
}
.grow.is-in .grow-bar{ clip-path:none !important; opacity:1; transform:none; }
.grow-step:nth-child(1){ --bar:color-mix(in srgb, var(--case) 9%,  var(--surface)); }
.grow-step:nth-child(2){ --bar:color-mix(in srgb, var(--case) 17%, var(--surface)); }
.grow-step:nth-child(3){ --bar:color-mix(in srgb, var(--case) 27%, var(--surface)); }
.grow-step:nth-child(4){ --bar:color-mix(in srgb, var(--case) 42%, var(--surface)); --bar-ink:var(--ink); }
.grow-step:nth-child(5){ --bar:color-mix(in srgb, var(--case) 78%, var(--surface)); --bar-ink:var(--bg); }
.grow-name{ font-weight:500; letter-spacing:-.005em; }
/* leaders: a soft dotted thread instead of dashes */
.grow-zone::after{ border-top:1.5px dotted color-mix(in srgb, var(--case) 35%, transparent); transition:transform .9s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--i) * .22s + .5s); }
.grow-desc{ transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--i) * .22s + .6s); }
/* seedlings: lighter rings, gentle grow-in */
.grow-icon{ border:0; background:var(--surface); box-shadow:0 0 0 1px color-mix(in srgb, var(--case) 18%, transparent), 0 8px 18px -14px color-mix(in srgb, var(--case) 70%, transparent);
  transform:scale(.7); transition:transform .9s cubic-bezier(.22,1,.36,1), opacity .7s ease; transition-delay:calc(var(--i) * .22s + .1s); }
.grow-step::before{ background:color-mix(in srgb, var(--case) 22%, transparent); transition:transform 1s ease; transition-delay:calc(var(--i) * .22s); }

/* the flow of ideas (dots placed by js/case.js over the funnel) */
.grow-flow{ position:absolute; pointer-events:none; z-index:2; }
.grow-dot-i{ position:absolute; top:0; left:50%; width:8px; height:8px; margin-left:-4px; border-radius:50%;
  background:color-mix(in srgb, var(--case) 88%, #fff); box-shadow:0 0 0 3px color-mix(in srgb, var(--surface) 60%, transparent), 0 0 12px 3px color-mix(in srgb, var(--case) 35%, transparent);
  opacity:0; }
.grow.is-in .grow-dot-i{ animation:grow-drift var(--dur) cubic-bezier(.45,.05,.4,1) var(--delay) infinite; }
@keyframes grow-drift{
  0%   { opacity:0; transform:translate(var(--x0), 0) scale(.6); }
  12%  { opacity:.85; }
  70%  { opacity:.75; }
  100% { opacity:0; transform:translate(calc(var(--x0) * .04), var(--h)) scale(1); }
}
/* the closing line: a soft pill, its dot breathing */
.grow-out{ max-width:460px; border-radius:999px; padding:12px 22px; background:color-mix(in srgb, var(--surface) 92%, var(--case));
  box-shadow:0 14px 30px -24px color-mix(in srgb, var(--case) 80%, transparent); transition:opacity 1s ease 1.6s, transform 1s cubic-bezier(.22,1,.36,1) 1.6s; }
.grow-dot{ box-shadow:0 0 0 6px color-mix(in srgb, var(--case) 14%, transparent); }
.grow.is-in .grow-dot{ animation:grow-breathe 3.6s ease-in-out 2.4s infinite; }
@keyframes grow-breathe{ 0%,100%{ box-shadow:0 0 0 5px color-mix(in srgb, var(--case) 16%, transparent); } 50%{ box-shadow:0 0 0 11px color-mix(in srgb, var(--case) 6%, transparent); } }
@media (max-width:760px){ .grow-bar{ width:calc(100% - var(--i) * 7%); } .grow-flow{ display:none; } }
@media (prefers-reduced-motion: reduce){ .grow-flow{ display:none; } .grow-bar, .grow-icon{ opacity:1; transform:none; } }
/* ideas flow BEHIND the layers, glowing softly through them; labels stay clean */
.grow-flow{ z-index:0; }
.grow-zone{ position:relative; z-index:1; }
.grow-bar{ background:linear-gradient(180deg, color-mix(in srgb, var(--bar) 80%, transparent), color-mix(in srgb, var(--bar) 72%, transparent)); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.grow-step:nth-child(5) .grow-bar{ background:linear-gradient(180deg, color-mix(in srgb, var(--bar) 92%, transparent), color-mix(in srgb, var(--bar) 86%, transparent)); }

/* WhatsApp prototype plays itself (2026-10-13): replies are tapped by the script */
.wa-replies{ pointer-events:none; }
.wa-reply.is-pressed{ transform:scale(.94); background:color-mix(in srgb, var(--wa-head) 14%, var(--wa-in)); box-shadow:0 0 0 2px color-mix(in srgb, var(--wa-head) 45%, transparent); }
.wa-input[readonly]{ cursor:default; }
.wa-send:disabled{ cursor:default; }

/* Xymbia personas: both columns end on the same line (last box stretches) */
.pc{ align-items:stretch; }
.pc-col > .pc-box:last-child{ flex:1; }

/* ---- Phone frame, refined (2026-10-13, Arwa: "blurry, colliding at the ends") ----
   A real bezel (padding on a dark body) with the screen's own rounded corners
   inside it, plus a small camera island; nothing touches or clips at the edges. */
.cs2-dev{ --bz:clamp(5px,.55vw,8px); --r:clamp(22px,2.3vw,34px);
  border:0; padding:var(--bz); border-radius:var(--r); background:var(--dsc-ink);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--dsc-ink) 70%, #fff 30%) inset, 0 22px 44px -26px rgba(17,17,17,.55); }
.cs2-dev > img, .cs2-dev > video, .cs2-dev > picture img{ border-radius:calc(var(--r) - var(--bz)); background:#fff; }
.cs2-dev::after{ content:""; position:absolute; z-index:4; left:50%; top:calc(var(--bz) + 1.2%); width:26%; height:2.3%; transform:translateX(-50%);
  border-radius:999px; background:var(--dsc-ink); pointer-events:none; }
/* the self-playing Marham phone stacks its screens inside the bezel */
.ap-dev .ap-f{ inset:var(--bz); width:calc(100% - var(--bz) * 2); height:calc(100% - var(--bz) * 2); border-radius:calc(var(--r) - var(--bz)); }
.ap-dev .ap-f:first-child{ inset:auto; width:100%; height:100%; }
/* finding cards show only the top of a phone: keep its bottom open */
.cs2-finding-art .cs2-dev{ padding-bottom:0; }
.cs2-finding-art .cs2-dev > img{ border-bottom-left-radius:0; border-bottom-right-radius:0; }

/* "Setting up a business": three per row, bigger, so the screens read */
.cs2-row--setup{ --n:3 !important; max-width:900px; margin:0 auto; row-gap:clamp(26px,3vw,40px); column-gap:clamp(18px,3vw,44px); }
.cs2-row--setup .cs2-dev{ width:min(100%,250px); margin:0 auto; }
.cs2-row--setup figcaption{ font-size:14px; margin-top:14px; }
@media (max-width:760px){ .cs2-row--setup{ --n:2 !important; grid-auto-flow:row; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; } }

/* ---- Xymbia: the customer's booking journey as a strip that moves with the
   scroll (2026-10-13, after daniyalishaq.com's "The flow"). On desktop the
   block pins near the bottom of the screen while the page scroll slides the
   strip sideways; on touch screens / reduced motion it's a swipe row. ---- */
.flow-outer{ position:relative; margin-top:clamp(40px,5vw,64px); }
.flow-sticky{ position:sticky; top:0; }
.flow-title{ margin:0 0 8px; }
.flow-hint{ margin:0 0 26px; font-size:14px; color:var(--ink-faint); }
.flow-hint-touch{ display:none; }
.flow-clip{ overflow:hidden; padding:6px 2px 10px; }
.flow-track{ display:flex; gap:clamp(20px,2.4vw,32px); will-change:transform; }
.flow-card{ flex:0 0 clamp(190px,17vw,236px); margin:0; display:flex; flex-direction:column; gap:14px; }
.flow-card .cs2-dev{ width:100%; }
.flow-card-caption{ font-size:14px; font-weight:500; color:var(--ink); line-height:1.4; }
@media (hover:none), (max-width:900px), (prefers-reduced-motion:reduce){
  .flow-hint-desk{ display:none; } .flow-hint-touch{ display:inline; }
  .flow-clip{ overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scrollbar-width:thin; }
  .flow-card{ scroll-snap-align:start; flex-basis:min(62%,236px); }
}

/* testing cards (2026-10-13): show each screenshot at its own shape so the
   sides are never cut (some are wider than the standard frame), a bit bigger */
.cs2-finding-art{ height:340px; }
.cs2-finding-art .cs2-dev{ width:176px; aspect-ratio:auto; }
.cs2-finding-art .cs2-dev > img{ height:auto; object-fit:contain; }
.cs2-finding-art .cs2-dev::after{ top:calc(var(--bz) + 6px); height:9px; }
.cs2-finding-art .cs2-dev::after{ display:none; }   /* these screenshots start at the very top: no notch over their titles */

/* ---- Design System playground, premium pass (2026-10-13, Arwa: "should look premium") ----
   Sentence-case labels (no uppercase letter-spacing, per the site rule), a soft
   raised panel, iOS-style segmented controls, colour dots for contexts, slim
   custom sliders, and calmer labels inside the demo screen. */
.cs2 .pg{ gap:clamp(22px,2.6vw,36px); }
.cs2 .pg-panel{ border:1px solid color-mix(in srgb, var(--ink) 7%, transparent); border-radius:22px; padding:24px 22px;
  background:var(--surface); box-shadow:0 30px 60px -44px rgba(17,17,17,.45); }
.cs2 .pg-group{ margin:0; padding:18px 0; border-top:1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
.cs2 .pg-group:first-child{ padding-top:0; border-top:0; }
.cs2 .pg-label{ font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink); margin-bottom:12px; }
.cs2 .pg-label b{ font-size:13px; font-weight:500; color:var(--ink-faint); }
.cs2 .pg-note{ font-family:var(--sans); font-size:12.5px; line-height:1.5; color:var(--ink-faint); margin-top:10px; }
/* segmented: soft track, the chosen option lifts out as a white pill */
.cs2 .pg-seg{ gap:2px; padding:3px; border:0; border-radius:999px; background:color-mix(in srgb, var(--ink) 6%, transparent); overflow:visible; }
.cs2 .pg-seg button{ border:0; border-radius:999px; padding:8px 6px; font-size:13px; font-weight:500; color:var(--ink-dim); transition:background .25s, color .25s, box-shadow .25s; }
.cs2 .pg-seg button:hover{ background:color-mix(in srgb, var(--surface) 55%, transparent); }
.cs2 .pg-seg button[aria-pressed="true"]{ background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(17,17,17,.12), 0 6px 14px -8px rgba(17,17,17,.3); }
/* contexts: colour dots with their names underneath */
.cs2 .pg-swatches{ gap:10px; justify-content:space-between; }
.cs2 .pg-sw{ flex:0 0 auto; width:auto; height:auto; border:0; background:none !important; display:flex; flex-direction:column; align-items:center; gap:8px; }
.cs2 .pg-sw::before{ content:""; width:38px; height:38px; border-radius:50%; background:var(--sw); box-shadow:0 0 0 3px var(--surface), 0 0 0 4px transparent; transition:box-shadow .25s, transform .25s; }
.cs2 .pg-sw:hover::before{ transform:scale(1.06); }
.cs2 .pg-sw[aria-pressed="true"]::before{ box-shadow:0 0 0 3px var(--surface), 0 0 0 5px var(--ink); }
.cs2 .pg-sw span{ font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink-dim); text-shadow:none; padding:0; }
.cs2 .pg-sw[aria-pressed="true"] span{ color:var(--ink); }
/* slim sliders */
.cs2 .pg input[type=range]{ -webkit-appearance:none; appearance:none; height:22px; background:transparent; cursor:pointer; }
.cs2 .pg input[type=range]::-webkit-slider-runnable-track{ height:4px; border-radius:999px; background:color-mix(in srgb, var(--ink) 12%, transparent); }
.cs2 .pg input[type=range]::-moz-range-track{ height:4px; border-radius:999px; background:color-mix(in srgb, var(--ink) 12%, transparent); }
.cs2 .pg input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; margin-top:-8px; border-radius:50%; background:var(--surface);
  border:0; box-shadow:0 0 0 1.5px var(--ink), 0 4px 10px -4px rgba(17,17,17,.5); }
.cs2 .pg input[type=range]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--surface); border:0; box-shadow:0 0 0 1.5px var(--ink), 0 4px 10px -4px rgba(17,17,17,.5); }
.cs2 .pg-code{ border-radius:14px; font-size:11px; padding:14px 16px; }
/* the stage: a soft device-like canvas */
.cs2 .pg-bar{ font-family:var(--sans); font-size:12.5px; }
.cs2 .pg-canvas{ border-radius:22px; border-color:color-mix(in srgb, var(--ink) 8%, transparent); box-shadow:0 40px 80px -50px rgba(17,17,17,.5); }
/* calmer labels inside the demo screen */
.cs2 .xa-card h4{ text-transform:none; letter-spacing:0; font-size:13px; font-weight:600; color:var(--x-mid); }
.cs2 .xa-chip{ text-transform:none; letter-spacing:0; font-size:11.5px; font-weight:600; padding:4px 11px; }

/* ---- Design System playground as one "studio" (2026-10-13, round 2) ---- */
.cs2 .pg{ padding:clamp(16px,2.2vw,28px); border-radius:32px; align-items:start;
  background:radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--cs-ds-tint) 95%, var(--surface)) 0%, color-mix(in srgb, var(--cs-ds-tint) 45%, var(--bg)) 55%, var(--bg) 100%);
  border:1px solid color-mix(in srgb, var(--cs-ds) 14%, transparent); }
/* the controls: a calm glass sidebar, as tall as the screen, scrolling inside */
.cs2 .pg-panel{ position:relative; top:auto; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--ink) 18%, transparent) transparent;
  background:color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid color-mix(in srgb, var(--ink) 6%, transparent); box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 24px 50px -40px rgba(17,17,17,.4); }
.cs2 .pg-panel.fade-top{ -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 28px); mask-image:linear-gradient(180deg, transparent 0, #000 28px); }
.cs2 .pg-panel.fade-end{ -webkit-mask-image:linear-gradient(0deg, transparent 0, #000 36px); mask-image:linear-gradient(0deg, transparent 0, #000 36px); }
.cs2 .pg-panel.fade-top.fade-end{ -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 28px, #000 calc(100% - 36px), transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 28px, #000 calc(100% - 36px), transparent 100%); }
.cs2 .pg-note{ font-size:12px; color:color-mix(in srgb, var(--ink-faint) 85%, transparent); }
.cs2 .pg-label{ font-size:13.5px; }
/* tokens tucked away */
.cs2 .pg-tokens{ margin-top:6px; padding-top:16px; border-top:1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
.cs2 .pg-tokens summary{ cursor:pointer; list-style:none; font-size:13px; font-weight:500; color:var(--ink); display:flex; align-items:center; gap:8px; }
.cs2 .pg-tokens summary::-webkit-details-marker{ display:none; }
.cs2 .pg-tokens summary::before{ content:"+"; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:color-mix(in srgb, var(--ink) 7%, transparent); font-size:13px; }
.cs2 .pg-tokens[open] summary::before{ content:"−"; }
.cs2 .pg-tokens .pg-code{ margin-top:12px; }
/* the screen: a clean app window with a title bar */
.cs2 .pg-stage{ border-radius:24px; overflow:hidden; background:var(--surface);
  border:1px solid color-mix(in srgb, var(--ink) 7%, transparent); box-shadow:0 50px 90px -60px rgba(17,17,17,.55), 0 2px 6px -2px rgba(17,17,17,.08); }
.cs2 .pg-bar{ margin:0; padding:12px 16px; gap:14px; justify-content:flex-start; font-size:12.5px; color:var(--ink-faint);
  background:color-mix(in srgb, var(--ink) 3%, var(--surface)); border-bottom:1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
.cs2 .pg-bar #o-bar{ color:var(--ink); font-weight:500; }
.cs2 .pg-bar #o-bar2{ margin-left:auto; }
.pg-dots{ display:inline-flex; gap:6px; }
.pg-dots i{ width:10px; height:10px; border-radius:50%; background:color-mix(in srgb, var(--ink) 14%, transparent); }
.cs2 .pg-gridwrap{ padding:clamp(14px,2vw,26px); background:color-mix(in srgb, var(--ink) 2%, var(--surface)); }
.cs2 .pg-canvas{ border-radius:18px; box-shadow:0 1px 2px rgba(17,17,17,.06), 0 18px 40px -30px rgba(17,17,17,.35); }
@media (max-width:900px){ .cs2 .pg-panel{ max-height:none !important; overflow:visible; } .cs2 .pg{ padding:12px; border-radius:24px; } }

/* ---- CGIAR Human Centric Design chapter: visuals (2026-10-13, Arwa: "add
   personality, some visuals; it's a lot of text") ---- */
/* where champions sit: three rings, champions slowly orbiting */
.rings-panel{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(24px,4vw,56px); margin-top:clamp(36px,4vw,56px); }
.rings-panel .cs2-cap{ grid-column:1 / -1; margin-top:0; }
.rings{ position:relative; width:min(100%,420px); aspect-ratio:1; margin:0 auto; }
.rg{ position:absolute; border-radius:50%; display:grid; place-items:center; }
.rg--adv{ inset:0; border:1.5px dashed color-mix(in srgb, var(--case) 30%, transparent); }
.rg--champ{ inset:17%; background:color-mix(in srgb, var(--case) 10%, var(--surface)); border:1.5px solid color-mix(in srgb, var(--case) 35%, transparent); }
.rg--core{ inset:36%; background:var(--case); color:var(--bg); text-align:center; display:flex; flex-direction:column; justify-content:center; gap:2px;
  box-shadow:0 0 0 10px color-mix(in srgb, var(--case) 10%, transparent); }
.rg--core b{ font-size:clamp(15px,1.4vw,18px); font-weight:600; }
.rg--core span{ font-size:11.5px; opacity:.85; }
.rg-orbit{ position:absolute; inset:0; animation:rg-turn 60s linear infinite; }
.rg-orbit--slow{ animation-duration:110s; animation-direction:reverse; }
.rg-orbit i{ position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px; border-radius:50%;
  transform:rotate(var(--a)) translateY(calc(-1 * var(--r, 50%))) ; }
.rg--champ .rg-orbit i{ --r:var(--rc); background:var(--case); box-shadow:0 0 0 3px var(--surface); }
.rg--adv .rg-orbit i{ --r:var(--ra); width:11px; height:11px; margin:-5.5px; background:var(--surface); border:2px solid color-mix(in srgb, var(--case) 55%, transparent); }
.rings{ --rc:calc(min(100%,420px) * 0); }
.rg--champ{ container-type:size; } .rg--champ .rg-orbit i{ transform:rotate(var(--a)) translateY(-50cqh); }
.rg--adv{ container-type:size; } .rg--adv .rg-orbit i{ transform:rotate(var(--a)) translateY(-50cqh); }
@keyframes rg-turn{ to{ transform:rotate(360deg); } }
.rings-key{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.rings-key li{ display:grid; grid-template-columns:16px minmax(0,1fr); gap:14px; align-items:start; }
.rings-key li > i{ width:14px; height:14px; border-radius:50%; margin-top:4px; }
.rings-key .k-core{ background:var(--case); }
.rings-key .k-champ{ background:color-mix(in srgb, var(--case) 10%, var(--surface)); border:1.5px solid color-mix(in srgb, var(--case) 45%, transparent); }
.rings-key .k-adv{ border:1.5px dashed color-mix(in srgb, var(--case) 50%, transparent); }
.rings-key b{ display:block; font-size:16px; font-weight:600; margin-bottom:3px; }
.rings-key span{ font-size:14.5px; line-height:1.5; color:var(--ink-dim); }

/* the two research tools */
.tools{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,24px); margin-top:clamp(28px,3vw,40px); }
.tool{ border-radius:22px; background:var(--surface); border:1px solid color-mix(in srgb, var(--ink) 7%, transparent); padding:0 0 22px; overflow:hidden;
  box-shadow:0 24px 50px -40px rgba(17,17,17,.35); }
.tool > h3, .tool > p, .tool > ul{ margin-left:22px; margin-right:22px; }
.tool h3{ font-size:20px; font-weight:600; letter-spacing:-.015em; margin-top:18px; margin-bottom:6px; }
.tool > p{ font-size:14.5px; line-height:1.55; color:var(--ink-dim); }
.tool-top{ position:relative; height:110px; display:grid; place-items:center; background:var(--case-tint); }
.tool-tag{ position:absolute; top:12px; left:14px; padding:4px 10px; border-radius:999px; background:var(--surface); font-size:12px; font-weight:500; color:var(--case-text); }
.tool-art{ width:min(78%,240px); height:auto; overflow:visible; }
.tool-art--pulse path{ fill:none; stroke:var(--case); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; animation:tool-pulse 3.2s ease-in-out infinite; }
@keyframes tool-pulse{ 0%{ stroke-dashoffset:1; } 55%{ stroke-dashoffset:0; } 80%{ stroke-dashoffset:0; opacity:1; } 100%{ stroke-dashoffset:0; opacity:0; } }
.tool-art--talk .b1{ fill:var(--surface); stroke:color-mix(in srgb, var(--case) 45%, transparent); stroke-width:1.5; }
.tool-art--talk .b2{ fill:var(--case); stroke:var(--case); stroke-width:1.5; }
.tool-art--talk .dot{ fill:var(--case); animation:tool-dot 1.4s ease-in-out infinite; }
.tool-art--talk .dot:nth-of-type(2){ animation-delay:.18s; } .tool-art--talk .dot:nth-of-type(3){ animation-delay:.36s; }
@keyframes tool-dot{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
.tool-q{ list-style:none; padding:0; margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.tool-q li{ position:relative; padding:10px 14px; border-radius:16px 16px 16px 4px; background:color-mix(in srgb, var(--case) 7%, var(--surface));
  border:1px solid color-mix(in srgb, var(--case) 14%, transparent); font-size:14px; line-height:1.45; color:var(--ink); }

/* what came back: findings as icon tiles */
.came{ margin-top:clamp(48px,5vw,72px); }
.came-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(20px,4vw,56px); align-items:end; margin-bottom:22px; }
.came-head .cs2-h3{ margin:0; }
.finds{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.find{ display:flex; flex-direction:column; gap:8px; padding:18px 16px 20px; border-radius:18px; background:var(--case-tint); }
.find-ic{ display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--surface); color:var(--case); margin-bottom:4px; }
.find-ic svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.find b{ font-size:15.5px; font-weight:600; letter-spacing:-.01em; }
.find > span:last-child{ font-size:13.5px; line-height:1.5; color:var(--ink-dim); }

/* workshop: each day's description under its own point */
.days-desc{ list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,3vw,40px); text-align:center; }
.days-desc li{ font-size:14.5px; line-height:1.55; color:var(--ink-dim); }

@media (max-width:1000px){ .finds{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px){
  .rings-panel, .tools, .came-head, .days-desc{ grid-template-columns:1fr; }
  .finds{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){ .rg-orbit, .tool-art *, .tool-art path{ animation:none !important; stroke-dashoffset:0 !important; } }