/* ===========================================================================
   tracking.css — Order Tracking case study additions
   Extends case-study.css / order-study.css / process-v*.css tokens.
   Cluster palette (consistent across affinity + journey):
   =========================================================================== */
:root{
  --ot-cons:#ffbc95;    /* Consolidated Order View */
  --ot-status:#6f8dff;  /* Status Clarity & Exception-First */
  --ot-find:#e8d9a0;    /* Findability & Navigation */
  --ot-recon:#b4dbb4;   /* Accuracy & Reconciliation */
  --ot-cash:#d9a7ff;    /* Control & Cash Flow */
  --ot-verify:#79d6c8;  /* Verification & Records */
  /* RELATIONSHIP-GAP LADDER — pick a gap by the RELATIONSHIP between the two
     things, NEVER by which class an element happens to be. Tightest→loosest;
     every value on the spacing ladder (12·16·18·24·32·48·64·96).
     INVARIANT (the ?audit enforces it): a within/child gap MUST be smaller than
     the gap separating its group from the title/sibling above it.
        --gap-line < --gap-tc < --gap-block < --gap-sub < section          */
  --gap-line:12px;   /* lines/items inside ONE text body (list items, caption lines) */
  --gap-tc:16px;     /* a title → the content it directly introduces */
  --gap-block:24px;  /* a block → its sibling block */
  --gap-sub:32px;    /* the gap ABOVE a sub-section title (must exceed --gap-tc) */
}

/* ---- TBD placeholders (hero KPIs + results) ---- */
.kpi-tbd .n .tbd,.tbd{
  color:var(--grey-dim);
  border-bottom:2px dashed rgba(244,236,226,.22);
  padding-bottom:.02em;letter-spacing:.02em;
}
[data-pending]{color:var(--grey-dim)!important;}
[data-pending]::after{content:"";}

/* ---- generic pros/cons list bullets when used outside .pv4-pane ---- */
.pv4-pc>.pros ul,.pv4-pc>.cons ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;}
.pv4-pc>.pros li,.pv4-pc>.cons li{position:relative;padding-left:15px;font-size:clamp(12.5px,.92vw,14.5px);color:var(--grey);line-height:1.45;}
.pv4-pc>.pros li::before,.pv4-pc>.cons li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:2px;}
.pv4-pc>.pros li::before{background:var(--ok,#9ec27a);}
.pv4-pc>.cons li::before{background:var(--peach-2);}
/* overwhelmed-dealer pros block: amber bullets (warm yellow, hue-shifted from peach) */
.pv4-pc>.pros.ow-amber li::before{background:oklch(0.79 0.125 80);}

/* Option-2-vs-3 comparison block: full-width image (no glass box) + two columns under it */
.ot-cmp-sec{margin-top:clamp(8px,1.4vh,16px);}
.ot-cmp2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,56px);align-items:start;}
.ot-cmp2 .ot-cmp-col{display:flex;flex-direction:column;gap:12px;}
.ot-cmp2 .ot-cmp-col+.ot-cmp-col{position:relative;}
.ot-cmp2 .ot-cmp-col+.ot-cmp-col::before{content:"";position:absolute;left:calc(-1 * clamp(12px,1.7vw,28px));top:2px;bottom:2px;width:1px;background:var(--line,rgba(244,236,226,.1));}
@media(max-width:760px){.ot-cmp2{grid-template-columns:1fr;gap:28px;} .ot-cmp2 .ot-cmp-col+.ot-cmp-col::before{display:none;}}

/* Zone-3 "options in a row" — diluted carousel: 3 options side by side, content left-aligned under each image */
.ot-optrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,40px);align-items:start;margin-top:clamp(24px,3.2vh,44px);}
.ot-optcell{display:flex;flex-direction:column;gap:14px;min-width:0;}
/* option-row slots: same continuous outline as the .glass cards above (1px solid line-2) */
.ot-optrow .pv4-imgwrap image-slot{outline:1px solid var(--line-2);outline-offset:-1px;}
.ot-optbody{display:flex;flex-direction:column;gap:12px;min-width:0;}
/* 14.1 rail carousel: same solid 1px outline as every other carousel's media;
   the component's dashed drop-ring is retired for these (slots are filled) */
[data-screen-label="Process · 14.1 — Right rail"] .pv4-imgwrap image-slot{
  outline:1px solid var(--line-2);outline-offset:-1px;border-radius:14px;}
[data-screen-label="Process · 14.1 — Right rail"] .pv4-imgwrap image-slot::part(ring){display:none;}
.ot-optbody .pv4-pc{gap:14px;}
@media(max-width:860px){.ot-optrow{grid-template-columns:1fr;}}

/* "Needs" intro block above the pros/cons in a pv4 pane */
.pv4-need{padding-top:2px;margin-bottom:14px;}
.pv4-need .vh{font-size:clamp(12.5px,.95vw,14.5px);font-weight:650;letter-spacing:.01em;color:var(--peach);margin-bottom:7px;}
.pv4-need p{margin:0;font-size:clamp(12.5px,.95vw,15px);color:var(--grey);line-height:1.5;}


/* ===================== WORKING WITH AI ===================== */
.ai-ba{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,2vw,28px);align-items:stretch;}
.ai-col{padding:24px 22px;border-radius:18px;}
.ai-arrow{align-self:center;font-size:2rem;color:var(--peach);opacity:.7;}
.ai-list{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;}
.ai-list li{position:relative;padding-left:18px;font-size:clamp(13.5px,1vw,16px);color:var(--grey);line-height:1.5;}
.ai-list li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:2px;background:var(--peach);opacity:.6;}
.ai-col.is-after .ai-list li::before{background:var(--ot-status);opacity:.85;}
@media(max-width:860px){ .ai-ba{grid-template-columns:1fr;} .ai-arrow{transform:rotate(90deg);justify-self:center;} }

/* ===================== MANY-TO-MANY ===================== */
.m2m-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,24px);}
.m2m-pt{padding:18px 20px;border-radius:16px;border:1px solid var(--line);background:rgba(244,236,226,.025);}
.m2m-k{display:block;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--peach-2);margin-bottom:9px;}
.m2m-pt p{font-size:clamp(13.5px,1vw,16px);color:var(--grey);line-height:1.55;}
.scopechip{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;color:var(--cream);
  padding:9px 16px;border-radius:5rem;background:rgba(244,236,226,.04);border:1px solid var(--line-2);}
.scopechip .d{width:.45rem;height:.45rem;border-radius:50%;background:var(--ot-cons);}
@media(max-width:760px){ .m2m-grid{grid-template-columns:1fr;} }

/* ===================== HEURISTICS TABLE ===================== */
.htable{display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:16px;overflow:hidden;}
.htrow{display:grid;grid-template-columns:64px 1.1fr 2fr 1.4fr;gap:14px;padding:14px 18px;border-top:1px solid var(--line);align-items:start;}
.htrow:first-child{border-top:0;}
.htrow--head{background:rgba(244,236,226,.04);}
.htrow--head span{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-dim);}
.hcode{font-weight:700;color:var(--peach);font-size:.92rem;}
.hname{font-weight:600;color:var(--cream);font-size:clamp(13px,.95vw,15px);}
.htrow span:not(.hcode):not(.hname){font-size:clamp(12.5px,.9vw,14.5px);color:var(--grey);line-height:1.5;}
.hev{color:var(--grey-dim)!important;font-style:italic;}
@media(max-width:820px){
  .htrow{grid-template-columns:54px 1fr;gap:6px 12px;}
  .htrow .hname{grid-column:2;}
  .htrow span:not(.hcode):not(.hname){grid-column:2;}
  .htrow--head{display:none;}
}

/* ===================== STORYBOARD SCENARIOS ===================== */
.scn{margin-top:clamp(34px,5vh,64px);}
.scn-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:16px;}
.scn-no{font-size:clamp(26px,3vw,44px);font-weight:700;color:var(--peach);line-height:1;letter-spacing:-.02em;}
.scn-tt h3{font-size:clamp(18px,1.8vw,26px);font-weight:600;color:var(--cream);line-height:1.1;}
.scn-who{display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;font-weight:600;color:var(--grey);margin-top:4px;}
.scn-who .d{width:.4rem;height:.4rem;border-radius:50%;background:var(--ot-status);}
.scn-pain{margin-left:auto;max-width:42ch;font-size:.82rem;color:var(--grey-dim);line-height:1.45;font-style:italic;}
.scn-strip{grid-template-columns:repeat(3,1fr)!important;}
@media(max-width:860px){ .scn-pain{margin-left:0;flex-basis:100%;} .scn-strip{grid-template-columns:1fr!important;} }

