/* =====================================================================
   visual.css  —  v2 graphical layer
   Loads AFTER refine.css. Adds: abstract UI wireframe previews, a proper
   "design-iteration" carousel card, and animated data-viz (before/after
   bars + score meters). Reuses the existing .carousel JS + .rv reveal.
   ===================================================================== */

:root{
  --cl-discovery:#ffbc95; --cl-search:#f99e76; --cl-behav:#e6b980;
  --cl-cart:#7d91ff; --cl-schemes:#c9a3ff; --ok:#9ec27a;
}

/* =====================================================================
   1 · WIREFRAME MOCKUPS  (abstract, graphical stand-ins for UI)
   ===================================================================== */
.wf{--wf:var(--peach);
  position:relative;width:100%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;
  border:1px solid var(--line-2);background:linear-gradient(165deg,#1a1510,#0d0b09);
  box-shadow:inset 0 1px 0 rgba(255,236,222,.06), 0 24px 50px -28px rgba(0,0,0,.7);}
.wf.discovery{--wf:var(--cl-discovery);} .wf.search{--wf:var(--cl-search);}
.wf.behav{--wf:var(--cl-behav);} .wf.cart{--wf:var(--cl-cart);} .wf.schemes{--wf:var(--cl-schemes);}

.wf .wf-chrome{position:absolute;top:0;left:0;right:0;height:26px;display:flex;align-items:center;gap:5px;
  padding:0 12px;background:rgba(20,16,11,.7);border-bottom:1px solid var(--line);}
.wf .wf-chrome b{width:6px;height:6px;border-radius:50%;background:#473c33;}
.wf .wf-chrome b:first-child{background:var(--peach-2);}
.wf .wf-pad{position:absolute;inset:26px 0 0;padding:14px;display:flex;flex-direction:column;gap:11px;}
.wf .wf-pad.rows{gap:9px;justify-content:flex-start;}
.wf .wf-pad.dim{filter:saturate(.6) brightness(.8);}
.wf .wf-pad.split{flex-direction:row;gap:10px;}

/* generic block */
.wf i{display:block;background:rgba(244,236,226,.10);border-radius:5px;height:11px;}
/* search pill */
.wf .wf-search{height:30px;border-radius:8px;background:rgba(255,188,149,.14);
  border:1px solid color-mix(in oklch,var(--wf) 45%,transparent);position:relative;}
.wf .wf-search::before{content:"";position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:11px;height:11px;border-radius:50%;border:2px solid var(--wf);}
.wf .wf-search.wide{height:24px;}
/* tile grid */
.wf .wf-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1;}
.wf .wf-tiles.tall{grid-template-columns:repeat(4,1fr);}
.wf .wf-tiles.dim i{opacity:.5;}
.wf .wf-tiles i{height:auto;border-radius:8px;background:rgba(244,236,226,.06);
  border:1px solid var(--line);min-height:22px;}
.wf .wf-tiles i:first-child{background:color-mix(in oklch,var(--wf) 18%,rgba(244,236,226,.06));border-color:color-mix(in oklch,var(--wf) 35%,transparent);}
/* nav row */
.wf .wf-nav{display:flex;align-items:center;gap:8px;}
.wf .wf-nav .lk{height:8px;width:34px;border-radius:4px;}
.wf .wf-nav .lk:nth-child(2){width:24px;} .wf .wf-nav .lk:nth-child(3){width:30px;}
/* buttons */
.wf .wf-btn{display:block;height:26px;width:96px;border-radius:8px;flex:none;
  background:color-mix(in oklch,var(--wf) 80%,#0c0a08);}
.wf .wf-btn.hot{margin-left:auto;width:74px;height:22px;box-shadow:0 0 0 4px color-mix(in oklch,var(--wf) 22%,transparent);}
.wf .wf-btn.warn{background:#d9694e;} .wf .wf-btn.ghost{background:transparent;border:1px solid var(--line-2);}
.wf .wf-btn.sm{width:64px;height:22px;}
/* quantity rows */
.wf .wf-qrow{display:flex;align-items:center;gap:8px;}
.wf .wf-qrow .lbl{flex:1;height:13px;border-radius:5px;}
.wf .wf-qrow.long .lbl{height:18px;}
.wf .wf-qrow .cell{width:46px;height:24px;border-radius:6px;background:rgba(244,236,226,.05);
  border:1px solid color-mix(in oklch,var(--wf) 30%,var(--line-2));flex:none;}
/* modal */
.wf .wf-modal{margin:auto;width:78%;border-radius:11px;padding:14px;display:flex;flex-direction:column;gap:9px;
  background:rgba(18,14,11,.92);border:1px solid var(--line-2);box-shadow:0 24px 50px -20px rgba(0,0,0,.8);}
.wf .wf-modal i{height:13px;} .wf .wf-modal i.sm{width:60%;}
.wf .wf-modal.danger{border-color:rgba(217,105,78,.65);box-shadow:0 0 0 1px rgba(217,105,78,.4),0 24px 50px -20px rgba(0,0,0,.8);}
.wf .wf-modal.info{border-color:rgba(125,145,255,.6);box-shadow:0 0 0 1px rgba(125,145,255,.35),0 24px 50px -20px rgba(0,0,0,.8);}
.wf .wf-modal .wf-btn{width:84px;align-self:flex-start;}
/* cta variants */
.wf .wf-cta{height:32px;border-radius:9px;background:color-mix(in oklch,var(--wf) 80%,#0c0a08);}
.wf .wf-cta.center{width:55%;margin:auto auto 0;}
.wf .wf-cta.sticky{position:absolute;left:14px;right:14px;bottom:12px;height:30px;
  box-shadow:0 10px 24px -8px color-mix(in oklch,var(--wf) 60%,transparent);}
.wf .wf-box{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;
  background:rgba(244,236,226,.04);border:1px solid var(--line-2);margin-top:auto;}
.wf .wf-box i{flex:1;height:14px;}
.wf .wf-stack{display:flex;flex-direction:column;gap:7px;margin-top:auto;}
.wf .wf-stack .wf-btn{width:100%;}
.wf .wf-densebar{display:flex;align-items:center;gap:8px;margin-top:auto;padding:8px;border-radius:8px;
  background:rgba(244,236,226,.04);border:1px solid var(--line);}
.wf .wf-densebar i{flex:1;height:10px;}
/* fab */
.wf .wf-fab{position:absolute;right:14px;bottom:14px;width:42px;height:42px;border-radius:50%;
  background:color-mix(in oklch,var(--wf) 85%,#0c0a08);box-shadow:0 10px 24px -8px color-mix(in oklch,var(--wf) 70%,transparent);}
/* split (cart-as-panel) */
.wf .wf-main{flex:1.4;display:flex;flex-direction:column;gap:8px;}
.wf .wf-main i{flex:1;border-radius:7px;background:rgba(244,236,226,.06);border:1px solid var(--line);}
.wf .wf-aside{flex:1;display:flex;flex-direction:column;gap:7px;padding:9px;border-radius:9px;
  background:rgba(244,236,226,.04);border:1px solid var(--line-2);}
.wf .wf-aside .ln{height:9px;}
.wf .wf-aside .ln:nth-child(odd){width:80%;}
/* scheme cards */
.wf{display:flex;}
.wf .wf-card{margin:auto;width:80%;padding:14px;border-radius:12px;display:flex;flex-direction:column;gap:9px;
  background:rgba(244,236,226,.04);border:1px solid var(--line-2);}
.wf .wf-card.glow{border-color:color-mix(in oklch,var(--wf) 55%,transparent);box-shadow:0 0 0 1px color-mix(in oklch,var(--wf) 30%,transparent);}
.wf .wf-tag{width:64px;height:16px;border-radius:5rem;background:rgba(244,236,226,.08);}
.wf .wf-tag.hot{background:color-mix(in oklch,var(--wf) 55%,transparent);}
.wf .wf-big{width:55%;height:20px;border-radius:6px;background:color-mix(in oklch,var(--wf) 45%,rgba(244,236,226,.1));}
.wf .wf-prog{display:block;height:7px;border-radius:4px;background:rgba(244,236,226,.1);overflow:hidden;}
.wf .wf-prog i{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--peach-2),var(--wf));}
.wf .wf-steps{display:flex;gap:6px;} .wf .wf-steps i{flex:1;height:8px;border-radius:4px;}
.wf .wf-steps i:first-child,.wf .wf-steps i:nth-child(2){background:color-mix(in oklch,var(--wf) 50%,transparent);}
.wf .wf-meta{display:flex;justify-content:space-between;} .wf .wf-meta i{width:40px;height:9px;}

/* =====================================================================
   2 · DESIGN-ITERATION CAROUSEL  (variation gallery)
   ===================================================================== */
.itercar{position:relative;}
.itercar .ctrack{align-items:flex-start;gap:18px;}
.itcard{flex:none;width:min(82vw,360px);border-radius:20px;padding:16px;
  display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(155deg,rgba(40,31,24,.5),rgba(16,12,9,.5));
  border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.7);}
.itcard .vtop{display:flex;align-items:center;gap:.6rem;}
.itcard .vno{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-size:.86rem;font-weight:600;color:var(--cream);background:rgba(244,236,226,.06);border:1px solid var(--line-2);}
.itcard .vname{font-size:clamp(15px,1.3vw,18px);font-weight:600;color:var(--cream);line-height:1.1;letter-spacing:-.01em;}
.itcard .vstat{margin-left:auto;font-size:.64rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey-dim);padding:4px 9px;border-radius:5rem;border:1px solid var(--line);white-space:nowrap;}
.itcard .vmeta{display:flex;flex-direction:column;gap:10px;margin-top:auto;}
.itcard .vmeta .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.itcard .vh{font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;}
.itcard .pros .vh{color:var(--ok);} .itcard .cons .vh{color:var(--peach-2);}
.itcard ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;}
.itcard li{font-size:.8rem;color:var(--grey);line-height:1.35;padding-left:13px;position:relative;}
.itcard li::before{content:"";position:absolute;left:0;top:.5em;width:.3rem;height:.3rem;border-radius:50%;background:var(--grey-dim);}
.itcard.final{border-color:rgba(255,188,149,.5);
  background:linear-gradient(155deg,rgba(86,58,40,.55),rgba(18,14,11,.55));
  box-shadow:0 0 0 1px rgba(255,188,149,.18),0 36px 70px -34px rgba(0,0,0,.75);}
.itcard.final .vno{background:var(--peach);color:#23150d;border:none;}
.itcard.final .vstat{color:#23150d;background:var(--peach);border:none;}
.itcard.final .vchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;}
.itcard.final .vchips span{font-size:.74rem;color:var(--cream);padding:6px 10px;border-radius:8px;
  background:rgba(255,188,149,.1);border:1px solid var(--line-2);display:inline-flex;gap:.35rem;align-items:center;}
.itcard.final .vchips span::before{content:"✓";color:var(--ok);font-weight:700;}

/* carousel header w/ count + hint */
.car-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px;}
.car-head .ttl{font-size:clamp(15px,1.3vw,19px);font-weight:600;color:var(--cream);}
.car-head .ttl .pk{color:var(--peach);}
.car-head .hint{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-dim);
  display:inline-flex;align-items:center;gap:.5rem;}
.car-head .hint::before{content:"⇆";color:var(--peach);font-size:1.1em;}

/* =====================================================================
   3 · DATA-VIZ — before/after bars + score meters (animate on reveal)
   ===================================================================== */
.bars-viz{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line);}
.bvrow{display:grid;grid-template-columns:minmax(180px,1.4fr) 2fr clamp(96px,9vw,130px);gap:clamp(16px,2.5vw,40px);
  align-items:center;padding:22px 0;border-bottom:1px solid var(--line);}
@media (max-width:720px){ .bvrow{grid-template-columns:1fr;gap:12px;} }
.bvrow .bvl{font-size:clamp(14px,1.05vw,16px);color:var(--grey);font-weight:600;}
.bvtrack{display:flex;flex-direction:column;gap:9px;}
.bvbar{position:relative;height:18px;border-radius:6px;background:rgba(244,236,226,.04);overflow:hidden;border:1px solid var(--line);}
.bvbar i{position:absolute;left:0;top:0;height:100%;border-radius:6px;width:var(--w,40%);
  transform-origin:left center;}
.bars-viz.is-in .bvbar i{animation:barGrow 1.1s cubic-bezier(.625,.05,0,1) both;}
@keyframes barGrow{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.bvbar.before i{background:rgba(150,140,130,.7);}
.bvbar.after i{background:linear-gradient(90deg,var(--peach-2),var(--peach));box-shadow:0 0 18px -6px var(--peach);}
.bvbar .vk{position:absolute;right:9px;top:50%;transform:translateY(-50%);z-index:2;
  font-size:.74rem;font-weight:600;color:var(--cream);letter-spacing:.02em;}
.bvbar.before .vk{color:var(--grey);}
.bvrow .bvtrend{font-size:.86rem;font-weight:600;color:var(--ok);white-space:nowrap;text-align:right;}
.bvrow .bvtrend .dn{color:var(--ok);}

/* score meters (X / 5) — radial */
.meters{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media (max-width:760px){ .meters{grid-template-columns:1fr;} }
.meter{padding:24px 22px;border-radius:20px;display:flex;align-items:center;gap:16px;}
.meter .ring{--p:80;--c:var(--peach);position:relative;width:72px;height:72px;flex:none;border-radius:50%;
  background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(244,236,226,.08) 0);}
.meter.is-in .ring{animation:ringfill 1.1s cubic-bezier(.625,.05,0,1) both;}
@keyframes ringfill{from{transform:rotate(-12deg) scale(.82);opacity:.2;}to{transform:none;opacity:1;}}
.meter .ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:#120e0b;z-index:1;}
.meter .ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:1.25rem;font-weight:600;color:var(--cream);z-index:2;}
.meter .mtxt{min-width:0;}
.meter .mtxt .ml{font-size:.92rem;font-weight:600;color:var(--cream);}
.meter .mtxt .md{font-size:.76rem;color:var(--grey-dim);margin-top:4px;line-height:1.35;}
.meter .mtxt .md .up{color:var(--ok);font-weight:600;}

/* a graphical "flow" strip — node → node */
.flowviz{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;}
.flowviz .fn{flex:1;min-width:120px;padding:18px 16px;border-radius:14px;
  background:rgba(244,236,226,.035);border:1px solid var(--line);position:relative;}
.flowviz .fn .fi{font-size:.7rem;font-weight:600;color:var(--peach);letter-spacing:.08em;}
.flowviz .fn .ft{font-size:.92rem;color:var(--cream);font-weight:600;margin-top:6px;line-height:1.2;}
.flowviz .farrow{align-self:center;color:var(--grey-dim);padding:0 10px;font-size:1.1rem;}
.flowviz .fn.cut{opacity:.5;} .flowviz .fn.cut .ft{text-decoration:line-through;}
.flowviz .fn.new{border-color:color-mix(in oklch,var(--peach) 40%,transparent);background:rgba(255,188,149,.07);}

/* align hero content's left edge with the nav brand (page padding edge) */
/* --kgap: shared spacing token; gap above the KPIs == gap below them.
   The hero is full-height with its block bottom-anchored 20px above the
   bottom edge; the KPIs then flow in their own band below the fold. */
body.ord{--kgap:clamp(192px,24vh,336px);}
body.ord .hero{padding-left:var(--pad);padding-right:var(--pad);
  justify-content:flex-end;min-height:100vh;
  padding-top:93px;             /* clears the 73px nav */
  padding-bottom:20px;}         /* hero block sits 20px above the bottom edge */
body.ord .hero-inner.maxw{margin-left:0;margin-right:0;max-width:none;}
/* KPI band below the hero. Top gap = hero pad-bottom(20)+band pad-top;
   bottom gap = band pad-bottom + Context pad-top(20) — kept equal. */
body.ord .kpi-band{padding:var(--kgap) var(--pad);}
body.ord .kpi-band + .section{padding-top:20px;}
/* The real shift — reduce its top spacing by 90% (it follows the big statement
   which already provides ample breathing room above) */
body.ord .section[data-screen-label="The real shift"]{padding-top:clamp(8px,1.1vh,15px);}
/* Context section: drop the bottom padding so it ends right under the bullets+slot row */
body.ord .section[data-screen-label="Context"]{padding-bottom:0;}
/* keep the "real shift" headline to exactly two rows (its <br> splits the
   lines; nowrap stops the long 2nd line wrapping to a 3rd row) + smaller type */
body.ord .section[data-screen-label="The real shift"] > .maxw > .wrap-head .h-sec{
  font-size:clamp(24px,3.2vw,46px);white-space:nowrap;}
/* halve the visible gap between the subtext and the cards. The models are the
   top of the cards (they pop out), so we halve the space above the models from
   ~84px to ~42px while keeping the models at full size (no overlap). */
body.ord .section[data-screen-label="The real shift"] .popcards{
  margin-top:24px;padding-top:clamp(204px,25vw,290px);}

/* hero background image + vignette + downward fade into the page bg */
/* hero + KPI band + Context share one clipping "hero-zone". The grid bleeds out
   of the hero and is clipped at the zone's bottom (= end of Context). One
   .zone-fade lays the dark band over the whole zone: it ramps 10%→75% over the
   lower hero, then HOLDS 75% (so the light part never stretches), then fades to
   the page colour right at the bottom so it merges with no visible line. */
body.ord .hero-zone{position:relative;overflow:hidden;}
body.ord .zone-fade{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(12,10,8,.10) 0%,
    rgba(12,10,8,.30) 14%,
    rgba(12,10,8,.55) 24%,
    rgba(12,10,8,.75) 33%,
    rgba(12,10,8,.75) 88%,
    var(--bg) 100%);}
