/* =====================================================================
   process-v5.css — Design Process v5: free scroll, no locks.
   Each main section stacks vertically: sticky title bar (cluster name +
   section title on translucent glass), options carousel + synced text,
   Version Shipped block, then the Before/After. Container dimensions
   are inherited unchanged from process-v4.css.
   Loads AFTER process-v4.css and overrides its pinned-stage layout.
   ===================================================================== */

.pv5-main{position:relative;max-width:1500px;margin:0 auto;box-sizing:border-box;
  padding:clamp(18px,3vh,30px) var(--pad) 0;}

/* Evident separation between consecutive main sections (e.g. B1→B2→B3→B4,
   C1→C2→C3→D) so each reads as a distinct section within its cluster. */
.pv4.pv5 + .pv4.pv5{margin-top:clamp(84px,13vh,168px);}
/* Proximity hierarchy: the cluster header (pill + title + description) is one
   unit; give it a clear gap below so it separates from the group of main
   sections that follows under the cluster. */
.pv5>.pv4-chead{padding-bottom:clamp(34px,5vh,72px);}

/* ---- section title: v4 look by default; morphs into a fixed glass pill
   next to the nav logo once scrolled past (JS toggles .is-stuck) ---- */
.pv5 .pv4-sec{position:static;display:flex;justify-content:flex-start;
  margin-bottom:clamp(14px,2.2vh,22px);}
.pv5-pill{display:inline-flex;align-items:baseline;background:transparent;
  border:0;padding:0;}
.pv5-cluster{display:none;}
/* in-flow main-section title — top of the hierarchy, above flow/option titles */
.pv5 .pv4-sec .ttl{font-size:clamp(22px,2.1vw,31px);font-weight:600;
  color:var(--cream);letter-spacing:-.015em;line-height:1.15;}
.pv5 .pv4-sec .ttl .pk{color:var(--peach);}
.pv5-pill.is-stuck{position:fixed;top:17px;left:calc(var(--pad) + 40px + 14px);
  z-index:119;display:inline-flex;align-items:center;white-space:nowrap;
  max-width:min(62vw,760px);padding:9px 16px 10px;border-radius:5rem;
  background:rgba(12,10,8,.62);border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 44px -28px rgba(0,0,0,.8);
  animation:pv5stick .35s var(--ease,cubic-bezier(.625,.05,0,1)) both;}
@keyframes pv5stick{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
.pv5-pill.is-stuck .pv5-cluster{display:inline;font-size:clamp(13px,1vw,15px);
  font-weight:700;color:var(--cream);letter-spacing:-.01em;}
.pv5-pill.is-stuck .pv5-cluster::after{content:"\00B7";margin:0 9px;
  color:var(--grey-dim);}
.pv5-pill.is-stuck .ttl{font-size:clamp(12px,.92vw,13.5px);font-weight:550;
  color:var(--grey);overflow:hidden;text-overflow:ellipsis;}
.pv5-pill.is-stuck .ttl .pk{color:var(--peach);}

/* ---- section description, right-aligned under the bar ---- */
.pv5-desc{display:flex;justify-content:flex-end;margin:0 0 clamp(16px,2.4vh,26px);}

/* B2 — put the section title and the Key-Tension description on ONE top-aligned
   row (title left, description right). Scoped to B2 via the .pv5-head wrapper. */
/* Main-section header: title (left edge) + description (right edge) on ONE row,
   bottom-aligned. Used by every main section that has a description (B1–B3, C1, C2). */
.pv5-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(28px,4vw,80px);margin-bottom:clamp(22px,3.2vh,38px);}
.pv5-head>.pv4-sec{margin-bottom:0;flex:0 1 auto;}
.pv5-head>.pv5-desc{margin:0;flex:0 1 auto;}
@media (max-width:880px){ .pv5-head{flex-direction:column;align-items:flex-start;gap:12px;} }

/* B2 — both quantity-layout options shown together as annotated artboards
   (designer redline / markup) instead of a carousel. */
.qa-redline{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(26px,3vw,58px);align-items:start;
  margin-top:clamp(48px,7vh,104px);margin-bottom:clamp(8px,1.4vh,16px);}
.qa-opt{margin:0;display:flex;flex-direction:column;min-width:0;}
/* frame-label tab above each board (Figma-frame feel) */
.qa-tab{display:flex;align-items:center;flex-wrap:wrap;gap:8px 11px;margin-bottom:12px;}
.qa-pin{flex:none;display:inline-grid;place-items:center;width:25px;height:25px;
  border-radius:7px;font-size:13px;font-weight:800;color:var(--grey);
  border:1px solid var(--line-2);background:rgba(244,236,226,.05);
  font-variant-numeric:tabular-nums;}
.qa-pin.sel{color:#3a2417;background:var(--peach);border-color:var(--peach);}
.qa-name{font-size:clamp(16px,1.35vw,22px);font-weight:600;color:var(--cream);
  letter-spacing:-.01em;}
.qa-tab .pv4-stat{margin-left:auto;}
/* the light artboard "paper" sitting on the dark canvas — the wide UI strip is
   centred vertically so the two side-by-side boards stay visually balanced. */
.qa-board{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:clamp(150px,13vw,210px);
  background:#f6f2eb;border-radius:14px;border:1px solid var(--line-2);
  padding:clamp(18px,1.8vw,30px) clamp(18px,2vw,34px);
  box-shadow:0 26px 64px -34px rgba(0,0,0,.75);}
.qa-opt.is-selected .qa-board{border-color:rgba(255,188,149,.5);
  box-shadow:0 0 0 1px rgba(255,188,149,.22),0 26px 64px -32px rgba(0,0,0,.75);}
.qa-shot{display:block;width:100%;height:auto;}
/* crop-mark corners — markup */
.qa-corner{position:absolute;width:13px;height:13px;border:1.5px solid var(--peach);
  opacity:.5;pointer-events:none;}
.qa-corner.tl{top:9px;left:9px;border-right:0;border-bottom:0;}
.qa-corner.tr{top:9px;right:9px;border-left:0;border-bottom:0;}
.qa-corner.bl{bottom:9px;left:9px;border-right:0;border-top:0;}
.qa-corner.br{bottom:9px;right:9px;border-left:0;border-top:0;}
/* annotations under the board */
/* notes now stack vertically WITHIN each option column */
.qa-notes{display:flex;flex-direction:column;gap:clamp(15px,2.1vh,22px);
  margin-top:clamp(17px,2.3vh,24px);}
.qa-note{position:relative;}
.qa-nh{display:flex;align-items:center;gap:9px;margin-bottom:11px;
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--grey);}
.qa-num{flex:none;display:inline-grid;place-items:center;min-width:20px;height:19px;
  padding:0 4px;border-radius:5px;font-size:12px;font-weight:800;
  background:rgba(244,236,226,.06);border:1px solid var(--line-2);color:var(--grey);
  letter-spacing:0;}
