/* ============================================================
   CWAP AI Visualiser Case Study — bespoke additive layer.
   Everything shared (chips, labels, mainrows, duos, scores,
   accordions, spacing tokens) comes from the library CSS files.
   Only CWAP-scoped wrappers live here. Scope: body.ord.cwap
   ============================================================ */

/* ---------- central single column, wide gutters (source geometry:
   224px gutters at 1440 viewport → 992px content column). Hero header
   keeps full width; escape hatch via .cwap-wide. Matches Fluid DS. ---------- */
.cwap section.section:not(.cwap-wide) .maxw{max-width:992px;}

/* ---------- nested phone-UI slot (Get started) ----------
   Inner slot pinned to the exact device footprint measured in the Entry
   points image above (phone bbox 758,68 450×979 in 1984×1116; corner
   radius 34px source): all % so it scales 1:1 with the 16:9 shot. */
.cwap .cwap-ph-nest{position:absolute;left:calc(38.2056% - 4px);top:calc(6.0932% - 4px);width:22.6815%;height:87.724%;
  border-radius:7.5556%/3.4729%;overflow:hidden;z-index:2;
  border:4px solid #000;box-sizing:content-box;
  box-shadow:-10px 10px 24px rgba(0,0,0,.25);}
.cwap .cwap-ph-nest image-slot{position:absolute;inset:0;width:100%;height:100%;}
/* the composite's shot height is script-driven — lift the library clamps */
.cwap .cwap-nest-fig .shot{max-height:none;min-height:0;}
/* italic corner label on a composite surface */
.cwap .cwap-shot-lab{position:absolute;left:clamp(14px,1.8vw,26px);bottom:clamp(12px,1.6vh,22px);z-index:3;
  font-style:italic;font-size:clamp(13px,1.05vw,17px);font-weight:550;color:var(--cream);
  letter-spacing:.01em;pointer-events:none;}
.cwap .cwap-shot-lab .peach{color:var(--peach);}

/* ---------- fl-ar media slot (Task Flow): width locked to the content
   column; height follows the placed image's intrinsic AR via page script —
   image always fits 100%, no crop (same as Fluid DS). Lift height clamps. */
.cwap .frame.fl-ar .shot{max-height:none;min-height:0;}

/* ---------- hero: three-line verbatim h1 ---------- */
body.ord.cwap .hero h1{font-size:clamp(34px,4.5vw,76px);}

/* ---------- slots: 16:9 everywhere per build brief ---------- */
.cwap .ot-duo>figure .shot{aspect-ratio:16/9;}

/* ---------- part-1 prose sections (eyebrow + verbatim lead) ---------- */
.cwap .sec-prose .lead{max-width:76ch;}
.cwap .sec-prose .lead+.lead{margin-top:14px;}
.cwap .roleown{max-width:70ch;}

/* ---------- summary snapshot: two kicker groups inside a column ---------- */
.cwap .ai-col .kicker{display:block;margin-top:20px;}
.cwap .ai-col .kicker:first-of-type{margin-top:16px;}
.cwap .ai-impact{margin-top:clamp(20px,3vh,32px);}
.cwap .ai-impact b{color:var(--peach);font-weight:700;}

/* ---------- user pain points: 2 + 3 card rows, no kickers ---------- */
.cwap-pains{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.8vw,24px);}
.cwap-pains .m2m-pt{grid-column:span 2;}
.cwap-pains .m2m-pt:nth-child(1),
.cwap-pains .m2m-pt:nth-child(2){grid-column:span 3;}
@media(max-width:760px){
  .cwap-pains{grid-template-columns:1fr;}
  .cwap-pains .m2m-pt{grid-column:auto;}
}