body.ord .hero{overflow:visible;}
body.ord .hero-bg{position:absolute;inset:0;z-index:0;overflow:visible;pointer-events:none;}
/* keep all real content layered above the bleeding grid + the zone fade */
body.ord .hero-inner,body.ord .kpi-band,body.ord .section{position:relative;z-index:1;}
/* diagonally-tilted tablet grid, bleeding into the top/right of the hero */
body.ord .hero-bg .hero-grid{position:absolute;
  width:min(112vw,2040px);height:auto;
  /* -58% baseline, then up by 1.5× the headline height (≈2 lines × 0.98 × font-size) */
  top:calc(-58% - 2.94 * clamp(40px,6.4vw,92px));right:-14%;
  transform:translate3d(-18px,var(--gy,0px),0) rotate(-26deg);
  transform-origin:top right;
  filter:saturate(1) brightness(.98);
  will-change:transform;}
/* scrim: dark on the left only (for the headline/copy). The vertical band is
   handled by .zone-fade so it can extend past the hero to the end of Context. */
body.ord .hero-scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(105deg,
      var(--bg) 0%, var(--bg) 26%, rgba(12,10,8,.86) 40%, rgba(12,10,8,.45) 55%, rgba(12,10,8,.12) 70%, rgba(12,10,8,0) 84%);}
/* ensure the hero content sits above the image layers */
body.ord .hero-inner{position:relative;z-index:2;}
body.ord .hero .pt-badge{z-index:3;}

/* hero meta strip — role / platform / focus + tech chips */
.metabar{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,5vw,80px);
  flex-wrap:wrap;margin-top:4px;}
.metatech{display:flex;gap:9px;flex-wrap:wrap;margin-left:auto;}

/* KPIs are a direct hero child, vertically centred in the hero's free space
   (between the headline/chips block above and the hero's bottom edge below)
   via auto top/bottom margins. */
.impact.impact-center{justify-content:center;text-align:center;width:100%;
  gap:clamp(32px,6vw,90px);}
/* KPIs centred horizontally within their band */
body.ord #heroKpis.impact.impact-center{
  margin:0;margin-left:0;margin-right:0;max-width:none;}
.impact.impact-center .it{align-items:center;}
.impact.impact-center .it .l{max-width:20ch;}
/* dedicated scroll-reveal for the hero KPIs (robust IntersectionObserver) */
.impact.impact-center{opacity:0;transform:translateY(34px);
  transition:opacity .9s cubic-bezier(.2,.65,.3,1),transform .9s cubic-bezier(.2,.65,.3,1);}
.impact.impact-center.kpi-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .impact.impact-center{opacity:1;transform:none;transition:none;}
}
.metatech .tchip{font-size:.84rem;font-weight:600;color:var(--cream);
  padding:9px 16px;border-radius:11px;border:1px solid rgba(255,236,222,.16);
  background:rgba(12,10,8,.6);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 8px 24px -10px rgba(0,0,0,.7);
  transition:color .3s,border-color .3s,background .3s;}
.metatech .tchip:hover{color:var(--cream);border-color:color-mix(in oklch,var(--peach) 45%,transparent);background:rgba(20,15,11,.72);}
@media (max-width:680px){
  .metabar{align-items:flex-start;}
  .mcol .mk-v{font-size:16px;}
}

/* bare wireframe — fills an existing .frame .shot (chrome supplied by frame) */
.wf.bare{position:absolute;inset:0;width:auto;aspect-ratio:auto;border:none;border-radius:0;box-shadow:none;background:linear-gradient(165deg,#1a1510,#0d0b09);}
.wf.bare .wf-chrome{display:none;}
.wf.bare .wf-pad{inset:0;}
.wf .wf-aside.crowd{gap:4px;} .wf .wf-aside.crowd .ln{height:7px;}

/* portrait app screen (phone frames) */
.wf.app-wf{position:absolute;inset:0;width:auto;aspect-ratio:auto;border:none;border-radius:0;
  background:linear-gradient(170deg,#171209,#0c0a08);}
.wf.app-wf .wf-app{position:absolute;inset:0;padding:16px 14px;display:flex;flex-direction:column;gap:12px;}
.wf .wf-abar{height:30px;border-radius:8px;background:rgba(244,236,226,.06);border:1px solid var(--line);flex:none;}
.wf.app-wf .wf-search{flex:none;}
.wf.app-wf .wf-tiles{grid-template-columns:repeat(2,1fr);}
.wf.app-wf .wf-tiles.tall{grid-template-columns:repeat(2,1fr);}
.wf.app-wf .wf-cta.center{width:100%;margin:0;height:34px;flex:none;}
.wf .wf-acc{display:flex;flex-direction:column;gap:8px;}
.wf .wf-acc .row{height:38px;border-radius:9px;background:rgba(244,236,226,.05);border:1px solid var(--line);}
.wf .wf-acc .row:first-child{background:color-mix(in oklch,var(--peach) 14%,rgba(244,236,226,.05));border-color:color-mix(in oklch,var(--peach) 30%,transparent);}
.wf .wf-card.mini{width:auto;margin:0;padding:11px;}

/* phone caption + item wrapper */
.phones .phitem{flex:none;display:flex;flex-direction:column;gap:12px;align-items:center;}
.phones .phitem .phone{flex:none;width:min(48vw,230px);max-width:none;}

/* =====================================================================
   CONTEXT — "pop-out" benefit cards (3D models break out of the top)
   ===================================================================== */
.popcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px);
  align-items:stretch;            /* equal-height cards */
  /* large top room so the models pop out WITHOUT climbing onto the headline */
  padding-top:clamp(190px,26vw,360px);}
.popcard{position:relative;display:flex;flex-direction:column;
  min-height:clamp(300px,30vw,380px);
  border-radius:26px;padding:0 26px 30px;
  background:linear-gradient(180deg,rgba(40,31,24,.42),rgba(14,11,9,.5));
  overflow:visible;
  box-shadow:0 40px 80px -42px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,236,222,.05);}

/* model area is a FIXED height so every model shares the exact same baseline */
.popmodel{position:relative;height:clamp(150px,17vw,200px);flex:none;}
.popimg{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  transform-origin:50% 96%;            /* pivot at the feet for the sway */
  width:min(118%,360px);height:clamp(300px,40vw,470px);object-fit:contain;object-position:bottom center;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.5));z-index:2;will-change:transform;}
#dealerModel{transition:none;}
/* accent glow as an elliptical "glowing shadow" at the base of the model */
.popglow{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:66%;height:clamp(26px,3.2vw,40px);border-radius:50%;z-index:1;pointer-events:none;
  filter:blur(20px);opacity:.42;will-change:transform;}
.popglow.discovery{background:var(--cl-discovery);}
.popglow.cart{background:var(--cl-cart);}
.popglow.behav{background:var(--cl-behav);}

/* text fills the remaining space and aligns to the TOP (labels line up across cards) */
.popbody{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-start;gap:12px;
  align-items:flex-start;padding-top:20px;}
.popbody h3{font-size:clamp(20px,1.8vw,26px);font-weight:600;color:var(--cream);
  line-height:1.08;letter-spacing:-.01em;}
.popbody p{font-size:clamp(14px,1vw,15.5px);color:var(--grey);line-height:1.55;}

@media (max-width:820px){
  .popcards{grid-template-columns:1fr;gap:clamp(60px,12vw,90px);padding-top:clamp(80px,22vw,150px);}
}
.phcap{font-size:.8rem;font-weight:600;color:var(--grey);letter-spacing:.01em;text-align:center;}

/* =====================================================================
   CONTEXT (Section 3) — "what was happening" cards + customer-feedback split
   ===================================================================== */
.whatcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);}
@media (max-width:820px){ .whatcards{grid-template-columns:1fr;} }
.whatcard{padding:26px 24px;border-radius:20px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.whatcard h4{font-size:clamp(18px,1.7vw,24px);font-weight:600;color:var(--cream);letter-spacing:-.01em;line-height:1.1;margin:0;}
.whatcard p{font-size:clamp(14px,1vw,15.5px);color:var(--grey);line-height:1.55;margin:0;}

/* customer feedback: left column = lead text stacked over the 32K+ card;
   right column = the complaint-distribution chart, stretched to match height */
.fb-split{display:grid;grid-template-columns:minmax(280px,1fr) 1.25fr;gap:clamp(24px,4vw,60px);align-items:stretch;}
@media (max-width:760px){ .fb-split{grid-template-columns:1fr;gap:32px;} }
.fb-left{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,30px);}
.fb-left .lead{max-width:none;margin:0;}
.fbstat{padding:30px 28px;border-radius:22px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  flex:1 1 auto;justify-content:center;
  /* end the card on the chart's bar baseline (the label row sits below the bars,
     occupying gap + one label line — match that so both bottoms align) */
  margin-bottom:calc(10px + 1.3 * clamp(12px,.95vw,14px));}