.qa-note.ok .qa-nh,.qa-note.ok .qa-num{color:var(--ok);border-color:rgba(158,194,122,.42);}
.qa-note.bad .qa-nh,.qa-note.bad .qa-num{color:var(--peach-2);border-color:rgba(249,158,118,.42);}
.qa-note.verdict .qa-nh,.qa-note.verdict .qa-num{color:var(--peach);border-color:rgba(255,188,149,.42);}
.qa-note ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
.qa-note li{position:relative;padding-left:16px;font-size:clamp(12px,.92vw,14px);
  color:var(--grey);line-height:1.5;}
.qa-note li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
  border-radius:2px;background:var(--peach);opacity:.5;}
.qa-note.ok li::before{background:var(--ok);}
.qa-note.bad li::before{background:var(--peach-2);}
/* Option A: the disproved premise — kept in the list but visually demoted +
   flagged (no strikethrough, sentence-case chip). */
.qa-note.ok li.qa-wrong{color:var(--grey-dim);}
.qa-note.ok li.qa-wrong::before{background:var(--peach-2);opacity:.55;}
.qa-flag{display:inline-block;margin-left:7px;font-size:12px;font-weight:700;
  letter-spacing:.005em;color:var(--peach-2);border:1px solid rgba(249,158,118,.5);
  border-radius:5rem;padding:2px 8px;vertical-align:middle;white-space:nowrap;line-height:1.2;}
.qa-note.verdict p{margin:0;font-size:clamp(12px,.9vw,14px);color:var(--grey-dim);
  line-height:1.6;border-left:2px solid rgba(255,188,149,.42);padding-left:14px;}
.qa-grid2{display:flex !important;flex-direction:column;gap:8px;}
@media (max-width:760px){
  .qa-redline{grid-template-columns:1fr;}
}

/* ---- B3: single options layout (replaces the 2-column carousel) ---- */
.b3-stage{display:flex;flex-direction:column;gap:clamp(100px,15vh,220px);
  margin-top:clamp(44px,7vh,96px);}
/* Option 1 — wide combined error-state board + its conclusion */
.b3-opt1{display:flex;flex-direction:column;gap:clamp(20px,3vh,34px);}
.b3-board{position:relative;container-type:size;width:100%;max-width:1330px;margin:0 auto;aspect-ratio:1330/500;
  border-radius:14px;overflow:hidden;border:1px solid var(--line-2);background:#0d0b09;}
.b3-board img,.b3-board image-slot{display:block;width:100%;height:100%;object-fit:cover;}
/* Option 1 rationale, overlaid INSIDE the image's green "Selected" rectangle
   (white bg there → dark/green text), scaled to the board via container units. */
/* Option 1 rationale, overlaid on the image's baked-in black panel (bottom-right
   of the green box). Transparent panel — the black background is in the image. */
.b3-greenfill{position:absolute;left:65.8%;right:1.8%;top:49.2%;bottom:4.7%;
  display:flex;flex-direction:column;justify-content:center;gap:1.2cqh;
  padding:1.6cqh 2cqw;box-sizing:border-box;overflow:hidden;text-align:left;}
.b3-gname{font-size:max(12px,1.4cqw);font-weight:700;color:var(--cream);line-height:1.15;}
.b3-gh{font-size:max(12px,1.05cqw);font-weight:700;color:var(--peach);letter-spacing:.01em;}
.b3-glist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.8cqh;}
.b3-glist li{position:relative;padding-left:1.5cqw;font-size:max(12px,1cqw);color:var(--grey);line-height:1.32;}
.b3-glist li::before{content:"";position:absolute;left:0;top:.55em;width:.55cqw;height:.55cqw;
  border-radius:1px;background:var(--peach);opacity:.7;}
.b3-opt1-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3.5vw,64px);align-items:start;width:100%;max-width:1330px;margin:0 auto;}
.b3-opt1-lead{display:flex;flex-direction:column;gap:9px;min-width:0;}
/* Options 2 & 3 — slot + content rows, stacked one above the other */
.b3-opt-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  gap:clamp(24px,3vw,56px);align-items:end;}
.b3-opt-row.swap{grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  margin-top:clamp(56px,9vh,120px);}
.b3-opt-row.swap .b3-slot{order:2;aspect-ratio:auto;}
.b3-opt-row.swap .b3-opt-body{order:1;}
.b3-opt-row.swap .b3-slot img{height:auto;object-fit:contain;}
.b3-slot{width:100%;border-radius:14px;overflow:hidden;
  border:1px solid var(--line-2);background:#0d0b09;}
.b3-slot img,.b3-slot image-slot{display:block;width:100%;height:auto;}
.b3-opt-body{display:flex;flex-direction:column;gap:11px;min-width:0;max-width:46ch;}
.b3-opt-row:not(.swap) .b3-opt-body{justify-self:start;}
.b3-opt-row.swap .b3-opt-body{justify-self:end;}
/* these blocks aren't inside .pv4-pane, so reset list styling explicitly */
.b3-stage .pv4-kd ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;}
.b3-stage .pv4-kd li{position:relative;padding-left:15px;font-size:clamp(12px,.92vw,14.5px);
  color:var(--grey);line-height:1.45;}