/* ---------- the solution: three numbered glass cards ---------- */
.cwap-tri3{grid-template-columns:repeat(3,1fr);}
.cwap-tri3 .tri{display:flex;flex-direction:column;gap:12px;}
.cwap-tri3 .tri .ot-an-n{margin:0;}
.cwap-tri3 .tri p{margin:0;font-size:clamp(13.5px,1vw,16px);color:var(--grey);line-height:1.6;}
@media(max-width:1100px){.cwap-tri3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:820px){.cwap-tri3{grid-template-columns:1fr;}}

/* ---------- team: member cards ---------- */
.cwap-team{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(20px,3vh,32px);}
.cwap-member{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:18px 20px;border-radius:16px;border:1px solid var(--line);background:rgba(244,236,226,.025);}
.cwap-member .av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:.76rem;font-weight:700;color:var(--cream);background:rgba(244,236,226,.06);border:1px solid var(--line-2);letter-spacing:.05em;}
.cwap-member.is-me .av{color:var(--peach);background:rgba(255,188,149,.12);border-color:color-mix(in oklab,var(--peach) 40%,transparent);}
.cwap-member .mtxt{display:flex;flex-direction:column;gap:3px;}
.cwap-member .nm{font-size:.92rem;font-weight:650;color:var(--cream);line-height:1.25;}
.cwap-member .rl{font-size:.78rem;color:var(--grey-dim);line-height:1.4;}
@media(max-width:1000px){.cwap-team{grid-template-columns:repeat(3,1fr);}}
@media(max-width:700px){.cwap-team{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.cwap-team{grid-template-columns:1fr;}}

/* ---------- task flow: node strip with dashed connectors ---------- */
.cwap-flow{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;row-gap:28px;margin-top:clamp(24px,4vh,44px);}
.cwap-fcol{display:flex;flex-direction:column;gap:10px;align-items:stretch;}
.cwap-fout{display:flex;flex-direction:column;gap:7px;align-items:center;}
.cwap-fnode{display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center;justify-content:center;padding:13px 18px;border-radius:14px;border:1px solid var(--line-2);background:rgba(244,236,226,.035);color:var(--cream);font-size:clamp(12.5px,.92vw,15px);font-weight:650;line-height:1.3;}
.cwap-fnode small{display:block;font-weight:500;color:var(--grey-dim);font-size:.85em;line-height:1.35;}
.cwap-fnode.is-hot{border-color:color-mix(in oklab,var(--peach) 45%,transparent);color:var(--peach);background:rgba(255,188,149,.07);}
.cwap-farr{flex:none;display:flex;align-items:center;padding:0 clamp(5px,.8vw,12px);}
.cwap-farr::before{content:"";display:block;width:clamp(12px,1.8vw,30px);border-top:2px dashed rgba(244,236,226,.22);}
.cwap-farr::after{content:"";display:block;width:7px;height:7px;border-top:2px solid rgba(244,236,226,.35);border-right:2px solid rgba(244,236,226,.35);transform:rotate(45deg);margin-left:-6px;}
.cwap-fcap{font-family:'Caveat',cursive;font-size:clamp(16px,1.25vw,20px);color:var(--peach-2);line-height:1;text-align:center;}
@media(max-width:1100px){
  .cwap-flow{flex-direction:column;align-items:stretch;gap:12px;}
  .cwap-farr{display:none;}
  .cwap-fnode{align-items:flex-start;text-align:left;}
  .cwap-fout{align-items:flex-start;}
}

/* ---------- media column: vertical stack of slots inside a 60/40 row ---------- */
.cwap .ot-mainrow>.cwap-mstack{flex:none;width:66%;max-width:max(420px,calc((100svh - var(--resv,250px)) * 1.7778));display:flex;flex-direction:column;gap:clamp(14px,2vh,24px);}
.cwap .ot-mainrow.cwap-center{justify-content:center;}
.cwap .cwap-mstack .shot{aspect-ratio:16/9;}
.cwap .cwap-mstack .shot image-slot{display:block;width:100%;height:100%;}
@media(max-width:900px){.cwap .ot-mainrow>.cwap-mstack{width:100%;max-width:none;}}

/* ---------- numbered observation rows, two columns ---------- */
.cwap-obs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vh,22px) clamp(22px,2.8vw,44px);margin-top:clamp(20px,3vh,36px);}
.cwap-obs .ot-an{display:flex;gap:12px;align-items:flex-start;}
.cwap-obs .ot-an-t p{margin:2px 0 0;font-size:clamp(13px,.98vw,15.5px);color:var(--grey);line-height:1.55;}
.cwap .cwap-cap60{max-width:60vw;}
@media(max-width:900px){.cwap .cwap-cap60{max-width:none;}}
.cwap-obs.cwap-stack{grid-template-columns:1fr;width:fit-content;max-width:100%;}
@media(max-width:760px){.cwap-obs{grid-template-columns:1fr;}}