.fbstat .num{font-size:clamp(44px,6vw,84px);font-weight:600;color:var(--peach);line-height:.95;letter-spacing:-.02em;}
.fbstat .lab{font-size:clamp(14px,1.1vw,17px);color:var(--cream);font-weight:600;}
.fbstat .delta{font-size:.82rem;color:var(--grey-dim);}
/* the chart fills its column's full height (matching the stacked left pair) */
.fb-split .fbbars{display:flex;flex-direction:column;}
/* extend the chart upward to the "Customer feedback" kicker level while keeping
   its bottom on the card's baseline; header right-aligned over the columns */
@media (min-width:761px){
  .fb-split .fbbars{margin-top:-103px;}
  .fb-split .fbbars .cols-viz{min-height:calc(clamp(220px,28vh,320px) + 103px);}
}
/* align the header (and its note) to the right edge of the rightmost bar:
   each track is centred in its 1fr column, so the last track sits inset by
   (column − track)/2 from the container's right edge. */
.fbhead{text-align:right;
  padding-right:calc((100% - 3*clamp(14px,2vw,30px))/8 - clamp(34px,4.2vw,58px)/2);}
.fb-split .fbbars .cols-viz{height:auto;flex:1 1 auto;min-height:clamp(220px,28vh,320px);}
.fbhead{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-dim);margin-bottom:14px;}
.fbhead .fbnote{display:block;text-transform:none;letter-spacing:0;font-weight:500;color:var(--grey-dim);opacity:.72;margin-top:3px;}
.fbbars .bars-viz{border-top:1px solid var(--line);}
/* single-bar distribution rows */
.bvrow.one{grid-template-columns:minmax(130px,1fr) 2.4fr clamp(96px,9vw,130px);}
.bvrow.one .bvbar.after i{background:linear-gradient(90deg,rgba(150,140,130,.5),rgba(182,173,165,.7));box-shadow:none;}
.bvrow.one.hot .bvl{color:var(--peach);}
.bvrow.one.hot .bvbar.after i{background:linear-gradient(90deg,var(--peach-2),var(--peach));box-shadow:0 0 18px -6px var(--peach);}
.bvrow.one.hot .bvtrend{color:var(--peach);}

/* vertical column chart (replaces the horizontal bars in the feedback split) */
.cols-viz{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:clamp(14px,2vw,30px);
  align-items:end;height:clamp(200px,26vh,290px);padding-top:8px;}
.cvcol{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:10px;}
.cvk{font-size:clamp(15px,1.3vw,19px);font-weight:700;color:var(--cream);letter-spacing:.01em;}
.cvtrack{position:relative;width:clamp(34px,4.2vw,58px);flex:1 1 auto;display:flex;align-items:flex-end;
  border-radius:9px 9px 0 0;background:transparent;overflow:hidden;}
.cvtrack i{display:block;width:100%;height:var(--h,40%);border-radius:9px 9px 0 0;
  background:linear-gradient(180deg,rgba(198,189,181,.7),rgba(150,140,130,.45));
  transform-origin:bottom center;}
/* grow on reveal — no fill-mode hold, so columns stay visible if rAF is throttled */
.fbbars.is-in .cols-viz .cvtrack i{animation:colGrow 1.1s cubic-bezier(.625,.05,0,1);}
@keyframes colGrow{from{transform:scaleY(0);}to{transform:scaleY(1);}}
.cvcol.hot .cvtrack i{background:linear-gradient(180deg,var(--peach),var(--peach-2));
  box-shadow:0 0 22px -6px var(--peach);}
/* hot bar: track shrinks to its fill height so there's no empty space on top */
.cvcol.hot .cvtrack{flex:none;height:89%;}
.cvcol.hot .cvk{color:var(--peach);}
.cvl{position:relative;font-size:clamp(12px,.95vw,14px);color:var(--grey);font-weight:600;text-align:center;line-height:1.3;
  max-width:15ch;text-wrap:balance;}
.cvcol.hot .cvl{color:var(--peach);}
/* hang "(this case study)" below the label so "Order Placing" stays on the
   same baseline row as the other single-line labels */
.cvl em{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:3px;
  white-space:nowrap;font-style:normal;font-weight:600;font-size:.85em;color:var(--grey-dim);}
.cvcol.hot .cvl em{color:var(--peach);opacity:.6;}
@media (max-width:560px){ .cols-viz{height:clamp(170px,40vw,230px);gap:8px;} .cvl{font-size:11px;} }

/* §3.3 — context-3 points, what-was-happening label, callout, problem bullets, opportunity/brief */
/* §3.3 — context points as a stacked bullet list (no card chrome),
   with a visual slot to their left; the pair is aligned to the right edge */
.ctx-figrow{display:flex;align-items:center;justify-content:flex-end;gap:clamp(28px,4vw,64px);}
.ctx-figrow{display:flex;align-items:center;justify-content:flex-end;gap:clamp(28px,4vw,64px);overflow:visible;}
.ctx-figslot{flex:1 1 auto;align-self:stretch;min-height:clamp(240px,30vw,360px);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:visible;}
.ctx-figslot image-slot{display:block;width:100%;height:100%;min-height:inherit;}
.ctx-figslot .ctx-shift-img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;position:relative;z-index:2;}
/* two narrower elliptical glows, brightest beneath each chair:
   left = cold grey-blue (old habit), right = warm peach (digital default) */
.ctx-figslot .ctx-shift-glow{position:absolute;bottom:calc(16% - 10px);width:30%;height:20px;border-radius:50%;
  z-index:1;pointer-events:none;filter:blur(22px);}
.ctx-figslot .ctx-shift-glow.cold{left:33%;transform:translateX(-50%);
  background:#9fd2c4;opacity:.34;}
.ctx-figslot .ctx-shift-glow.warm{left:62%;transform:translateX(-50%);
  background:var(--peach);opacity:.46;}
.ctx3{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:clamp(32px,4vh,48px);max-width:46ch;flex:none;}
@media (max-width:820px){
  .ctx-figrow{flex-direction:column;align-items:stretch;}
  .ctx-figslot{min-height:clamp(200px,52vw,300px);}
  .ctx3{max-width:none;}
}
.ctxpt{position:relative;padding:0 0 0 26px;text-align:left;}
.ctxpt::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;
  background:var(--peach);box-shadow:0 0 12px -2px var(--peach);}
.ctxpt p{font-size:clamp(14px,1.05vw,16px);color:var(--grey);line-height:1.55;margin:0;}
.ctxpt p b{color:var(--cream);font-weight:600;}

/* §2 — My role: lead designer ownership + collaborator figure slot.
   align-items:end → the heading/copy block bottom-aligns with the image. */
.rolegrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:end;}
@media (max-width:820px){ .rolegrid{grid-template-columns:1fr;gap:clamp(36px,8vw,56px);} }
.roleown{font-size:clamp(18px,1.7vw,26px);font-weight:600;color:var(--cream);
  margin-top:14px;letter-spacing:-.01em;}
.rolephases{margin:clamp(18px,2.6vh,30px) 0 0;padding:0;max-width:440px;
  display:flex;flex-wrap:wrap;gap:10px 22px;}
.rp{display:inline-flex;align-items:baseline;gap:9px;
  font-size:clamp(15px,1.15vw,18px);color:var(--grey);font-weight:500;line-height:1.4;}
.rp::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;align-self:center;
  background:var(--peach);box-shadow:0 0 10px -1px var(--peach);}
.rp:hover{color:var(--cream);}

/* time-to-build strip — hourglass + two figures with a dotted separator */
.roletime{display:flex;align-items:center;gap:14px;flex-wrap:nowrap;white-space:nowrap;
  margin-top:clamp(24px,3.2vh,38px);margin-left:-10px;}
.roletime .rt-ic{width:clamp(27px,2vw,34px);height:clamp(27px,2vw,34px);flex:none;color:var(--peach);}
.rt-item{font-size:clamp(15px,1.2vw,19px);color:var(--grey);font-weight:500;letter-spacing:.005em;}
.rt-item b{color:var(--cream);font-weight:700;}
.rt-sep{width:0;height:1.2em;border-left:2px dotted var(--grey-dim);opacity:.8;flex:none;}
.rolefig{display:flex;flex-direction:column;gap:16px;}
.rolefig-cap{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-dim);}
.rolefig-slot{position:relative;width:100%;min-height:clamp(300px,36vw,460px);
  display:flex;align-items:flex-end;justify-content:center;}
.rolefig-slot image-slot,.rolefig-slot img{display:block;width:100%;height:auto;max-height:520px;
  object-fit:contain;object-position:bottom center;}

/* §2 variant — process diagram (CSS pills + SVG line layer), themed, no bg */
.processmap{position:relative;width:100%;aspect-ratio:1070/868;container-type:inline-size;}
/* diagram scaled up 1.5×, anchored to its right edge (grows left + taller),
   nudged right so the rightmost pill touches the content right edge */
body.ord .section[data-screen-label="My role (diagram)"] .processmap{
  width:150%;margin-left:-50%;transform:translateX(6%);}
/* lift the left text block so its top aligns with the bottom of the
   Research + Data pill (~14.35% of the diagram height ≈ 8.4% of the grid width) */
body.ord .section[data-screen-label="My role (diagram)"] .rolegrid{align-items:start;}
body.ord .section[data-screen-label="My role (diagram)"] .rolecol{margin-top:calc(8.4% + 178px);}
.pmap-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;fill:none;}
.pmap-lines .ring{stroke:var(--grey);stroke-width:2.6;}
.pmap-lines .dash{stroke:var(--grey);stroke-width:2.6;stroke-dasharray:11 9;stroke-linecap:round;}
.pmap-lines .solid{stroke:var(--grey);stroke-width:2.6;stroke-linecap:round;}
.pmap-lines .squig{stroke:var(--peach);stroke-width:3.2;stroke-linecap:round;}
.pmap-pill{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;z-index:2;
  padding:.5em 1.05em;border-radius:999px;line-height:1.1;letter-spacing:.005em;
  font-size:clamp(11px,3.05cqw,29px);font-weight:500;}
.pmap-pill.grey{background:#5d564e;color:var(--cream);}
.pmap-pill.me{background:var(--peach);color:#1a1410;font-weight:600;}
.pmap-pill.lead{background:transparent;color:var(--peach);box-shadow:inset 0 0 0 2px var(--peach);font-weight:600;}
.pmap-cap,.pmap-prd,.pmap-me{position:absolute;transform:translate(-50%,-50%);z-index:2;
  font-family:'Caveat',cursive;color:var(--grey);}
.pmap-cap{white-space:nowrap;font-size:clamp(15px,3.05cqw,30px);}
.pmap-prd{text-align:center;line-height:1.12;white-space:nowrap;font-size:clamp(13px,2.7cqw,27px);}
.pmap-me{white-space:nowrap;color:var(--peach);font-weight:600;font-size:clamp(21px,4.3cqw,43px);}

.blocklabel{display:inline-flex;align-items:center;gap:.6rem;font-size:.74rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cream);}
.blocklabel .bi{width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(91,116,255,.16);color:var(--blue);font-weight:700;border:1px solid color-mix(in oklch,var(--blue) 40%,transparent);}

.whatcard p{font-size:clamp(14px,1.05vw,16px);color:var(--grey);line-height:1.5;margin:0;}
.callout{display:inline-flex;align-items:center;gap:.7rem;padding:14px 20px;border-radius:14px;
  background:rgba(91,116,255,.08);border:1px solid color-mix(in oklch,var(--blue) 24%,var(--line-2));
  color:var(--cream);font-size:clamp(14px,1.1vw,17px);font-weight:600;}
.callout .ci{color:var(--blue);font-size:1.1em;}

/* verbatim bullet lists inside the problem (pop) cards — green check, like the spec graphic */
.poplist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.poplist li{position:relative;padding-left:25px;font-size:clamp(14px,1.05vw,16px);color:var(--grey);line-height:1.4;}
.poplist li::before{content:"✓";position:absolute;left:0;top:0;font-weight:700;color:var(--ok);
  width:17px;height:17px;border-radius:50%;background:rgba(158,194,122,.16);display:grid;place-items:center;font-size:.7rem;}

.oppbrief{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,34px);align-items:stretch;}
/* the lone "initial design brief" mirrors the updated brief: centred, roomy */
.oppbrief .oppfull{text-align:center;align-items:center;margin:clamp(40px,7vh,90px) auto;max-width:60vw;}
.oppbrief .oppfull .eyebrow{justify-content:center;}
/* "the real opportunity" as a full-width statement (no card chrome) */
.oppfull{display:flex;flex-direction:column;gap:12px;}
.oppfull p{font-size:clamp(18px,1.9vw,30px);color:var(--cream);line-height:1.5;margin:0;max-width:none;font-weight:500;letter-spacing:-.01em;text-wrap:pretty;}
.oppfull p b{color:var(--peach);font-weight:600;}
/* small-font variant (matches the original card body size) */
.oppfull--sm p{font-size:clamp(15px,1.15vw,18px);line-height:1.6;font-weight:400;color:var(--grey);}
.oppfull--sm p b{color:var(--cream);}
.oppcard{padding:28px 26px;border-radius:20px;display:flex;flex-direction:column;gap:12px;}
.oppcard p{font-size:clamp(15px,1.15vw,18px);color:var(--grey);line-height:1.6;margin:0;}
.oppcard p b{color:var(--cream);font-weight:600;}
.briefcard{padding:28px 26px;border-radius:20px;display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(155deg,rgba(86,58,40,.5),rgba(18,14,11,.5));
  border:1px solid rgba(255,188,149,.32);box-shadow:0 0 0 1px rgba(255,188,149,.12);}