/* ===================== AFFINITY (static synthesis) ===================== */
.ot-srckey{display:flex;flex-wrap:wrap;gap:16px 26px;}
.ot-srckey span{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;color:var(--grey);}
.ot-srckey i{width:.6rem;height:.6rem;border-radius:50%;}
.ot-aff{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);}
.ot-board{display:flex;flex-direction:column;gap:12px;padding:clamp(16px,1.6vw,22px);border-radius:18px;}
.ot-board .clp{align-self:flex-start;}
.ot-built{font-size:.82rem;color:var(--grey-dim);line-height:1.5;border-left:2px solid var(--line-2);padding-left:11px;}
.ot-built b{color:var(--cream);}
.ot-built em{color:var(--grey-dim);}
.ot-cards{display:flex;flex-direction:column;gap:9px;margin-top:2px;}
.ot-chal{padding:12px 13px;border-radius:12px;background:rgba(244,236,226,.035);border:1px solid var(--line);}
.ot-chal p{font-size:clamp(12.5px,.92vw,14.5px);color:var(--cream);line-height:1.4;font-weight:500;}
.ot-chal .adots{display:inline-flex;gap:4px;margin-top:9px;}
.ot-chal .adots i{width:.45rem;height:.45rem;border-radius:50%;}
/* cluster pill dots + board accents */
.clp.ot-cons .d{background:var(--ot-cons);} .ot-board:has(.ot-cons){--ct:var(--ot-cons);}
.clp.ot-status .d{background:var(--ot-status);} .ot-board:has(.ot-status){--ct:var(--ot-status);}
.clp.ot-find .d{background:var(--ot-find);} .ot-board:has(.ot-find){--ct:var(--ot-find);}
.clp.ot-recon .d{background:var(--ot-recon);} .ot-board:has(.ot-recon){--ct:var(--ot-recon);}
.clp.ot-cash .d{background:var(--ot-cash);} .ot-board:has(.ot-cash){--ct:var(--ot-cash);}
.clp.ot-verify .d{background:var(--ot-verify);} .ot-board:has(.ot-verify){--ct:var(--ot-verify);}
.ot-board{border:1px solid color-mix(in oklab, var(--ct,#ffbc95) 28%, transparent);
  background:linear-gradient(160deg, color-mix(in oklab, var(--ct,#ffbc95) 7%, rgba(20,16,11,.55)), rgba(16,13,11,.5));}
.ot-board .clp{border-color:color-mix(in oklab, var(--ct,#ffbc95) 40%, transparent);color:var(--cream);}
@media(max-width:980px){ .ot-aff{grid-template-columns:1fr 1fr;} }
@media(max-width:680px){ .ot-aff{grid-template-columns:1fr;} }

/* ===================== JOURNEY — 6 columns ===================== */
.jm4grid.ot-jm6{grid-template-columns:repeat(6,1fr)!important;}
.jm4emolabels.ot-jm6{grid-template-columns:repeat(6,1fr)!important;}
.jm4pains li.ot-cons{--kc:var(--ot-cons);} .jm4pains li.ot-status{--kc:var(--ot-status);}
.jm4pains li.ot-find{--kc:var(--ot-find);} .jm4pains li.ot-recon{--kc:var(--ot-recon);}
.jm4pains li.ot-cash{--kc:var(--ot-cash);} .jm4pains li.ot-verify{--kc:var(--ot-verify);}
/* fixes text: rose — unique vs all six Tracking cluster colours (the shared
   teal #8fd9c9 collided with --ot-verify teal). Tracking-only override. */
.jm4fix{color:#f7a1c4;}
.jm4key .k4--fix{color:#f7a1c4;}
/* journey icon 1 (glowing bulb): solid bulb body spans only 62% of the render's
   height (rest is glow halo). Scale so the BULB matches the slot height at any
   viewport; the glow bleeds out (transform doesn't affect layout). Geometry is
   asset-specific: bulb bbox y 980–2928 of 3124 → scale 1.604, centre 62.5%. */
.jm3ic image-slot#ot-jm-ic-1{transform:translateY(-12.5%) scale(1.604);
  transform-origin:50% 62.5%;pointer-events:none;}
/* journey icon 3 (PQRS pulse): solid ribbon spans 71.5% of frame width →
   scale 1.4 so the line reads at slot width; glow bleeds out. */
.jm3ic image-slot#ot-jm-ic-3{transform:scale(1.4);transform-origin:50% 50%;
  pointer-events:none;}
/* journey icon 4 (warning triangle): squat proportions — modest 1.45 lift
   only (1.8 read as blown-up; user: don't inflate unnecessarily). */
.jm3ic image-slot#ot-jm-ic-4{transform:scale(1.45);transform-origin:50% 50%;
  pointer-events:none;}
/* journey line, flush variant (v3): Trigger/Closed captions removed — reclaim
   their reserved side padding so grid + emotion curve + labels all widen in
   lockstep (they share this frame; % positions stay in sync structurally).
   Line gets a solid dot start-cap and square end-cap, both 10px tall = the
   .jm3mark arrow height (5px+5px borders), both var(--peach) like the arrows. */
.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;}
/* emotion-curve labels: centre each under ITS dot (dots are non-uniform — a
   6-col grid can't align them). Same lefts as the .jm4dot inline styles. */
@media(min-width:1025px){
  .jm4emolabels.ot-jm6{display:block;position:relative;min-height:2.9em;}
  .jm4emolabels.ot-jm6 span{position:absolute;top:0;width:max-content;
    text-align:center;transform:translateX(-50%);}
  .jm4emolabels.ot-jm6 span:nth-child(1){left:8%;}
  .jm4emolabels.ot-jm6 span:nth-child(2){left:26%;}
  .jm4emolabels.ot-jm6 span:nth-child(3){left:41.67%;}
  .jm4emolabels.ot-jm6 span:nth-child(4){left:58.33%;}
  .jm4emolabels.ot-jm6 span:nth-child(5){left:75%;}
  .jm4emolabels.ot-jm6 span:nth-child(6){left:96%;}
}
/* pain TEXT takes its own Tracking cluster colour (the ported component only fed
   --kc to the key dots; Placement's palette classes never apply here) */
.jm4pains li.ot-cons,.jm4pains li.ot-status,.jm4pains li.ot-find,
.jm4pains li.ot-recon,.jm4pains li.ot-cash,.jm4pains li.ot-verify{color:var(--kc);}
@media(max-width:1024px){
  .jm4grid.ot-jm6,.jm4emolabels.ot-jm6{grid-template-columns:repeat(3,1fr)!important;}
}
@media(max-width:680px){
  .jm4grid.ot-jm6,.jm4emolabels.ot-jm6{grid-template-columns:1fr!important;}
}

/* ===================== PROCESS — stages ===================== */
.ot-stage{position:relative;z-index:1;}
.ot-stage>.maxw{max-width:1500px;margin:0 auto;box-sizing:border-box;padding:clamp(24px,4vh,52px) var(--pad) clamp(48px,7vh,90px);}
.ot-lede{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(20px,3vw,46px);align-items:start;margin-bottom:clamp(40px,5vh,72px);}
.ot-lede-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--gap-line);}
.ot-lede-list li{font-size:clamp(14px,1.05vw,17px);color:var(--grey);line-height:1.65;}
.ot-lede-list b{color:var(--cream);} .ot-lede-list em{color:var(--peach);font-style:normal;}
/* bulleted variant — real peach disc markers via ::before (flex layout suppresses
   native ::marker, so we draw the dot). Use for plain bullet descriptions; the
   definition-style stage lede stays marker-less. */
.ot-lede-list.ot-bul li{position:relative;padding-left:1.1em;}
.ot-lede-list.ot-bul li::before{content:"";position:absolute;left:.12em;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--peach);}
/* bulleted descriptions sit TIGHTER than definition ledes — text items in one
   body read as a unit; the peach markers keep them distinct. 6px = half the
   12px line token, well below the 16px title→body gap above. */
.ot-lede-list.ot-bul{gap:6px;}
.ot-serves{font-size:clamp(13px,.95vw,15px);color:var(--grey-dim);line-height:1.65;
  border-left:2px solid var(--line-2);padding-left:16px;}
.ot-serves b{color:var(--peach-2);}
.ot-serves .who{color:var(--cream);font-weight:600;}

.ot-zone{margin-top:clamp(48px,7vh,96px);}
.ot-zone-h{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:8px;}
.ot-zno{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--peach);
  padding:5px 11px;border-radius:5rem;background:rgba(255,188,149,.08);border:1px solid color-mix(in oklab,var(--peach) 30%,transparent);}
.ot-zone-h h4{font-size:clamp(19px,2vw,30px);font-weight:600;color:var(--cream);line-height:1.05;letter-spacing:-.01em;}
.ot-zp{font-size:clamp(14px,1.05vw,17px);color:var(--grey);line-height:1.65;max-width:80ch;margin-bottom:24px;}
.ot-deck-k{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-dim);margin:var(--gap-sub) 0 var(--gap-tc);}
/* mid-level sub-headline — more prominent than the .ot-deck-k kicker, below a
   full section/pill title. */
.ot-subhead{font-size:clamp(17px,1.5vw,22px);font-weight:600;color:var(--cream);letter-spacing:-.01em;line-height:1.25;margin:var(--gap-sub) 0 var(--gap-tc);}
/* PROXIMITY (token-driven, title-class-agnostic): a title and the media block it
   introduces are ONE unit, separated by --gap-tc. List every TITLE class on the
   left and every MEDIA class on the right — adding a new title class is a one-word
   edit here, not a new rule. --gap-tc is delivered by the deck-k's own margin-
   bottom (so its media zeroes its top), or by the media's top margin for titles
   (.wrap-head) that have no bottom margin. Either way title→content == --gap-tc,
   which the audit asserts stays < the gap ABOVE the title. */
:is(.ot-deck-k,.ot-subhead) + :is(.ot-hub,.ot-main,.ot-mainrow,.ot-duo,.ot-stateset){margin-top:0;}
/* §14 sets .ot-main/.ot-hub margin-top:48 (equal specificity, wins by order) which
   would override the hug above — restore the title→media hug with higher specificity. */
[data-screen-label^="Process · 14"] :is(.ot-deck-k,.ot-subhead) + :is(.ot-hub,.ot-main,.ot-mainrow,.ot-duo,.ot-stateset){margin-top:0;}
:is(.wrap-head) + :is(.ot-hub,.ot-main,.ot-mainrow,.ot-duo,.ot-stateset){margin-top:var(--gap-tc);}
.ot-cap{font-size:clamp(12.5px,.92vw,14.5px);color:var(--grey-dim);line-height:1.65;margin-top:16px;max-width:90ch;}
.ot-cap b{color:var(--cream);} .ot-cap em{color:var(--peach);font-style:normal;}
/* caption that must track the width of the .ot-mainrow slot above it (66% capped
   by the same fold formula), brighter + 14px (settled-order "In short"). */
body.ord .ot-cap.ot-cap-fit{font-size:14px;color:var(--grey);max-width:min(66%, max(420px, calc((100svh - 245px) * 1.7778)));}
.ot-notes{margin:24px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px;}
.ot-notes li{position:relative;padding-left:16px;font-size:clamp(13px,.98vw,15.5px);color:var(--grey);line-height:1.5;}
.ot-notes li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:2px;background:var(--peach);opacity:.6;}
.ot-notes b{color:var(--cream);} .ot-notes em{color:var(--peach);font-style:normal;}

/* triad */
.triad{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:12px;}
.triad-3{grid-template-columns:repeat(4,1fr);margin-top:clamp(28px,4vh,48px);margin-bottom:clamp(72px,10vh,120px);}
.tri{padding:20px;border-radius:16px;}
.tri-k{display:block;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--peach-2);margin-bottom:16px;}
.tri ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;}
.tri li{position:relative;padding-left:16px;font-size:clamp(12.5px,.92vw,14.5px);color:var(--grey);line-height:1.6;}
.tri li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:2px;background:var(--peach);opacity:.55;}
.tri-mid{background:linear-gradient(160deg,rgba(255,188,149,.07),rgba(18,14,11,.5));}
.tri-mid p{font-size:clamp(12.5px,.95vw,15px);color:var(--cream);line-height:1.5;}
.tri p{font-size:clamp(12.5px,.95vw,15px);color:var(--grey);line-height:1.5;}
.tri-foot{color:var(--grey-dim);font-style:italic;margin-top:8px;}
.tri em{color:var(--peach);font-style:normal;}
.tri li b{color:var(--cream);font-weight:600;}
@media(max-width:1100px){ .triad{grid-template-columns:repeat(2,1fr);} }
@media(max-width:820px){ .triad{grid-template-columns:1fr;} }

/* comparison matrix */
.cmp{display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;}
.cmp-row{display:grid;grid-template-columns:1.6fr repeat(var(--cmp-cols,4),1fr);gap:12px;align-items:center;
  padding:12px 20px;border-top:1px solid var(--line);}
