/* ============================================================
   CODESTAN · CLINIC product page — page-unique signature visuals
   Motion identity: medical operations — calendar assembly,
   queue movement, record linking, notification pulses.
   Shared scaffolding: css/product.css · accent: --pa (#8ff5d2)
   ============================================================ */

/* ---------- shared page bits ---------- */
.cl-blink{animation:clBlink 1.8s ease-in-out infinite}
@keyframes clBlink{0%,100%{opacity:1}50%{opacity:.3}}
/* SVG dashboards use fixed coordinates — always lay out LTR, even in RTL pages */
.pd-dash svg,.cl-story-svg,.cl-hub,.cl-wf-svg,.cl-case-svg,.cl-mini{direction:ltr}

/* ============ 01 · HERO DASHBOARD ============ */
.cl-hero-svg{max-height:520px}
.hkpi rect{fill:#121511;stroke:#22261f}
.hs{fill:#141714;stroke:#262a26;transition:fill .5s,stroke .5s}
.hs.busy{fill:rgba(143,245,210,.16);stroke:rgba(143,245,210,.5)}
.hdots circle{fill:var(--pa);opacity:.85}
.hdots circle.off{fill:#2c2c2c;opacity:1}
.hq rect{fill:#101310;stroke:#22261f}
.hqs[data-c="w"]{fill:#8a978a}
.hqs[data-c="c"]{fill:var(--pa)}
.hqs[data-c="d"]{fill:#4d564d}
.hrevdot{transition:cx .8s var(--ease),cy .8s var(--ease)}

/* ============ 02 · SIGNATURE STORY ============ */
.cl-story-side{display:flex;flex-direction:column;gap:18px;min-width:0}
.cl-story-svg{width:100%;height:auto;display:block}
.cl-story-visual{padding:14px;background:#0c0e0c}
#storyRail{margin-top:2px}
/* static mode (reduced motion / mobile): stack everything, no pin */
.pd-space.static{height:auto!important}
.pd-space.static .pd-sticky{position:static;min-height:0;padding:40px 0}
.pd-space.static .pd-story{height:auto}
.pd-space.static #rolePills{display:none}

/* ============ 03 · BUSINESS CHALLENGES ============ */
.cl-ch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cl-ch{background:#141714;border:1px solid #262a26;border-radius:20px;padding:18px;
  display:flex;flex-direction:column;gap:16px;transition:border-color .35s}
.cl-ch:hover{border-color:#374037}
.cl-ch-w{height:110px;border-radius:14px;background:#101310;border:1px solid #22261f;
  position:relative;overflow:hidden;display:grid;place-items:center}
.cl-ch-lbl{display:flex;align-items:center;gap:10px;font-size:12.5px;line-height:1.35}
.cl-ch-lbl .from{color:var(--text-p2)}
.cl-ch-lbl .to{color:var(--pa);font-weight:700}
.cl-ch-lbl svg{width:16px;height:16px;flex:0 0 auto;stroke:#4d564d;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .cl-ch-lbl svg{transform:scaleX(-1)}

/* w1 — scattered dots snap into a grid */
.chw-snap{display:grid;grid-template-columns:repeat(4,44px);grid-auto-rows:20px;gap:12px;place-content:center}
.chw-snap i{border-radius:6px;background:var(--pa);opacity:.9;
  animation:chSnap 5.2s var(--ease) infinite}
.chw-snap i:nth-child(2){animation-delay:.12s}.chw-snap i:nth-child(3){animation-delay:.24s}
.chw-snap i:nth-child(4){animation-delay:.36s}.chw-snap i:nth-child(5){animation-delay:.18s}
.chw-snap i:nth-child(6){animation-delay:.3s}.chw-snap i:nth-child(7){animation-delay:.42s}
.chw-snap i:nth-child(8){animation-delay:.06s}
@keyframes chSnap{
  0%,12%{transform:translate(var(--dx),var(--dy)) scale(.65);opacity:.5;border-radius:50%}
  38%,72%{transform:none;opacity:.95;border-radius:6px}
  92%,100%{transform:translate(var(--dx),var(--dy)) scale(.65);opacity:.5;border-radius:50%}}

/* w2 — broken chain links reconnect */
.chw-chain svg{width:82%;height:auto}
.chl rect{fill:none;stroke:var(--pa);stroke-width:3}
.chl rect+rect{fill:#101310}
.chlink{stroke:var(--pa);stroke-width:3;stroke-dasharray:40;stroke-dashoffset:0}
.chl-a{animation:chlA 5.2s var(--ease) infinite}
.chl-b{animation:chlB 5.2s var(--ease) infinite}
.chlink{animation:chLink 5.2s var(--ease) infinite}
@keyframes chlA{0%,12%{transform:translateX(-26px);opacity:.45}38%,72%{transform:none;opacity:1}92%,100%{transform:translateX(-26px);opacity:.45}}
@keyframes chlB{0%,12%{transform:translateX(26px);opacity:.45}38%,72%{transform:none;opacity:1}92%,100%{transform:translateX(26px);opacity:.45}}
@keyframes chLink{0%,18%{stroke-dashoffset:40}42%,72%{stroke-dashoffset:0}90%,100%{stroke-dashoffset:40}}

/* w3 — overlapping schedule blocks resolve */
.chw-cal i{position:absolute;left:50%;top:50%;width:120px;height:30px;border-radius:8px}
.chw-cal .b1{background:rgba(143,245,210,.2);border:1px solid rgba(143,245,210,.55);
  transform:translate(-108px,-36px);animation:chB1 5.2s var(--ease) infinite}
.chw-cal .b2{background:#1c201c;border:1px solid #3d453d;
  transform:translate(-12px,4px);animation:chB2 5.2s var(--ease) infinite}
@keyframes chB1{0%,14%{transform:translate(-60px,-16px)}42%,72%{transform:translate(-108px,-36px)}92%,100%{transform:translate(-60px,-16px)}}
@keyframes chB2{0%,14%{transform:translate(-60px,-16px)}42%,72%{transform:translate(-12px,4px)}92%,100%{transform:translate(-60px,-16px)}}

/* w4 — bell rings into a pulse feed */
.chw-bell{display:flex;align-items:center;gap:18px;padding:0 26px}
.chw-bell .bell{width:34px;height:34px;fill:none;stroke:var(--pa);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 0;
  animation:chRing 5.2s ease-in-out infinite}
@keyframes chRing{0%,10%{transform:rotate(-14deg)}20%{transform:rotate(12deg)}30%{transform:rotate(-8deg)}40%,100%{transform:rotate(0)}}
.chw-bell .chfeed{display:flex;flex-direction:column;gap:9px;flex:1}
.chw-bell .chfeed i{height:10px;border-radius:5px;background:linear-gradient(90deg,var(--pa),rgba(143,245,210,.15));
  animation:chFeed 5.2s var(--ease) infinite}
.chw-bell .chfeed i:nth-child(2){width:78%;animation-delay:.25s}
.chw-bell .chfeed i:nth-child(3){width:58%;animation-delay:.5s}
@keyframes chFeed{0%,16%{opacity:0;transform:translateX(-14px)}44%,74%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateX(-14px)}}

/* w5 — papers morph into a chart */
.chw-morph{position:relative}
.chw-morph .papers{position:absolute;inset-inline-start:34px;top:24px}
.chw-morph .papers i{position:absolute;width:34px;height:44px;border-radius:4px;
  background:#1c201c;border:1px solid #3d453d;opacity:0;
  animation:chPaper 5.2s var(--ease) infinite}
.chw-morph .papers i:nth-child(1){transform:rotate(-9deg)}
.chw-morph .papers i:nth-child(2){transform:translate(10px,6px) rotate(4deg);animation-delay:.12s}
.chw-morph .papers i:nth-child(3){transform:translate(20px,-4px) rotate(12deg);animation-delay:.24s}
@keyframes chPaper{0%,20%{opacity:1}44%,72%{opacity:0}94%,100%{opacity:1}}
.chw-morph .bars{position:absolute;inset-inline-end:36px;bottom:22px;display:flex;align-items:flex-end;gap:10px;height:70px}
.chw-morph .bars i{width:16px;border-radius:5px 5px 0 0;background:var(--pa);
  transform-origin:bottom;animation:chBar 5.2s var(--ease) infinite}
.chw-morph .bars i:nth-child(1){height:34px;opacity:.5}
.chw-morph .bars i:nth-child(2){height:56px;opacity:.7;animation-delay:.12s}
.chw-morph .bars i:nth-child(3){height:42px;opacity:.6;animation-delay:.24s}
.chw-morph .bars i:nth-child(4){height:66px;animation-delay:.36s}
@keyframes chBar{0%,20%{transform:scaleY(0)}48%,72%{transform:scaleY(1)}94%,100%{transform:scaleY(0)}}

/* w6 — many tools converge to one core */
.chw-conv .core{position:absolute;left:50%;top:50%;width:34px;height:34px;border-radius:50%;
  background:rgba(143,245,210,.18);border:2px solid var(--pa);
  transform:translate(-50%,-50%);animation:chCore 5.2s var(--ease) infinite}
@keyframes chCore{0%,16%{transform:translate(-50%,-50%) scale(.4);opacity:.3}44%,74%{transform:translate(-50%,-50%) scale(1);opacity:1}94%,100%{transform:translate(-50%,-50%) scale(.4);opacity:.3}}
.chw-conv .sat{position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:4px;
  background:#1c201c;border:1px solid #3d453d;animation:chSat 5.2s var(--ease) infinite}
.chw-conv .s1{--fx:-78px;--fy:-32px}.chw-conv .s2{--fx:64px;--fy:-36px}
.chw-conv .s3{--fx:-62px;--fy:34px}.chw-conv .s4{--fx:76px;--fy:30px}
.chw-conv .s5{--fx:4px;--fy:-44px}
.chw-conv .s2{animation-delay:.08s}.chw-conv .s3{animation-delay:.16s}
.chw-conv .s4{animation-delay:.24s}.chw-conv .s5{animation-delay:.32s}
@keyframes chSat{
  0%,14%{transform:translate(calc(-50% + var(--fx)),calc(-50% + var(--fy))) rotate(20deg);opacity:.9}
  46%,72%{transform:translate(-50%,-50%) rotate(0);opacity:.15}
  94%,100%{transform:translate(calc(-50% + var(--fx)),calc(-50% + var(--fy))) rotate(20deg);opacity:.9}}

/* ============ 04 · WORKFLOW ============ */
.cl-wf{background:#101210;border:1px solid #262a26;border-radius:24px;padding:26px 14px}
.cl-wf-svg{width:100%;height:auto;display:block;min-width:900px}

/* ============ 05 · CORE MODULES ============ */
.cl-mod-view{background:#101210;border:1px solid #262a26;border-radius:24px;padding:22px}
.cl-mod-top{display:grid;grid-template-columns:1.15fr .95fr;gap:18px;align-items:start}
.cl-mod-mini{background:#0c0e0c;border:1px solid #22261f;border-radius:16px;padding:10px}
.cl-mini{width:100%;height:auto;display:block}
.cl-mod-side{display:flex;flex-direction:column;gap:12px}
.cl-mod-kpi strong{font-size:30px;color:var(--pa);display:block;line-height:1;
  font-variation-settings:'wdth' 104}
.cl-mod-kpi span{font-size:11px;color:var(--text-p2);display:block;margin-top:6px}
.cl-mod-desc{font-size:13px;color:var(--text-p2);line-height:1.65;margin:0}
.cl-mod-hubw{grid-column:1 / -1;background:#0c0e0c;border:1px solid #22261f;border-radius:16px;
  padding:8px;display:grid;place-items:center}
.cl-hub{width:min(240px,60vw);height:auto}
.hub-link{stroke:#262a26;stroke-width:1.1}
.hub-link.on{stroke:var(--pa);stroke-width:1.6;stroke-dasharray:5 6;animation:hubFlow 1.2s linear infinite}
@keyframes hubFlow{to{stroke-dashoffset:-11}}
.hub-node{fill:#181d18;stroke:#3d453d;transition:fill .3s,stroke .3s}
.hub-node.on{fill:rgba(143,245,210,.25);stroke:var(--pa)}
.hub-core{fill:#121511;stroke:var(--pa);stroke-width:1.6}

/* ============ 06 · LIVE COMMAND CENTER ============ */
.cl-cmd{padding:22px}
.cl-cmd-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.cl-cmd-title{font-size:13px;font-weight:700;color:#eef4ee;letter-spacing:.04em}
.cl-cmd-live{display:inline-flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.16em;
  color:var(--pa);border:1px solid rgba(143,245,210,.35);border-radius:999px;padding:5px 12px}
.cl-cmd-live i{width:6px;height:6px;border-radius:50%;background:var(--pa);animation:clBlink 1.8s ease-in-out infinite}
.cl-cmd-kpis{grid-template-columns:repeat(4,1fr);margin-bottom:16px}
.cl-cmd-cols{display:grid;grid-template-columns:1.2fr 1fr .9fr;gap:14px}
.cl-cmd-panel{background:#101310;border:1px solid #22261f;border-radius:14px;padding:14px 16px;min-width:0}
.cl-cmd-panel h5{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-p2);margin-bottom:12px}
.cq-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #1c201c;font-size:12.5px}
.cq-row:last-child{border-bottom:none}
.cq-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:#3d453d;transition:background .4s}
.cq-dot.w{background:#8a978a}.cq-dot.c{background:var(--pa)}.cq-dot.d{background:#3d453d}
.cq-p{font-weight:700;color:#eef4ee}
.cq-d{color:var(--text-p2);flex:1}
.cq-st{font-style:normal;font-size:10px;padding:3px 9px;border-radius:999px;border:1px solid #2c2c2c;color:var(--text-p2);white-space:nowrap}
.cq-st[data-c="c"]{color:var(--pa);border-color:rgba(143,245,210,.4);background:rgba(143,245,210,.08)}
.cq-st[data-c="d"]{color:#5d665d}
.cf-row{font-size:12px;color:var(--text-p2);padding:8px 0;border-bottom:1px solid #1c201c;
  transition:color .4s}
.cf-row:last-child{border-bottom:none}
.cf-row:first-child{color:#c9d4c9}
.cl-cmd-bars{display:flex;align-items:flex-end;gap:6px;height:110px;margin-top:6px}
.cl-cmd-bars i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,rgba(143,245,210,.75),rgba(143,245,210,.12));
  transition:height .9s var(--ease)}

/* ============ 07 · ROLE-BASED EXPERIENCE ============ */
.cl-rol-head{margin-bottom:22px}
.cl-role-stage{padding:20px;min-height:380px;transition:opacity .3s,transform .3s}
.cl-role-stage.swap{opacity:0;transform:translateY(10px)}
.rd{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.rd-panel{background:#101310;border:1px solid #22261f;border-radius:14px;padding:16px 18px;min-width:0}
.rd-panel h6{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-p2);margin-bottom:12px}
.rd-span2{grid-column:span 2}
.rd-row{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--text-p1);
  padding:7px 0;border-bottom:1px solid #1c201c}
.rd-row:last-child{border-bottom:none}
.rd-row b{color:#eef4ee;font-variation-settings:'wdth' 104}
.rd-row span:nth-last-child(2),.rd-row span:only-of-type{flex:1}
.rd-chip{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--text-p1);
  background:#141714;border:1px solid #262a26;border-radius:999px;padding:7px 14px;margin:0 6px 8px 0}
[dir="rtl"] .rd-chip{margin:0 0 8px 6px}
.rd-mini{margin-top:10px}
.rd-mini strong{font-size:24px;color:var(--pa);display:block;line-height:1}
.rd-mini span{font-size:10.5px;color:var(--text-p2);display:block;margin-top:5px}
.rd-patient{display:flex;align-items:center;gap:14px}
.rd-av{width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 50% 38%,rgba(143,245,210,.7) 0 26%,transparent 27%),
             radial-gradient(circle at 50% 88%,rgba(143,245,210,.4) 0 42%,transparent 43%),#181d18;
  border:1px solid rgba(143,245,210,.4)}
.rd-patient b{display:block;color:#eef4ee;font-size:14px}
.rd-patient span{font-size:11.5px;color:var(--text-p2)}
.rd-tag{margin-inline-start:auto;font-style:normal;font-size:10px;padding:4px 11px;border-radius:999px;
  color:var(--pa);border:1px solid rgba(143,245,210,.4);background:rgba(143,245,210,.08);white-space:nowrap}
.rd-line{display:block;height:8px;border-radius:4px;background:#22261f;margin-bottom:9px}
.rd-line.w90{width:90%}.rd-line.w80{width:80%}.rd-line.w70{width:70%}.rd-line.w60{width:60%}
.rd-rx{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.rd-rx b{font-size:11px;color:var(--pa);border:1px solid rgba(143,245,210,.4);border-radius:6px;padding:3px 7px}
.rd-rx .rd-line{flex:1;margin:0}
.rd-tline{display:flex;gap:8px;margin-top:6px}
.rd-tline i{flex:1;height:4px;border-radius:2px;background:#2c2c2c}
.rd-tline i.done{background:var(--pa)}
.rd-tline i.cur{background:var(--pa);animation:clBlink 1.6s ease-in-out infinite}
.rd-bars{display:flex;align-items:flex-end;gap:5px;height:64px;margin-top:12px}
.rd-bars.tall{height:110px}
.rd-bars i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,rgba(143,245,210,.7),rgba(143,245,210,.1))}
.rd-next-body{display:flex;align-items:center;gap:14px}
.rd-next-body b{color:#eef4ee;font-size:15px}
.rd-next-body span{color:var(--text-p2);font-size:12.5px}
.cl-roles-static{display:flex;flex-direction:column;gap:26px}
.cl-role-block{display:flex;flex-direction:column;gap:12px}
.cl-role-name{color:var(--pa);font-size:15px}

/* ============ 08 · BUSINESS OUTCOMES ============ */
.cl-out{display:flex;flex-direction:column;gap:14px;max-width:980px;margin:0 auto}
.cl-out-row{display:grid;grid-template-columns:70px 260px 1fr;gap:20px;align-items:center;
  background:#141714;border:1px solid #262a26;border-radius:18px;padding:20px 26px;
  transition:border-color .35s,transform .45s var(--ease)}
.cl-out-row:hover{border-color:rgba(143,245,210,.4);transform:translateX(6px)}
[dir="rtl"] .cl-out-row:hover{transform:translateX(-6px)}
.cl-out-row:nth-child(even){margin-inline-start:56px}
.cl-out-row:nth-child(odd){margin-inline-end:56px}
.cl-out-n{font-size:26px;font-weight:800;color:var(--pa);opacity:.75;font-variation-settings:'wdth' 104}
.cl-out-row h4{font-size:16px;color:#eef4ee}
.cl-out-row p{font-size:13px;color:var(--text-p2);line-height:1.6;margin:0}

/* ============ 11 · AI-READY ============ */
.cl-ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cl-ai-card{position:relative;background:#141714;border:1px solid #262a26;border-radius:20px;
  padding:24px;overflow:hidden;transition:border-color .35s,transform .4s var(--ease)}
.cl-ai-card::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--pa),transparent);opacity:.55}
.cl-ai-card:hover{border-color:rgba(143,245,210,.35);transform:translateY(-4px)}
.cl-ai-card svg{width:22px;height:22px;stroke:var(--pa);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.cl-ai-card h4{font-size:15.5px;color:#eef4ee;margin-bottom:8px}
.cl-ai-card p{font-size:12.5px;color:var(--text-p2);line-height:1.6;margin:0 0 16px}
.cl-ai-card em{display:inline-block;font-style:normal;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pa);border:1px dashed rgba(143,245,210,.45);
  border-radius:999px;padding:4px 11px}

/* ============ 12 · SECURITY & TRUST ============ */
.cl-sec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:1000px;margin:0 auto}
.cl-sec-item{display:flex;gap:16px;align-items:flex-start;background:#141714;
  border:1px solid #262a26;border-radius:18px;padding:20px 22px;transition:border-color .35s}
.cl-sec-item:hover{border-color:rgba(143,245,210,.35)}
.cl-sec-item svg{width:22px;height:22px;flex:0 0 auto;stroke:var(--pa);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.cl-sec-item h4{font-size:14.5px;color:#eef4ee;margin-bottom:6px}
.cl-sec-item p{font-size:12.5px;color:var(--text-p2);line-height:1.6;margin:0}
.cl-sec-item:last-child{grid-column:1 / -1;max-width:calc(50% - 7px);margin-inline:auto;width:100%}

/* ============ 14 · BUILDER BAND ============ */
.cl-bb{display:grid;grid-template-columns:1.4fr auto;gap:36px;align-items:center;
  background:linear-gradient(120deg,color-mix(in srgb,var(--pa) 9%,#121511),#121511 60%);
  border:1px solid color-mix(in srgb,var(--pa) 30%,#262a26);border-radius:28px;padding:46px 48px}
.cl-bb-copy .eyebrow{margin-bottom:12px}
.cl-bb-copy h2{font-size:clamp(24px,3vw,36px);color:#f2f7f2;margin-bottom:12px}
.cl-bb-copy p{font-size:14.5px;color:var(--text-p2);line-height:1.65;max-width:56ch;margin:0}

/* ============ 15 · CASE STUDY ============ */
.cl-cs-head{margin-bottom:26px}
.cl-case-visual{padding:16px;background:#0c0e0c}
.cl-case-svg{width:100%;height:auto;display:block}
#caseArt{transition:opacity .3s,transform .3s}
#caseArt.swap{opacity:0;transform:translateY(10px)}
.cl-dashflow{stroke-dasharray:8 10;animation:clDash 1.6s linear infinite}
@keyframes clDash{to{stroke-dashoffset:-18}}
.cl-case-static{display:flex;flex-direction:column;gap:30px}
.cl-case-block{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}
.cl-case-block:nth-child(even) .pd-story-visual{order:2}

/* ============ 18 · FINALE ============ */
.cl-fin-hub{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:.17}
.cl-fin-hub .cl-hub{width:min(460px,80vw)}
.cl-fin-rot{animation:clSpin 40s linear infinite}
@keyframes clSpin{to{transform:rotate(360deg)}}

/* ============ RESPONSIVE ============ */
@media (max-width:960px){
  .cl-ch-grid{grid-template-columns:1fr 1fr}
  .cl-cmd-kpis{grid-template-columns:repeat(4,1fr)}
  .cl-cmd-cols{grid-template-columns:1fr 1fr}
  .cl-ai-grid{grid-template-columns:1fr 1fr}
  .cl-bb{grid-template-columns:1fr;padding:36px 30px}
  .cl-case-block{grid-template-columns:1fr;gap:18px}
  .cl-case-block:nth-child(even) .pd-story-visual{order:0}
}
@media (max-width:860px){
  .cl-ch-grid{grid-template-columns:1fr}
  .cl-cmd-kpis{grid-template-columns:repeat(2,1fr)}
  .cl-cmd-cols{grid-template-columns:1fr}
  .cl-mod-top{grid-template-columns:1fr}
  .rd{grid-template-columns:1fr}
  .rd-span2{grid-column:span 1}
  .cl-role-stage{min-height:0}
  .cl-out-row{grid-template-columns:52px 1fr;grid-template-rows:auto auto;row-gap:6px}
  .cl-out-row p{grid-column:2}
  .cl-out-row:nth-child(even){margin-inline-start:0}
  .cl-out-row:nth-child(odd){margin-inline-end:0}
  .cl-sec-grid{grid-template-columns:1fr}
  .cl-sec-item:last-child{max-width:none}
  .cl-wf-scroll{overflow-x:auto;scrollbar-width:thin;padding-bottom:6px}
  .cl-phones{grid-template-columns:1fr!important;max-width:320px;margin:0 auto}
}
@media (max-width:560px){
  .cl-cmd-kpis{grid-template-columns:1fr 1fr;gap:8px}
  .cl-ai-grid{grid-template-columns:1fr}
  .cl-bb{padding:28px 22px}
  .chw-snap{grid-template-columns:repeat(4,38px)}
}

/* ============ PHONE MOCKUPS (section 10) ============ */
.cl-phones{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;align-items:start;
  max-width:1000px;margin:0 auto}
.cl-phone{text-align:center}
.cl-phone:nth-child(2){transform:translateY(26px)}
.cl-ph-frame{position:relative;width:100%;max-width:250px;margin:0 auto 20px;aspect-ratio:9/18.6;
  border-radius:34px;background:#0c0e0c;border:1px solid #2c2c2c;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7),inset 0 0 0 5px #121511;padding:16px 14px}
.cl-ph-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:70px;height:8px;
  border-radius:4px;background:#1c201c}
.cl-ph-ui{display:flex;flex-direction:column;gap:11px;height:100%;padding-top:20px}
.cl-ph-ui i{display:block;border-radius:8px}
.u-hd{height:12px;width:46%;background:#2c2c2c}
.u-av{width:42px;height:42px;border-radius:50%;border:1px solid rgba(143,245,210,.45);
  background:rgba(143,245,210,.1)}
.u-row{height:9px;background:#1c201c}
.u-row.w80{width:80%}.u-row.w70{width:70%}.u-row.w60{width:60%}.u-row.w50{width:50%}
.u-card{height:74px;background:#121511;border:1px solid rgba(143,245,210,.3);border-radius:14px}
.u-card.tall{height:96px}
.u-cta{height:30px;margin-top:auto;border-radius:999px;background:rgba(143,245,210,.85)}
.cl-ph-ui .u-chip-row{display:flex;gap:7px;background:none;border:none;height:auto}
.u-chip-row b{flex:1;height:22px;border-radius:999px;background:#141714;border:1px solid #262a26}
.cl-ph-ui .u-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:none;border:none;height:auto}
.u-kpis b{height:42px;border-radius:10px;background:#121511;border:1px solid rgba(143,245,210,.3)}
.cl-ph-ui .u-bars{display:flex;align-items:flex-end;gap:6px;height:80px;background:#121511;
  border:1px solid #22261f;border-radius:12px;padding:10px}
.u-bars b{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,rgba(143,245,210,.7),rgba(143,245,210,.1))}
.u-bars b:nth-child(1){height:45%}.u-bars b:nth-child(2){height:70%}.u-bars b:nth-child(3){height:55%}
.u-bars b:nth-child(4){height:88%}.u-bars b:nth-child(5){height:62%}
.cl-phone h4{font-size:16px;color:#eef4ee;margin-bottom:8px}
.cl-phone p{font-size:13px;color:var(--text-p2);line-height:1.6;max-width:30ch;margin:0 auto}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  .cl-blink,.cl-dashflow,.cl-fin-rot,.hub-link.on,.cl-cmd-live i,.rd-tline i.cur{animation:none}
  .chw-snap i,.chl-a,.chl-b,.chlink,.chw-cal .b1,.chw-cal .b2,.chw-bell .bell,
  .chw-bell .chfeed i,.chw-morph .papers i,.chw-morph .bars i,.chw-conv .core,.chw-conv .sat{animation:none}
  /* frozen at the resolved / final state (base styles) */
  .chw-morph .papers i{opacity:0}
  .chw-bell .chfeed i{opacity:1;transform:none}
  .cl-role-stage,.pd-story-text,#caseArt{transition:none}
  .cl-cmd-bars i,.hrevdot{transition:none}
}