.briefcard .hmw{font-size:clamp(17px,1.6vw,24px);font-weight:600;color:var(--cream);line-height:1.3;
  font-style:italic;letter-spacing:-.01em;margin:0;text-wrap:pretty;}
/* subtext sits at the bottom, using the card's existing slack so height doesn't grow */
.briefcard .briefsub,.oppfull .briefsub{margin-top:14px;font-size:clamp(13px,1.05vw,15px);font-weight:600;
  color:var(--peach-2);font-style:italic;letter-spacing:.01em;display:block;}
/* in the centred initial brief, keep the subtext centred too */
.oppbrief .oppfull .briefsub{align-self:center;text-align:center;}
/* placeholder stat values awaiting real numbers */
.score .num[data-pending]{color:var(--grey-dim);opacity:.7;}

/* PROBLEM merge options — option tag, transition line, secondary segment cards */
.opttag{display:inline-flex;align-items:center;font-size:.64rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--peach);padding:5px 12px;border-radius:5rem;align-self:flex-start;
  background:rgba(255,188,149,.08);border:1px solid rgba(255,188,149,.28);margin-bottom:4px;}

.transline{display:flex;align-items:center;gap:.6rem;font-size:clamp(15px,1.3vw,19px);font-weight:600;
  color:var(--cream);letter-spacing:-.005em;}
.transline .tl-ic{color:var(--peach);font-size:1.2em;}

/* secondary segments — NO card chrome; image + content sit side by side,
   the subtle glow shadow under the model is retained */
.segrow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px);align-items:end;}
@media (max-width:820px){ .segrow{grid-template-columns:1fr;gap:clamp(28px,7vw,44px);} }
.segcard{display:flex;align-items:flex-end;gap:clamp(10px,1.2vw,18px);padding:0;background:none;border:0;border-radius:0;}
.segmodel{position:relative;width:clamp(96px,10vw,140px);height:clamp(120px,13vw,180px);flex:none;}
.segmodel image-slot,.segmodel .seg-img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:auto;height:118%;max-width:none;object-fit:contain;object-position:bottom center;z-index:2;
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.5));}
/* large-dealer figure renders 20% smaller than the segment-model box */
.segmodel .seg-img{height:94.4%;}
/* portal is a wide landscape laptop — size by width, sit lower, wider box */
.segmodel.portal{width:clamp(150px,16vw,210px);}
.segmodel.portal .seg-img{height:auto;width:100%;bottom:6px;}
.segmodel.portal .segglow{width:64%;height:15px;bottom:0;}
.segcard:hover .segmodel.portal .segglow{width:78%;height:21px;}
.segmodel image-slot{left:0;transform:none;width:100%;height:100%;}
.segglow{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:80%;height:18px;
  border-radius:50%;filter:blur(13px);opacity:.5;z-index:1;
  transition:opacity .45s ease, width .45s ease, height .45s ease, filter .45s ease;}
/* brighter + larger glow when hovering the segment */
.segcard:hover .segglow{opacity:.92;width:96%;height:24px;filter:blur(16px);}
.segglow.discovery{background:var(--cl-discovery);}
.segglow.cart{background:var(--cl-cart);}
.segglow.behav{background:var(--cl-behav);}
.segbody{display:flex;flex-direction:column;gap:8px;min-width:0;padding-bottom:6px;}
/* segment labels: drop the pill container — keep the colour dot + text only */
.segbody .clp{padding:0;background:none;border:0;border-radius:0;}
.segbody p{font-size:clamp(13px,.95vw,15px);color:var(--grey);line-height:1.45;margin:0;}

/* big centred statement (replaces the callout under Option 1's segments) */
.bigstatement{text-align:center;max-width:30ch;margin:clamp(90px,13vh,180px) auto 0;
  font-size:clamp(20px,2.3vw,32px);font-weight:700;line-height:1.18;letter-spacing:-.01em;
  text-wrap:balance;}
.bigstatement .w{color:var(--peach);transition:color .5s ease;}
.bigstatement.words-lit .w{color:var(--cream);}
/* brief headline: same per-word peach→cream reveal; .peach phrase stays peach */
.briefstmt .w{color:var(--peach);transition:color .55s ease;}

/* option 3 — segment outcomes folded into the final storyboard caption */
.sbchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;}
.sbchips .chip{font-size:.72rem;padding:6px 11px;}
/* storyboard scene character — pops out of the top of the card */
.storyboard{padding-top:clamp(70px,9vw,120px);align-items:start;}
.storyboard .panel{overflow:visible;min-height:0;}
/* fixed scene height so all four cards match regardless of caption length
   (caption wraps differently across browsers; flex:1 made cards uneven) */
.storyboard .panel .scene{overflow:visible;flex:none;height:clamp(93px,9vw,120px);min-height:0;
  /* allow pop-out from the TOP only — clip left, right & bottom to the card */
  clip-path:inset(-100vh 0 0 0);}
.panel .scene .sb-img{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);
  width:auto;height:clamp(222px,21.6vw,288px);max-width:none;object-fit:contain;object-position:bottom center;
  display:block;z-index:3;filter:drop-shadow(0 20px 24px rgba(0,0,0,.5));}
/* the 2nd and 4th characters render a touch larger — trim them 10% */
.storyboard .panel:nth-child(2) .sb-img,
.storyboard .panel:nth-child(4) .sb-img{height:clamp(200px,19.44vw,259px);}
/* no step numbers on the storyboard cards */
.storyboard .panel .num{display:none;}
/* nudge the first two characters 10px further down */
.storyboard .panel:nth-child(1) .sb-img,
.storyboard .panel:nth-child(2) .sb-img{bottom:-26px;}

/* hover — subtle glow on the card + a slow, gentle lift of the character */
.storyboard .panel .scene{transition:border-color .5s ease, box-shadow .5s ease;}
.storyboard .panel .sb-img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1);}
.storyboard .panel:hover .scene{border-color:rgba(255,188,149,.5);
  box-shadow:inset 0 0 34px rgba(255,150,100,.20), inset 0 1px 0 rgba(255,236,222,.18);}
.storyboard .panel:nth-child(1):hover .sb-img,
.storyboard .panel:nth-child(2):hover .sb-img{transform:translateX(-50%) translateY(-12px);}
.storyboard .panel:nth-child(3):hover .sb-img,
.storyboard .panel:nth-child(4):hover .sb-img{transform:translateX(-50%) translateY(-12px);}

/* =====================================================================
   HEURISTIC EVALUATION — scroll-pinned horizontal carousel
   ===================================================================== */
.hsection{padding:0;}                          /* full-bleed; slides handle their own padding */
.hpin{position:relative;}                       /* tall; height set by JS = 100vh + horizontal travel */
.hsticky{position:sticky;top:0;height:100vh;overflow-x:clip;overflow-y:visible;display:flex;align-items:center;}
.htrack{display:flex;align-items:center;gap:clamp(32px,4vw,64px);
  padding:0 clamp(24px,7vw,120px) 0 52vw;will-change:transform;height:100%;position:relative;z-index:2;}
.htrack .hslide{flex:none;display:flex;flex-direction:column;justify-content:center;height:100%;}

/* intro panel — stays fixed on the left (does NOT translate); the legacy cards
   slide OVER it, and it fades to 0 once the first card covers it (JS-driven). */
.hintro{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);
  width:min(500px,42vw);z-index:1;will-change:opacity;}
.hintro .wrap-head{gap:18px;}
.hslide--intro{width:min(560px,74vw);}
.hscrollhint{display:inline-flex;align-items:center;gap:12px;margin-top:14px;
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-dim);}
.hscrollhint .hsh-bar{position:relative;width:54px;height:2px;border-radius:2px;background:var(--line-2);overflow:hidden;}
.hscrollhint .hsh-bar i{position:absolute;inset:0;width:40%;background:var(--peach);border-radius:2px;
  animation:hshSlide 1.8s cubic-bezier(.6,0,.3,1) infinite;}
@keyframes hshSlide{0%{transform:translateX(-110%);}60%,100%{transform:translateX(260%);}}

/* legacy-screen panels */
.hslide-tag{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--peach);margin-bottom:14px;}
/* browser-window frame around each legacy screen. sized by viewport HEIGHT so
   the windows fill the pinned viewport (no large empty gap). equal margin-bottom
   on BOTH reserves space for screen 2's protrusion, keeping the windows aligned. */
/* browser-window frame around each legacy screen. sensible size; equal
   margin-bottom on BOTH reserves space for screen 2's protrusion so the two
   windows stay aligned on the same line. */
.huiframe{position:relative;width:min(800px,60vw);border-radius:15px;overflow:visible;
  margin-bottom:calc(min(800px,60vw) * 116 / 1370);
  background:var(--surface);box-shadow:0 50px 110px -50px rgba(0,0,0,.82),inset 0 0 0 1px var(--line);}
.huiframe .bar{display:flex;align-items:center;gap:7px;padding:11px 15px;border-bottom:1px solid var(--line);
  border-radius:15px 15px 0 0;background:rgba(255,255,255,.02);}
.huiframe .bar i{width:10px;height:10px;border-radius:50%;background:var(--line-2);}
.huiframe .bar .url{margin-left:12px;font-size:.74rem;color:var(--grey-dim);letter-spacing:.01em;}
/* body = the inner "viewport" of the window; the cropped screenshot fills it
   edge-to-edge (body shares screen-1's cropped ratio → no crop, both equal height). */
.huishot{position:relative;overflow:hidden;border-radius:0 0 15px 15px;
  aspect-ratio:1370/746;width:100%;}
.huishot .hui-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
.huishot image-slot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* protrude variant: screen 2 is taller, so at the same window height its lower
   strip (the cart + checkout) spills BELOW the window into the reserved margin. */
.huiframe--protrude{overflow:visible;}
.huishot--protrude{overflow:visible;}
.huishot--protrude .hui-img{position:absolute;top:0;left:0;width:100%;height:auto;object-fit:fill;
  border-radius:0 0 15px 15px;}

/* annotation chips with directional arrows — sit OUTSIDE the window, arrows point in */
.hchip{position:absolute;z-index:6;max-width:210px;padding:9px 13px;border-radius:11px;
  font-size:13.5px;font-weight:600;line-height:1.32;color:var(--cream);
  background:rgba(20,15,12,.9);border:1px solid rgba(255,188,149,.42);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.8);backdrop-filter:blur(4px);}
.hchip em{display:block;font-style:normal;font-weight:500;font-size:12px;color:var(--grey);margin-top:3px;line-height:1.4;}
/* the arrow line + head, drawn from the chip toward the target (--len long) */
.hchip::after{content:"";position:absolute;background:var(--peach);}
.hchip::before{content:"";position:absolute;width:0;height:0;}
/* DOWN: line below chip, head pointing down */
.hchip--down::after{left:50%;top:100%;width:2px;height:var(--len,60px);transform:translateX(-50%);}
.hchip--down::before{left:50%;top:calc(100% + var(--len,60px));
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid var(--peach);
  transform:translateX(-50%);}
/* UP */
.hchip--up::after{left:50%;bottom:100%;width:2px;height:var(--len,60px);transform:translateX(-50%);}
.hchip--up::before{left:50%;bottom:calc(100% + var(--len,60px));
  border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid var(--peach);
  transform:translateX(-50%);}
/* LEFT */
.hchip--left::after{right:100%;top:50%;height:2px;width:var(--len,60px);transform:translateY(-50%);}
.hchip--left::before{right:calc(100% + var(--len,60px));top:50%;
  border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:8px solid var(--peach);
  transform:translateY(-50%);}
/* RIGHT */
.hchip--right::after{left:100%;top:50%;height:2px;width:var(--len,60px);transform:translateY(-50%);}
.hchip--right::before{left:calc(100% + var(--len,60px));top:50%;
  border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid var(--peach);
  transform:translateY(-50%);}
/* ELBOW (legacy, kept): text box below; L-connector up then right. */
.hchip--elbow .elbow{position:absolute;bottom:100%;left:26px;width:var(--ew,140px);height:var(--eh,140px);
  border-left:2px solid var(--peach);border-top:2px solid var(--peach);pointer-events:none;}