.cmp-row:first-child{border-top:0;}
.cmp-head{background:rgba(244,236,226,.04);}
.cmp-head span{font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--grey-dim);text-align:center;}
.cmp-head .cmp-rk{text-align:left;}
.cmp-rk{font-size:clamp(12.5px,.9vw,14.5px);color:var(--cream);font-weight:500;line-height:1.5;}
.cmp .yes,.cmp .no{justify-self:center;font-size:1rem;font-weight:700;}
.cmp .yes{color:var(--ok,#9ec27a);} .cmp .no{color:var(--peach-2);opacity:.8;}
.cmp-row>span:not(.cmp-rk){text-align:center;font-size:.84rem;color:var(--grey);}
/* default col counts via nth header — fallback handled inline */
.cmp-row{grid-template-columns:1.6fr repeat(4,1fr);}
.cmp:has(.cmp-head span:nth-child(4):last-child) .cmp-row{grid-template-columns:1.6fr repeat(3,1fr);}
.cmp:has(.cmp-head span:nth-child(6):last-child) .cmp-row{grid-template-columns:1.6fr repeat(5,1fr);}
.cmp:has(.cmp-head span:nth-child(7):last-child) .cmp-row{grid-template-columns:1.5fr repeat(6,1fr);}
@media(max-width:760px){
  .cmp{overflow-x:auto;} .cmp-row{min-width:560px;}
}

/* figure rows */
.figrow{display:grid;gap:20px;}
.figrow-2{grid-template-columns:repeat(2,1fr);}
.figrow-3{grid-template-columns:repeat(3,1fr);}
.figrow-4{grid-template-columns:repeat(4,1fr);}
.figrow-5{grid-template-columns:repeat(5,1fr);}
.figrow-6{grid-template-columns:repeat(6,1fr);}
@media(max-width:980px){ .figrow-4,.figrow-5,.figrow-6{grid-template-columns:repeat(3,1fr);} }
@media(max-width:720px){ .figrow-2,.figrow-3,.figrow-4,.figrow-5,.figrow-6{grid-template-columns:repeat(2,1fr);} }
@media(max-width:480px){ .figrow{grid-template-columns:1fr;} }

.ot-twocol{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media(max-width:760px){ .ot-twocol{grid-template-columns:1fr;} }
.ot-tradeoff{margin-top:24px;}
.ot-insight{padding:clamp(24px,2.8vw,36px);border-radius:18px;margin-top:24px;}
.ot-insight p{font-size:clamp(13.5px,1vw,16px);color:var(--grey);line-height:1.6;}
.ot-insight .ot-deck-k{font-size:clamp(15px,1.3vw,19px);font-weight:700;color:var(--cream);letter-spacing:.01em;margin-top:0;}
.ot-insight b{color:var(--cream);} .ot-insight .peach{color:var(--peach);}
.ot-insight .frame{margin-top:16px;}

/* search returns grid */
.srchgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.srch{padding:20px;border-radius:16px;display:flex;flex-direction:column;}
.srch-k{display:block;font-size:.86rem;font-weight:700;color:var(--cream);margin-bottom:12px;}
.srch-k em{display:block;font-style:normal;font-size:.72rem;font-weight:600;color:var(--peach-2);margin-top:4px;font-family:ui-monospace,Menlo,monospace;letter-spacing:.02em;}
.srch-a{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
.srch-a li{position:relative;padding-left:16px;font-size:.82rem;color:var(--grey);line-height:1.55;}
.srch-a li::before{content:"\2192";position:absolute;left:0;top:0;color:var(--peach);opacity:.7;font-size:.8rem;}
@media(max-width:760px){ .srchgrid{grid-template-columns:1fr;} }

/* option cards (A/B/C) */
.opts{display:grid;gap:16px;}
.opts-3{grid-template-columns:repeat(3,1fr);}
.opt{padding:20px;border-radius:16px;display:flex;flex-direction:column;gap:12px;}
.opt-h{font-size:.82rem;font-weight:700;letter-spacing:.04em;color:var(--cream);}
.opt.is-pick{border-color:color-mix(in oklab,var(--peach) 45%,transparent);
  background:linear-gradient(160deg,rgba(255,188,149,.08),rgba(18,14,11,.5));}
.opt.is-pick .opt-h{color:var(--peach);}
@media(max-width:860px){ .opts-3{grid-template-columns:1fr;} }

/* Q&A decision rows */
.qa{display:flex;flex-direction:column;gap:12px;}
.qa-row{display:grid;grid-template-columns:1.4fr auto 2fr;gap:16px;align-items:center;padding:20px;border-radius:14px;position:relative;}
/* qa-pop: fills the card's right 40% — flush top/bottom/right, NO fixed
   aspect ratio (explicit user call for the 14.3 Q&A cards: 60% text / 40%
   slot, side-by-side at every width). Invisible when filled. */
.qa-pop{position:absolute;right:0;top:0;bottom:0;width:40%;height:auto;aspect-ratio:auto;transform:none;z-index:5;}
.limitcard .qa-pop{top:auto;bottom:0;width:60%;height:auto;aspect-ratio:11/9;transform:none;}
/* reserve right-side space ONLY in cards that carry a pop, so the text wraps to
   narrower lines and never runs under the extruding image. */
.qa-row:has(.qa-pop){padding-right:calc(40% + 14px);}
.limitcard:has(.qa-pop){padding-right:60%;}
/* the taller (1.5×) limit-card models pop well above the card top — give the row
   enough top gap that they clear the sub-headline above. */
.ot-twocol:has(.qa-pop){margin-top:clamp(108px,13vh,156px);}
.ot-lede.ot-lede--act{margin-top:32px;align-items:end;grid-template-columns:1fr 1fr;}
.qa-pop image-slot{width:100%;height:100%;display:block;}
.qa-q{font-size:clamp(13px,.98vw,15.5px);color:var(--cream);font-weight:500;line-height:1.55;}
.qa-d{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--peach);
  padding:6px 12px;border-radius:5rem;border:1px solid color-mix(in oklab,var(--peach) 35%,transparent);
  background:rgba(255,188,149,.08);white-space:nowrap;text-align:center;}
.qa-w{font-size:clamp(12.5px,.92vw,14.5px);color:var(--grey);line-height:1.5;}
.qa-w em{color:var(--peach);font-style:normal;}
@media(max-width:820px){ .qa-row{grid-template-columns:1fr;gap:10px;} .qa-d{justify-self:start;} }
/* 14.3 — Q&A as 3 horizontal columns: the row of rows becomes a 3-col grid and
   each .qa-row stacks its text vertically (question → decision chip →
   reasoning) in the left 60%; the pop slot owns the right 40%. */
[data-screen-label="Process · 14.3 — Read status"] .qa{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch;}
[data-screen-label="Process · 14.3 — Read status"] .qa-row{grid-template-columns:1fr;align-items:start;align-content:start;gap:12px;}
[data-screen-label="Process · 14.3 — Read status"] .qa-d{justify-self:start;}
@media(max-width:820px){[data-screen-label="Process · 14.3 — Read status"] .qa{grid-template-columns:1fr;}}

/* enrichment chips */
.enrich{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.enrich-4{grid-template-columns:repeat(4,1fr);}
.enrich-5{grid-template-columns:repeat(5,1fr);}
.en{padding:20px;border-radius:13px;}
.en b{display:block;font-size:.88rem;color:var(--cream);margin-bottom:4px;}
.en span{font-size:.8rem;color:var(--grey);line-height:1.6;}
@media(max-width:980px){ .enrich-4,.enrich-5{grid-template-columns:repeat(3,1fr);} }
@media(max-width:720px){ .enrich,.enrich-4,.enrich-5{grid-template-columns:repeat(2,1fr);} }
@media(max-width:460px){ .enrich,.enrich-4,.enrich-5{grid-template-columns:1fr;} }

/* numbered steps */
.csteps{display:grid;grid-template-columns:repeat(7,1fr);gap:16px;}
.csteps-4{grid-template-columns:repeat(4,1fr);}
.csteps-3{grid-template-columns:repeat(3,1fr);}
.cstep{padding:20px;border-radius:14px;border:1px solid var(--line);background:rgba(244,236,226,.025);position:relative;}
.cstep.is-sel{border-color:color-mix(in oklab,var(--ot-cash) 40%,transparent);background:rgba(217,167,255,.06);}
.cstep-n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:.8rem;font-weight:700;
  color:var(--bg);background:var(--peach);margin-bottom:12px;}
.cstep.is-sel .cstep-n{background:var(--ot-cash);}
.cstep-b b{display:block;font-size:.88rem;color:var(--cream);margin-bottom:8px;line-height:1.2;}
.cstep-b p{font-size:.8rem;color:var(--grey);line-height:1.6;}
.cstep-tag{display:inline-block;margin-top:8px;font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ot-cash);padding:3px 8px;border-radius:5rem;border:1px solid color-mix(in oklab,var(--ot-cash) 35%,transparent);}
@media(max-width:1100px){ .csteps{grid-template-columns:repeat(4,1fr);} }
@media(max-width:720px){ .csteps,.csteps-4{grid-template-columns:repeat(2,1fr);} .csteps-3{grid-template-columns:1fr;} }
@media(max-width:460px){ .csteps,.csteps-4{grid-template-columns:1fr;} }

/* hard-limit / callout cards */
.limitcard{padding:24px 28px;border-radius:16px;position:relative;}
.lim-k{display:block;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--peach-2);margin-bottom:8px;}
.limitcard p{font-size:clamp(13px,.98vw,15.5px);color:var(--grey);line-height:1.55;}
.limitcard em{color:var(--peach);font-style:normal;}

/* frame placeholder image-slot fill */
.frame .shot image-slot{position:absolute;inset:0;width:100%;height:100%;}
.frame .shot .skl{font-size:.74rem;line-height:1.5;padding:10px;text-align:center;}

/* ALIGNMENT FIX — figures (browser-mock frames) inherit the UA default
   `figure{margin:1em 40px}`, which pushed every image 40px right of its own
   caption/label and added 16px of stray top gap. Reset it so frames line up
   left with their captions across the whole case study. */
body.ord figure{margin:0;}
/* success-flow card must sit within the page margin like every other block
   (it was added body-level and ran full-bleed). Mirror .pv5-main geometry. */
.sf-wrap{max-width:1500px;margin:0 auto;padding:0 var(--pad);box-sizing:border-box;}

/* ===================== AFFINITY v3 (animated) — 6-cluster overrides ===================== */
#affinity-v3 .ot-a3grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1vw,15px);
  grid-auto-rows:auto;
  grid-template-areas:
    "cons cons stat  stat  find  find"
    "recon recon cash cash ver ver";
}
#affinity-v3 .ot-a3grid .a3b{min-width:0;padding:0;gap:6px;display:flex;flex-direction:column;}
#affinity-v3 .a3cards{display:flex;flex-direction:column;gap:6px;flex:none;min-width:0;}
#affinity-v3 .a3b .clp{align-self:flex-start;font-size:.6rem;}
/* per-cluster accent for the animated boards */
#affinity-v3 .a3b:has(.clp.ot-cons){--ct:var(--ot-cons);}
#affinity-v3 .a3b:has(.clp.ot-status){--ct:var(--ot-status);}
#affinity-v3 .a3b:has(.clp.ot-find){--ct:var(--ot-find);}
#affinity-v3 .a3b:has(.clp.ot-recon){--ct:var(--ot-recon);}
#affinity-v3 .a3b:has(.clp.ot-cash){--ct:var(--ot-cash);}
#affinity-v3 .a3b:has(.clp.ot-verify){--ct:var(--ot-verify);}
#affinity-v3 .a3grid .a3b .clp .d{background:var(--ct,#f99e76);}
/* the source legend sits on its own full-width row under the boards */
#affinity-v3 .ot-a3grid .a3key{grid-column:1 / -1;margin:6px 0 0;align-self:start;
  flex-direction:row;flex-wrap:wrap;gap:8px 18px;justify-content:flex-start;}
@media (max-width:980px){
  #affinity-v3 .ot-a3grid{grid-template-columns:repeat(2,1fr);
    grid-template-areas:"cons stat" "find recon" "cash ver";}
}

/* ===================== NO ALL-CAPS (page-wide) ===================== */
/* This stylesheet loads only on the Order Tracking page, so this is scoped
   to it. Drops every uppercase transform to sentence/label case and relaxes
   the wide tracking that only read well in caps. Acronyms (GST, SKU, TSE…)
   stay as authored in the markup. */
body.ord *{ text-transform:none !important; }
body.ord :is(.z1-rowtitle,.eyebrow,.kicker,.clp,.ot-zno,.ot-deck-k,.tri-k,.m2m-k,.lim-k,
  .qa-d,.cstep-tag,.htrow--head span,.pv4-lab,.pv4-stat,.pv5-cluster,.a3cap,
  .rsk,.hslide-tag,.scn-who,.srch-k em,.fk,.fsub,.deyebrow,.pv5-subkick,
  .footer .col h4,.brandset .b,.k4){ letter-spacing:.01em; }

/* ===================== HEURISTICS — annotations as caption bars (no overlap) ===================== */
/* The legacy floating pins were hand-placed over real screenshots; over
   placeholder slots they collide with each other and the slide tag. Reflow
   them as a tidy stacked caption list beneath the frame \u2014 clean gaps, no crops. */
/* ===================== AFFINITY v3 (animated) — keep the scrub, fit the final act ===================== */
/* The only failure was the bulky clustered boards overflowing the 100vh canvas
   onto the header + next section. Fix = compact the clustered cards + drop the
   per-board "Built" notes so the final act fits one screen. The scrub is intact. */
#affinity-v3 .a3head{margin-bottom:clamp(16px,2.4vh,30px);}
#affinity-v3 .a3head .h-sec{font-size:clamp(30px,4.4vw,62px);}
#affinity-v3 .ot-built{display:none !important;}
#affinity-v3 .a3boardwrap{justify-content:center;}
#affinity-v3 .a3c{padding:8px 11px;align-self:stretch;} /* stretch = uniform full-width cards in every cluster at any viewport (visual.css .a3c hugs content via align-self:start) */
#affinity-v3 .a3c p{font-size:calc(.6rem + 2px);line-height:1.3;}
#affinity-v3 .a3c .adots{margin-top:6px;}

/* ===================== DESIGN PROCESS — chip hug + spacing (match Order Placement) ===================== */
/* .wrap-head is a stretch flex column, so a chip with a background stretched
   full-width. Placement keeps cluster chips compact; hug them here too. */
body.ord .wrap-head>.clp{align-self:flex-start;}
/* breathing room: keep the option carousel's pagination dots clear of the
   supporting block beneath, and give each stage generous air. */
body.ord .pv5-main .ot-after{margin-top:clamp(72px,10vh,128px);}
/* dots sit OUTSIDE, below the carousel image, centred — and are taken OUT OF FLOW
   (absolute, top:100%) so the content beside the carousel bottom-aligns to the
   IMAGE edge, never to the dots (standing rule). The row reserves space below. */
body.ord .pv5-main .pv4-opts .pv4-dots{position:absolute;top:100%;left:0;right:0;margin-top:clamp(10px,1.6vh,16px);}
/* …and the counterpart the per-section patches kept missing (14.1 Right rail,
   14.5 Verification row): with dots out of flow, the v4 panel lift
   (margin-bottom ≈22px, sized to in-flow dots) must be zero EVERYWHERE on the
   tracking pages, or panel content floats above the image's bottom edge. */
body.ord .pv5-main .pv4-opts .pv4-panel{margin-bottom:0;}
body.ord .pv5 .pv4-opts{padding-bottom:clamp(22px,3vh,36px);}
body.ord .ot-zlede{margin-bottom:clamp(28px,4vh,48px);}

/* ===================== DESIGN-DECISION LAYOUT KIT (v2) ===================== */
/* Logic borrowed from Order Placement: desktop UI is shown LARGE (16:9, wide),
   text sits beside/below for cross-reference, and close-ups/states are small
   numbered slots — never a wall of equal frames. */
/* a large, full-content-width main desktop-UI frame */
.ot-main{margin-top:clamp(40px,5vh,72px);}
.ot-main>.frame .shot{aspect-ratio:16/9;}
.ot-main--wide>.frame .shot{aspect-ratio:16/7.5;}
.ot-main--tall>.frame .shot{aspect-ratio:4/3;}
.ot-mcap{margin-top:12px;font-size:clamp(12.5px,.92vw,14.5px);color:var(--grey-dim);line-height:1.65;max-width:92ch;}
.ot-mcap b{color:var(--cream);}.ot-mcap em{color:var(--peach);font-style:normal;}

/* ===================== KEY SCENARIOS — THOUGHT-CLOUD ORBIT ===================== */
/* Full-circle halo: four-persona core centre, six scenario clouds on an ellipse.
   Whole stage is scaled by JS to fit one viewport. Clouds explode from behind the
   core once on scroll-in (IntersectionObserver), then settle permanently. */