.b3-stage .pv4-kd li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;
  border-radius:2px;background:var(--peach);opacity:.55;}
.b3-stage .pv4-kd.bad li::before{background:var(--peach-2);}
@media (max-width:880px){
  .b3-opt1-body{grid-template-columns:1fr;}
  .b3-opt-row,.b3-opt-row.swap{grid-template-columns:1fr;}
  .b3-opt-row.swap .b3-slot{order:0;}
  .b3-opt-row.swap .b3-opt-body{order:0;}
}
/* B4 explorations: numbered grid of horizontal-rectangle option slots */
.b4-explore{display:flex;flex-direction:column;gap:clamp(14px,2vh,20px);}
.b4-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,32px);}
.pv5 .pv4-gannot .fname{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
[data-screen-label*="B4"] .pv5-shipped .pv4-gif{display:block;}
/* keep the final-design side slot near its "Why this design" content (bottom of
   the column) rather than pinned to the top of the main image slot */
[data-screen-label*="B4"] .pv5-shipped .pv4-gannot{justify-content:flex-end;}
[data-screen-label*="B4"] .pv5-shipped .pv4-gannot .pv4-gslots{margin-top:0;margin-bottom:max(0px,calc(var(--pv4colgap) - 11px));}
.b4-cell{display:flex;align-items:center;justify-content:center;border-radius:14px;overflow:hidden;
  border:1px solid var(--line-2);background:#fff;padding:clamp(14px,1.8vw,28px);box-sizing:border-box;}
/* B4 version-shipped side slot: let the final-design image fill the slot width at
   its natural height (bigger image, shorter slot) instead of stretching tall. */
[data-screen-label*="B4"] .pv5-shipped .pv4-gslots{display:block;flex:none;}
[data-screen-label*="B4"] .pv5-shipped .pv4-gslots .gslot{position:relative;flex:none;width:100%;
  background:#fff;border-radius:12px;overflow:hidden;box-sizing:border-box;min-height:0;
  display:block;padding:0;}
[data-screen-label*="B4"] .pv5-shipped .pv4-gslots .gslot .b4-fd-static{position:relative;display:block;width:100%;height:auto;overflow:hidden;background:#fff;}
[data-screen-label*="B4"] .pv5-shipped .pv4-gslots .gslot img{max-width:none;width:100%;height:auto;object-fit:fill;display:block;padding:0;background:transparent;}
/* hide the leftover empty number-badge circle on B4's final-design side slot */
[data-screen-label*="B4"] .pv5-shipped .pv4-gslots .gslot::before{content:none !important;display:none !important;}
[data-screen-label*="B4"] .pv5-shipped .gslot .b4-fd-chip{position:absolute;top:clamp(11px,1.4vw,15px);
  left:clamp(11px,1.4vw,15px);z-index:4;font-size:clamp(12px,.95vw,13.5px);font-weight:700;
  letter-spacing:.01em;color:#fff;border:1px solid rgba(255,188,149,.5);background:#1f1813;
  border-radius:5rem;padding:5px 13px;line-height:1;white-space:nowrap;}
.b4-cell image-slot,.b4-cell img{display:block;width:100%;height:auto;}
.b4-num{position:absolute;top:10px;left:10px;z-index:3;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;font-size:13px;font-weight:800;
  color:#3a2417;background:var(--peach);box-shadow:0 2px 8px rgba(0,0,0,.4);}
.pv5 .pv4-gslots .gslot{background:#fff;border-radius:12px;overflow:hidden;}
.pv5 .pv4-gslots .gslot img{display:block;width:100%;height:100%;object-fit:contain;
  padding:clamp(14px,1.8vw,28px);box-sizing:border-box;background:#fff;}
@media (max-width:880px){ .b4-grid{grid-template-columns:1fr;} }
/* B4: 40/60 split — explorations slot (left) + selected layout & its content (right) */
.b4-split{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  gap:clamp(24px,3vw,56px);align-items:start;}
.b4-col-explore{display:flex;flex-direction:column;gap:clamp(12px,2vh,18px);min-width:0;}
.b4-explore-slot{aspect-ratio:3/4;border-radius:14px;overflow:hidden;border:1px solid var(--line-2);
  background:#0d0b09;}
.b4-explore-slot image-slot,.b4-explore-slot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;}
.b4-selected{display:flex;flex-direction:column;gap:clamp(18px,2.6vh,32px);min-width:0;}
.b4-selected>.pv4-lab{align-self:flex-end;}
.b4-selected-media{border-radius:14px;overflow:hidden;
  border:1px solid var(--line-2);background:#0d0b09;}
.b4-selected-media image-slot,.b4-selected-media img{display:block;width:100%;height:auto;}
.b4-selected-body{display:flex;flex-direction:column;gap:11px;max-width:54ch;}
.b4-selected-body .pv4-kd ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;}
.b4-selected-body .pv4-kd li{position:relative;padding-left:15px;font-size:clamp(12px,.92vw,14.5px);
  color:var(--grey);line-height:1.45;}
.b4-selected-body .pv4-kd li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;
  border-radius:2px;background:var(--peach);opacity:.55;}
@media (max-width:880px){ .b4-split{grid-template-columns:1fr;} .b4-explore-slot{min-height:300px;} }
/* Option 3 — long, slim screenshot: shown at a modest centred width with the
   analysis below it, surrounded by generous negative space (not full-bleed). */
.b3-opt3{display:flex;flex-direction:column;align-items:center;
  gap:clamp(24px,3.5vh,46px);padding:clamp(6px,1.4vh,18px) 0;}
.b3-opt3-media{width:100%;max-width:940px;}
.b3-opt3-media img{display:block;width:100%;height:auto;border-radius:14px;
  border:1px solid var(--line-2);background:#0d0b09;}
.b3-opt3-body{width:100%;max-width:940px;display:flex;flex-direction:column;gap:11px;}
@media (max-width:980px){ .b3-opt3-media,.b3-opt3-body{max-width:100%;} }
/* Exceptions sub-section: title + description above the two stacked options */
.b3-replace{display:flex;flex-direction:column;gap:clamp(28px,4.5vh,60px);}
.b3-subhead{display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(28px,4vw,80px);}
.b3-subtitle{font-size:clamp(18px,1.7vw,26px);font-weight:600;color:var(--cream);
  letter-spacing:-.015em;line-height:1.15;}
.b3-subtitle .pk{color:var(--peach);}
.b3-subhead .pv5-desc{margin:0;flex:0 1 auto;}
@media (max-width:880px){ .b3-subhead{flex-direction:column;align-items:flex-start;gap:12px;} }

/* ---- options: carousel + synced text, free flow ---- */
.pv5 .pv4-opts{position:static;top:auto;transform:none;display:flex;
  align-items:flex-end;gap:clamp(18px,2.4vw,38px);opacity:1;pointer-events:auto;}

/* ---- B1: vertical alternating flows (replaces the carousel) ---- */
.pv5-flows{position:relative;display:flex;flex-direction:column;
  gap:clamp(200px,32.5vh,425px);}
.pv5-conn{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;overflow:visible;}
.pv5-conn path.track{fill:none;stroke:rgba(255,188,149,.85);stroke-width:2;
  stroke-dasharray:2 9;stroke-linecap:round;}
.pv5-conn path.reveal{fill:none;stroke:#fff;stroke-linecap:round;}
.pv5-flow{position:relative;z-index:1;}
.pv5-flow{display:grid;grid-template-columns:58% minmax(0,1fr);
  gap:clamp(24px,3vw,58px);align-items:end;}
.pv5-flow.rev{grid-template-columns:minmax(0,1fr) 58%;}
.pv5-flow .pv5-flow-media{order:1;}
.pv5-flow .pv5-flow-body{order:2;display:flex;flex-direction:column;gap:13px;
  min-width:0;}
.pv5-flow.rev .pv5-flow-media{order:2;}
.pv5-flow.rev .pv5-flow-body{order:1;}
.pv5-flow-media img{width:100%;aspect-ratio:16/9;object-fit:cover;
  object-position:top center;display:block;border-radius:14px;
  border:1px solid var(--line-2);background:#0d0b09;}
.pv5-flow-body>.pv4-lab{align-self:flex-start;}
/* flow 2: 20% narrower slot, image fit within, no frame/background */
.pv5-flow.flow-bare .pv5-flow-media{display:flex;justify-content:center;}
.pv5-flow.flow-bare .pv5-flow-media img{width:80%;aspect-ratio:3/1;height:auto;
  object-fit:contain;border:0;background:transparent;border-radius:14px;}
@media (max-width:880px){
  .pv5-flow,.pv5-flow.rev{grid-template-columns:1fr;gap:18px;}
  .pv5-flow .pv5-flow-media,.pv5-flow.rev .pv5-flow-media{order:1;}
  .pv5-flow .pv5-flow-body,.pv5-flow.rev .pv5-flow-body{order:2;}
  .pv5-flow.flow-bare .pv5-flow-media img{width:100%;}
}

/* ---- Version Shipped block ---- */
.pv5-shipped{margin-top:clamp(52px,8vh,96px);}
/* B1: match the flow2→shipped gap to the flow1→flow2 inter-flow gap above it */
.pv5-flows + .pv5-shipped{margin-top:clamp(200px,32.5vh,425px);}
.pv5-shipped>.pv4-lab{position:static;display:inline-flex;margin:0 0 clamp(12px,2vh,20px);
  color:var(--peach);border-color:rgba(255,188,149,.45);}
.pv5-shipdesc{margin:-6px 0 clamp(14px,2.2vh,22px);font-size:clamp(12px,.9vw,14px);
  color:var(--grey-dim);max-width:72ch;line-height:1.5;text-wrap:pretty;}
.pv5-shipdesc .kt{font-weight:650;color:var(--cream);}
.pv5-shiprow{display:grid;grid-template-columns:66% minmax(0,1fr);
  column-gap:var(--pv4colgap);align-items:end;}
.pv5-shiprow.full{display:block;}
.pv5 .pv4-gif{position:static;inset:auto;opacity:1;pointer-events:auto;
  width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0d0b09;
  max-width:max(420px, calc((100svh - var(--resv,250px)) * 1.7778));}
.pv5 .pv4-gif.duo{aspect-ratio:auto;max-width:none;background:transparent;
  overflow:visible;border-radius:0;display:flex;gap:clamp(14px,1.6vw,24px);
  align-items:flex-end;}
/* shipped screenshot — show full image at its natural aspect (no 16:9 crop).
   NB: class is .screencap (not .shot) to avoid colliding with case-study.css's
   ".shot img{opacity:0}" browser-window component, which would hide it. */
.pv5 .pv4-gif.screencap{aspect-ratio:auto;max-width:none;background:transparent;
  overflow:visible;border-radius:0;}
.pv5 .pv4-gif.screencap img{display:block;width:100%;height:auto;border-radius:14px;
  border:1px solid var(--line-2);background:#0d0b09;}
.pv5 .duo-item .pv4-lab{position:static;margin:0;transform:none;order:2;
  align-self:center;color:var(--cream);border-color:var(--line-2);}
/* relocated Flow 3 content, sitting below the shipped duo — 3-column grid:
   col1 = the flows, col2 = "re-imagined search accomplished", col3 = breathing room */
.pv5-shipbody{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,3vw,56px);min-width:0;align-items:end;text-align:left;
  margin-top:clamp(24px,3.6vh,42px);}
.pv5-shipcol{display:flex;flex-direction:column;gap:13px;min-width:0;align-items:flex-start;}
.pv5-shipcol>.pv4-lab{align-self:flex-start;}
/* the accomplished list isn't inside a .pv4-pane, so it keeps the browser's
   default ~16px ul margins — the bottom one left dead space under the last
   bullet, breaking the bottom-alignment. Reset it so the last line truly
   sits on the column's bottom edge. */
.pv5-shipbody .pv4-kd ul{margin:0;padding-left:18px;}
.pv5-shipbody .pv4-kd li{line-height:1.45;}
@media (max-width:880px){ .pv5-shipbody{grid-template-columns:1fr;} }
/* keep the shipped chip pinned to the left edge of the duo */
.pv5-shipped>.pv4-lab.nm-conn-end{align-self:flex-start;}
/* let the scroll-drawn connector reach the chip below the flows */
.pv5-conn{overflow:visible;}

/* ---- GIF→video demo swaps: autoplay/loop + click pause-play ---- */
.vidbox{position:relative;display:block;width:100%;cursor:pointer;}
.pv5 .pv4-gif .vidbox{height:100%;}
.pv4-vid{display:block;width:100%;}
.pv5-flow-media .pv4-vid{aspect-ratio:16/9;object-fit:cover;object-position:top center;
  border-radius:14px;border:1px solid var(--line-2);background:#0d0b09;}
.pv5 .duo-item .pv4-vid{height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:14px;border:1px solid var(--line-2);background:#0d0b09;}
.pv5 .pv4-gif .pv4-vid{height:100%;object-fit:cover;}
/* play ▶ / pause ❚❚ affordance */
.vidctl{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;
  background:rgba(12,10,8,.5);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  border:1px solid rgba(255,188,149,.45);display:grid;place-items:center;
  opacity:0;transition:opacity .22s ease;pointer-events:none;z-index:3;}
.vidbox.is-paused .vidctl{opacity:1;}
.vidbox:not(.is-paused):hover .vidctl{opacity:.92;}
.vidctl .ic{display:block;}
.vidbox.is-paused .vidctl .ic{width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--peach);margin-left:4px;}
.vidbox:not(.is-paused) .vidctl .ic{width:14px;height:18px;border-style:solid;
  border-width:0 5px 0 5px;border-color:var(--peach);}
.pv5 .pv4-gannot{display:flex;flex-direction:column;gap:11px;align-items:flex-start;
  text-align:left;align-self:stretch;justify-content:flex-end;min-height:0;}
.pv5 .pv4-gslots{display:flex;flex-direction:column;flex:1;min-height:0;
  align-self:stretch;gap:calc(var(--pv4colgap)/4);
  margin-bottom:max(0px, calc(var(--pv4colgap)/2 - 11px));}
.pv5 .pv4-gslots .gslot{position:relative;flex:1;min-height:44px;display:flex;}
.pv5 .pv4-gslots image-slot{flex:1;min-height:0;width:100%;display:block;}

/* ---- Before/After block ---- */
.pv5-bablock{margin-top:clamp(52px,8vh,96px);display:flex;flex-direction:column;
  align-items:center;padding-bottom:clamp(10px,2vh,24px);}
.pv5-bablock>.pv4-lab{position:static;display:inline-flex;margin:0 0 clamp(12px,2vh,20px);
  color:var(--peach);border-color:rgba(255,188,149,.45);}
.pv5 .pv4-fstage{transition:none;}
.pv5 .pv4-fannot{margin-top:clamp(12px,2vh,20px);}

/* ---- small screens ---- */
@media (max-width:880px){
  .pv5-pill.is-stuck{left:auto;right:var(--pad);max-width:54vw;}
  .pv5-desc{justify-content:flex-start;}
  .pv5-desc .pv4-slead{max-width:100%;}
  .pv5 .pv4-opts{flex-direction:column;align-items:stretch;}
  .pv5 .pv4-screen{width:100%;max-width:none;}
  .pv5-shiprow{display:block;}
  .pv5 .pv4-gif{max-width:none;}
  .pv5 .pv4-gif.duo{flex-direction:column;align-items:stretch;}
  .pv5 .pv4-gannot{margin-top:18px;}
  .pv5 .pv4-gslots{margin-top:14px;margin-bottom:0;gap:10px;}
  .pv5 .pv4-gslots .gslot{min-height:64px;}
  .pv5 .pv4-fstage{width:100%;max-width:none;}
}

/* ============================================================
   Cluster C · decision hierarchy
   The cluster is really TWO decisions. The opener lists them
   (.pv5-declist); Decision 2 gets a labelled divider
   (.pv5-decopen) and the two sections that realise it (Cart
   summary, Cart details) are nested beneath it with a kicker
   (.pv5-subkick).
   ============================================================ */

/* the two decisions, shown as Pixar-3D pop-out graphics beside their text;
   the row sits at ~1/3 of the viewport height. No bounding container — just
   the image (with a base glow) next to its caption. Sway is JS-driven. */
.pv5-decgraf{margin:clamp(22px,3vh,38px) 0 0;list-style:none;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,44px);
  height:clamp(260px,33vh,420px);}
@media (max-width:720px){ .pv5-decgraf{grid-template-columns:1fr;height:auto;
  gap:clamp(26px,6vw,38px);} }
.pv5-decg{display:flex;align-items:stretch;gap:clamp(14px,1.6vw,24px);
  position:relative;overflow:visible;}
@media (max-width:720px){ .pv5-decg{height:clamp(210px,54vw,270px);} }
/* image stage — reduced to half height, the image centred and sized to fill
   the stage width; it overflows top & bottom rather than being letterboxed. */
.pv5-decg-stage{position:relative;flex:0 0 42%;align-self:flex-end;height:50%;
  display:flex;align-items:flex-end;justify-content:center;overflow:visible;}
@media (max-width:720px){ .pv5-decg-stage{height:auto;} }
.pv5-decg-img{flex:none;width:100%;aspect-ratio:1.598;height:auto;
  transform-origin:50% 50%;will-change:transform;}
/* glowing elliptical shadow at the base of the model */
.pv5-decg-glow{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:60%;height:clamp(16px,2.2vw,28px);border-radius:50%;z-index:0;
  pointer-events:none;background:var(--cl-cart);filter:blur(18px);opacity:.4;
  will-change:transform;}
/* text beside the image, bottom-aligned to the image base; the number stacks
   ON TOP of the title, inside the text block */
.pv5-decg-body{flex:1 1 auto;display:flex;flex-direction:column;
  justify-content:flex-end;min-width:0;padding-bottom:clamp(2px,.5vw,6px);}
.pv5-decg-body .dn{flex:none;width:1.95em;height:1.95em;border-radius:50%;
  display:grid;place-items:center;font-size:clamp(12px,.92vw,14px);
  font-weight:700;color:var(--cl-cart);font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,var(--cl-cart) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--cl-cart) 38%,transparent);}
.pv5-decg-body .dt{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(6px,.7vw,10px);min-width:0;}
.pv5-decg-body .dt b{font-size:clamp(15px,1.25vw,19px);font-weight:650;
  color:var(--cream);letter-spacing:-.01em;}
.pv5-decg-body .dt span{font-size:clamp(12.5px,.92vw,14.5px);color:var(--grey);
  line-height:1.45;}

/* Decision-2 opener — a labelled divider; everything until the next cluster
   reads as nested under it */
.pv5-decopen{max-width:1500px;
  margin:clamp(50px,7.5vh,108px) auto clamp(26px,4vh,54px);
  box-sizing:border-box;padding:0 var(--pad);}
/* C1: the gap from the decisions LIST (in the cluster header) down to the
   first decision body must read as the biggest break — larger than the
   parent→child gap above. */
.pvC .pv4-chead + .pv5-decopen{margin-top:clamp(84px,12.5vh,156px);}
.pv5-decopen .row{display:flex;gap:clamp(16px,1.9vw,30px);align-items:flex-start;}
.pv5-decopen .dn{flex:none;font-size:clamp(22px,2.2vw,32px);font-weight:600;
  line-height:1;color:var(--cl-cart);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;}
.pv5-decopen .dbody{display:flex;flex-direction:column;gap:9px;}
.pv5-decopen .deyebrow{font-size:clamp(12px,.85vw,13.5px);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cl-cart);}
.pv5-decopen h4{margin:0;font-size:clamp(22px,2.1vw,31px);font-weight:600;
  color:var(--cream);letter-spacing:-.02em;line-height:1.1;}
.pv5-decopen h4 .pk{color:var(--peach);}
.pv5-decopen p{margin:0;max-width:64ch;font-size:clamp(12.5px,.95vw,15px);
  color:var(--grey);line-height:1.5;}
.pv5-decopen .arr{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.pv5-decopen .arr span{font-size:clamp(12px,.82vw,13.5px);font-weight:600;
  color:var(--cream);padding:6px 12px;border-radius:8px;
  border:1px solid var(--line-2);background:rgba(244,236,226,.04);}
.pv5-decopen .arr span b{color:var(--cl-cart);font-weight:700;}
/* Decision 2 has two children, so give its opener a larger gap down to the
   first child section than the default parent→child gap. */
.pv5-decopen.dec-gap{margin-bottom:clamp(65px,10vh,135px);}
/* 2.1 section header: stack the title block and its description vertically
   (instead of title-left / description-right). */
.pvC .pv5-head--stack{flex-direction:column;align-items:flex-start;
  gap:clamp(10px,1.6vh,16px);}
.pvC .pv5-head--stack .pv5-desc{justify-content:flex-start;}
.pvC .pv5-head--stack .pv4-slead{max-width:62ch;}

/* a title column so a kicker can sit ABOVE the pill inside the flex .pv4-sec */
.pv5-titlecol{display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
.pv5-subkick{display:inline-flex;align-items:center;gap:.55rem;
  font-size:clamp(12px,.8vw,13px);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cl-cart);}
.pv5-subkick::before{content:"";width:16px;height:1px;flex:none;
  background:color-mix(in srgb,var(--cl-cart) 60%,transparent);}

/* ============================================================
   Cluster C · no all-caps. The cluster reuses label classes
   shared with clusters B & D, so the override is scoped to the
   .pvC wrapper on C's three screens only.
   ============================================================ */
.pvC, .pvC *{text-transform:none !important;}
/* soften the wide tracking that only read well in caps */
.pvC .deyebrow,.pvC .pv5-subkick,.pvC .clp,.pvC .pv4-lab,
.pvC .vh,.pvC .fk,.pvC .fsub,.pvC .fl,.pvC .pv4-stat,
.pvC .b3-subtitle,.pvC .pv4-pname .pv4-stat{letter-spacing:.01em;}

/* ============================================================
   Cluster C · TYPE HIERARCHY (documented)
   Cluster C nests one level deeper than the other clusters — it
   groups sub-sections under each decision — so its heading scale
   adds an H5/H6 below the shared cluster/main-section levels:

     H3  cluster title     .pvC .pv4-chead .h-sec   clamp(22,2.5vw,40)  biggest; shared across all clusters
     H4  decision parent   .pvC .pv5-decopen h4     clamp(22,2.1vw,31)  == a "main section" .ttl elsewhere
     H5  decision child     .pvC .pv4-sec .ttl       clamp(16,1.5vw,21)  clearly subordinate to the decision
     H6  card / pane title  .pvC .pv4-pname/.fname   clamp(15,1.2vw,18) wt700  cream — top tier
     —   pane sub-header     .pvC .pv4-pane .vh       clamp(13,1vw,14)   wt700  peach label
     —   pane bullet (child) .pvC .pv4-pane li        clamp(12,.92vw,13) wt400  grey body
     —   eyebrow (parent)   .pvC .deyebrow           ~12px  cart-blue label
     —   kicker (child)     .pvC .pv5-subkick        ~11px  cart-blue label (smaller than the eyebrow)
     —   decision number    .pvC .pv5-decopen .dn    clamp(22,2.2vw,32)  paired with H4, never larger than H3
     —   body lead          .pvC .pv4-clead          clamp(13,1vw,15.5) grey  (cluster intro)
     —   body / section desc .pvC .pv5-decopen p, .pv4-slead  clamp(12.5,.95vw,15) grey
   The .h-sec (H3) and the eyebrow/number stay as-is; only H4 was
   shrunk (was 24-40, == H3) and H5/H6 were pinned below it.
   ============================================================ */
.pvC :is(h4,h5,h6){margin:0;}
.pvC .pv4-sec .ttl{font-size:clamp(16px,1.5vw,21px);font-weight:600;line-height:1.2;}
.pvC .pv5-subkick{font-size:clamp(12px,.78vw,12.5px);}
.pvC .deyebrow{font-size:clamp(12px,.85vw,13.5px);}
.pvC .pv4-pname,.pvC .pv4-gannot .fname{font-size:clamp(15px,1.2vw,18px);font-weight:700;}
/* Cluster C pane · 3-tier hierarchy — header (cream 700) clearly > sub-header
   (peach 700, smaller) clearly > bullets (grey 400, smaller still). Size +
   weight + colour all separate the levels; ordering holds at every viewport. */
.pvC .pv4-pane .vh{font-size:clamp(13px,1vw,14px);font-weight:700;}
.pvC .pv4-pane li{font-size:clamp(12px,.92vw,13px);}
/* Decision 1 shows a single static design (no options) — hide carousel chrome */
.pv4-screen--static .pv4-chev,.pv4-screen--static .pv4-dots{display:none !important;}
/* Decision 1 right column: a drop-slot fills the space ABOVE the content,
   separated from it by the same gap as the left↔right column gap. The column
   is aligned to the LEFT IMAGE (not the label above it): padding-top skips the
   label+gap so the slot starts at the image's top edge, and margin-bottom:0
   drops the content to the image's bottom edge — so slot+gap+content == image. */
.pvC .pv4-panel--slot{align-self:stretch;display:flex;flex-direction:column;
  gap:clamp(18px,2.4vw,38px);padding-top:38px;margin-bottom:0;}
.pvC .pv4-panel--slot .pv4-decimg{flex:1 1 auto;min-height:0;width:100%;display:block;
  border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:#0d0b09;}
.pvC .pv4-panel--slot .pv4-pane{flex:none;}
/* Decision 1 side slot hidden (with its dropped image); the rationale pane
   stays, bottom-aligned to the image. */
.pvC .pv4-panel--slot{justify-content:flex-end;}
.pvC .pv4-panel--slot .pv4-decimg{display:none;}
/* Decision-2 children (2.1, 2.2): static image left + content right,
   bottom-aligned to the image (matches the Decision 1 child layout). */
.pvC .pv4-panel--btm{align-self:stretch;display:flex;flex-direction:column;
  justify-content:flex-end;margin-bottom:0;}

/* ===== Schemes (D) · 2-row exploration layout =====================
   Row 1: 4 glassy image containers (numbered, no carousel), small caption
   below each. Row 2: one slightly bigger glassy container + final content. */
.pv4-opts.sch-opts{flex-direction:column;align-items:stretch;gap:clamp(46px,7vh,104px);
  margin-top:clamp(70px,9vh,120px);}
.sch-explab{align-self:flex-start;margin-bottom:clamp(10px,1.4vh,16px);
  color:var(--cl-schemes);border-color:color-mix(in srgb,var(--cl-schemes) 40%,transparent);}
.sch-grid4{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.6vw,26px);}
.sch-card{position:relative;margin:0;display:flex;flex-direction:column;
  gap:clamp(8px,1vh,12px);min-width:0;}
.sch-glass{position:relative;border-radius:16px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,1.1vw,15px);box-sizing:border-box;
  border:1px solid var(--line-2);
  background:linear-gradient(155deg,rgba(244,236,226,.08),rgba(244,236,226,.02));
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);}
.sch-glass image-slot{width:100%;aspect-ratio:582/198;height:auto;display:block;border-radius:10px;color:var(--grey);}
.sch-glass image-slot::part(frame){background:rgba(244,236,226,.05);}
.sch-n{position:absolute;top:10px;left:10px;z-index:3;width:1.95em;height:1.95em;
  border-radius:50%;display:grid;place-items:center;font-size:clamp(12px,.9vw,14px);
  font-weight:700;color:var(--cl-schemes);font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,var(--cl-schemes) 18%,rgba(12,10,8,.66));
  border:1px solid color-mix(in srgb,var(--cl-schemes) 48%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.sch-cap{display:flex;flex-direction:column;gap:3px;text-align:left;}
.sch-cap b{font-size:clamp(13px,1vw,15px);font-weight:600;color:var(--cream);letter-spacing:-.01em;}
.sch-cap span{font-size:clamp(12px,.9vw,13.5px);color:var(--grey);line-height:1.4;}
/* Scheme card · states — title block on top, 2 captioned glass cards below */
.sch-states-grid{display:grid;grid-template-columns:repeat(2,minmax(0,340px));
  gap:clamp(16px,2vw,30px);justify-content:start;}
.sch-states-grid .sch-glass image-slot{aspect-ratio:622/220;}
.sch-glass .vidbox{width:100%;}
.sch-glass .sch-vid{width:100%;aspect-ratio:622/220;object-fit:contain;border-radius:10px;display:block;background:transparent;}

/* Reimagined flow — full-fold 2-col hero: video 60% left, title 40% right */
.flowend-sec{min-height:100vh;display:flex;flex-direction:column;justify-content:center;--resv:245px;}
.flowend-sec .maxw{width:100%;}
.flowend-grid{display:grid;grid-template-columns:66% minmax(0,1fr);align-items:end;
  column-gap:clamp(18px,2.4vw,38px);width:100%;}
.flowend-media{min-width:0;}
.flowend-vslot{position:relative;width:100%;aspect-ratio:1.6;border-radius:18px;
  border:1px solid var(--line-2);background:#0d0b09;overflow:hidden;
  display:grid;place-items:center;}
.flowend-vhint{font-size:clamp(13px,1vw,15px);color:var(--grey-dim);letter-spacing:.04em;}
.flowend-title{display:flex;flex-direction:column;gap:clamp(14px,1.8vh,24px);text-align:left;align-self:end;}
/* usability-footage beat — media 60%, 16:9 footage */
.beat.beat--footage{grid-template-columns:60% minmax(0,1fr);align-items:end;}
.beat.beat--footage .beat-copy .plist .pitem:last-child{padding-bottom:0;}

/* Mobile flow — 4 journeys, Z-pattern; each step a uniform, centered block */
.mob-flow{display:flex;flex-direction:column;gap:clamp(64px,11vh,140px);}
.mob-beat{grid-template-columns:256px 420px;column-gap:25px;
  width:max-content;margin-inline:auto;align-self:center;align-items:center;}
.mob-beat.flip{grid-template-columns:420px 256px;}
.mob-beat .beat-media.phone{max-width:256px;width:100%;margin:0;}
.mob-beat .beat-copy{gap:clamp(12px,1.6vh,18px);}
.mob-beat .beat-copy p strong{color:var(--cream);font-weight:650;}
.mob-beat .phone .shot image-slot{display:block;width:100%;height:100%;color:var(--grey);}
.mob-beat .phone .shot image-slot::part(frame){background:rgba(244,236,226,.04);}
@media (max-width:760px){
  .mob-beat,.mob-beat.flip{grid-template-columns:1fr;width:100%;}
  .mob-beat .beat-media.phone{margin:0 auto 6px;}
}
.beat.beat--footage .frame{margin:0;width:100%;}
@media (max-width:880px){.beat.beat--footage{grid-template-columns:1fr;}}
@media (max-width:880px){
  .flowend-sec{min-height:0;}
  .flowend-grid{grid-template-columns:1fr;gap:28px;}
}
@media (max-width:680px){.sch-states-grid{grid-template-columns:1fr;max-width:340px;}}
.sch-final{display:flex;flex-direction:column;align-items:stretch;}
.sch-shiplab{align-self:flex-start;color:var(--peach);
  border-color:rgba(255,188,149,.45);margin:0 0 clamp(14px,2vh,22px);}
.sch-final-row{display:flex;align-items:flex-end;gap:clamp(22px,2.8vw,46px);}
.sch-final-media{flex:0 0 clamp(390px,41.6%,598px);min-width:0;}
.sch-final-media .sch-glass image-slot{width:100%;aspect-ratio:622/220;height:auto;}
.sch-final-body{flex:1;min-width:0;display:flex;flex-direction:column;
  gap:clamp(10px,1.4vh,16px);padding-bottom:0;}
.sch-final-body .pv4-kd{margin-bottom:0;}
.sch-final-body .pv4-pname{font-weight:700;}
.sch-final-body .pv4-kd .vh{font-size:clamp(13px,1vw,14px);font-weight:700;}
.sch-final-body .pv4-kd ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
.sch-final-body .pv4-kd li{position:relative;padding-left:18px;font-size:clamp(12px,.92vw,13px);
  color:var(--grey);line-height:1.45;}
.sch-final-body .pv4-kd li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;
  border-radius:2px;background:var(--peach);opacity:.55;}
@media (max-width:880px){
  .sch-grid4{grid-template-columns:repeat(2,1fr);}
  .sch-final{flex-direction:column;align-items:stretch;}
  .sch-final-media{flex:none;}
}

/* ==== journey line, flush variant (ported from Tracking v3's jm6-flush; the
   mechanic is column-agnostic). Start/End captions removed — reclaim their
   gutters so grid + emotion curve + labels widen in lockstep. Line gets a
   solid dot start-cap and square end-cap, both 10px = .jm3mark arrow height,
   both var(--peach) like the arrows. Placement v5 opts in via the class. */
.jm3tl.jm6-flush{padding:0 clamp(10px,1vw,16px);}
.jm3tl.jm6-flush .jm3line{left:0;right:0;}
.jm3tl.jm6-flush .jm3line::before{content:"";position:absolute;left:-1px;top:50%;
  transform:translateY(-50%);width:10px;height:10px;border-radius:50%;
  background:var(--peach);}
.jm3tl.jm6-flush .jm3line::after{border:0;width:10px;height:10px;
  background:var(--peach);}
/* emotion-axis labels: the flush frame reclaimed the caption gutters, so the
   old hang-outside placement (translateX(-100%)) escaped the section margin.
   Keep them INSIDE the plot's top-left / bottom-left corners; sentence case. */
.jm3tl.jm6-flush .jm4ax{transform:none;padding-right:0;
  text-transform:none;letter-spacing:.08em;}