.hchip--elbow .elbow::after{content:"";position:absolute;right:-2px;top:-5px;
  border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid var(--peach);}
/* FOLD (legacy px elbow — superseded by SVG connector below) */
.hchip--fold .fold{position:absolute;left:100%;top:50%;pointer-events:none;}
.hchip--fold .fold i{position:absolute;background:var(--peach);}
.hchip--fold .fold .s1{left:0;top:-1px;height:2px;width:var(--s1,24px);}
.hchip--fold .fold .s2{left:calc(var(--s1,24px) - 2px);top:calc(-1 * var(--rise,120px));height:var(--rise,120px);width:2px;}
.hchip--fold .fold .s3{left:calc(var(--s1,24px) - 2px);top:calc(-1 * var(--rise,120px) - 1px);height:2px;width:var(--s3,120px);}
.hchip--fold .fold .ah{left:calc(var(--s1,24px) + var(--s3,120px) - 2px);top:calc(-1 * var(--rise,120px) - 5px);
  background:none;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid var(--peach);}
/* SVG connector drawn in the screenshot's own pixel space → scales with the
   image at any viewport, touches the protruding bottom edge, equal arms. */
.huishot--protrude .annot-svg,.huishot--protrude .ec-svg{position:absolute;top:0;left:0;width:100%;aspect-ratio:1370/862;
  overflow:visible;z-index:5;pointer-events:none;}
.hchip--plain{z-index:6;}
.hchip--plain::after,.hchip--plain::before{display:none;}
/* down → right elbow (used on a single chip): vertical drop, 90° right turn,
   horizontal run = 1.5× the drop, arrowhead pointing right. */
.hchip--dr::after,.hchip--dr::before{display:none;}
.hchip--dr .dr{position:absolute;top:100%;left:50%;pointer-events:none;}
.hchip--dr .dr i{position:absolute;background:var(--peach);}
.hchip--dr .dr .v{left:0;top:0;width:2px;height:var(--vlen,170px);}
.hchip--dr .dr .h{left:0;top:calc(var(--vlen,170px) - 2px);height:2px;width:var(--hlen,255px);}
.hchip--dr .dr .ah{left:calc(var(--hlen,255px) - 2px);top:calc(var(--vlen,170px) - 7px);
  background:none;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid var(--peach);}

@media (max-width:760px){
  /* on small screens fall back to vertical stacking (no pin) */
  .hpin{height:auto !important;}
  .hsticky{position:static;height:auto;overflow:visible;display:block;}
  .htrack{flex-direction:column;gap:48px;padding:clamp(60px,12vw,90px) var(--pad);transform:none !important;height:auto;}
  .htrack .hslide{height:auto;width:100%;}
  .hslide--intro,.huiframe{width:100%;}
}

/* =====================================================================
   RESEARCH — pinned two-panel stage (redesign)
   Panel 1 (title + two pathway figures) fills the viewport; on scroll it
   exits left while Panel 2 — a persistent peach "screen" — slides in from
   the right. Further scroll steps through .rs-group clusters on the screen,
   swapping section titles (top-left) and the 3D dealer model in front.
   ===================================================================== */
.rtrack{display:flex;height:100%;will-change:transform;position:relative;z-index:2;}
.rpanel{flex:none;width:100vw;height:100%;position:relative;}

/* ---- panel 1: pathways ---- */
.rpanel--paths{display:grid;grid-template-columns:minmax(300px,.9fr) 1.1fr 1.1fr;
  gap:clamp(20px,2.8vw,48px);align-items:stretch;
  padding:clamp(84px,12vh,128px) var(--pad) clamp(36px,6vh,64px);}
.rlead{display:flex;flex-direction:column;justify-content:center;gap:18px;}
.rlead-h{font-size:clamp(30px,3.6vw,58px);}
.rlead .lead{margin-top:6px;max-width:38ch;}
.rpath-fig{display:flex;flex-direction:column;gap:13px;min-height:0;}
.rpath-fig .rimg{flex:1;min-height:0;position:relative;border-radius:20px;overflow:hidden;
  border:1px solid var(--line-2);
  background:radial-gradient(70% 70% at 50% 30%,rgba(255,158,118,.14),transparent 70%),
    linear-gradient(160deg,#1d1813,#0c0a08);}
.rpath-fig .rimg image-slot{position:absolute;inset:0;width:100%;height:100%;}
/* ground glow under the pathway-1 podium render (contain-fit, height-constrained:
   rendered image width = .9423×H, podium base at 95.8% H, podium span ≈.588 img-w
   → all glow geometry in %-of-container-height so it tracks every screen size) */
.rpath-fig .rimg:has(> image-slot[src*="ot-research-path-1"])::before{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:8.4%;aspect-ratio:7/1;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(255,158,118,.32),rgba(255,158,118,.12) 55%,transparent 75%);filter:blur(4px);pointer-events:none;}
/* ground glow under the pathway-2 podium render (contain-fit, height-constrained:
   podium base at 92.9% H → glow centre 7.1% from bottom; span ≈.65 img-w) */
.rpath-fig .rimg:has(> image-slot[src*="ot-research-path-2"])::before{content:"";position:absolute;left:50%;bottom:2.9%;transform:translateX(-50%);height:8.4%;aspect-ratio:8/1;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(255,158,118,.32),rgba(255,158,118,.12) 55%,transparent 75%);filter:blur(4px);pointer-events:none;}
.rpath-fig .clp{align-self:flex-start;}
.rpath-fig .rrow{display:flex;align-items:last baseline;gap:14px;}
.rpath-fig .rbig{font-size:clamp(36px,3.4vw,54px);font-weight:700;color:var(--cream);
  line-height:.95;letter-spacing:-.01em;}
.rpath-fig .rbig span{color:var(--peach);}
.rpath-fig .rbig-l{font-size:.8rem;color:var(--peach-2);font-weight:600;letter-spacing:.02em;line-height:1.18;white-space:nowrap;}
.rpath-fig .rsep{width:1px;height:clamp(26px,2.4vw,38px);background:rgba(244,236,226,.16);margin:0 6px;align-self:flex-end;}
.rpath-p{color:var(--grey);font-size:.88rem;line-height:1.5;margin:0;}