.scn-orbit-sec{position:relative;display:flex;justify-content:center;align-items:flex-start;
  padding:10px 0 40px;overflow:visible;}
.scn-orbit-scaler{transform-origin:top center;will-change:transform;}
.scn-orbit-stage{position:relative;width:1600px;height:1580px;}
/* stage title (compact, top-centre) */
.scn-orbit-title{position:absolute;top:clamp(4px,1vh,18px);left:var(--pad);max-width:min(440px,44vw);text-align:left;
  z-index:6;pointer-events:none;}
.scn-orbit-title .eyebrow{justify-content:flex-start;}
.scn-orbit-title h2,.scn-orbit-title h3{font-size:36px;line-height:1.05;margin-top:9px;letter-spacing:-.01em;}
/* persona six-part body — “negative” groups (pain points / frustrations) read in peach-2 */
.persona .needs.neg .h{color:var(--peach-2);}
.persona .needs.neg li::before{background:var(--peach-2);}
.persona .pbody .needs+.needs{margin-top:2px;}

/* ===== Personas — subgrid row-alignment + synced topic accordions (mirrors the
   14.3 layout-decision board). Each topic starts on a shared horizontal baseline
   across all three cards; lists collapse into accordions. Scoped to .pa-grid so
   the Order Placement personas are untouched. ===== */
.personas.pa-grid{grid-template-rows:repeat(9,auto);align-items:start;}
.personas.pa-grid .persona{display:grid;grid-row:1/-1;grid-template-rows:subgrid;row-gap:0;}
.personas.pa-grid .pbody{display:contents;}
/* pbody used to supply padding; with display:contents re-apply it to its children */
.personas.pa-grid .pbody>*{padding-inline:22px;}
.personas.pa-grid .pbody>.pname{padding-top:22px;}
.personas.pa-grid .pbody>.traits{padding-top:13px;}
.personas.pa-grid .pbody>.pp{padding-top:13px;}
.personas.pa-grid .pbody>.needs:last-child{padding-bottom:26px;}
/* Personas use the canonical .pc-acc Synced Accordion component for all mechanism
   (head padding/hover-glow, chevron, body 0fr→1fr animation). Context only sets
   the head text colour — the chevron inherits it via currentColor — and the
   accent token: positive topics = peach, negative (Pain points / Frustrations) =
   peach-2 (the .neg class already flips --acc-accent in the component). */
.persona .pc-acc .acc-head{color:var(--peach);}
.persona .pc-acc.neg .acc-head{color:var(--peach-2);}
.persona .pc-acc .acc-head .h{margin-bottom:0;color:inherit;}
/* EXACT parity with the 14.3 board: no separators between accordions — the board
   has none (just padding-top:15px). Kill the .needs border-top + the +2px gap. */
.personas.pa-grid .pbody>.needs{border-top:0;padding-top:15px;}
.personas.pa-grid .pbody .needs+.needs{margin-top:0;}
/* mobile: drop the subgrid, restore the normal stacked flex card */
@media(max-width:980px){
  .personas.pa-grid .persona{display:flex;grid-row:auto;grid-template-rows:none;}
  .personas.pa-grid .pbody{display:flex;}
  .personas.pa-grid .pbody>*{padding-inline:0;}
  .personas.pa-grid .pbody>.pname,
  .personas.pa-grid .pbody>.traits,
  .personas.pa-grid .pbody>.pp{padding-top:0;}
}
/* tether layer */
.scn-tethers{position:absolute;inset:0;width:1600px;height:1580px;z-index:2;pointer-events:none;
  opacity:0;transition:opacity .8s ease .3s;}
.scn-orbit-stage.is-in .scn-tethers{opacity:1;}
.scn-tethers circle{fill:color-mix(in oklab,var(--peach) 62%,transparent);}
/* the core (four personas) */
.scn-core{position:absolute;left:50%;top:830px;transform:translate(-50%,-50%);z-index:5;
  width:220px;height:220px;border-radius:50%;overflow:hidden;
  border:1px solid color-mix(in oklab,var(--peach) 30%,transparent);
  box-shadow:0 0 0 10px rgba(255,188,149,.05),0 24px 70px -20px rgba(0,0,0,.8),
    inset 0 0 60px -20px rgba(255,188,149,.25);}
.scn-core image-slot{position:absolute;inset:0;width:100%;height:100%;}
.scn-core .scn-core-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;text-align:center;
  font-family:ui-monospace,Menlo,monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);padding:24px 8px 12px;background:linear-gradient(to top,rgba(8,6,5,.82),transparent);}
/* core cast art — bleeds past the circle's top & sides, never below; feet stand
   on an elliptical glow inside the circle (v3 hub only; additive) */
.scn-core-glow{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);z-index:0;
  width:340px;height:88px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,188,149,.42),rgba(255,188,149,.14) 55%,transparent 72%);
  filter:blur(10px);}
.scn-core-art{position:absolute;left:50%;top:940px;transform:translate(-50%,-100%);z-index:6;width:218px;}
.scn-core-art image-slot{display:block;position:relative;z-index:1;width:100%;aspect-ratio:1482/2344;}
.scn-core-art image-slot::part(frame){background:transparent;}
.scn-core-art image-slot::part(ring){display:none;}
.scn-core-art image-slot::part(empty){display:none;}
/* hub shows ONLY the cast image + glow — kill the circle ring, halo shadows & caption */
.scn-core{border:0;box-shadow:none;background:transparent;}
.scn-core .scn-core-cap{display:none;}

/* a scenario cloud */
.scn-cloud{position:absolute;left:50%;top:830px;width:300px;z-index:4;
  padding:30px 26px 28px;--cloudc:#1b1510;--edgec:rgba(255,188,149,.5);
  transform:translate(-50%,-50%) scale(.24);opacity:0;
  transition:transform .9s cubic-bezier(.18,.74,.22,1),opacity .55s ease;
  transition-delay:var(--d,0s);}