/* ---------- annot column: option label chip + notes list spacing ---------- */
.cwap .ot-annot>.pv4-lab{margin-bottom:2px;}
.cwap .ot-annot>.ot-notes{margin-top:0;}
.cwap .ot-an-t b{color:var(--cream);}
.cwap .ot-an-t p{margin:3px 0 0;font-size:clamp(12.5px,.92vw,14.5px);color:var(--grey-dim);line-height:1.5;}

/* team image + caption grouped in the role-row's right-hand column
   (matches the Fluid DS .fl-media-cap layout exactly): caption sits directly
   under the image inside the media column, both bottom-aligned in the row */
.cwap .ot-mainrow>.cwap-media-cap{flex:none;width:66%;max-width:max(420px,calc((100svh - var(--resv,250px)) * 1.7778));display:flex;flex-direction:column;gap:12px;}
.cwap .cwap-media-cap .shot{aspect-ratio:16/9;}
.cwap .cwap-media-cap .shot image-slot{display:block;width:100%;height:100%;}
.cwap .cwap-media-cap .cwap-role-cap{max-width:none;margin:0;}
@media(max-width:900px){.cwap .ot-mainrow>.cwap-media-cap{width:100%;max-width:none;}}

/* ---------- vertical media+content stack (process sections) ----------
   .ot-mainrow flipped to a column: annotation text on top, media below —
   both FULL content-column width (like the .ot-main slots & leads above). */
.cwap .ot-mainrow.cwap-vstack{flex-direction:column;align-items:stretch;}
.cwap .ot-mainrow.cwap-vstack>.frame{width:100%;max-width:none;}
.cwap .ot-mainrow.cwap-vstack>.ot-annot{flex:none;width:100%;max-width:none;order:-1;}

/* roletime strip inside the narrow annot column of the 60/40 role row:
   two-column layout — hourglass icon vertically centred | the two duration
   lines stacked vertically (separator removed in HTML; not needed). */
.cwap .ot-annot .roletime{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:14px;row-gap:0;white-space:normal;margin-left:0;}
.cwap .ot-annot .roletime .rt-items{display:flex;flex-direction:column;gap:6px;}
.cwap .ot-annot .roletime .rt-item{white-space:nowrap;}

/* ---------- closing-notes section: ambient background video (same treatment
   as OP v5 Learnings — dimmed, edge-masked, behind the content) ---------- */
.learn-bgsec{position:relative;}
.learn-bgv{position:absolute;inset:0;z-index:0;pointer-events:none;}
.learn-bgv video{width:100%;height:100%;object-fit:cover;object-position:center;display:block;opacity:.2;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 15%,#000 85%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 15%,#000 85%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 15%,#000 85%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 15%,#000 85%,transparent 100%);
  mask-composite:intersect;}
.learn-bgsec .maxw{position:relative;z-index:1;}

/* ---------- process section heads: verbatim sentence headings ---------- */
.cwap .proc-head h2.h-sec{font-size:clamp(24px,2.6vw,40px);margin-top:12px;}