/* ---- panel 2: the peach stage ---- */
/* the screen: full width minus margins, 60% of the pinned section, top-aligned */
.rscreen{position:absolute;left:var(--pad);right:var(--pad);top:clamp(68px,9.5vh,96px);height:66%;
  border-radius:clamp(18px,2vw,28px);overflow:hidden;z-index:1;
  background:linear-gradient(165deg,#ffbe96 0%,#ffa470 100%);
  box-shadow:0 34px 90px -22px rgba(255,150,90,.38), inset 0 1px 0 rgba(255,255,255,.55);}
/* fluid gradient drift — the axis rotates through 360° while the two colours
   ALSO swap their stops along it every half turn (light↔deep interchange). */
@property --rang{syntax:'<angle>';inherits:false;initial-value:165deg;}
@property --rc1{syntax:'<color>';inherits:false;initial-value:#ffc49e;}
@property --rc2{syntax:'<color>';inherits:false;initial-value:#ff9c63;}
.rscreen::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(var(--rang),var(--rc1) 0%,var(--rc2) 100%);}
@media (prefers-reduced-motion: no-preference){
  .rscreen.is-live::before{animation:rdrift 14s linear infinite;}
}
@keyframes rdrift{
  0%{--rang:165deg;--rc1:#ffc49e;--rc2:#ff9c63;}
  50%{--rang:345deg;--rc1:#ff9c63;--rc2:#ffc49e;}
  100%{--rang:525deg;--rc1:#ffc49e;--rc2:#ff9c63;}
}

/* section titles — dock top-left; section intros play them big & centred first.
   States driven by JS sequencer: .is-center (+.is-on) = big centred hero;
   removing .is-center morphs it into the docked corner spec; .is-out slides
   it away to the left. Kicker + subtext only show once docked. */
.rs-title{position:absolute;top:clamp(20px,3.2vh,32px);left:clamp(24px,2.8vw,42px);z-index:3;
  opacity:0;visibility:hidden;pointer-events:none;}
.rs-title.is-on{opacity:1;visibility:visible;}
.rs-title.is-center{top:46%;left:50%;transform:translate(-50%,calc(-50% + 44px));text-align:center;}
.rs-title.is-center.is-on{transform:translate(-50%,-50%);}
.rs-title.is-center h3{font-size:clamp(54px,5.8vw,112px);font-weight:880;margin-top:0;letter-spacing:-1.5px;}
/* the docked corner title is ONE row; only the centre hero breaks into two */
.rs-title h3 br{display:none;}
.rs-title.is-center h3 br{display:inline;}
.rs-title.is-center .rsk,.rs-title.is-center p{opacity:0;}
.rs-title.is-out{opacity:0;transform:translateX(-46px);}
/* corner-entrance origin: a few px straight below the docked position */
.rs-title.is-rise{opacity:0;transform:translateY(14px);}
/* centre-phase exit: fades out climbing gently (entrance 44px in 1s; exit 85px in .85s) */
.rs-title.is-center.is-lift{opacity:0;transform:translate(-50%,calc(-50% - 85px));}
.rs-title .rsk{font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#5e2102;}
.rs-title h3{font-size:clamp(24px,2.2vw,38px);color:#2b1407;font-weight:600;
  letter-spacing:-.01em;line-height:1;margin-top:8px;}
.rs-title p{margin-top:8px;font-size:.86rem;color:#3f2f1f;max-width:46ch;line-height:1.45;}

/* content groups — 3-4 open-format items at a time, crossfading on scroll */
.rs-stagearea{position:absolute;z-index:2;
  left:clamp(24px,2.8vw,42px);right:clamp(24px,2.8vw,42px);
  top:clamp(116px,19vh,170px);bottom:clamp(22px,4vh,42px);}
.rs-group{position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(var(--cols,3),1fr);gap:clamp(18px,2.6vw,44px);
  align-content:start;opacity:0;visibility:hidden;}
.rs-group.is-on{opacity:1;visibility:visible;}
/* arc the items into a semi-circular cluster around the centred dealer model:
   ends sit lowest, middles highest, and no two items share a line */
.rs-group .ritem{transform:translateY(var(--arc,0px));}
.rs-group .ritem:first-child{--arc:clamp(48px,9.5vh,104px);}
.rs-group .ritem:nth-child(2){--arc:0px;}
.rs-group .ritem:nth-child(3):not(:last-child){--arc:clamp(16px,3.5vh,38px);}
.rs-group .ritem:last-child{--arc:clamp(62px,12vh,128px);}
@media (prefers-reduced-motion: no-preference){
  /* title: vertical-only motion, paced like the page's own reveals (1s, 34-44px).
     Position (corner vs centre) is set by class and never transitions. */
  .rs-title{transition:opacity .9s var(--ease),transform .9s var(--ease),visibility 0s linear .9s;}
  .rs-title.is-on{transition-delay:0s;}
  .rs-title.is-center{transition:opacity 1s var(--ease),transform 1s var(--ease),visibility 0s linear 1s;}
  .rs-title.is-center.is-on{transition-delay:0s;}
  .rs-title.is-center.is-lift{transition:opacity .85s var(--ease),transform .85s var(--ease);}
  /* kicker + subtext fade in late, once the dock has settled */
  .rs-title .rsk,.rs-title p{transition:opacity .35s var(--ease) .3s;}
  .rs-title.is-center .rsk,.rs-title.is-center p{transition-delay:0s;}
  /* cards: enter one by one — each item keeps the long 74px climb + .9s fade,
     staggered 150ms apart; exit stays group-level (short climb, .4s) */
  .rs-group{transform:translateY(-22px);
    transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s linear .4s;}
  .rs-group.is-on{transform:none;transition:none;}
  .rs-group.is-on .ritem{animation:riEnter .9s var(--ease) both;
    animation-delay:calc(var(--ri,0)*.15s);}
  .rs-group .ritem:nth-child(1){--ri:0;}
  .rs-group .ritem:nth-child(2){--ri:1;}
  .rs-group .ritem:nth-child(3){--ri:2;}
  .rs-group .ritem:nth-child(4){--ri:3;}
  .rmodel-slot{transition:opacity .5s var(--ease),visibility 0s linear .5s;}
  .rmodel-slot.is-on{transition-delay:0s;}
}
@keyframes riEnter{from{opacity:0;transform:translateY(calc(var(--arc,0px) + 74px));}
  to{opacity:1;transform:translateY(var(--arc,0px));}}

/* open-format items — AA-checked dark tones on the peach surface, keeping the
   old card hierarchy: main text (was cream) / pain tag (was orange) / meta */
.ritem{display:flex;flex-direction:column;gap:10px;min-width:0;}
.ritem .rq{font-size:clamp(14px,1.02vw,17.5px);line-height:1.5;color:#2b1407;font-weight:500;margin:0;}
.ritem .rpain{font-size:.78rem;font-weight:700;color:#5e2102;letter-spacing:.02em;
  padding-top:10px;border-top:1px solid rgba(43,20,7,.18);}
.ritem .rmeta{display:flex;align-items:center;justify-content:flex-start;gap:14px;
  font-size:.78rem;font-weight:600;color:#3f2f1f;}
.ritem .rstars{display:inline-flex;gap:2px;font-size:.8rem;}
.ritem .rstars i{font-style:normal;color:rgba(43,20,7,.28);}
.ritem .rstars i.on{color:#5e2102;}
.ritem .ron{width:26px;height:26px;border-radius:50%;background:#2b1407;color:#ffc8a0;
  display:grid;place-items:center;font-size:.76rem;font-weight:700;}

/* floor glow cast by the screen: a TRAPEZOID pool of light low on the floor \u2014
   straight top edge (short fade-in) below the dealer's knee, sides splaying
   outward and FADING out along the slant (no hard edges anywhere), long
   falloff downward, never trimmed \u2014 it overflows into the next section.
   Shape is built purely from composited gradient masks: vertical fade \u00d7 two
   slanted side fades = a soft-edged trapezoid, no clip-path, no filter. */
.rglow{position:absolute;left:calc(var(--pad)*0.25);right:calc(var(--pad)*0.25);
  top:calc(100vh - 20px - 13.8vh);height:32vh;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(255,160,105,.34) 0%,rgba(255,150,95,.16) 45%,rgba(255,150,95,.05) 68%,transparent 82%);
  -webkit-mask-image:
    linear-gradient(to bottom,transparent 0,#000 9%,#000 100%),
    linear-gradient(110deg,transparent 3%,#000 16%),
    linear-gradient(250deg,transparent 3%,#000 16%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom,transparent 0,#000 9%,#000 100%),
    linear-gradient(110deg,transparent 3%,#000 16%),
    linear-gradient(250deg,transparent 3%,#000 16%);
  mask-composite:intersect;}
.rmodel{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  width:clamp(180px,21vh,280px);height:46vh;z-index:4;}
.rmodel-slot{position:absolute;inset:0;opacity:0;visibility:hidden;}
/* wider variant for the landscape-ish observe render (aspect .535 vs ~.40):
   width grows so the figure's HEIGHT matches the other two at fit=contain */
.rmodel-slot--wide{left:50%;right:auto;width:clamp(216px,25.2vh,336px);transform:translateX(-50%);}
.rmodel-slot.is-on{opacity:1;visibility:visible;}
.rmodel-slot image-slot{position:absolute;inset:0;width:100%;height:100%;}
/* floor shadow: light comes from the glowing screen behind-above, so the
   shadow casts forward (toward the viewer) \u2014 an ellipse pushed slightly
   below the feet, stretched a touch downward, subtle but present */
.rmodel-shadow{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);
  width:138%;height:34px;border-radius:50%;filter:blur(6px);z-index:0;
  background:radial-gradient(50% 50% at 50% 42%,rgba(0,0,0,.62),rgba(0,0,0,.25) 55%,transparent 72%);}
/* the observe render is wider (counter + figure): grow the shadow with it so
   it sits under the character's feet, not just the desk */
.rmodel:has(.rmodel-slot--wide.is-on) .rmodel-shadow{width:200%;}
/* contact patches \u2014 two darker pools pinning the podium and the boots to the
   floor (only for the wide observe render) */
.rmodel-shadow::before,.rmodel-shadow::after{content:"";position:absolute;display:none;
  border-radius:50%;top:8%;height:62%;}
.rmodel-shadow::before{left:24%;width:28%;          /* under the podium */
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.72),rgba(0,0,0,.3) 55%,transparent 75%);}
.rmodel-shadow::after{left:46%;width:23%;           /* under the boots */
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.72),rgba(0,0,0,.3) 55%,transparent 75%);}
.rmodel:has(.rmodel-slot--wide.is-on) .rmodel-shadow::before,
.rmodel:has(.rmodel-slot--wide.is-on) .rmodel-shadow::after{display:block;}

/* ---- static fallback (small screens + print): vertical stack, all visible ---- */
@media (max-width:760px), print{
  .rsection .hpin{height:auto !important;}
  .rtrack{flex-direction:column;transform:none !important;height:auto;}
  .rpanel{width:100%;height:auto;}
  .rpanel--paths{grid-template-columns:1fr;padding:clamp(60px,12vw,90px) var(--pad) 30px;}
  .rpath-fig .rimg{flex:none;aspect-ratio:4/3;}
  .rpanel--stage{padding:10px var(--pad) 60px;}
  .rscreen{position:static;height:auto;padding:22px;}
  .rscreen::before{display:none;}
  .rs-title{display:none;}
  .rs-stagearea{position:static;}
  .rs-group{position:static;opacity:1;visibility:visible;transform:none;
    grid-template-columns:1fr;margin-top:26px;}
  .rs-group .ritem{transform:none;}
  .rs-group::before{content:attr(data-glabel);display:block;
    font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#7a2e08;}
  .rmodel,.rglow{display:none;}
}

/* ---- panel-1 slide-over variant (mirrors the heuristics .hintro mechanic):
   the title block (.rintro) stays pinned on the left and never translates;
   the pathway cards (.rpaths-over) start at 52vw and slide OVER it, while JS
   fades the title in lock-step with the first card's edge. ---- */
.rintro{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);
  width:min(500px,42vw);z-index:1;will-change:opacity;}
.rpanel--paths.rpaths-over{display:flex;width:auto;align-items:stretch;
  gap:clamp(20px,2.8vw,48px);
  padding:clamp(84px,12vh,128px) clamp(24px,7vw,120px) clamp(36px,6vh,64px) 52vw;}
.rpaths-over .rpath-fig{flex:none;width:clamp(380px,34vw,560px);}
/* baked heuristics slide (Order Tracking v3): ONE bare slot per slide, tall enough
   to hold a self-made image = window + annotation chips at their old rendered size.
   Ratio locked from measured union of the previous live elements (575×569 @60vw). */
.hbaked{position:relative;display:block;width:min(800px,60vw);aspect-ratio:1370/1356;background:transparent;}
/* single full-width variant: ALWAYS the page content width (viewport minus gutters),
   constant 16:9 ratio on all landscape screens; images of any other ratio are ZOOMED
   to fill via fit="cover", never the slot reshaped. On short viewports the board may
   slightly exceed the stage height (centered) — full width wins. */
.hbaked--full{width:calc(100vw - 2*var(--pad));aspect-ratio:16/9;height:auto;}
@media (max-width:760px), print{.hbaked{width:100%;}.hbaked--full{height:auto;aspect-ratio:16/9;}}
/* frosted glassy panes (same warm colour, translucent + blur — matches the
   "All work" pill treatment); the pinned title frosts through as cards pass over */
.rpaths-over .rpath-fig .rimg{
  background:radial-gradient(70% 70% at 50% 30%,rgba(255,158,118,.14),transparent 70%),
    linear-gradient(160deg,rgba(29,24,19,.52),rgba(12,10,8,.52));
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:inset 0 1px 0 rgba(255,236,222,.08);}
@media (max-width:760px), print{
  .rintro{position:static;transform:none;width:auto;opacity:1 !important;
    padding:clamp(60px,12vw,90px) var(--pad) 0;}
  .rpanel--paths.rpaths-over{display:flex;flex-direction:column;width:100%;
    padding:26px var(--pad) 30px;}
  .rpaths-over .rpath-fig{width:100%;}
}


/* =====================================================================
   AFFINITY MAP — verbatim board (sources wall → clustered challenges)
   ===================================================================== */
.affwall{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px);
  align-items:start;}
.affcol{display:flex;flex-direction:column;gap:10px;min-width:0;}
.affcol-h{display:flex;align-items:center;gap:.5rem;font-size:.74rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey);padding-bottom:6px;
  border-bottom:1px dashed var(--line-2);margin-bottom:4px;}
.affcol-h .d{width:.45rem;height:.45rem;border-radius:50%;flex:none;}
.anote{font-size:.84rem;line-height:1.45;color:var(--cream);padding:12px 14px;
  border-radius:10px;border:1px solid var(--line);background:rgba(244,236,226,.04);}
.anote:nth-child(odd){transform:rotate(-.35deg);}
.anote:nth-child(even){transform:rotate(.35deg);}
.anote.ah{border-left:3px solid var(--blue);}
.anote.af{border-left:3px solid var(--peach);}
.anote.ao{border-left:3px solid var(--ok);}
.anote.ai{border-left:3px solid var(--cl-schemes);}

/* synthesis divider */
.affsynth{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);
  margin:clamp(36px,5vh,60px) 0 clamp(26px,3.6vh,44px);}
.affsynth-ln{flex:1;height:1px;background:var(--line-2);}
.affsynth-mid{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;}
.affsynth-k{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--peach);}
.affsynth-s{font-size:.78rem;color:var(--grey);}

/* cluster boards */
.affclusters{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.6vw,24px);
  align-items:stretch;}
.affboard{border:1.5px dashed var(--line-2);border-radius:16px;
  padding:clamp(14px,1.6vw,22px);display:flex;flex-direction:column;gap:14px;min-width:0;}
.affboard--future{border-style:dotted;opacity:.85;}
.affside{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,24px);}
.affside .affboard{flex:1;}
.affgrid{display:grid;gap:12px;}
.affgrid.c3{grid-template-columns:repeat(3,1fr);}
.achal{display:flex;flex-direction:column;gap:10px;justify-content:space-between;
  padding:13px 15px;border-radius:10px;border:1px solid var(--line);
  background:rgba(244,236,226,.05);}
.achal p{margin:0;font-size:.86rem;line-height:1.45;color:var(--cream);font-weight:500;}
.ameta{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.ameta .jchip{margin-left:auto;}     /* chip stays right-aligned even when a card has no source dots */
.adots{display:inline-flex;gap:4px;}
.adots i,.afflegend i{width:.46rem;height:.46rem;flex:none;aspect-ratio:1/1;border-radius:50%;display:inline-block;}
.jchip{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grey);padding:4px 9px;border-radius:5rem;border:1px solid var(--line-2);
  white-space:nowrap;}
.afflegend{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-top:6px;
  font-size:.74rem;color:var(--grey);}
.afflegend span{display:inline-flex;align-items:center;gap:.45rem;}

@media (max-width:980px){
  .affwall{grid-template-columns:repeat(2,1fr);}
  .affclusters{grid-template-columns:1fr;}
  .affclusters .affboard,.affclusters .affside,.affclusters .afflegend{grid-column:auto !important;}
  .affgrid.c3{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .affwall{grid-template-columns:1fr;}
  .jchip{white-space:normal;}
}


/* =====================================================================
   AFFINITY MAP v2 — one-screen board. The sources wall is folded into an
   interactive legend: hovering a source dims every challenge it did NOT
   feed, tracing that stream through the clusters. All text verbatim.
   ===================================================================== */
.aff2{min-height:100vh;display:flex;align-items:center;
  padding-top:clamp(60px,9vh,110px);padding-bottom:clamp(40px,6vh,80px);}
.aff2 .maxw{width:100%;}
.aff2-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:clamp(20px,3.4vh,36px);}
.aff2-h{font-size:clamp(26px,2.6vw,44px);}
.aff2-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.aff2-lhint{font-size:.72rem;color:var(--grey-dim,#8a8178);margin-right:6px;}
.aff2-src{appearance:none;display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  font:600 .72rem/1 inherit;letter-spacing:.04em;color:var(--cream);
  padding:7px 12px;border-radius:5rem;border:1px solid var(--line-2);
  background:rgba(244,236,226,.05);transition:background .2s,border-color .2s;}
.aff2-src:hover{background:rgba(244,236,226,.1);border-color:rgba(244,236,226,.3);}
.aff2-src i{width:.45rem;height:.45rem;border-radius:50%;}
.aff2-grid{display:grid;gap:clamp(10px,1.2vw,18px);
  grid-template-columns:repeat(12,1fr);
  grid-template-areas:
    "sea sea sea sea sea sea sea dis dis dis beh beh"
    "car car car car sch sch sch sch rol rol rol rol";}
@media (min-width:981px){
  .aff2-grid{grid-template-areas:
    "sea sea sea sea sea sea sea dis dis dis beh beh"
    "car car car car sch sch sch sch rol rol rol rol";}
}
.aff2-board{padding:clamp(11px,1.2vw,16px);gap:10px;min-width:0;}
.aff2-board .clp{align-self:flex-start;font-size:.66rem;padding:4px 10px;}
.aff2-cards{display:grid;gap:9px;flex:1;align-content:start;min-width:0;}
.aff2-cards.c3{grid-template-columns:repeat(3,1fr);}
.aff2-cards .achal{padding:10px 12px;gap:8px;min-width:0;
  transition:opacity .25s var(--ease);}
.aff2-cards .achal p{font-size:.76rem;line-height:1.4;}
.aff2-cards .ameta{flex-wrap:wrap;row-gap:4px;}
.aff2-cards .jchip{font-size:.58rem;padding:3px 7px;white-space:normal;text-align:left;}
/* hover-trace: dim everything the hovered source did not feed */
.aff2[data-filter="h"] .achal:not([data-src~="h"]),
.aff2[data-filter="f"] .achal:not([data-src~="f"]),
.aff2[data-filter="o"] .achal:not([data-src~="o"]),
.aff2[data-filter="i"] .achal:not([data-src~="i"]){opacity:.18;}
@media (max-width:980px){
  .aff2{min-height:0;display:block;}
  .aff2-grid{grid-template-columns:1fr;grid-template-areas:"sea" "dis" "beh" "car" "sch" "rol";}
  .aff2-cards.c3{grid-template-columns:1fr;}
}


/* =====================================================================
   AFFINITY MAP v3 — scroll-animated synthesis (pinned, scrubbed)
   Act 1: four source columns appear. Act 2: every note flies into the
   Key User Challenge it fed (challenges materialise in a neutral grid).
   Act 3: challenges regroup into their clusters; board chrome fades in.
   ===================================================================== */
.a3{padding:0;
  /* source-stream colours — deliberately far from every cluster fill, and
     saturated/deep enough to read as dots on any of them (and on the dark bg) */
  --src-h:#e0245e;   /* Heuristics — crimson */
  --src-f:#00a86b;   /* Customer Feedback — emerald */
  --src-o:#0a9cc4;   /* Field Visit - Observations — deep cyan */
  --src-i:#9b30d9;   /* Field Visit - Interviews — vivid purple */}
.a3pin{position:relative;}
.a3sticky{position:sticky;top:0;height:100vh;overflow-x:clip;overflow-y:visible;
  display:flex;flex-direction:column;padding:clamp(64px,9vh,100px) var(--pad) clamp(12px,2vh,24px);}
.a3head{position:relative;margin-bottom:clamp(24px,4vh,44px);flex:none;}
.a3head .row-between{align-items:flex-start;}   /* lead hugs the top \u2026 */
.a3head .a3caps{position:absolute;right:0;bottom:0;}  /* \u2026 stepper bottom-aligns with the title */
/* act stepper: three numbered steps; only the active one reveals its name */
.a3caps{display:flex;justify-content:flex-end;align-items:center;gap:14px;}
.a3cap{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:.78rem;font-weight:600;letter-spacing:.05em;color:var(--grey);
  opacity:.38;transition:opacity .35s var(--ease);}
.a3cap b{font-weight:700;}
.a3cap i{font-style:normal;display:inline-block;overflow:hidden;max-width:0;opacity:0;
  transition:max-width .5s var(--ease),opacity .35s var(--ease);}
.a3cap.is-on{opacity:1;font-weight:700;font-size:calc(.78rem + 3px);}
.a3cap.is-on b{font-weight:800;}
.a3cap.is-on i{max-width:420px;opacity:1;}
.a3canvas{position:relative;flex:1;min-height:0;}

/* act-1 source columns overlay */
.a3srcs{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.4vw,22px);align-content:start;z-index:2;pointer-events:none;}
.a3col{display:flex;flex-direction:column;gap:8px;min-width:0;}
.a3note{font-size:14px;line-height:1.38;color:#ada595;padding:9px 11px 9px 15px;
  border-radius:9px;border:1px solid var(--line);background:#171310;will-change:transform,opacity;
  position:relative;overflow:hidden;pointer-events:auto;transition:box-shadow .3s var(--ease);}
/* outward glow so the light reads beyond the card edge too */
.a3note:hover{box-shadow:0 0 26px rgba(244,236,226,.13);}
/* cursor-tracked glow: light pools around the pointer and falls away */
.a3note:hover{background-image:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
  rgba(244,236,226,.10),transparent 70%);}
/* shine border: a sharp 1px edge highlight only near the cursor, like the
   lit edge of glass or metal */
/* the cards' shine ring straddles the edge (1px outside + inside), and the
   surface pool stays; outward bloom comes from the hover box-shadow below */
.a3note::after,.a3grid .a3c::after{content:"";position:absolute;inset:0;
  border-radius:inherit;padding:1px;pointer-events:none;opacity:0;
  background:radial-gradient(130px circle at var(--mx,50%) var(--my,50%),
    rgba(255,252,245,.85),rgba(255,252,245,.12) 45%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  transition:opacity .25s var(--ease);}
.a3grid .a3c::after{inset:-1px;padding:2px;}
.a3grid .a3c{transition:background-color .5s var(--ease),border-color .5s var(--ease),box-shadow .3s var(--ease);}
.a3grid:not(.is-clustered) .a3c:hover{box-shadow:0 0 26px rgba(244,236,226,.13);}
.a3grid.is-clustered .a3c:hover{box-shadow:0 0 30px color-mix(in srgb,var(--ct,#f99e76) 45%,transparent);}
.a3note:hover::after,.a3grid .a3c:hover::after{opacity:1;}
/* source mark: a narrow reverse-D — the card's overflow clipping carves the
   outer edge to the card's own corner radius; the inner edge stays straight */
.a3note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;}
.a3note.ah::before{background:var(--src-h);}
.a3note.af::before{background:var(--src-f);}
.a3note.ao::before{background:var(--src-o);}
.a3note.ai::before{background:var(--src-i);}

/* acts 2-3: final clustered grid (compact, one screen) */
.a3boardwrap{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;}
.a3grid{display:grid;gap:clamp(10px,1.2vw,16px);grid-template-columns:repeat(24,1fr);
  grid-template-areas:
    "sea sea sea sea sea sea sea sea sea sea sea sea sea sea dis dis dis dis dis beh beh beh beh beh"
    "car car car car car car car car sch sch sch sch sch sch sch sch rol rol rol rol rol rol rol rol";}
.a3b{padding:clamp(10px,1.1vw,15px);gap:9px;min-width:0;}
.a3b .clp{align-self:flex-start;font-size:.64rem;padding:4px 10px;}
.a3cards{display:grid;gap:8px;flex:1;align-content:start;min-width:0;}
.a3cards.c3{grid-template-columns:repeat(3,1fr);}
/* clusters are colour-coded onto the cards themselves — no outer containers */
.a3grid .a3b{border:none;padding:0;background:none;}
/* Discovery & Behavioural sit beside the tall header column: anchor their
   pill + card to the BOTTOM of their grid area so they clear the description
   block and the act label above */
.a3b:has(.clp.discovery),.a3b:has(.clp.behav){justify-content:flex-end;}
.a3b:has(.clp.discovery) .a3cards,.a3b:has(.clp.behav) .a3cards{flex:none;}
/* v3 cluster palette — six distinctly different brights (orange / yellow /
   lime / blue / pink / violet), set on the board and inherited by cards + pill dot */
.a3b:has(.clp.search){--ct:var(--cl-discovery);}  /* swapped: Search takes Discovery's light peach */
.a3b:has(.clp.discovery){--ct:#e8d9a0;}  /* swapped: Discovery takes the pastel yellow */
.a3b:has(.clp.behav){--ct:#b4dbb4;}  /* pale, desaturated green */
.a3b:has(.clp.cart){--ct:#6f8dff;}
.a3b:has(.clp.schemes){--ct:var(--cl-schemes);}
.a3b.affboard--future:has(.clp.schemes){--ct:#FFC0DF;}  /* Role & Access: light pink (outranks the schemes match) */
.a3grid .a3b .clp .d{background:var(--ct,#f99e76);}
/* act 2: plain dark boxes. Act 3 (.is-clustered): SOLID cluster-coloured
   cards with dark text — colour arrives as the cards regroup */
.a3grid .a3c{background:rgba(244,236,226,.05);border:1px solid var(--line);
  transition:background-color .5s var(--ease),border-color .5s var(--ease);}
.a3grid .a3c p{transition:color .5s var(--ease);}
.a3grid .a3c .jchip{transition:color .5s var(--ease),border-color .5s var(--ease);}
.a3grid.is-clustered .a3c{background:var(--ct,#f99e76);border-color:transparent;}
.a3grid.is-clustered .a3c p{color:#23150d;}
.a3grid.is-clustered .a3c .jchip{color:#3a2415;border-color:transparent;background:rgba(255,255,255,.38);}
.a3grid.is-clustered .a3c .adots i{box-shadow:0 0 0 1px rgba(0,0,0,.35);}
/* equalised card heights in the clusters:
   \u2014 Search: both inner rows share equal heights (cards stretch to row)
   \u2014 Cart & Schemes: both boards sit in the same grid row and split their
     height into 3 equal rows, so their cards all match */
.a3b:has(.clp.search) .a3cards{grid-template-rows:repeat(2,1fr);}
.a3b:has(.clp.cart) .a3cards,
.a3b:has(.clp.schemes):not(.affboard--future) .a3cards{grid-template-rows:repeat(3,1fr);}
.a3b:has(.clp.search) .a3c,
.a3b:has(.clp.cart) .a3c,
.a3b:has(.clp.schemes):not(.affboard--future) .a3c{align-self:stretch;}
/* quiet source key, bottom-right of the act-3 board — lifted clear of the fold */
.a3key{margin-top:auto;align-self:flex-end;display:flex;flex-direction:column;gap:4px;
  font-size:.66rem;letter-spacing:.02em;color:var(--grey-dim,#8a8178);text-align:right;
  padding-top:14px;padding-bottom:26px;}
.a3key span{display:inline-flex;align-items:center;justify-content:flex-end;gap:.45rem;}
.a3key i{width:.4rem;height:.4rem;border-radius:50%;flex:none;opacity:.85;}
.a3c{padding:10px;gap:7px;will-change:transform,opacity;min-width:0;align-self:start;
  justify-content:space-between;}
.a3c p{font-size:calc(.72rem + 2px);line-height:1.38;}
/* act 1-2 text dimmed to exactly 7.5:1 against the dark box fill */
.a3grid:not(.is-clustered) .a3c p{color:#ada595;}
.a3grid .a3c{position:relative;}
.a3grid .a3c:hover{background-image:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
  rgba(255,255,255,.14),transparent 70%);}
/* act-2 neutral phase: boxes snug to their text — 10px padding, no meta row */
.a3grid.is-neutral .a3c .ameta{display:none;}
/* act-2-only typography: roomier padding, heavier weight, taller leading.
   Box heights are fixed by the lattice (canvas-fill), so these cannot grow them. */
.a3grid.is-neutral .a3c{padding:14px;}
.a3grid.is-neutral .a3c p{font-weight:600;line-height:1.52;}
.a3c .ameta{flex-wrap:wrap;row-gap:4px;}
.a3c .jchip{font-size:.74rem;padding:4px 9px;white-space:normal;text-align:left;
  text-transform:none;font-weight:800;letter-spacing:.03em;}
/* chrome (board outline, pills, meta) is faded in by JS during act 3 */
.a3 .a3b{transition:none;}

/* static fallback: small screens & reduced motion show the final board only */
@media (max-width:980px),(prefers-reduced-motion: reduce){
  .a3pin{height:auto !important;}
  .a3sticky{position:static;height:auto;overflow:visible;}
  .a3canvas{min-height:0;}
  .a3srcs{position:static;grid-template-columns:repeat(2,1fr);margin-bottom:26px;pointer-events:auto;}
  .a3boardwrap{position:static;transform:none !important;}
  .a3grid{grid-template-columns:1fr;grid-template-areas:"sea" "dis" "beh" "car" "sch" "rol";}
  .a3cards.c3{grid-template-columns:1fr;}
  .a3note,.a3c{transform:none !important;opacity:1 !important;position:static !important;width:auto !important;height:auto !important;min-height:0 !important;}
  .a3cards{min-height:0 !important;}
  .a3b,.a3chrome{opacity:1 !important;}
}
@media (max-width:600px){ .a3srcs{grid-template-columns:1fr;} }


/* =====================================================================
   9 · JOURNEY MAP v2  — "Pain points by stage", one-viewport template
   ===================================================================== */
.jm2{min-height:100svh;box-sizing:border-box;display:flex;align-items:stretch;
  padding-top:clamp(56px,7vh,76px);padding-bottom:clamp(10px,1.6vh,20px);}
.jm2wrap{display:flex;flex-direction:column;width:100%;}
.jm2head{align-items:flex-end;}
.jm2-h{font-size:clamp(24px,2.3vw,40px);}
.jm2-lead{font-size:clamp(12px,.95vw,15px);max-width:34ch;}

/* the six-stage board */
.jm2map{flex:1;display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(22px,2vw,34px);margin-top:clamp(12px,1.8vh,20px);align-items:stretch;}
.jm2col{position:relative;display:flex;flex-direction:column;gap:clamp(8px,1.2vh,13px);
  padding:clamp(9px,1vw,13px);border-radius:16px;
  border:1px solid var(--line);background:linear-gradient(165deg,rgba(40,31,24,.34),rgba(16,13,11,.34));}
/* flow arrows between columns */
.jm2col:not(:last-child)::after{content:"\2192";position:absolute;
  right:calc(clamp(22px,2vw,34px) * -.5);transform:translateX(50%);
  top:clamp(30px,4.6vh,46px);color:var(--grey-dim);font-size:clamp(14px,1.2vw,18px);}

/* column head: number · icon slot · stage title */
.jm2top{display:flex;flex-direction:column;align-items:center;gap:clamp(5px,.8vh,8px);text-align:center;}
.jm2n{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--nc,var(--peach-2));color:#1a120c;font-size:.66rem;font-weight:800;}
.jm2ic{width:clamp(44px,6.2vh,60px);height:clamp(44px,6.2vh,60px);border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 30%,rgba(255,188,149,.14),rgba(255,188,149,.05) 70%);
  box-shadow:inset 0 0 0 1px var(--line);}
.jm2ic image-slot{display:block;width:100%;height:100%;}
.jm2st{font-size:clamp(11.5px,.9vw,14px);font-weight:700;color:var(--cream);line-height:1.22;}
.jm2st small{display:block;font-size:.78em;font-weight:500;color:var(--grey-dim);margin-top:2px;}
.jm2st em{font-style:normal;color:var(--ok);}

/* pain notes */
.jm2pains{display:flex;flex-direction:column;gap:clamp(5px,.8vh,8px);}
.jm2pain{display:flex;flex-direction:column;gap:4px;padding:clamp(6px,.75vh,8px) clamp(7px,.65vw,10px);
  border-radius:10px;border:1px solid var(--line);background:#171310;}
.jm2pain p{margin:0;font-size:clamp(10px,.74vw,12px);line-height:1.32;color:#c9c0b6;}
.jm2pain .ct{align-self:flex-end;font-size:.52rem;padding:2px 7px;}

/* schemes loop-back note */
.jm2note{margin-top:auto;padding:clamp(7px,.85vh,10px) clamp(8px,.7vw,11px);border-radius:10px;
  border:1px dashed color-mix(in srgb,var(--cl-schemes) 55%,transparent);
  color:var(--cl-schemes);font-size:clamp(10px,.74vw,12px);font-style:italic;line-height:1.35;}
.jm2note .arr{font-style:normal;margin-right:4px;}

/* stage-6 done flag */
.jm2col--last{border-color:color-mix(in srgb,var(--ok) 35%,transparent);}
.jm2flag{position:absolute;top:-1px;right:12px;width:22px;height:28px;display:grid;place-items:center;
  background:var(--ok);color:#14200e;font-size:.72rem;font-weight:800;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);}

/* bottom legend */
.jm2legend{display:flex;align-items:center;gap:clamp(12px,1.4vw,22px);flex-wrap:wrap;
  margin-top:clamp(10px,1.6vh,18px);padding:clamp(6px,.9vh,10px) clamp(12px,1.2vw,18px);
  border-radius:12px;border:1px solid var(--line);background:rgba(23,19,16,.5);}
.jm2legend .lt{font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-dim);}
.jm2legend .clp{font-size:.64rem;}

/* short-viewport compaction tier */
@media (max-height:860px){
  .jm2{padding-top:clamp(52px,6.4vh,64px);}
  .jm2-h{font-size:clamp(22px,2vw,32px);}
  .jm2-lead{font-size:12px;}
  .jm2ic{width:44px;height:44px;}
  .jm2pain p,.jm2note{font-size:10.5px;}
  .jm2pain{padding:6px 8px;}
  .jm2st{font-size:11.5px;}
  .jm2top{gap:5px;}
}


/* =====================================================================
   10 · JOURNEY MAP v3 — minimal horizontal timeline
   ===================================================================== */
.jm3{min-height:100svh;box-sizing:border-box;display:flex;align-items:center;
  padding-top:clamp(56px,8vh,88px);padding-bottom:clamp(20px,4vh,44px);}
.jm3wrap{width:100%;}
.jm3-h{font-size:clamp(26px,2.6vw,44px);}
.jm3-sub{font-size:.5em;font-weight:500;color:var(--grey-dim);letter-spacing:0;}

/* timeline frame */
.jm3tl{position:relative;margin-top:clamp(26px,5vh,52px);
  --lt:clamp(118px,17vh,160px); /* y of the line inside the frame */
  padding:0 clamp(48px,4.5vw,76px);}
.jm3cap{position:absolute;top:var(--lt);transform:translateY(-50%);
  font-size:clamp(12px,.95vw,15px);font-weight:700;color:var(--cream);}
.jm3cap--start{left:0;}
.jm3cap--end{right:0;}
.jm3line{position:absolute;left:clamp(40px,3.8vw,64px);right:clamp(40px,3.8vw,64px);
  top:var(--lt);height:2px;background:linear-gradient(90deg,var(--peach-2),var(--peach));
  opacity:.85;}
.jm3line::after{content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%);
  border-left:8px solid var(--peach);border-top:5px solid transparent;border-bottom:5px solid transparent;}
/* columns */
.jm3grid{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.6vw,28px);}
.jm3col{display:flex;flex-direction:column;align-items:center;text-align:center;}
.jm3ic{width:clamp(46px,6.5vh,64px);height:clamp(46px,6.5vh,64px);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(255,188,149,.14),rgba(255,188,149,.05) 70%);
  box-shadow:inset 0 0 0 1px var(--line);}
.jm3ic image-slot{display:block;width:100%;height:100%;}
/* jm4: frameless, larger icons — only the artwork shows.
   --ics normalizes visual weight per render via transform (no layout impact,
   so every column's arrow stays on the timeline) */
.jm4 .jm3ic{width:clamp(70px,10.5vh,104px);height:clamp(70px,10.5vh,104px);
  background:none;box-shadow:none;border-radius:0;}
.jm4 .jm3ic image-slot{transform:scale(var(--ics,1));transform-origin:50% 100%;}
.jm3num{font-size:clamp(28px,4.6vh,44px);font-weight:800;color:var(--peach);line-height:1;
  margin-top:clamp(6px,1.2vh,12px);}
.jm3num--ok{color:var(--ok);}
/* arrow marker sitting ON the line under each column */
.jm3mark{width:0;height:0;margin-top:clamp(8px,1.6vh,16px);position:relative;}
.jm3mark::before{content:"";position:absolute;left:-4px;top:-5px;
  border-left:8px solid var(--peach);border-top:5px solid transparent;border-bottom:5px solid transparent;}
/* keep the marker row aligned with the absolute line: the line's --lt is tuned
   so it passes through the .jm3mark row at default sizes */

.jm3body{margin-top:clamp(12px,2.2vh,22px);display:flex;flex-direction:column;align-items:center;gap:8px;max-width:100%;}
.jm3st{font-size:clamp(13px,1.05vw,16.5px);font-weight:700;color:var(--cream);line-height:1.3;}
.jm3st em{font-style:normal;color:var(--ok);}
.jm3hint{font-size:clamp(10px,.78vw,12.5px);line-height:1.4;max-width:20ch;}
.jm3hint.discovery{color:var(--cl-discovery);}
.jm3hint.search{color:var(--cl-search);}

/* sub-bullets with bracket connectors, like the reference */
.jm3sub{list-style:none;margin:2px 0 0;padding:0 0 0 12px;text-align:left;
  border-left:1px solid var(--line-2);display:flex;flex-direction:column;gap:clamp(5px,.9vh,9px);}
.jm3sub li{position:relative;font-size:clamp(10px,.78vw,12.5px);line-height:1.35;padding-left:10px;}
.jm3sub li::before{content:"";position:absolute;left:-12px;top:.62em;width:14px;height:1px;background:var(--line-2);}
.jm3sub li.search{color:var(--cl-search);}
.jm3sub li.behav{color:var(--cl-behav);}
.jm3sub li.cart{color:var(--cl-cart);}
.jm3sub li.schemes{color:var(--cl-schemes);}


/* jm3 schemes loop — dotted path from between stages 4–5, sweeping under
   stage 5, rising to an up-arrow between stages 5–6 (per reference map) */
.jm3loop{position:absolute;z-index:0;pointer-events:none;
  left:calc(100% * 4 / 6);width:calc(100% / 6);
  top:calc(var(--lt,130px) + 4px);height:clamp(150px,26vh,196px);
  border:2px dotted color-mix(in srgb,var(--cl-schemes) 75%,transparent);border-top:none;
  border-radius:0 0 30px 30px;}
/* origin dot, sitting on the main line */
.jm3loop::before{content:"";position:absolute;left:-5px;top:-6px;width:8px;height:8px;
  border-radius:50%;background:var(--cl-schemes);}
/* up-arrowhead rejoining the line */
.jm3loop::after{content:"";position:absolute;right:-6px;top:-9px;
  border-bottom:9px solid var(--cl-schemes);
  border-left:5px solid transparent;border-right:5px solid transparent;}
/* the note rides the bottom of the sweep */
.jm3loop span{position:absolute;left:50%;bottom:-8px;transform:translate(-50%,100%);
  width:max-content;max-width:24ch;text-align:center;
  font-size:clamp(9.5px,.72vw,11.5px);font-style:italic;line-height:1.45;color:var(--cl-schemes);}


/* =====================================================================
   11 · JOURNEY MAP v4 — doing / breaking / feeling
   ===================================================================== */
.jm4grid{grid-template-columns:repeat(5,1fr);}
/* schemes sweep spans stage 3→4 and 4→5 boundaries on a 5-col grid */
.jm4loop{left:calc(100% * 3 / 5);width:calc(100% / 5);
  height:clamp(190px,32vh,240px);}

/* bracketed fix note — sits BELOW the pains; teal, distinct from every cluster colour */
.jm4fix{font-size:clamp(9.5px,.72vw,11.5px);font-style:italic;color:#8fd9c9;
  line-height:1.35;margin-top:clamp(5px,.9vh,9px);
  width:100%;text-align:left;padding-left:22px;}

/* uniform block width: actions, pains and fix all span the same column width,
   centred as a block under the stage label */
.jm4grid .jm4sub{width:100%;}

/* spine: dealer actions (cream) above, pains (cluster colours) below */
.jm4sub li.act{color:var(--cream);font-weight:650;}
.jm4sub li.discovery{color:var(--cl-discovery);}
/* pains: their own cluster below the actions — light-red spine & dashes, no brackets */
.jm4pains{margin-top:clamp(5px,.9vh,9px);border-left-color:rgba(255,122,107,.6);}
.jm4pains li::before{background:rgba(255,122,107,.6);}

/* jm4 pain colours follow the affinity act-3 cluster palette */
.jm4 .jm3sub li.search{color:#ffbc95;}
.jm4 .jm3sub li.discovery{color:#e8d9a0;}
.jm4 .jm3sub li.behav{color:#b4dbb4;}
.jm4 .jm3sub li.cart{color:#6f8dff;}
.jm4 .jm3sub li.schemes{color:var(--cl-schemes);}

/* emotion curve */
.jm4emo{position:relative;margin-top:clamp(18px,3vh,32px);
  height:clamp(80px,12vh,118px);}
.jm4emo svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.jm4emo path{stroke:var(--peach-2);stroke-width:2;opacity:.85;
  vector-effect:non-scaling-stroke;}
.jm4ax{position:absolute;left:0;transform:translateX(-100%) ;padding-right:10px;
  font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-dim);}
.jm4ax--hi{top:0;}
.jm4ax--lo{bottom:0;}
.jm4dot{position:absolute;width:9px;height:9px;border-radius:50%;
  background:var(--peach);transform:translate(-50%,-50%);
  box-shadow:0 0 0 3px rgba(255,188,149,.16);}
.jm4dot--low{background:#ff8d6b;box-shadow:0 0 0 4px rgba(255,141,107,.18);}
.jm4emolabels{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,28px);
  margin-top:clamp(8px,1.4vh,14px);}
.jm4emolabels span{text-align:center;font-size:clamp(9.5px,.74vw,11.5px);
  font-style:italic;line-height:1.4;color:var(--grey);}

/* persona filter chips */
.jm4filters{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;}
.jm4chip{font:inherit;font-size:11px;letter-spacing:.04em;color:var(--grey);
  background:none;border:1px solid var(--line-2);border-radius:999px;padding:6px 14px;cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);}
.jm4chip:hover{color:var(--cream);border-color:var(--grey-dim);}
.jm4chip.is-on{color:#1b150f;background:var(--peach);border-color:var(--peach);font-weight:650;}

/* persona highlight on mapped pains — pure highlight, no dimming, no layout shift */
.jm4 .jm3sub li{transition:background-color .3s var(--ease),box-shadow .3s var(--ease);border-radius:5px;}
.jm4 .jm3sub li.is-hl{background:rgba(255,188,149,.16);
  box-shadow:0 0 0 4px rgba(255,188,149,.16),0 0 18px rgba(255,188,149,.10);}

/* notation key — quiet combined legend, ≤50% width, centred */.jm4key{margin-top:clamp(22px,3.4vh,36px);max-width:50%;margin-left:auto;margin-right:auto;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:5px 14px;font-size:10px;font-weight:400;letter-spacing:.02em;color:var(--grey-dim);}
.jm4key .k4{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
/* slanted-T glyph: vertical spine + horizontal dash, as used in the columns */
.jm4key .k4 .t{width:10px;height:10px;border-left:1px solid var(--kc);position:relative;flex:none;}
.jm4key .k4 .t::after{content:"";position:absolute;left:0;top:58%;width:9px;height:1px;background:var(--kc);}
/* small colour dot for the pain clusters */
.jm4key .k4 .d{width:6px;height:6px;border-radius:50%;background:var(--kc);flex:none;}
.jm4key .k4--fix{color:#8fd9c9;font-style:italic;}