.scn-cloud>.sc-blob{position:absolute;inset:-8px;z-index:0;pointer-events:none;
  filter:url(#scn-goo) drop-shadow(0 0 1px var(--edgec)) drop-shadow(0 18px 36px rgba(0,0,0,.7));}
.scn-cloud>.sc-blob .bd{position:absolute;inset:34px 20px;border-radius:34px;background:var(--cloudc);}
.scn-cloud>.sc-blob i{position:absolute;border-radius:50%;background:var(--cloudc);transform:translate(-50%,-50%);}
.scn-cloud>:not(.sc-blob){position:relative;z-index:1;}
.scn-orbit-stage.is-in .scn-cloud{
  transform:translate(-50%,-50%) translate(var(--x),var(--y)) scale(1);opacity:1;}
/* tail pointing back toward the core */
.scn-cloud::after{content:none;}
.scn-cloud.t-tl::after{left:20px;top:-7px;transform:rotate(-135deg);}
.scn-cloud.t-tr::after{right:20px;top:-7px;transform:rotate(135deg);}
.scn-cloud.t-bl::after{left:20px;bottom:-7px;transform:rotate(-45deg);}
.scn-cloud.t-br::after{right:20px;bottom:-7px;transform:rotate(45deg);}
.scn-cloud.t-l::after{left:-7px;top:50%;margin-top:-6px;transform:rotate(-135deg);}
.scn-cloud.t-r::after{right:-7px;top:50%;margin-top:-6px;transform:rotate(45deg);}
.scn-cloud .sc-img{display:block;width:100%;height:172px;border-radius:13px;overflow:hidden;position:relative;}
.scn-cloud .sc-img image-slot{position:absolute;inset:0;width:100%;height:100%;}
/* filled scenario image bleeds up & out of the cloud like a 3D set placed on it; base anchored to slot bottom */
.scn-cloud .sc-img:has(image-slot[data-filled]){overflow:visible;}
.scn-cloud .sc-img image-slot[data-filled]{position:absolute;inset:auto;left:50%;bottom:-2px;top:auto;transform:translateX(-50%);
  width:var(--scn-bleed,112%);height:auto;aspect-ratio:3/4;z-index:3;pointer-events:none;}
.scn-cloud .sc-img image-slot[data-filled]::part(frame){background:transparent;overflow:visible;}
.scn-cloud .sc-img image-slot[data-filled]::part(ring){display:none;}
/* scn07 render is a taller 2:3 (arms-up + paper storm) — match its box so it bleeds like the rest */
#ot-scn07-hero[data-filled]{aspect-ratio:2/3;}
.scn-cloud .sc-no{flex:none;width:23px;height:23px;border-radius:50%;margin-top:1px;
  display:grid;place-items:center;font-size:.72rem;font-weight:700;color:var(--bg);background:var(--peach);}
.scn-cloud h3{display:flex;align-items:flex-start;gap:9px;font-size:18px;line-height:1.16;margin:13px 0 4px;color:var(--cream);letter-spacing:-.01em;}
.scn-cloud .sc-body{min-height:124px;}
.scn-cloud .sc-who{display:flex;align-items:center;gap:6px;font-family:ui-monospace,Menlo,monospace;
  font-size:.74rem;letter-spacing:.02em;color:var(--peach);margin-bottom:10px;}
.scn-cloud .sc-who .d{width:5px;height:5px;border-radius:50%;background:var(--peach);flex:none;}
.scn-cloud .sc-pain{font-size:13.5px;line-height:1.45;color:var(--grey);margin-bottom:13px;}
.scn-cloud .sc-pain b{color:var(--cream);font-weight:600;}
.scn-quotes{display:flex;flex-direction:column;gap:9px;}
.scn-q{position:relative;padding:6px 4px 6px 16px;font-size:13.5px;line-height:1.5;color:var(--cream);}
.scn-q::before{content:"\201C";position:absolute;left:3px;top:3px;font-size:18px;line-height:1;color:var(--peach-2);}
.scn-q::after{content:"\201D";margin-left:5px;font-size:18px;line-height:1;color:var(--peach-2);vertical-align:-2px;}
.scn-q.is-ph{font-style:italic;color:#cdc4ba;min-height:112px;display:flex;align-items:flex-start;border:1px dashed color-mix(in oklab,var(--peach) 32%,transparent);
  border-radius:8px;background:repeating-linear-gradient(135deg,rgba(255,188,149,.04) 0 7px,transparent 7px 14px);}
.scn-q.is-ph::before,.scn-q.is-ph::after{content:"";}
/* the 6th — coming-soon placeholder cloud */
.scn-cloud.is-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:10px;min-height:300px;--cloudc:#221c12;--edgec:rgba(201,182,118,.8);}
.scn-cloud.is-soon .ss-no{font-family:ui-monospace,Menlo,monospace;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:#e8d9a0;}
.scn-cloud.is-soon h3{color:#e4dcc4;font-size:17px;margin:0;}
.scn-cloud.is-soon p{font-family:ui-monospace,Menlo,monospace;font-size:.74rem;line-height:1.5;color:#e4dcc4;max-width:22ch;}
@media (prefers-reduced-motion: reduce){
  .scn-cloud{transition:none !important;}
  .scn-tethers{transition:none !important;}
}
/* big main beside a column of annotations (cross-reference).
   60/40 SPLIT STANDARD — mirrors the .pv4-opts carousel + .pv4-panel geometry
   (the canonical "60/40" in this design system; see myawaaz/LAYOUT-SYSTEM.md):
   media = 66% width, capped to fit the fold; content = flex-1; bottom-aligned
   to the MEDIA's bottom edge; media aspect 16:9; gap clamp(18px,2.4vw,38px). */
.ot-mainrow{display:flex;align-items:flex-end;gap:clamp(18px,2.4vw,38px);margin-top:clamp(40px,5vh,72px);--resv:245px;}
.ot-mainrow>.frame{flex:none;width:66%;max-width:max(420px,calc((100svh - var(--resv,250px)) * 1.7778));}
.ot-mainrow>.frame .shot{aspect-ratio:16/9;}
.ot-mainrow .ot-annot{flex:1;min-width:0;display:flex;flex-direction:column;gap:20px;}
.ot-mainrow.is-tall>.frame{max-width:max(420px,calc((100svh - var(--resv,250px)) * .75));}
.ot-mainrow.is-tall>.frame .shot{aspect-ratio:3/4;}
@media(max-width:900px){.ot-mainrow{flex-direction:column;align-items:stretch;}.ot-mainrow>.frame{width:100%;max-width:none;}}
/* numbered close-up strip — small detail slots beneath a main */
.ot-cu{display:grid;grid-template-columns:repeat(var(--cuc,4),1fr);gap:12px;margin-top:16px;}
.ot-cu .frame{position:relative;}
.ot-cu .frame .shot{aspect-ratio:4/3;}
.ot-cu .cun{position:absolute;z-index:3;bottom:10px;left:10px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-size:.72rem;font-weight:700;color:var(--bg);background:var(--peach);}
@media(max-width:900px){.ot-cu{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.ot-cu{grid-template-columns:1fr;}}
/* hub-and-spoke: a single wide slot holding the composed "main → destinations" image */
.ot-hub{margin-top:clamp(40px,5vh,72px);}
.ot-hub>.frame .shot{aspect-ratio:16/8;background:linear-gradient(to bottom right,#342c25,#130f0b);}
/* §14 — standard slot gradient (top-left #342C25 → bottom-right #130F0B) for every slot */
[data-screen-label^="Process · 14"] .shot,[data-screen-label^="Process · 14"] .z1-fshot{background:linear-gradient(to bottom right,#342c25,#130f0b);}
[data-screen-label^="Process · 14"] :is(.z1-shot,.z1-cslide,.pv4-imgwrap,.otopt-shot){background:linear-gradient(to bottom right,#342c25,#130f0b);}
/* clip that gradient to the slot's rounded corners so it doesn't poke past them */
[data-screen-label^="Process · 14"] .pv4-imgwrap{border-radius:14px;}
/* the real UI screenshots are the hero — kill the bottom scrim overlay so nothing tints them */
[data-screen-label^="Process · 14"] .shot::after{content:none;display:none;}
/* …except the dashboard full slot, which keeps its scrim */
[data-screen-label^="Process · 14"] .shot:has(> #ot-dash-full)::after{content:"";display:block;}
.ot-hub .skl{font-size:.78rem;}
/* state set — one element across all its states as uniform captioned tiles */
.ot-stateset{margin-top:clamp(40px,5vh,72px);padding:clamp(20px,2.2vw,32px);border-radius:20px;
  border:1px solid var(--line-2);background:linear-gradient(160deg,rgba(52,40,31,.4),rgba(18,14,11,.5));}
.ot-ss-h{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:24px;}
.ot-ss-k{font-size:.74rem;font-weight:700;letter-spacing:.04em;color:var(--peach);
  font-family:ui-monospace,Menlo,monospace;}
.ot-ss-d{font-size:.86rem;color:var(--grey-dim);line-height:1.45;}
.ot-ssgrid{display:grid;grid-template-columns:repeat(var(--ssc,3),1fr);gap:20px;}
.ot-state{display:flex;flex-direction:column;gap:12px;}
.ot-state>.frame .shot{aspect-ratio:16/10;}
.ot-st-cap{font-size:.8rem;color:var(--cream);font-weight:600;line-height:1.25;}
.ot-st-cap em{display:block;font-style:normal;font-weight:500;font-size:.72rem;color:var(--peach-2);
  font-family:ui-monospace,Menlo,monospace;margin-top:2px;}
.ot-st-sub{font-size:.76rem;color:var(--grey-dim);line-height:1.45;}
@media(max-width:820px){.ot-ssgrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.ot-ssgrid{grid-template-columns:1fr;}}
/* numbered annotation notes beside a main (cross-reference its pins) */
.ot-annot .ot-an{display:flex;gap:12px;align-items:flex-start;}
.ot-an+.ot-an{padding-top:16px;border-top:1px solid var(--line);}
.ot-an-n{flex:none;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;margin-top:1px;
  font-size:.76rem;font-weight:700;background:rgba(255,188,149,.14);color:var(--peach);
  border:1px solid color-mix(in oklab,var(--peach) 35%,transparent);}
.ot-an-t b{display:block;color:var(--cream);font-size:.92rem;margin-bottom:4px;line-height:1.25;}
.ot-an-t p{color:var(--grey);font-size:.82rem;line-height:1.5;}
.ot-an-t em{color:var(--peach);font-style:normal;}
/* Escalation 60/40 content column (§14.4) — title + grouped parent→child bullets.
   Bespoke layout wrapper; bullets reuse the .ot-lede-list.ot-bul library. */
.ot-escpanel{display:flex;flex-direction:column;gap:20px;}
.ot-escpanel .ot-esc-ttl{font-size:clamp(17px,1.5vw,22px);font-weight:600;color:var(--cream);letter-spacing:-.01em;line-height:1.25;}
.ot-escpanel .ot-esc-kik{display:block;margin-top:8px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-dim);}
.ot-escpanel .ot-esc-grp{display:flex;flex-direction:column;gap:8px;}
.ot-escpanel .ot-esc-sub{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--peach);}
/* Offloading-journey storyboard — reuses the .storyboard pop-out scene (visual.css)
   but the step number reads "1." beside the title (no circle). */
.sb-journey .cap{padding:14px 4px 0;}
/* sb-journey slots — full-strip build: as wide as the strip, bottom edge flush with the
   strip's bottom, popping above it. Fixed 1:1 ratio on both boards (4-up & 3-up).
   transform:none kills the inherited translateX(-50%) centring;
   the hover rule below re-supplies the lift WITHOUT it (else the slot jumps left). */
.sb-journey .panel .scene image-slot.sb-img,.sb-journey .panel .scene video.sb-img{left:0;transform:none;width:100%;height:auto;aspect-ratio:1/1;bottom:0;}
.sb-journey .panel .scene video.sb-img{object-fit:cover;} /* 16:9 source in the 1:1 slot — crop sides, fill the square */
.sb-journey .panel .scene video.sb-img[src*="ot-cg-1"]{object-fit:contain;} /* slot 5: fit whole frame inside */
.sb-journey .panel:hover .scene image-slot.sb-img,.sb-journey .panel:hover .scene video.sb-img{transform:translateY(-12px);}
/* pop-out reserve — must hold the 1:1 slot's rise above the strip at every width.
   Slot height = column width, so the reserve is column-width-derived (percent padding
   resolves against container width): colW − strip + 28px air (covers the 12px hover lift).
   Columns: 4-up = (100% − 3·20px)/4 · 3-up (.sb-cg) = (100% − 2·20px)/3 · media stacks below. */
.storyboard.sb-journey{padding-top:calc(25% + 13px - clamp(93px,9vw,120px));}
.storyboard.sb-journey.sb-cg{padding-top:calc(33.333% + 14.667px - clamp(93px,9vw,120px));}
@media (max-width:980px){ .storyboard.sb-journey:not(.sb-cg){padding-top:calc(50% + 18px - clamp(93px,9vw,120px));}
  /* stacked rows: rows after the first need the same headroom — margin-top % on a grid
     item resolves against its grid-area width = column width = slot height. */
  .storyboard.sb-journey:not(.sb-cg) .panel:nth-child(n+3){margin-top:calc(100% + 28px - clamp(93px,9vw,120px));} }
@media (max-width:640px){ .storyboard.sb-journey.sb-cg{padding-top:calc(100% + 28px - clamp(93px,9vw,120px));}
  .storyboard.sb-journey.sb-cg .panel:nth-child(n+2){margin-top:calc(100% + 28px - clamp(93px,9vw,120px));} }
@media (max-width:560px){ .storyboard.sb-journey:not(.sb-cg){padding-top:calc(100% + 28px - clamp(93px,9vw,120px));}
  .storyboard.sb-journey:not(.sb-cg) .panel:nth-child(n+2){margin-top:calc(100% + 28px - clamp(93px,9vw,120px));} }
.sb-journey .cap .sbj-h{display:flex;align-items:baseline;gap:.45rem;}
.sb-journey .cap .sbj-n{flex:none;font-size:clamp(14px,1.1vw,16px);font-weight:700;color:var(--peach);line-height:1.25;}
.sb-journey .cap .sbj-h b{font-size:clamp(15px,1.15vw,17px);font-weight:600;color:var(--cream);letter-spacing:-.01em;line-height:1.25;}
.sb-journey .cap p{font-size:clamp(13px,.98vw,15px);color:var(--grey);line-height:1.5;margin-top:6px;}
/* Constraints & Goals — emphasised sub-section title ABOVE a full-width 3-up
   pop-out storyboard (same panel treatment as the offloading journey). */
.cg-head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(18px,2.6vh,30px);}
.cg-head h3{margin:0;font-size:clamp(17px,1.5vw,22px);font-weight:600;color:var(--cream);letter-spacing:-.01em;line-height:1.15;text-wrap:balance;}
.cg-head h3 .pk{color:var(--peach);}
.sb-cg{grid-template-columns:repeat(3,1fr);}
@media(max-width:640px){.sb-cg{grid-template-columns:1fr;}}
/* §14.5 Unloading surface — the chip title & the panel content are CONSTANT across
   both slides, so they live outside the carousel's per-slide machinery: the chip is
   lifted above the track (static), one always-on pane carries the content, neither
   animates on navigate (only the image swaps), and content bottom-aligns to the
   image's bottom edge (panel margin-bottom zeroed). */
[data-screen-label="Process · 14.5 — Unloading surface"] .pv4-screen>.pv4-lab{margin-bottom:11px;}
[data-screen-label="Process · 14.5 — Unloading surface"] .pv4-panel{margin-bottom:0;}
[data-screen-label="Process · 14.5 — Unloading surface"] .pv4-pane{opacity:1!important;transform:none!important;pointer-events:auto;transition:none;}
[data-screen-label="Process · 14.5 — Unloading surface"] .pv4-slide{opacity:1;transition:none;}

/* ===================== Image-slot placeholder text — WCAG AA ===================== */
/* The <image-slot> component defaults its caption to black @ 55% (built for light
   backgrounds). On our dark shot gradient that is ~1.1:1 and fails AA. Every slot
   carries an id, so image-slot[id] (0,1,1) outranks the component's :host (0,1,0)
   and recolors the inherited caption/sub text to a warm light grey at 11.5:1. */
image-slot[id]{color:#cdc4ba;}

/* ===================== BACKSTAGE NOTES (author-only, never for final) ===================== */
/* Deliberately OFF-theme so it can't be mistaken for case-study copy: amber dashed,
   monospace, hatch background. Used only where a production hint spans multiple slots
   and can't live inside one. Stripped on request (see CLAUDE.md standing rule). */
.bs-note{margin-top:16px;position:relative;padding:12px 16px;border:1.5px dashed #c9b676;border-radius:10px;
  background:repeating-linear-gradient(135deg,rgba(232,217,160,.07) 0 9px,rgba(232,217,160,.02) 9px 18px);}
.bs-note b{display:block;font-family:ui-monospace,Menlo,monospace;font-size:.66rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#e8d9a0;margin-bottom:6px;}
.bs-note b::before{content:"\2691 ";}
.bs-note p{font-family:ui-monospace,Menlo,monospace;font-size:.78rem;line-height:1.5;color:#e4dcc4;}
/* duo — two large mains side by side for two-variant comparisons */
.ot-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,34px);margin-top:clamp(22px,3vh,42px);align-items:start;}
.ot-duo>figure .shot{aspect-ratio:16/10;}
[data-screen-label="Process · 14.5 — Sign-off & ePOD"] .ot-duo>figure .shot{aspect-ratio:16/9;}
[data-screen-label="Process · 14.6 — The archive"] .ot-duo>figure .shot{aspect-ratio:16/9;}
/* (legacy square-bottom rules for the archive + ePOD duo media removed — the
   duo cards now carry captions inside, so figures keep their full 16px radius
   and interior media is squared via shape="rect" on the slots themselves) */
/* shadow-frame bottom rounding: settled-order duo slots, plus the archive/ePOD
   duo slots for v2's sake — v2's slots have no shape="rect", so without this
   their placed images regrow the component's default 12px bottom rounding.
   Redundant-but-harmless in v3. */
#ot-settle-inv::part(frame), #ot-settle-items::part(frame),
#ot-past-grid::part(frame), #ot-past-list::part(frame), #ot-epod-2::part(frame),
#ot-settle-inv::part(ring), #ot-settle-items::part(ring),
#ot-past-grid::part(ring), #ot-past-list::part(ring), #ot-epod-2::part(ring){
  border-bottom-left-radius:0 !important;border-bottom-right-radius:0 !important;}
/* ot-activity: in cover mode the slot centers the image; anchor it to the TOP so
   any crop comes off the bottom only (keep horizontal centering) */
#ot-activity::part(image){top:0 !important;transform:translateX(-50%) !important;}
[data-screen-label="Process · 14.6 — Settled order"] .ot-duo>figure .shot{aspect-ratio:16/9;}
/* settled-order intro — 50% more breathing room below the description */
body.ord [data-screen-label="Process · 14.6 — Settled order"] .ot-zlede{margin-bottom:clamp(42px,6vh,72px);}
/* §14.6 Where records live — bottom-align the panel content to the image edge the
   same way the .ot-mainrow 60/40 layouts do: no viewport-scaled panel lift, and the
   active pane's leftover entrance-transform cleared, so flex-end lands it flush. */
[data-screen-label="Process · 14.6 — Where records live"] .pv4-opts .pv4-panel{margin-bottom:0;}
[data-screen-label="Process · 14.6 — Where records live"] .pv4-opts .pv4-pane{transform:none !important;}
.ot-duo .ot-dcap{margin-top:12px;}
.ot-duo .frame .ot-dcap{padding:0 20px 20px;}
.ot-duo .ot-dcap .srch-k{font-size:.84rem;}
@media(max-width:820px){.ot-duo{grid-template-columns:1fr;}}
/* image-slot placeholders inside these frames fill the shot */
.ot-main .shot image-slot,.ot-mainrow .shot image-slot,.ot-cu .shot image-slot,
.ot-hub .shot image-slot,.ot-duo .shot image-slot{position:absolute;inset:0;width:100%;height:100%;}

/* ===================== SUCCESS FLOW — the scenario payoff closing each design stage ===================== */
/* A warm resolution card that loops a design stage back to its Key-Scenario (Personas · Scenarios).
   One per stage; 14.4 carries two. Storyboard art drops into the slot. */
.successflow{margin-top:clamp(56px,8vh,104px);padding:clamp(28px,3vw,44px);border-radius:22px;
  border:1px solid color-mix(in oklab,var(--peach) 26%,transparent);
  background:linear-gradient(155deg,color-mix(in oklab,var(--peach) 9%,rgba(18,14,11,.6)),rgba(13,10,8,.55));}
.successflow+.successflow{margin-top:clamp(16px,2vh,26px);}
.sf-badge{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.sf-k{display:inline-flex;align-items:center;gap:.5rem;font-family:ui-monospace,Menlo,monospace;font-size:.7rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--peach);padding:6px 12px;border-radius:5rem;
  border:1px solid color-mix(in oklab,var(--peach) 34%,transparent);background:rgba(255,188,149,.08);}
.sf-k::before{content:"\2713 ";}
.sf-scn{font-size:.86rem;font-weight:600;color:var(--cream);}
.sf-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(20px,2.4vw,42px);align-items:end;}
.sf-grid .sf-shot{margin:0;}
.sf-grid .sf-shot .shot{aspect-ratio:16/9;}
.sf-who{display:inline-flex;align-items:center;gap:.5rem;font-family:ui-monospace,Menlo,monospace;font-size:.76rem;
  font-weight:600;color:var(--peach);margin-bottom:12px;}
.sf-who .d{width:.45rem;height:.45rem;border-radius:50%;background:var(--peach);flex:none;}
.sf-h{font-size:clamp(18px,1.7vw,25px);font-weight:600;color:var(--cream);line-height:1.16;letter-spacing:-.01em;margin-bottom:12px;}
.sf-p{font-size:clamp(13.5px,1vw,16px);color:var(--grey);line-height:1.62;}
.sf-p b{color:var(--peach);font-weight:600;}
@media(max-width:860px){.sf-grid{grid-template-columns:1fr;}}
/* sf-full — the whole success-flow card is ONE image slot (14.1). Card chrome (border,
   22px radius, margins) kept; padding zeroed so the image fills the border-box. */
.successflow.sf-full{padding:0;overflow:hidden;container-type:inline-size;}
.successflow.sf-full .shot{min-height:0;}
/* inner border, over the image (z2): masks the 21px corner-clip trim. Weight is
   radius-driven, NOT band-driven: a 21px-radius arc bites 21·(1−1/√2)≈6.15px diagonally
   at ANY viewport, so the mask is a fixed 6.2 CSS px (= 12.4px in the 2652×1020 file at
   desktop; artwork band of ≥12.5px @2652 aligns flush with it). display:block required —
   the §14 scrim-killer (line ~665) otherwise supplies display:none to .shot::after. */
.successflow.sf-full .shot::after{content:"";display:block;position:absolute;inset:0;z-index:2;pointer-events:none;
  border:6.2px solid #140E0C;border-radius:21px;}
.successflow.sf-full image-slot::part(frame),.successflow.sf-full image-slot::part(ring){border-radius:21px !important;}

/* ===================== ZONE-1 BENTO (replaces the explorations carousel) ===================== */
.z1-bento{display:flex;flex-direction:column;gap:0;margin-top:14px;}
.z1-bento>.pv4-lab{align-self:flex-start;margin-bottom:clamp(12px,2vh,20px);}
.pv4-lab.is-outcome{color:var(--peach);border-color:rgba(255,188,149,.45);}
/* Zone-1 explorations span the full viewport width (minus the page gutter), not the 1500px content cap */
.pv4.pv5[data-screen-label^="Process · 14.1 — Zone 1"] .pv5-main{max-width:none;}
.z1-row{display:flex;flex-wrap:nowrap;gap:clamp(12px,1.3vw,20px);align-items:flex-start;}
.z1-rowtitle{align-self:flex-start;display:inline-flex;font-size:.72rem;font-weight:700;letter-spacing:.16em;color:var(--peach);padding:5px 11px;border-radius:5rem;background:rgba(255,188,149,.08);border:1px solid color-mix(in oklab,var(--peach) 30%,transparent);margin-bottom:6px;}
.z1-row .z1-card{flex:0 0 auto;}
.z1-card{display:flex;flex-direction:column;min-width:0;gap:clamp(12px,2vh,20px);}
.z1-shot{position:relative;width:100%;border-radius:9px;overflow:hidden;background:linear-gradient(160deg,#16120d,#0c0a08);}
.z1-num{position:absolute;z-index:3;top:8px;left:8px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--cream);background:color-mix(in oklab,var(--bg) 62%,transparent);border:1px solid var(--line-2);backdrop-filter:blur(6px);}
.z1-shot image-slot{position:absolute;inset:0;width:100%;height:100%;}
.z1-lab{font-size:clamp(12px,.92vw,13.5px);font-weight:700;color:var(--cream);display:flex;align-items:center;
  gap:7px;flex-wrap:wrap;margin-top:0;line-height:1.2;}
.z1-stat{font-family:ui-monospace,Menlo,monospace;font-size:10px;font-weight:600;letter-spacing:.03em;
  padding:2px 7px;border-radius:5rem;border:1px solid var(--line-2);color:var(--grey-dim);}
.z1-stat.bad{color:var(--peach-2);border-color:color-mix(in oklab,var(--peach-2) 35%,transparent);}
.z1-stat.hot{color:var(--bg);background:var(--peach);border-color:var(--peach);}
.z1-desc{font-size:clamp(11.5px,.88vw,12.5px);color:var(--grey-dim);line-height:1.4;margin:0;}
.z1-pts{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
.z1-pts li{position:relative;padding-left:16px;font-size:clamp(12px,.86vw,12.5px);color:var(--grey);line-height:1.5;}
.z1-pts li::before{content:"";position:absolute;left:0;top:.42em;width:6px;height:6px;border-radius:2px;}
.z1-pts li.ok::before{background:var(--ok,#9ec27a);}
.z1-pts li.no::before{background:var(--peach-2);opacity:.85;}
.z1-finalblock{display:flex;flex-wrap:wrap;gap:clamp(20px,2.4vw,36px);align-items:flex-end;justify-content:center;margin-top:clamp(48px,7.2vh,90px);}
.z1-finalblock .z1-fcar{flex:0 0 clamp(440px,52vw,640px);}
.z1-finalblock .z1-fcap{flex:0 1 clamp(320px,34vw,520px);}
.z1-fviewport{position:relative;}
.z1-fchev{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:1px solid var(--line-2);background:color-mix(in oklab,var(--bg) 62%,transparent);color:var(--cream);backdrop-filter:blur(6px);}
.z1-fchev svg{width:13px;height:13px;}
.z1-fchev.prev{left:8px;} .z1-fchev.next{right:8px;}
.z1-ctrack{display:flex;overflow-x:auto;overflow-y:hidden;height:100%;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:none;}
.z1-ctrack::-webkit-scrollbar{display:none;}
.z1-cslide{flex:0 0 100%;height:100%;scroll-snap-align:start;position:relative;}
.z1-cchev{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:1px solid var(--line-2);background:color-mix(in oklab,var(--bg) 62%,transparent);color:var(--cream);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .2s ease;}
.z1-cchev svg{width:13px;height:13px;}
.z1-cchev.prev{left:8px;} .z1-cchev.next{right:8px;}
.z1-ccar:hover .z1-cchev{opacity:1;pointer-events:auto;}
.z1-cchev:disabled{pointer-events:none;cursor:default;}
.z1-ccar:hover .z1-cchev:disabled{opacity:.28;}
.z1-fshot{position:relative;width:100%;border-radius:11px;overflow:hidden;background:linear-gradient(to bottom right,#342c25,#130f0b);}
.z1-fshot image-slot{position:absolute;inset:0;width:100%;height:100%;}
.z1-fcap{display:flex;flex-direction:column;gap:8px;}
.z1-fcar{position:relative;}
.z1-ftrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;border-radius:11px;scrollbar-width:none;}
.z1-ftrack::-webkit-scrollbar{display:none;}
.z1-fslide{flex:0 0 100%;scroll-snap-align:start;}
.z1-fdots{position:absolute;top:100%;left:0;right:0;display:flex;justify-content:center;gap:8px;margin-top:8px;}
.z1-fdots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--line-2);transition:background .25s,width .25s;}
.z1-fdots button.on{width:18px;border-radius:5rem;background:var(--peach);}
.z1-fcap p{font-size:clamp(12.5px,.95vw,14px);color:var(--grey);line-height:1.5;}
.z1-fcap p b{color:var(--cream);}
@media(max-width:760px){.z1-finalblock{flex-direction:column;align-items:stretch;}}

/* ============================================================================
   SECTION 14 — Stage-2 sub-section titles promoted to the Stage-1 zone
   treatment + every spacing snapped to the ladder (12·16·18·24·32·48·64·96).
   Scoped to [data-screen-label^="Process · 14"] / section-context so the shared
   Order Placement studies stay untouched. Values are FIXED ladder steps, never
   clamps (clamps were producing off-ladder 17/40/46/62/77/100). The §14 audit
   (?audit) asserts both: on-ladder gaps AND title→content < separating gap.
   ============================================================================ */
/* --- Stage-2 zone-title treatment: a .pv4-sec/.pv5-pill placed directly inside
   a plain .section/.maxw (no .pv5 ancestor) gets the same prominent cream title
   + peach .pk accent Stage-1 zone titles use; cluster stays hidden in-flow. --- */
body.ord .section > .maxw > .pv4-sec{margin-bottom:var(--gap-tc);}      /* title→content 16 */
body.ord .section > .maxw > .pv4-sec .ttl{font-size:clamp(22px,2.1vw,31px);
  font-weight:600;color:var(--cream);letter-spacing:-.015em;line-height:1.15;}
body.ord .section > .maxw > .pv4-sec .ttl .pk{color:var(--peach);}
/* the media right after such a title hugs it (gap == the pill's 16 below) */
body.ord .section > .maxw > .pv4-sec + :is(.ot-main,.ot-mainrow,.ot-hub,.ot-duo,.ot-stateset,.frame,figure){margin-top:0;}

/* --- Items List main row follows the 60/40 SPLIT STANDARD baked into the
   .ot-mainrow component itself (66% media / flex content, 16:9, bottom-aligned,
   fold-capped — see myawaaz/LAYOUT-SYSTEM.md). No per-section override needed. --- */

/* --- vertical rhythm: snap every off-ladder gap found across §14 to the ladder --- */
[data-screen-label^="Process · 14"] .mt-l{margin-top:64px;}             /* was clamp→62 */
[data-screen-label^="Process · 14"] .mt-m{margin-top:48px;}             /* was clamp→46 */
[data-screen-label^="Process · 14"] .ot-lede{margin-bottom:48px;}       /* was clamp→40 */
[data-screen-label^="Process · 14"] .ot-main{margin-top:48px;}          /* was clamp→40 */
[data-screen-label^="Process · 14"] .ot-hub{margin-top:48px;}           /* was clamp→40 */
/* Items List intro bullets: cap the body to ~half width so each bullet wraps to
   the next line instead of running as one long full-width row. */
[data-screen-label="Process · 14.2 — Items List"] .ot-zlede{max-width:50%;}
/* 14.2 entry-point options — flat row, text-only options + a 4th image-slot
   column. Title chip sits ON TOP of each option. 4 equal columns; uniform 24
   gaps; within a card 12. Columns stretch to equal height so the image-slot
   matches the text columns. */
.otrow{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:start;}
/* 14.2 — centre the short text columns against the tall mockup */
[data-screen-label="Process · 14.2 — Items List entry point"] .otrow{align-items:center;}
.otopt{display:flex;flex-direction:column;gap:12px;}
.otopt-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.otopt-desc{margin:0;font-size:clamp(14px,1vw,16px);line-height:1.55;color:var(--cream);}
.otopt-shot{aspect-ratio:4/5;border-radius:14px;overflow:hidden;}
.otopt-shot image-slot{display:block;width:100%;height:100%;}
.otopt .pv4-pc{gap:14px;}
.otopt ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;}
.otopt li{position:relative;padding-left:16px;font-size:clamp(12px,.92vw,14.5px);color:var(--grey);line-height:1.45;}
.otopt li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:2px;}
.otopt .pros li::before{background:var(--ok);}
.otopt .cons li::before{background:var(--peach-2);}
/* .otrow-sync — colinear sub-sections across the option cards: the row exposes
   shared row tracks (head / desc / pros / cons) and each card subgrids into them,
   so e.g. every "Cons" starts on the same horizontal line. .pv4-pc dissolves
   (display:contents) so pros/cons land in their own tracks. 1fr spacer rows top +
   bottom keep the text block centered against the tall shot (which spans all rows). */
@media(min-width:861px){
  .otrow.otrow-sync{grid-template-rows:1fr repeat(4,auto) 1fr;row-gap:12px;align-items:stretch;}
  .otrow.otrow-sync .otopt{display:grid;grid-template-rows:subgrid;grid-row:2/span 4;}
  .otrow.otrow-sync .otopt .pv4-pc{display:contents;}
  .otrow.otrow-sync .otopt-shot{grid-row:1/-1;align-self:center;}
}
@media(max-width:860px){.otrow{grid-template-columns:1fr;}}

/* 14.3 order-detail layout — reuses the .ldec decision board (process-decisions.css).
   These are the wireframe zones for THIS decision: Summary / Stage-filters / the
   Items-Invoices table (the dense main work) / Attention cases. Pastel paper fills. */
.z-sum{--zbg:#cdd6f5;flex:none;min-height:26px;}
.z-filt{--zbg:#f6cdae;flex:none;min-height:26px;}
.z-tbl{--zbg:#e9dcc4;flex:1;}
.z-attn{--zbg:#d9c4ef;flex:none;min-height:26px;}
.ldec-wf .wf-col{display:flex;flex-direction:column;gap:9px;flex:none;width:40%;}

/* --- detailed order-detail wireframes (.odwf): recreate the REAL exploration
   sketches — structure mirrors the screenshots; only colour / text / radii /
   handwritten style change (warm paper, dark sketch outlines, Patrick-Hand). --- */
.odwf .ldec-wfcanvas{gap:7px;}
.odwf .zl{font-size:13px;line-height:1.12;}
.z-head{--zbg:#e6ddcb;flex:none;min-height:28px;}
.z-rail{--zbg:#dac9ef;flex:none;width:34%;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;padding:8px;}
.z-rail>.zl{text-align:left;}
.z-special{--zbg:#f3c3b2;margin-top:auto;min-height:30px;}
.z-panel{--zbg:#efe7d8;flex:1;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;padding:8px;}
.wf-row2{display:flex;gap:6px;flex:none;}
.z-toggle{--zbg:#efe7d8;flex:1;min-height:22px;}
.z-srch{--zbg:#e6ddcb;flex:none;width:36%;min-height:22px;}
.z-tbl2{--zbg:#e9dcc4;flex:1;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:5px;padding:8px;}
.z-tbl2>.zl{text-align:left;}
.wf-rows{display:flex;flex-direction:column;gap:3px;margin-top:2px;}
.ldec-wf .wf-rows i{display:block;height:7px;border-radius:3px;background:#fbf7ef;border:1.1px solid rgba(58,50,43,.38);}
.ldec-wf .wf-chips{display:flex;gap:4px;flex-wrap:wrap;}
.ldec-wf .wf-chips i{display:inline-flex;align-items:center;font-style:normal;font-family:'Patrick Hand',cursive;font-size:11px;line-height:1;color:#3a322b;border:1.3px solid #3a322b;border-radius:5px;padding:2px 6px;background:rgba(255,255,255,.4);}
/* B — alerts band + horizontal summary bar */
.z-alerts{--zbg:#dac9ef;flex:none;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;padding:8px;}
.z-alerts>.zl{text-align:left;}
.wf-alertrow{display:flex;gap:6px;}
.z-delay{--zbg:#f3c3b2;flex:1;min-height:30px;}
.z-crit{--zbg:#f1dd9e;flex:1;min-height:30px;}
.z-sumbar{--zbg:#dac9ef;flex:none;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;min-height:30px;}
.z-sumbar>.zl{text-align:left;flex:none;}
.ldec-wf .wf-minichips{display:flex;gap:5px;}
.ldec-wf .wf-minichips i{display:block;width:24px;height:13px;border-radius:5px;border:1.3px solid #3a322b;background:rgba(255,255,255,.45);}
/* C — header row (title + pills) + summary panel with stage segments */
.wf-headrow{display:flex;gap:6px;flex:none;}
.wf-headrow .z-head{flex:1;}
.z-pill{--zbg:#efe7d8;flex:none;min-height:24px;padding:4px 9px;}
.z-sumpanel{--zbg:#dac9ef;flex:none;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:7px;padding:8px;}
.z-sumpanel>.zl{text-align:left;}
.ldec-wf .wf-segs{display:flex;gap:5px;}
.ldec-wf .wf-segs i{display:block;flex:1;height:16px;border-radius:6px;border:1.4px solid #3a322b;}
.tbl-sub{display:block;font-family:'Patrick Hand',cursive;font-size:11px;color:#6a5e50;font-style:italic;text-align:left;line-height:1.15;}
/* 14.3 cards: 6 subgrid rows (source has no per-option key) — scoped so the
   Order Placement board (7 rows) is untouched. */
[data-screen-label="Process · 14.3 — Order-detail layout"] .ldec-opts{grid-template-rows:auto auto auto auto auto auto;}
/* let the three 1fr columns size equally — the odwf wireframe (.ldec-wf) and its
   flex children (wf-chips/wf-segs) otherwise impose a min-content width. Catch-all
   covers every descendant; .ldec-wf has overflow:hidden so it clips gracefully. */
[data-screen-label="Process · 14.3 — Order-detail layout"] .ldec-opt,
[data-screen-label="Process · 14.3 — Order-detail layout"] .ldec-opt *{min-width:0;}
/* process-decisions.css drops .ldec-opts.opts-3 to 2 columns at ≤1024px, but these
   cards span every row (grid-row:1/-1 + subgrid), so a 3rd card with only 2 columns
   spawns a content-sized implicit column and starves the rest. Keep 3 columns down
   to mobile, then stack to 1 and drop the row-spanning subgrid. */
@media(max-width:1024px){[data-screen-label="Process · 14.3 — Order-detail layout"] .ldec-opts.opts-3{grid-template-columns:repeat(3,1fr);}}
@media(max-width:680px){
  [data-screen-label="Process · 14.3 — Order-detail layout"] .ldec-opts.opts-3{grid-template-columns:1fr;}
  [data-screen-label="Process · 14.3 — Order-detail layout"] .ldec-opt{grid-row:auto;grid-template-rows:none;display:flex;flex-direction:column;}
}
/* full decision rationale — verbatim "Why C was chosen" (why-it-won + trade-off + net) */
.ldec-annot--full .at{gap:14px;}
.annot-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,40px);margin-top:2px;}
.annot-h{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--peach);margin-bottom:9px;}
.annot-col p{font-size:clamp(13px,1vw,15px);color:var(--grey);line-height:1.55;margin-bottom:9px;}
.annot-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;}
.annot-col li{position:relative;padding-left:16px;font-size:clamp(13px,1vw,15px);color:var(--grey);line-height:1.5;}
.annot-col li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--peach);}
.annot-net{font-size:clamp(13px,1.05vw,16px);color:var(--cream);line-height:1.55;border-top:1px solid var(--line);padding-top:14px;margin-top:2px;}
.annot-net b{color:var(--peach);}
@media(max-width:760px){.annot-cols{grid-template-columns:1fr;}}
/* per-option Strength block (label + sentence + layout bullets) above Pros/Cons */
.ldec-opt .ldec-strength{padding-top:15px;}
.ldec-opt .ldec-strength .vh{display:block;font-size:clamp(12.5px,.95vw,14.5px);font-weight:650;letter-spacing:.01em;margin-bottom:7px;color:var(--peach);}
.ldec-opt .str-line{margin:0 0 10px;font-size:clamp(12.5px,.95vw,15px);color:var(--cream);line-height:1.5;}
.ldec-opt .str-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;}
.ldec-opt .str-list li{position:relative;padding-left:15px;font-size:clamp(12px,.92vw,14.5px);color:var(--grey);line-height:1.45;}
.ldec-opt .str-list li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:2px;background:var(--grey-dim);}
/* compact view-caption bullets (Invoices / Items views, 14.3) */
.ot-vlist{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;}
.ot-vlist li{position:relative;padding-left:14px;font-size:clamp(12.5px,.9vw,14.5px);color:var(--grey);line-height:1.5;}
.ot-vlist li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--peach);}
.ot-vlist b{color:var(--cream);font-weight:600;}
.ot-vlist em{color:var(--peach);font-style:normal;}
/* ===== "From the core view to the shipped page" — tabbed 60/40 carousel ===== */
.cvs{margin-top:clamp(56px,8.5vh,110px);}
.cvs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(20px,3vw,52px);flex-wrap:wrap;margin-bottom:clamp(24px,3.6vh,44px);}
.cvs-title{font-size:clamp(22px,2vw,30px);font-weight:600;color:var(--cream);letter-spacing:-.015em;line-height:1.2;max-width:50ch;margin:0;}
.cvs-title .pk{color:var(--peach);}
.cvs-tabs{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;justify-content:flex-end;}
.cvs-tab{font:inherit;font-size:clamp(12px,.92vw,14px);font-weight:600;color:var(--grey);padding:8px 14px;border-radius:5rem;border:1px solid var(--line-2);background:transparent;cursor:pointer;transition:color .2s,background .2s,border-color .2s;white-space:nowrap;}
.cvs-tab:hover{color:var(--cream);border-color:rgba(255,236,222,.3);}
.cvs-tab.is-on{color:#3a2417;background:var(--peach);border-color:var(--peach);}
.cvs-panel{display:none;}
.cvs-panel.is-on{display:block;}
.cvs-row{display:flex;align-items:flex-end;gap:clamp(18px,2.4vw,38px);--resv:245px;padding-bottom:clamp(24px,3.2vh,38px);}
.cvs-screen{flex:none;width:66%;max-width:max(420px,calc((100svh - var(--resv,250px)) * 1.7778));display:flex;flex-direction:column;position:relative;}
.cvs-media{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line-2);}
.cvs-media .pv4-chev{top:50%;}
.cvs-media:hover .pv4-chev,.cvs-media .pv4-chev:focus-visible{background:rgba(12,10,8,.78);color:var(--cream);border-color:rgba(244,236,226,.45);}
/* dots OUT OF FLOW (absolute, below the image, centred) so .cvs-content bottom-
   aligns to the IMAGE edge only, never to the dots (standing rule). */
.cvs-dots{position:absolute;top:100%;left:0;right:0;}
.cvs-track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1);}
.cvs-slide{flex:0 0 100%;min-width:0;}
.cvs-slide .shot{aspect-ratio:16/9;display:block;}
/* a <video> demo (play/pause vidbox) filling a carousel slide, same as an image-slot */
.cvs-slide .shot .vidbox{position:absolute;inset:0;width:100%;height:100%;}
.cvs-slide .shot .pv4-vid{width:100%;height:100%;object-fit:cover;object-position:top center;}
/* a vidbox inside a pv4-imgwrap carousel slide (matches the image-slot 16:9 frame) */
.pv4-imgwrap .vidbox{width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  border:1px solid var(--line-2);background:#0d0b09;}
.pv4-imgwrap .vidbox .pv4-vid{width:100%;height:100%;object-fit:cover;object-position:top center;}
/* a vidbox filling an ot-duo figure .shot (same as an image-slot there) */
.ot-duo .shot .vidbox{position:absolute;inset:0;width:100%;height:100%;}
.ot-duo .shot .pv4-vid{width:100%;height:100%;object-fit:cover;object-position:top center;}
.cvs-content{flex:1;min-width:0;}
.cvs-cpane{display:none;}
.cvs-cpane.is-on{display:flex;flex-direction:column;gap:clamp(13px,1.9vh,20px);}
.cvs-view{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--cream);padding:4px 11px;border-radius:5rem;background:rgba(12,10,8,.78);border:1px solid rgba(244,236,226,.45);}
.cvs-feat{display:flex;flex-direction:column;gap:6px;}
.cvs-feat b{font-size:clamp(15px,1.15vw,18px);font-weight:600;color:var(--cream);letter-spacing:-.01em;line-height:1.25;}
.cvs-feat p{font-size:clamp(12.5px,.98vw,15px);color:var(--grey);line-height:1.55;margin:0;}
.cvs-feat em{color:var(--peach);font-style:normal;}
@media(max-width:860px){.cvs-row{flex-direction:column;align-items:stretch;}.cvs-screen{width:100%;max-width:none;}}
/* single (no-tab) cvs carousel used inline under a title+description block */
.cvs--single{margin-top:0;margin-bottom:clamp(56px,8vh,96px);}
/* "After cancelling" = ONE unit (pill title + description + carousel): tight,
   uniform 16px inner gaps; the gap ABOVE the title and BELOW the carousel is far
   larger so the three read as a single block. */
body.ord [data-screen-label="Process · 14.4 — Act on a problem"] .maxw > .pv4-sec{margin-top:clamp(56px,8vh,96px);}
body.ord [data-screen-label="Process · 14.4 — Act on a problem"] .ot-zlede{margin-bottom:16px;}
.cvs-ph{margin:0;color:var(--grey-dim);font-size:clamp(13px,1vw,15px);line-height:1.55;font-style:italic;}
/* co-linear duo: two boxes share a subgrid (image · title · Summary · Table ·
   Filters) so corresponding bullets line up across both columns (like the .ldec
   board). Scoped via --rows so other .ot-duo instances are untouched. */
.ot-duo--rows{grid-template-rows:auto auto auto auto auto;}
.ot-duo--rows>figure{display:grid;grid-row:1/-1;grid-template-rows:subgrid;row-gap:0;margin:0;}
.ot-duo--rows>figure>.shot{margin:0;}
.ot-duo--rows>figure>.srch-k{padding:14px 20px 0;margin:0;font-size:.84rem;}
.ot-duo--rows .ot-vrow{position:relative;padding:10px 20px 0 36px;font-size:clamp(12.5px,.9vw,14.5px);color:var(--grey);line-height:1.5;}
.ot-duo--rows .ot-vrow:last-child{padding-bottom:20px;}
.ot-duo--rows .ot-vrow::before{content:"";position:absolute;left:20px;top:calc(10px + .62em);width:5px;height:5px;border-radius:50%;background:var(--peach);}
.ot-duo--rows .ot-vrow b{color:var(--cream);font-weight:600;}
.ot-duo--rows .ot-vrow em{color:var(--peach);font-style:normal;}
body.ord [data-screen-label^="Process · 14"] .pv5-main .ot-after{margin-top:64px;}  /* was clamp→77 */
[data-screen-label^="Process · 14"].successflow{margin-top:64px;}       /* was clamp→62 */
[data-screen-label^="Process · 14"] .ot-mainrow .ot-annot{gap:24px;}    /* was 20 */
[data-screen-label^="Process · 14"].pv4.pv5 + [data-screen-label^="Process · 14"].pv4.pv5{margin-top:96px;} /* was clamp→100 */
body.ord [data-screen-label^="Process · 14"] .triad{margin-bottom:64px;} /* was clamp→77 */

/* ===== COMPONENT · Synced Accordion (.pc-acc) ============================
   The project's canonical collapsible + synced accordion, tokenised from the
   14.3 layout-decision Pros/Cons board. Docs: myawaaz/ACCORDION-COMPONENT.md.
   This rule is the MECHANISM only — the CONTEXT supplies the head text colour
   (the chevron inherits it via currentColor) and the accent token below.
     Token   --acc-accent   hover-glow tint        (default var(--peach))
     Parts   .pc-acc > button.acc-head [.acc-chev]
             .pc-acc > .acc-body > .acc-inner > (ul|content)
     State   .open on the .pc-acc expands the body (0fr→1fr) + flips the chevron
     JS      group toggler syncs every .pc-acc sharing a data key (see studies)
   Variants  .pc-acc.neg  /  .pc-acc[data-acc="cons"]  → accent = var(--peach-2) */
.pc-acc{--acc-accent:var(--peach);}
.pc-acc.neg,.pc-acc[data-acc="cons"]{--acc-accent:var(--peach-2);}
.pc-acc .acc-head{display:flex;align-items:center;gap:8px;
  box-sizing:border-box;width:calc(100% + 18px);
  padding:5px 9px;margin:-5px -9px;background:none;border:0;border-radius:9px;
  cursor:pointer;font:inherit;text-align:left;color:inherit;
  box-shadow:none;transition:background .2s ease,box-shadow .25s ease;}
.pc-acc .acc-head:hover{
  background:color-mix(in oklab,var(--acc-accent) 12%,transparent);
  box-shadow:inset 0 0 18px color-mix(in oklab,var(--acc-accent) 14%,transparent),
    0 4px 18px color-mix(in oklab,var(--acc-accent) 16%,transparent);}
.pc-acc .acc-chev{margin-left:auto;margin-right:2px;width:11px;height:11px;flex:none;
  position:relative;border:0;opacity:.6;transition:opacity .2s ease;}
.pc-acc .acc-chev::before,.pc-acc .acc-chev::after{content:"";position:absolute;
  top:50%;left:50%;background:currentColor;border-radius:1px;
  transition:transform .26s ease,opacity .2s ease;}
.pc-acc .acc-chev::before{width:11px;height:2px;transform:translate(-50%,-50%);}   /* horizontal bar */
.pc-acc .acc-chev::after{width:2px;height:11px;transform:translate(-50%,-50%);}     /* vertical bar → makes a + */
.pc-acc.open .acc-chev{opacity:.9;}
.pc-acc.open .acc-chev::after{transform:translate(-50%,-50%) scaleY(0);opacity:0;}  /* open collapses to − */
.pc-acc .acc-head:hover .acc-chev{opacity:1;}
.pc-acc .acc-body{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .28s ease;}
.pc-acc.open .acc-body{grid-template-rows:1fr;}
.pc-acc .acc-inner{overflow:hidden;min-height:0;}
.pc-acc .acc-inner ul{padding-top:9px;}
@media(prefers-reduced-motion:reduce){
  .pc-acc .acc-body,.pc-acc .acc-chev,
  .pc-acc .acc-chev::before,.pc-acc .acc-chev::after{transition:none;}
}
/* 14.3 board context (spacing only; accent/colour inherited from the component) */
.ldec-opt .pc-acc{padding-top:15px;}

/* ---- per-slide caption sharing the pagination row (14.5 unloading carousel) ---- */
body.ord .pv5-main .pv4-opts--cap .pv4-scap{
  position:absolute;top:100%;left:0;max-width:60%;
  margin-top:calc(clamp(10px,1.6vh,16px) + 4px);transform:translateY(-50%);
  font-size:clamp(11.5px,.85vw,13px);color:var(--grey);line-height:1.35;
  letter-spacing:.005em;text-wrap:pretty;}

/* ---- before/after video slider inside an .ot-mainrow media slot (14.5 Option B vs C) ---- */
.ba-shot{overflow:hidden;}
.ba-shot .pv4-ba{cursor:ew-resize;}
/* This slider lives inside a .frame, whose `.frame .bar` browser-chrome rule
   (case-study.css: display:flex; padding:11px 14px; border-bottom) leaks onto the
   divider and fattens it to ~28px. Restore the EXACT v5 needle — a 2px gradient
   bar; the circular grip + ‹ › come from .pv4-ba .bar::before/::after, untouched. */
.ba-shot .pv4-ba .bar{display:block;width:2px;padding:0;border:0;gap:0;
  background:linear-gradient(180deg,transparent,rgba(255,188,149,.85) 16%,rgba(255,188,149,.85) 84%,transparent);}
.pv4-ba .lay .ba-vid{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;display:block;z-index:2;
  background:transparent;border:0;border-radius:0;}
.pv4-ba .lay .ba-vidph{position:absolute;inset:0;z-index:1;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  text-align:center;padding:14px;font-family:ui-monospace,Menlo,monospace;
  font-size:clamp(10.5px,.85vw,12.5px);line-height:1.5;letter-spacing:.02em;
  color:var(--grey-dim);
  background:repeating-linear-gradient(45deg,#15110d,#15110d 11px,#1b1611 11px,#1b1611 22px);}
.pv4-ba .lay .ba-vidph b{display:block;margin-bottom:3px;color:var(--peach);
  font-size:1.18em;font-weight:800;letter-spacing:.07em;}

/* ==== cloud hover (end of file — must override base rules above) ============
   Accordion-parity glow (.pc-acc .acc-head:hover): 12% peach bg tint + soft
   inset/outer shadows, on an opacity-fading underlay that matches the blob's
   .bd geometry — the goo filter itself is NEVER animated (that caused jank).
   Move = pure translate (no scale) so the filtered blob isn't re-rasterized. */
.scn-cloud.t-bl,.scn-cloud.t-br{z-index:3;} /* 02 & 06 stay behind 05 & 03 — constant, hover included */
/* glow twin — JS clones each .sc-blob into a .sc-glow sibling; it re-draws the
   exact gooey cloud shape with a lighter body + halo shadows, painted above the
   real blob but below content, and fades in via opacity ONLY (no filter anim). */
.scn-cloud>.sc-glow{--cloudc:#2a1f16;opacity:0;transition:opacity .3s ease;
  --edgec:#E78E61;
  filter:url(#scn-goo) drop-shadow(0 0 1.5px #E78E61) drop-shadow(0 0 2px rgba(231,142,97,.8))
    drop-shadow(0 0 18px rgba(231,142,97,.45))
    drop-shadow(0 0 42px rgba(231,142,97,.25));}
.scn-orbit-stage.is-in .scn-cloud:hover>.sc-glow{opacity:1;}
.scn-orbit-stage.is-in .scn-cloud:hover{
  transform:translate(-50%,-50%) translate(calc(var(--x)*1.07),calc(var(--y)*1.07));
  transition-duration:.35s;transition-delay:0s;}
@media (prefers-reduced-motion: reduce){
  .scn-orbit-stage.is-in .scn-cloud:hover{transform:translate(-50%,-50%) translate(var(--x),var(--y));}
}

/* ==== COMPONENT · Panoramic scroll window (.shot--pan / .pan-frame) =========
   For images much WIDER than their slot: the .shot keeps its fixed-ratio
   window, the image renders at FULL window height at its natural aspect, and
   the window pans horizontally. Set the image's natural ratio on the shot as
   --pan-ar (e.g. style="--pan-ar:7117/1243"); without it the slot falls back
   to the window's own ratio (fills, no scroll). The owning figure gets
   .pan-frame and carries the overlay chrome: edge fades, the standard
   .pv4-chev prev/next buttons, and a custom bottom scrollbar (.pan-sb).
   State classes .at-start/.at-end (JS) gate fades + button disabled. */
.frame .shot.shot--pan{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  cursor:grab;scrollbar-width:none;}
.frame .shot.shot--pan::-webkit-scrollbar{display:none;}
.pan-frame.is-dragging .shot--pan{cursor:grabbing;}
.pan-frame.is-dragging{user-select:none;-webkit-user-select:none;}
.frame .shot.shot--pan image-slot{position:relative;inset:auto;display:block;
  height:100%;width:auto;aspect-ratio:var(--pan-ar,16/7.5);min-width:100%;}
/* overlay chrome shares the frame's box (frame = shot; no .bar here) */
.pan-frame .pv4-chev{top:50%;}
.pan-frame:hover .pv4-chev,.pan-frame .pv4-chev:focus-visible{
  background:rgba(12,10,8,.78);color:var(--cream);border-color:rgba(244,236,226,.45);}
/* edge fades — hint that more map lies off-screen in that direction */
.pan-fade{position:absolute;top:0;bottom:0;width:clamp(40px,4.5vw,80px);z-index:3;
  pointer-events:none;opacity:1;transition:opacity .35s ease;}
.pan-fade.prev{left:0;background:linear-gradient(90deg,rgba(12,10,8,.7),transparent);}
.pan-fade.next{right:0;background:linear-gradient(270deg,rgba(12,10,8,.7),transparent);}
.pan-frame.at-start .pan-fade.prev{opacity:0;}
.pan-frame.at-end .pan-fade.next{opacity:0;}
/* custom scrollbar — slim peach thumb on a faint cream track, near the bottom
   edge; 14px hit area around a 4px bar (6px on hover/drag) */
.pan-sb{position:absolute;left:16px;right:16px;bottom:8px;height:14px;z-index:5;
  cursor:pointer;touch-action:none;}
.pan-sb::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;
  transform:translateY(-50%);border-radius:99px;background:rgba(244,236,226,.12);
  transition:height .15s ease;}
.pan-sb-thumb{position:absolute;top:50%;transform:translateY(-50%);height:4px;
  border-radius:99px;background:rgba(255,188,149,.55);min-width:36px;
  transition:height .15s ease,background-color .15s ease;}
.pan-sb:hover::before,.pan-frame.is-dragging .pan-sb::before{height:6px;}
.pan-sb:hover .pan-sb-thumb,.pan-frame.is-dragging .pan-sb-thumb{height:6px;background:var(--peach);}