/* =====================================================================
   Workvolve case studies (round 5): the index and the two case study pages.
   Load after theme-v2.css and pages-v2.css. Theme tokens only.
   The example screens are driven by cases-v2.js: each plays once when it
   scrolls into view and keeps its end frame. Every resting state below is
   the END frame; the starting frame only applies under .js (and is
   undone class by class as the screen plays), so without script or with
   reduced motion the finished picture shows.
   1 frame . 2 stage and windows . 3 CRM hero map . 4 story (sticky)
   5 CRM scenes . 6 review, calm prompt, related . 7 NDIS . 8 index
   9 breakpoints . 10 reduced motion
   ===================================================================== */

/* ---------- 1. frame ---------- */
.cx{position:relative}
.cx-hero{position:relative;padding-top:clamp(120px,12vw,160px)}
.cx-hero-grid{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);gap:24px clamp(40px,5vw,64px);align-items:end}
.cx-h1{font-size:clamp(2.5rem,1.2rem + 3.4vw,4.125rem);line-height:1.03;letter-spacing:-.05em;font-weight:500;color:var(--ink);text-wrap:balance}
.cx-side{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding-bottom:8px}
.cx-side-lead{font-size:var(--fs-lead);line-height:1.58;color:var(--ink-2);text-wrap:pretty}
.cx-meta{font-size:14px;color:var(--ink-3)}
.cx-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.cx-sec{position:relative;padding-top:clamp(84px,9vw,132px)}
.cx-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:18px clamp(32px,5vw,72px);align-items:end;margin-bottom:clamp(32px,4vw,52px)}
.cx-head .cp-sub{margin-top:0;justify-self:end;max-width:470px}
.cx-label{display:block;margin-bottom:14px;font-size:13.5px;font-weight:550;letter-spacing:-.005em;color:var(--gold-ink)}
.cx-h2{font-size:clamp(2rem,1.3rem + 2.1vw,3.125rem);line-height:1.05;letter-spacing:-.045em;font-weight:500;color:var(--ink);text-wrap:balance}
.cx-prose{font-size:clamp(1.03rem,.96rem + .28vw,1.125rem);line-height:1.72;color:var(--ink-2);text-wrap:pretty}
.cx-prose>*+*{margin-top:1.05em}
.cx-prose h2{font-size:clamp(1.75rem,1.3rem + 1.35vw,2.5rem);line-height:1.08;letter-spacing:-.04em;font-weight:500;color:var(--ink);text-wrap:balance}
.cx-prose h2+*{margin-top:.75em}
.cx-prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color .25s}
.cx-prose a:hover{color:var(--gold-ink)}
.cx-prose strong{color:var(--ink);font-weight:600}
.cx-prose ul{list-style:none;padding-left:1.25em}
.cx-prose ul li{position:relative}
.cx-prose ul li::before{content:"";position:absolute;left:-1.1em;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.cx-prose li+li{margin-top:.55em}

/* ---------- 2. stage, windows and the pieces inside them ---------- */
/* the warm example frame, the same as the homepage's demo frame */
.cx-stage{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;border-radius:28px;padding:58px clamp(14px,2.2vw,30px) clamp(16px,2.2vw,28px);overflow:hidden;background:radial-gradient(80% 90% at 15% 0%,#fffdf8 0%,rgba(255,253,248,0) 62%),radial-gradient(70% 80% at 100% 100%,#f2e3bf 0%,rgba(242,227,191,0) 70%),#f9f4e9;box-shadow:inset 0 0 0 1px rgba(29,29,31,.05)}
.cx-stage::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(122,93,34,.15) 1px,transparent 1.25px);background-size:16px 16px;-webkit-mask-image:radial-gradient(95% 90% at 50% 45%,#000 25%,transparent 88%);mask-image:radial-gradient(95% 90% at 50% 45%,#000 25%,transparent 88%);pointer-events:none}
.cx-top{position:absolute;left:14px;right:14px;top:12px;z-index:4;display:flex;align-items:center;gap:10px;min-width:0}
.cx-top .replay{margin-left:auto}
.cx-cap{margin-top:14px;font-size:12.5px;line-height:1.4;color:var(--gold-ink);text-align:center}
.replay{position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(29,29,31,.08),0 2px 6px -3px rgba(60,44,12,.25);font-size:12px;font-weight:550;color:var(--ink-2);transition:opacity .3s,background-color .25s,color .25s}
.replay::before{content:"";position:absolute;left:-4px;right:-4px;top:-6px;bottom:-6px}
.replay .i{width:13px;height:13px;transition:transform .5s var(--ease)}
.replay:hover{background:#fff;color:var(--ink)}
.replay:hover .i{transform:rotate(-140deg)}
.cx-demo.playing .replay{opacity:.5;cursor:default}
.cx .dm-meta{margin-left:auto;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.cx .dm-bar .dm-meta{padding-left:8px}
.cx-bico{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:none;background:#f3efe6;color:var(--ink-2)}
.cx-bico .i{width:13px;height:13px}
.cx .dm-bar>img{width:14px;height:14px;flex:none}
.cx-foot{display:flex;align-items:center;gap:9px;min-height:40px;padding:8px 14px;border-top:1px solid var(--line);background:#fbf9f4;font-size:12px;color:var(--ink-3)}
.cx-foot .i{width:13px;height:13px;color:var(--gold-deep);flex:none}
.cx-foot b{font-weight:600;color:var(--gold-ink)}
.cx-foot .tk{width:18px;height:18px;box-shadow:none}
/* mock people: made-up initials in warm tints */
.cx-a1{background:linear-gradient(160deg,#efe4d1,#cfbe9f);color:#3e3626}
.cx-a2{background:linear-gradient(160deg,#f2e2bb,#d9bf86);color:#4e3c14}
.cx-a3{background:linear-gradient(160deg,#ead8b6,#c7a670);color:#43320f}
.cx-a4{background:linear-gradient(160deg,#f3efe7,#ddd5c6);color:#4b4840}
.cx-a5{background:linear-gradient(160deg,#f7edd6,#e3cd98);color:#5c4617}
/* small switches and ticks inside example screens */
.cx-demo .tk{transition:transform .28s var(--spring)}
.js .cx-demo .tk:not(.on){transform:scale(0)}
.cx-demo .sw{display:inline-grid;align-items:center}
.cx-demo .sw>*{grid-area:1/1;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.cx-demo .sw>.sw-a{opacity:0;transform:translateY(-5px)}
.js .cx-demo .sw:not(.on)>.sw-a{opacity:1;transform:none}
.js .cx-demo .sw:not(.on)>.sw-b{opacity:0;transform:translateY(5px)}
.cx-demo .typing::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-left:1px;vertical-align:-.15em;background:var(--ink);animation:cxCaret .9s steps(2,start) infinite}
@keyframes cxCaret{to{opacity:0}}
.no-anim,.no-anim *,.no-anim *::before,.no-anim *::after{transition:none!important;animation:none!important}
/* wires between windows, drawn by script from real positions (homepage style) */
.cx-demo .wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.cx-demo .wires path{fill:none;stroke-linecap:round}
.cx-demo .wires .w-base{stroke:#dccfb2;stroke-width:1.6;stroke-dasharray:3 4;marker-end:url(#m-arr)}
.cx-demo .wires .w-lit{stroke:var(--gold);stroke-width:1.8;stroke-dasharray:100 100;stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--ease)}
.js .cx-demo .wires g:not(.lit) .w-lit{stroke-dashoffset:100}
.cx-demo .wires .w-dot{stroke:#e2b85a;stroke-width:5;stroke-dasharray:7 200;stroke-dashoffset:7;opacity:0}
.cx-demo .wires .w-glow{stroke:rgba(226,184,90,.35);stroke-width:12;stroke-dasharray:9 200;stroke-dashoffset:9;opacity:0}
.cx-demo .wires g.pulse .w-dot,.cx-demo .wires g.pulse .w-glow{opacity:1;stroke-dashoffset:-100;transition:stroke-dashoffset .75s cubic-bezier(.5,0,.4,1)}
.cx-demo .wires g.pulse.done .w-dot,.cx-demo .wires g.pulse.done .w-glow{opacity:0;transition:opacity .2s}
/* three-state status in a window bar: ready, running, done (done is the resting frame) */
.cx-status{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--ink-3);white-space:nowrap}
.cx-status>span:not(.cx-live){display:none}
.cx-status .s-c{display:inline;color:var(--gold-ink)}
.cx-live{width:7px;height:7px;border-radius:50%;background:var(--gold)}
.js .cx-demo .cx-status:not(.ok) .s-c{display:none}
.js .cx-demo .cx-status:not(.run):not(.ok) .s-a{display:inline}
.js .cx-demo .cx-status:not(.run):not(.ok) .cx-live{background:#d8d1c3}
.js .cx-demo .cx-status.run .s-b{display:inline}
.js .cx-demo .cx-status.run .cx-live{animation:cxBlink 1s steps(2,start) infinite}
@keyframes cxBlink{to{opacity:.25}}

/* ---------- 3. CRM: the wide system map in the hero ---------- */
.cx-map{margin-top:clamp(40px,5vw,64px);padding:70px clamp(16px,3vw,44px) 20px}
.cx-night{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 9px;border-radius:var(--r-pill);background:#2b2926;color:#f3e3bb;font-size:12px;font-weight:550;white-space:nowrap}
.cx-night .i{width:13px;height:13px;transition:transform .7s var(--spring),opacity .4s}
.js .cx-demo .cx-night:not(.on) .i{transform:rotate(-40deg) scale(.75);opacity:.55}
.cx-way{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:550;color:var(--gold-ink);white-space:nowrap}
.cx-way .i{width:14px;height:14px}
.cx-map-body{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr) minmax(0,1fr);gap:clamp(40px,5vw,72px);align-items:center}
.cx-sys{position:relative;z-index:1}
.cx-recs,.cx-log{display:flex;flex-direction:column}
.cx-recs li,.cx-log li{position:relative;display:flex;align-items:center;gap:9px;min-height:44px;padding:6px 14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink)}
.cx-recs li:first-child,.cx-log li:first-child{border-top:0}
.cx-recs b,.cx-log b{font-weight:550;white-space:nowrap}
.cx-st{margin-left:auto;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.cx-recs li::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--gold);transition:transform .35s var(--ease)}
.js .cx-demo .cx-recs li:not(.on)::before{transform:scaleY(0)}
.cx-what{margin-left:auto;font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;transition:opacity .35s var(--ease)}
.cx-log li>.av,.cx-log li>b{transition:opacity .4s var(--ease)}
.js .cx-demo .cx-log li:not(.on)>.av,.js .cx-demo .cx-log li:not(.on)>b{opacity:.38}
.js .cx-demo .cx-log li:not(.on)>.cx-what,.js .cx-demo .cx-log li:not(.on)>.cx-badge{opacity:0}
.cx-log .tk{width:16px;height:16px;box-shadow:none}
.cx-log .tk .i{width:10px;height:10px}
.cx-badge{margin-left:auto;display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--r-pill);background:var(--gold-wash);box-shadow:inset 0 0 0 1px rgba(200,164,85,.38);font-size:11px;font-weight:600;color:var(--gold-ink);white-space:nowrap;transition:opacity .3s,transform .3s var(--spring)}
.cx-badge .i{width:11px;height:11px}
.cx-steps{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px}
.cx-steps li{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;padding:7px 10px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(200,164,85,.42),0 8px 18px -14px rgba(140,109,44,.55);font-size:12.5px;font-weight:550;line-height:1.3;color:var(--ink);transition:opacity .35s var(--ease),box-shadow .35s,transform .35s var(--ease)}
.cx-steps li+li::before{content:"";position:absolute;left:23px;top:-9px;width:2px;height:10px;border-radius:2px;background:#e3d3ac}
.js .cx-demo .cx-steps li:not(.on){opacity:.42;box-shadow:0 0 0 1px var(--line-2);transform:translateX(-3px)}
.cx-si{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--gold-wash);color:var(--gold-ink)}
.cx-si .i{width:15px;height:15px}
.cx-si img{width:16px;height:16px}
.cx-sl{flex:1;min-width:0}
.cx-steps .tk{width:18px;height:18px;box-shadow:none}

/* ---------- 4. the story: text on the left, a sticky example on the right that changes with it ---------- */
.cx-intro-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px clamp(36px,6vw,96px);align-items:start}
.cx-lede{font-size:clamp(1.25rem,1.05rem + .7vw,1.625rem);line-height:1.5;letter-spacing:-.018em;color:var(--ink);text-wrap:pretty}
.cx-built{margin-top:clamp(28px,3vw,40px);padding-top:24px;border-top:1px solid var(--line-2)}
.cx-built h2{margin-bottom:14px;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.cx-ticks{display:flex;flex-direction:column;gap:11px}
.cx-ticks li{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.cx-ticks .tk{margin-top:2px;box-shadow:none}
.cx-glance{position:sticky;top:104px}
.cx-glance.cs-glance{padding:24px 26px 12px;border-radius:24px;box-shadow:var(--sh-md)}
.cx-glance.cs-glance li{grid-template-columns:104px minmax(0,1fr);font-size:14.5px}
.cx-story{position:relative;counter-reset:cxs}
.cx-rail{position:absolute;left:15px;top:var(--rt,0px);height:var(--rh,0px);width:2px;border-radius:2px;background:rgba(29,29,31,.09);pointer-events:none;z-index:0}
.cx-rail i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,#dcc07a,#b8913f);transform-origin:top;transform:scaleY(var(--fill,0));transition:transform .6s var(--ease)}
.cx-step-text{position:relative;z-index:1;padding-left:60px;counter-increment:cxs}
.cx-step-head{position:relative}
.cx-dot{position:absolute;left:-60px;top:calc((clamp(1.75rem,1.3rem + 1.35vw,2.5rem) * 1.08 - 32px) / 2);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1px var(--line-2),0 0 0 6px var(--cream);font-size:13px;font-weight:600;color:var(--ink-3);transition:background-color .35s,color .35s,box-shadow .35s}
.cx-dot::after{content:counter(cxs)}
.cx-step.on .cx-dot,.cx-step.past .cx-dot{background:linear-gradient(180deg,#dcc07a,#c39d4c);color:#2b2414;box-shadow:0 0 0 6px var(--cream),0 6px 14px -6px rgba(140,109,44,.75)}
.cx-step-text h2{margin:0}
.cx-scene{position:relative;z-index:1}
.cx-scene .cx-stage{height:100%}
.cx-calm{margin-top:clamp(40px,5vw,64px);display:flex;align-items:center;flex-wrap:wrap;gap:16px 22px;padding:18px 18px 18px 18px;border-radius:24px;background:rgba(255,255,255,.7);border:1px solid #fff;box-shadow:var(--sh-sm)}
.cx-calm-av{width:48px;height:48px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(200,164,85,.5)}
.cx-calm-av img{width:100%;height:100%;object-fit:cover}
.cx-calm p{flex:1 1 320px;font-size:15.5px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.cx-calm p b{color:var(--ink);font-weight:600}
.cx-calm .btn{flex:none}

/* ---------- 5. CRM scenes ---------- */
/* scene 1: the same client typed into two systems */
.cx-twice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.cx-pane{display:flex;flex-direction:column;gap:9px;min-width:0}
.cx-num{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:550;color:var(--ink-2);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.cx-num i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;background:#fff;box-shadow:0 0 0 1px var(--line-2);font-size:11px;font-weight:600;color:var(--ink-2)}
.js .cx-demo .cx-num:not(.on){opacity:0;transform:translateY(4px)}
.cx-fields{display:flex;flex-direction:column;gap:10px;padding:14px}
.cx-f{position:relative;display:flex;flex-direction:column;gap:4px;min-width:0}
.cx-f>span{font-size:11px;font-weight:500;color:var(--ink-3)}
.cx-f b{display:flex;align-items:center;height:32px;padding:0 10px;border-radius:8px;background:#faf8f3;box-shadow:inset 0 0 0 1px rgba(29,29,31,.09);font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;transition:box-shadow .2s,background-color .2s}
.cx-f b.typing{box-shadow:inset 0 0 0 1.5px var(--gold),0 0 0 3px rgba(200,164,85,.16);background:#fff}
.cx-f b.typo{text-decoration:underline wavy #b5832e;text-decoration-thickness:1.5px;text-underline-offset:4px}
.cx-f b.stale{color:var(--ink-3);background:#f6f2ea}
.cx-flag{position:absolute;right:6px;bottom:6px;display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px 0 6px;border-radius:var(--r-pill);background:#2b2926;color:#f3d48a;font-size:11px;font-weight:600;white-space:nowrap;transition:opacity .3s var(--ease),transform .3s var(--spring)}
.cx-flag .i{width:11px;height:11px}
.js .cx-demo .cx-flag:not(.on){opacity:0;transform:scale(.7)}
.cx-saved{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:550;color:var(--gold-ink);transition:opacity .3s}
.cx-saved .tk{width:16px;height:16px;box-shadow:none}
.js .cx-demo .cx-saved:not(.on){opacity:0}
.cx-twice-note{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;font-weight:550;color:var(--ink);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.cx-twice-note .cx-alert{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#2b2926;color:#f3d48a}
.cx-twice-note .cx-alert .i{width:13px;height:13px}
.js .cx-demo .cx-twice-note:not(.on){opacity:0;transform:translateY(6px)}
/* scene 2: field mapping */
.cx-mapcard .cx-mh,.cx-mapcard .cx-mr{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:center;gap:0 6px;padding:0 16px}
.cx-mh{height:38px;background:#fbf9f4;border-bottom:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--ink-3)}
.cx-mh span{display:inline-flex;align-items:center;gap:6px}
.cx-mh img,.cx-mh .i{width:13px;height:13px}
.cx-mr{min-height:60px;border-top:1px solid var(--line)}
.cx-mr:first-of-type{border-top:0}
.cx-cell{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.cx-cell small{font-size:11px;color:var(--ink-3)}
.cx-cell b{font-size:13px;font-weight:550;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-cell.r{flex-direction:row;align-items:center;gap:8px}
.cx-cv{display:flex;flex-direction:column;min-width:0;flex:1;transition:opacity .35s var(--ease)}
.cx-cell.r .tk{flex:none;width:18px;height:18px;box-shadow:none}
.js .cx-demo .cx-mr:not(.on) .cx-cv{opacity:.28}
.cx-arr{position:relative;height:2px;margin:0 6px;border-radius:2px;background:#ebe2cf}
.cx-arr::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#e2cd98,#c8a455);transform-origin:left;transition:transform .45s var(--ease)}
.cx-arr::after{content:"";position:absolute;right:-1px;top:50%;width:6px;height:6px;border-top:2px solid #c8a455;border-right:2px solid #c8a455;border-radius:1px;transform:translateY(-50%) rotate(45deg)}
.js .cx-demo .cx-mr:not(.on) .cx-arr::before{transform:scaleX(0)}
.cx-arr i{position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#e2b85a;box-shadow:0 0 0 4px rgba(226,184,90,.25);opacity:0}
.cx-mr.on .cx-arr i{animation:cxRun .5s var(--ease) forwards}
@keyframes cxRun{0%{opacity:1;left:0}100%{opacity:0;left:calc(100% - 8px)}}
/* scene 3: the loan pipeline in HubSpot */
.cx-board .cx-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px}
.cx-col{display:flex;flex-direction:column;gap:6px;min-height:228px;padding:8px;border-radius:11px;background:#faf8f3;box-shadow:inset 0 0 0 1px rgba(29,29,31,.05)}
.cx-ch{font-family:var(--mono);font-weight:500;font-size:11px;color:var(--ink-3);padding:0 2px 2px}
.cx-deal{position:relative;display:flex;flex-direction:column;gap:1px;padding:7px 9px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.09),0 4px 10px -7px rgba(60,44,12,.45);font-size:12px;line-height:1.3;will-change:transform;transition:opacity .35s var(--ease),box-shadow .3s}
.cx-deal b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-deal>span{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-deal.moving{z-index:3;box-shadow:0 0 0 1.5px var(--gold),0 14px 24px -12px rgba(140,109,44,.6)}
.cx-deal.landed{box-shadow:0 0 0 1px rgba(200,164,85,.55),0 4px 10px -7px rgba(60,44,12,.45)}
.cx-deal .cx-tag{align-self:flex-start;margin-top:4px;height:17px;padding:0 6px;border-radius:var(--r-pill);background:var(--gold-wash);box-shadow:inset 0 0 0 1px rgba(200,164,85,.38);font-size:10.5px;font-weight:600;line-height:17px;color:var(--gold-ink);white-space:nowrap}
.cx-new{transition:opacity .4s var(--ease),transform .45s var(--ease)}
.js .cx-demo .cx-new:not(.on){opacity:0;transform:translateY(8px)}
.cx-dup{display:none}
.js .cx-demo .cx-dup:not(.gone){display:flex}
.cx-dup{transition:opacity .4s var(--ease),transform .5s var(--ease)}
.cx-dup.merge{opacity:0;transform:translateY(-100%) scale(.97)}
.cx-deal .cx-badge{position:absolute;right:6px;top:6px;height:18px;padding:0 6px;font-size:10.5px}
.js .cx-demo .cx-deal:not(.on) .cx-badge{opacity:0;transform:scale(.6)}
.cx-old{opacity:.75}
.cx-toast{margin-left:auto;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 7px;border-radius:var(--r-pill);background:var(--gold-wash);box-shadow:inset 0 0 0 1px rgba(200,164,85,.38);font-size:11px;font-weight:550;color:var(--gold-ink);white-space:nowrap;transition:opacity .3s var(--ease),transform .35s var(--ease)}
.cx-toast .i{width:11px;height:11px}
.js .cx-demo .cx-toast:not(.on){opacity:0;transform:translateY(-4px)}
/* scene 4: the handover */
.cx-hand{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:14px;align-items:stretch}
.cx-video{position:relative;margin:12px;aspect-ratio:16/10;border-radius:11px;overflow:hidden;background:radial-gradient(70% 80% at 20% 0%,#45403a,#2b2926 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.cx-vscreen{position:absolute;left:12%;right:12%;top:22%;display:flex;align-items:center;justify-content:space-between}
.cx-vscreen::before{content:"";position:absolute;left:12%;right:12%;top:50%;height:1.5px;background:repeating-linear-gradient(90deg,rgba(243,227,187,.55) 0 5px,transparent 5px 9px)}
.cx-vnode{position:relative;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#fff;box-shadow:0 6px 16px -8px rgba(0,0,0,.6)}
.cx-vnode img,.cx-vnode .i{width:18px;height:18px;color:var(--ink-2)}
.cx-vtitle{position:absolute;left:12px;top:10px;font-size:11px;font-weight:550;color:rgba(255,255,255,.85)}
.cx-play{position:absolute;left:50%;bottom:24%;width:44px;height:44px;margin-left:-22px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.95);box-shadow:0 10px 24px -10px rgba(0,0,0,.6);transition:opacity .35s var(--ease),transform .35s var(--spring)}
.cx-play::before{content:"";margin-left:3px;border-left:12px solid #625df5;border-top:7px solid transparent;border-bottom:7px solid transparent}
.cx-video.on .cx-play{opacity:0;transform:scale(.8)}
.cx-video.on.ended .cx-play{opacity:1;transform:none}
.cx-vbar{position:absolute;left:12px;right:12px;bottom:10px;height:4px;border-radius:4px;background:rgba(255,255,255,.22);overflow:hidden}
.cx-vbar i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#e8cf8c,#d4ad55);transform-origin:left;transition:transform 1.6s linear}
.js .cx-demo .cx-video:not(.on) .cx-vbar i{transform:scaleX(.04)}
.cx-doc{padding:14px 16px 16px;display:flex;flex-direction:column;gap:9px}
.cx-doc b{font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.cx-doc i{display:block;height:7px;border-radius:4px;background:#efe9dd;transition:transform .4s var(--ease),opacity .3s;transform-origin:left}
.cx-doc i.s{width:62%}
.cx-doc i.h{height:9px;width:46%;background:#e6d8b6}
.js .cx-demo .cx-doc i:not(.on){transform:scaleX(0);opacity:0}
.cx-own{grid-column:1 / -1;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:12px 16px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.07),0 12px 28px -20px rgba(60,44,12,.5);perspective:600px}
.cx-own-l{font-size:12px;font-weight:500;color:var(--ink-3)}
.cx-flip{position:relative;display:inline-grid;transform-style:preserve-3d;transition:transform .55s var(--ease);transform:rotateY(180deg)}
.js .cx-demo .cx-flip:not(.on){transform:none}
.cx-face{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 13px 0 8px;border-radius:var(--r-pill);font-size:13px;font-weight:600;-webkit-backface-visibility:hidden;backface-visibility:hidden;white-space:nowrap}
.cx-face.a{background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.1);color:var(--ink-2)}
.cx-face.a img{width:18px;height:18px}
.cx-face.b{background:var(--ink);color:#fff;transform:rotateY(180deg)}
.cx-face.b .i{width:15px;height:15px;color:#f0d698}
.cx-keep{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--gold-ink);transition:opacity .3s var(--ease) .15s,transform .35s var(--ease) .15s}
.cx-keep .i{width:14px;height:14px}
.js .cx-demo .cx-keep:not(.on){opacity:0;transform:translateX(-6px)}

/* ---------- 6. review, related links ---------- */
.cx-tcard{position:relative;display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);gap:28px clamp(32px,5vw,80px);align-items:center;padding:clamp(32px,4.6vw,64px);border-radius:var(--r-2xl);background:radial-gradient(45% 70% at 0% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),radial-gradient(55% 70% at 100% 100%,rgba(233,210,160,.42),rgba(233,210,160,0) 72%),linear-gradient(180deg,#fbf7ee,#f6eedb);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 0 0 1px rgba(29,29,31,.04),0 40px 90px -64px rgba(60,44,12,.5)}
.cx-tside{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.cx-tside h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.12;letter-spacing:-.035em;font-weight:500;color:var(--ink);text-wrap:balance}
.cx-tlogo{display:inline-flex;align-items:center;height:62px;padding:0 24px;border-radius:16px;background:#fff;box-shadow:var(--sh-sm)}
.cx-tlogo img{height:21px;width:auto}
.cx-tstars{display:flex;align-items:center;gap:10px}
.cx-tstars .stars .i{width:15px;height:15px}
.cx-tq{position:relative}
.cx-tmark{display:block;height:44px;margin:0 0 6px -4px;font-size:96px;line-height:.92;font-weight:400;color:var(--gold);user-select:none}
.cx-tq blockquote p{font-size:clamp(1.1875rem,1rem + .75vw,1.625rem);line-height:1.46;letter-spacing:-.022em;font-weight:450;color:var(--ink);text-wrap:pretty}
.cx-tmeta{display:flex;align-items:center;gap:13px;margin-top:24px}
.cx-tmeta>span:last-child{display:flex;flex-direction:column;line-height:1.35}
.cx-tmeta strong{font-size:15.5px;letter-spacing:-.015em}
.cx-tmeta .role{font-size:14px;color:var(--ink-3)}
.cx-next-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:32px clamp(40px,6vw,96px);align-items:start}
.cx-links{display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.cx-links li{border-bottom:1px solid var(--line-2)}
.cx-links a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 18px;min-height:84px;padding:16px 6px;border-radius:12px;transition:background-color .3s var(--ease)}
.cx-links a:hover{background:rgba(246,239,223,.55)}
.cx-lk{display:flex;flex-direction:column;gap:3px;min-width:0}
.cx-lk small{font-size:12.5px;font-weight:550;color:var(--gold-ink)}
.cx-lk b{font-size:17px;font-weight:550;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.cx-lk span{font-size:14px;line-height:1.5;color:var(--ink-3)}
.cx-links .i{width:18px;height:18px;color:var(--ink-3);transition:transform .4s var(--ease),color .3s}
.cx-links a:hover .i{transform:translateX(3px);color:var(--ink)}

/* ---------- 7. NDIS case study ---------- */
.cx-hsplit{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:40px clamp(36px,5vw,80px);align-items:center}
.cx-hsplit .cp-lede{max-width:560px}
.cx-hsplit .cx-ctas{margin-top:30px}
/* reminders inbox in the hero */
.cx-remind{min-height:440px}
.cx-auto{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 9px;border-radius:var(--r-pill);background:#2b2926;color:#f3e3bb;font-size:12px;font-weight:550;white-space:nowrap}
.cx-auto .i{width:13px;height:13px}
.cx-mails{display:flex;flex-direction:column}
.cx-mails li{position:relative;display:flex;align-items:center;gap:12px;min-height:62px;padding:10px 14px;border-top:1px solid var(--line);transition:opacity .4s var(--ease),transform .45s var(--ease),background-color .4s}
.cx-mails li:first-child{border-top:0}
.js .cx-demo .cx-mails li:not(.on){opacity:0;transform:translateY(-10px)}
.cx-mails li.hot{background:#fffbf1}
.cx-mi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:#f6f3ec;color:var(--ink-2)}
.cx-mi .i{width:16px;height:16px}
.cx-mi.gold{background:var(--gold-wash);color:var(--gold-ink);box-shadow:inset 0 0 0 1px rgba(200,164,85,.38)}
.cx-mt{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3}
.cx-mt b{font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-mt span{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-chip{flex:none;display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;background:var(--gold-wash);box-shadow:inset 0 0 0 1px rgba(200,164,85,.38);font-size:11.5px;font-weight:600;color:var(--gold-ink);white-space:nowrap}
.cx-chip.ink{background:var(--ink);box-shadow:none;color:#fff}
.cx-chip.mute{background:#faf8f3;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2)}
/* the six-point cadence */
.cx-cad{padding:64px clamp(16px,3vw,40px) 30px}
.cx-cad-ob{display:inline-flex;align-items:center;gap:7px;min-width:0;font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-cad-ob b{font-weight:600;color:var(--ink)}
.cx-cad-ob .i{width:14px;height:14px;color:var(--gold-deep);flex:none}
.cx-cad-rail{position:relative;padding:34px 0 4px}
.cx-cad-track{position:absolute;left:8.333%;right:8.333%;top:91px;height:2px;border-radius:2px;background:#e8dfcc}
.cx-cad-fill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#e2cd98,#c8a455);transform-origin:0 50%;transition:transform 2.5s linear}
.js .cx-demo .cx-cad-fill:not(.on){transform:scaleX(0)}
.cx-cad-dot{position:absolute;left:100%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#e2b85a;box-shadow:0 0 0 5px rgba(226,184,90,.25);opacity:0;transition:left 2.5s linear,opacity .3s}
.js .cx-demo .cx-cad-dot:not(.on){left:0}
.cx-cad-dot.on.go{opacity:1}
.cx-cad-nodes{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.cx-cad-node{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;transition:opacity .4s var(--ease)}
.cx-cad-node .cp-knob{position:relative;transition:transform .35s var(--spring),box-shadow .35s}
.cx-cad-node.on .cp-knob{transform:scale(1.08)}
.cx-cad-mail{width:34px;height:34px;margin-bottom:10px;border-radius:10px;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1px rgba(200,164,85,.45),0 8px 16px -10px rgba(140,109,44,.6);color:var(--gold-ink);transition:opacity .35s var(--ease),transform .45s var(--spring)}
.cx-cad-mail .i{width:16px;height:16px}
.cx-cad-node.late .cx-cad-mail{background:var(--ink);color:#f3d48a;box-shadow:0 8px 16px -10px rgba(0,0,0,.6)}
.js .cx-demo .cx-cad-node:not(.on){opacity:.35}
.js .cx-demo .cx-cad-node:not(.on) .cx-cad-mail{opacity:0;transform:translateY(12px) scale(.7)}
/* before and after */
.cx-ba .cp-ba{margin-top:0}
.cx-ba .cp-mail,.cx-ba .cp-reg{transition:opacity .4s var(--ease),transform .45s var(--ease),background-color .5s,color .5s}
.js .cx-demo .cp-mail:not(.on),.js .cx-demo .cp-reg:not(.on){opacity:0;transform:translateY(-8px)}
.cx-ba .cp-mail.key{background:#fff;color:var(--ink-2);font-weight:400}
.cx-ba .cp-mail.key.hl{background:#fffbf1;color:var(--ink);font-weight:550}
.cx-ba .cp-reg.key.flash{background:#fff4d9}
.cx-ba .cp-buried,.cx-ba .cp-foot{transition:opacity .4s var(--ease)}
.js .cx-demo .cp-buried:not(.on),.js .cx-demo .cp-foot:not(.on){opacity:0}
.cx-ba .cp-arrow span{transition:transform .4s var(--spring),background-color .3s,color .3s}
.cx-ba .cp-arrow span.on{background:var(--ink);color:#f0d698}
/* the four pieces: alternating rows, each with its own screen */
.cx-feats{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,32px)}
.cx-feat{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(10px,1vw,12px) clamp(10px,1vw,12px) clamp(10px,1vw,12px) clamp(24px,3.4vw,48px);border-radius:32px;background:rgba(255,255,255,.66);border:1px solid #fff;box-shadow:var(--sh-md)}
.cx-feat.flip{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);padding:clamp(10px,1vw,12px) clamp(24px,3.4vw,48px) clamp(10px,1vw,12px) clamp(10px,1vw,12px)}
.cx-feat.flip .cx-feat-copy{order:2}
.cx-feat-copy{display:flex;flex-direction:column;gap:12px;padding:20px 0}
.cx-feat-copy h3{font-size:clamp(1.375rem,1.1rem + .9vw,1.875rem);line-height:1.15;letter-spacing:-.034em;font-weight:500;color:var(--ink);text-wrap:balance}
.cx-feat-copy>p{font-size:16px;line-height:1.66;color:var(--ink-2);text-wrap:pretty}
.cx-feat-copy>p.cp-build-n{font-size:13.5px;line-height:1.4;font-weight:600;color:var(--gold-ink)}
.cx-with{margin-top:4px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.7;color:var(--ink-3)}
.cx-with span{display:inline}
.cx-with span+span::before{content:"\00b7";margin:0 8px;color:var(--gold)}
.cx-feat .cx-stage{min-height:390px;border-radius:24px}
/* 01 register (a sheet) */
.cx-sheet .cx-sh-h,.cx-sheet .cx-sh-r{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,.85fr) minmax(0,.8fr);align-items:center;gap:10px;padding:0 14px}
.cx-sh-h{height:34px;background:#fbf9f4;border-bottom:1px solid var(--line);font-size:11px;font-weight:600;color:var(--ink-3)}
.cx-sh-r{min-height:46px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink);transition:opacity .4s var(--ease),transform .4s var(--ease),background-color .5s}
.cx-sh-r:nth-child(2){border-top:0}
.cx-sh-r>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-sh-r>span:first-child{font-weight:550}
.cx-sh-r .cx-ev{display:inline-flex;align-items:center;gap:5px;color:var(--ink-3)}
.cx-sh-r .cx-ev .i{width:13px;height:13px;color:var(--gold-deep);flex:none}
.js .cx-demo .cx-sh-r:not(.on){opacity:0;transform:translateY(6px)}
.cx-sh-r.roll{background:#fffbf1}
.cx-sh-r .sw{justify-items:start}
/* 02 watcher */
.cx-wmail{display:flex;align-items:center;gap:11px;margin:14px 14px 0;padding:12px 14px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.08),0 10px 22px -16px rgba(60,44,12,.4);transition:opacity .4s var(--ease),transform .45s var(--ease),box-shadow .4s}
.js .cx-demo .cx-wmail:not(.on){opacity:0;transform:translateY(-10px)}
.cx-wmail.flag{box-shadow:0 0 0 1.5px rgba(200,164,85,.7),0 10px 22px -14px rgba(140,109,44,.55)}
.cx-flagi{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--ink);color:#f3d48a;transition:opacity .3s,transform .35s var(--spring)}
.cx-flagi .i{width:14px;height:14px}
.js .cx-demo .cx-wmail:not(.flag) .cx-flagi{opacity:0;transform:scale(.6)}
.cx-wtag{display:inline-flex;align-items:center;height:20px;margin-left:6px;padding:0 7px;border-radius:6px;background:#f6f3ec;font-size:10.5px;font-weight:600;color:var(--ink-3);vertical-align:1px}
.cx-alertrow{display:flex;align-items:center;gap:10px;margin:10px 14px 0;padding:10px 12px;border-radius:12px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:500;transition:opacity .4s var(--ease),transform .45s var(--ease)}
.cx-alertrow .i{width:14px;height:14px;color:#f0d698;flex:none}
.js .cx-demo .cx-alertrow:not(.on){opacity:0;transform:translateY(8px)}
.cx-log2{margin:12px 14px 14px;border-radius:12px;box-shadow:0 0 0 1px var(--line-2);overflow:hidden}
.cx-log2-h{display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;background:#fbf9f4;border-bottom:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--ink-3)}
.cx-log2-h .i{width:13px;height:13px;color:var(--gold-deep)}
.cx-log2-r{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink);transition:opacity .4s var(--ease),background-color .6s}
.cx-log2-r:nth-child(2){border-top:0}
.cx-log2-r b{font-weight:550;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-log2-r time{font-size:11.5px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.cx-log2-r .tk{width:16px;height:16px;box-shadow:none}
.js .cx-demo .cx-log2-r.new:not(.on){opacity:0}
.cx-log2-r.new.on{background:#fffbf1}
/* 03 dashboard */
.cx-dash-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px}
.cx-dcol{display:flex;flex-direction:column;gap:6px;min-height:212px;padding:9px;border-radius:12px;background:#faf8f3;box-shadow:inset 0 0 0 1px rgba(29,29,31,.05)}
.cx-dh{display:flex;align-items:center;gap:6px;padding:0 2px 3px;font-size:11.5px;font-weight:600;color:var(--ink-2)}
.cx-dh i{width:7px;height:7px;border-radius:50%;background:#d8d1c3}
.cx-dh i.g{background:var(--gold)}
.cx-dh i.k{background:var(--ink)}
.cx-ditem{display:flex;flex-direction:column;gap:2px;padding:8px 9px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.08),0 4px 10px -7px rgba(60,44,12,.4);font-size:12px;line-height:1.3;will-change:transform;transition:opacity .4s var(--ease),transform .45s var(--ease),box-shadow .3s}
.cx-ditem b{font-weight:600;text-wrap:balance}
.cx-ditem>span{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-ditem .sw{font-size:11px;color:var(--ink-3)}
.cx-ditem .sw-b{color:var(--gold-ink);font-weight:600}
.js .cx-demo .cx-ditem:not(.on){opacity:0;transform:translateY(6px)}
.cx-ditem.moving{z-index:3;box-shadow:0 0 0 1.5px var(--gold),0 14px 24px -12px rgba(140,109,44,.6)}
.cx-ditem.landed{box-shadow:0 0 0 1px rgba(200,164,85,.55),0 4px 10px -7px rgba(60,44,12,.4)}
.cx-ditem.late b{color:var(--ink)}
.cx-edit{display:flex;align-items:center;gap:9px;margin:0 12px 12px;padding:9px 12px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--line-2);font-size:12px;color:var(--ink-2);transition:opacity .35s var(--ease),box-shadow .3s}
.cx-edit .i{width:13px;height:13px;color:var(--gold-deep);flex:none}
.cx-edit b{font-weight:600;color:var(--ink)}
.js .cx-demo .cx-edit:not(.on){opacity:0}
/* 04 assistants */
.cx-tabs{display:flex;gap:4px;padding:10px 12px 0;overflow:hidden}
.cx-tabs span{flex:none;height:28px;padding:0 10px;border-radius:8px;font-size:11.5px;font-weight:550;line-height:28px;color:var(--ink-3);white-space:nowrap}
.cx-tabs span.on{background:var(--gold-wash);color:var(--gold-ink);box-shadow:inset 0 0 0 1px rgba(200,164,85,.38)}
.cx-msgs{display:flex;flex-direction:column;gap:9px;padding:12px 14px 14px}
.cx-msg{max-width:86%;padding:9px 12px;border-radius:14px;font-size:12.5px;line-height:1.45;transition:opacity .35s var(--ease),transform .4s var(--ease)}
.cx-msg.out{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:5px}
.cx-msg.in{align-self:flex-start;background:#f4f0e7;color:var(--ink);border-bottom-left-radius:5px}
.cx-msg.in .i{display:inline-block;width:12px;height:12px;margin-right:5px;vertical-align:-1px;color:var(--gold-ink)}
.js .cx-demo .cx-msg:not(.on){opacity:0;transform:translateY(8px)}
.cx-draft{align-self:stretch;display:flex;flex-direction:column;gap:7px;padding:11px 12px;border-radius:12px;background:var(--gold-wash);box-shadow:inset 0 0 0 1px rgba(200,164,85,.38);transition:opacity .4s var(--ease),transform .45s var(--ease)}
.cx-draft b{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--gold-ink)}
.cx-draft b .i{width:12px;height:12px}
.cx-draft>i{display:block;height:7px;border-radius:4px;background:rgba(200,164,85,.32)}
.cx-draft>i.s{width:64%}
.cx-draft-f{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:11.5px;font-weight:550;color:var(--ink-2)}
.cx-draft-f .i{width:12px;height:12px;color:var(--gold-deep)}
.js .cx-demo .cx-draft:not(.on){opacity:0;transform:translateY(8px)}
/* safety net: the alert plays step by step, with three retry dots */
.cx-net-vis{position:relative;display:flex;flex-direction:column;gap:12px}
.cx-net-vis .replay{align-self:flex-end}
.cx-net-vis .cp-step,.cx-net-vis .cp-out{transition:opacity .4s var(--ease),transform .45s var(--ease)}
.js .cx-demo .cp-step:not(.on),.js .cx-demo .cp-out:not(.on){opacity:0;transform:translateY(6px)}
.cx-dots{display:inline-flex;gap:5px;margin-left:auto;padding-left:8px}
.cx-dots i{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px rgba(200,164,85,.18);transition:background-color .25s,transform .3s var(--spring)}
.js .cx-demo .cx-dots i:not(.on){background:#e6dcc6;transform:scale(.7)}
.cx-net-vis .cp-out{transition-property:opacity,transform}
/* delivery: heading on the left, a clean spec panel on the right */
.cx-deliver{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:32px clamp(40px,6vw,96px);align-items:start}
.cx-deliver-side{position:sticky;top:110px}
.cx-deliver .cp-spec{margin-top:0;padding:8px 28px;border-radius:26px;box-shadow:var(--sh-md)}
.cx-deliver .cp-spec-row{grid-template-columns:150px minmax(0,1fr);align-items:baseline}
.cx-deliver .cp-spec-k{display:flex;align-items:center;gap:10px}
.cx-ki{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--gold-wash);color:var(--gold-ink);box-shadow:inset 0 0 0 1px rgba(200,164,85,.3);align-self:center}
.cx-ki .i{width:14px;height:14px}
.cx-deliver-side .cx-calm{margin-top:28px}

/* ---------- 8. index ---------- */
.cx-proof{position:relative;margin-top:clamp(48px,6vw,80px);width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.cx-proof::before,.cx-proof::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(140,109,44,0),rgba(140,109,44,.26) 8%,rgba(140,109,44,.26) 92%,rgba(140,109,44,0))}
.cx-proof::before{top:0}
.cx-proof::after{bottom:0}
.cx-proof .mq-view{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.cx-proof .cl{height:92px;padding:0 clamp(26px,3.2vw,44px)}
.cx-proof .cl-cct img{height:54px}
.cx-rows{display:flex;flex-direction:column;gap:clamp(22px,2.8vw,36px)}
.cx-row{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:clamp(24px,4vw,64px);align-items:center;padding:12px clamp(28px,3.6vw,52px) 12px 12px;border-radius:34px;background:rgba(255,255,255,.66);border:1px solid #fff;box-shadow:var(--sh-md);transition:box-shadow .6s var(--ease)}
.cx-row:hover{box-shadow:var(--sh-lg)}
.cx-row.flip{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);padding:12px 12px 12px clamp(28px,3.6vw,52px)}
.cx-row.flip .cx-row-vis{order:2}
.cx-row-vis{min-height:430px;border-radius:26px}
.cx-row-copy{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px 0}
.cx-row-tag{font-size:13.5px;font-weight:550;color:var(--gold-ink)}
.cx-row-t{font-size:clamp(1.625rem,1.25rem + 1.2vw,2.375rem);line-height:1.1;letter-spacing:-.04em;font-weight:500;color:var(--ink);text-wrap:balance}
.cx-row-t a{transition:color .25s}
.cx-row-t a:hover{color:var(--gold-ink)}
.cx-row-m{font-size:17px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.cx-row-who{display:flex;align-items:center;gap:9px;font-size:14px;line-height:1.45;color:var(--ink-3)}
.cx-row-who .i{width:16px;height:16px;color:var(--gold-deep);flex:none}
.cx-row-copy .cx-ticks{margin:6px 0 8px;padding-top:16px;border-top:1px solid var(--line);align-self:stretch}
.cx-row-copy .cx-ticks li{font-size:15px}
/* index mini screens */
.cx-reg{position:relative}
.cx-reg-row{display:flex;align-items:center;gap:11px;min-height:52px;padding:8px 14px;border-top:1px solid var(--line);transition:opacity .4s var(--ease),transform .45s var(--ease)}
.cx-reg-row:first-child{border-top:0}
.js .cx-demo .cx-reg-row:not(.on){opacity:0;transform:translateY(-8px)}
.cx-reg-row .cx-chip{transition:transform .3s var(--spring),background-color .3s,color .3s}
.cx-reg-row .cx-chip.ping{background:var(--ink);color:#fff;box-shadow:none}
.cx-toast2{position:absolute;right:14px;bottom:-16px;z-index:3;display:flex;align-items:center;gap:10px;width:min(300px,86%);padding:11px 13px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.08),0 22px 40px -22px rgba(60,44,12,.6);transition:opacity .4s var(--ease),transform .5s var(--spring)}
.cx-toast2 .cx-mi{width:30px;height:30px}
.cx-toast2 .cx-mt b{font-size:12.5px}
.js .cx-demo .cx-toast2:not(.on){opacity:0;transform:translateY(14px)}
.cx-route{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:9px 12px;border-radius:13px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.07),0 10px 22px -18px rgba(60,44,12,.5)}
.cx-rsys{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;white-space:nowrap}
.cx-rsys .cx-bico{width:26px;height:26px;border-radius:8px}
.cx-rsys img{width:15px;height:15px}
.cx-rpipe{position:relative;flex:1;height:2px;min-width:20px;border-radius:2px;background:repeating-linear-gradient(90deg,#d9c79c 0 5px,transparent 5px 9px)}
.cx-rpipe::after{content:"";position:absolute;right:-1px;top:50%;width:6px;height:6px;border-top:2px solid #c8a455;border-right:2px solid #c8a455;transform:translateY(-50%) rotate(45deg)}
.cx-rpipe i{position:absolute;left:0;top:50%;width:22px;height:4px;margin-top:-2px;border-radius:4px;background:linear-gradient(90deg,rgba(200,164,85,0),#d4ad55);opacity:0}
.cx-rpipe.on i{animation:cxPipe 1.1s cubic-bezier(.5,0,.4,1) 2}
@keyframes cxPipe{0%{opacity:0;left:0}20%{opacity:1}80%{opacity:1}100%{opacity:0;left:calc(100% - 22px)}}
.cx-row-vis .cx-night{height:26px;font-size:11.5px}
.cx-call{display:flex;align-items:center;gap:11px;padding:12px 14px;border-bottom:1px solid var(--line)}
.cx-call .cx-mi{width:32px;height:32px}
.cx-wave{display:flex;align-items:center;gap:3px;height:22px;margin-left:auto}
.cx-wave i{width:3px;border-radius:2px;background:#d9c79c;height:calc(var(--h) * 100%);transition:background-color .3s}
.cx-call.on .cx-wave i{background:var(--gold)}
.cx-consent{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--gold-ink);transition:opacity .3s,transform .3s var(--spring)}
.cx-consent .i{width:12px;height:12px}
.js .cx-demo .cx-consent:not(.on){opacity:0;transform:scale(.8)}
.cx-note{display:flex;flex-direction:column;gap:10px;padding:14px}
.cx-nsec{display:flex;flex-direction:column;gap:6px;transition:opacity .4s var(--ease),transform .45s var(--ease)}
.cx-nsec b{font-size:11.5px;font-weight:600;color:var(--ink-2)}
.cx-nsec i{display:block;height:7px;border-radius:4px;background:#efe9dd}
.cx-nsec i.s{width:58%}
.js .cx-demo .cx-nsec:not(.on){opacity:0;transform:translateY(6px)}
.cx-approve{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cx-btnmock{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:8px;background:var(--ink);color:#fff;font-size:12px;font-weight:550;transition:transform .15s var(--ease),background-color .3s}
.cx-btnmock .i{width:12px;height:12px;color:#f0d698}
.cx-btnmock.press{transform:scale(.92)}
.cx-filed{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--gold-ink);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.cx-filed .tk{width:16px;height:16px;box-shadow:none}
.js .cx-demo .cx-filed:not(.on){opacity:0;transform:translateX(-6px)}
/* calm prompt card (index), the homepage's "ask" card */
.cx-ask{margin-top:clamp(22px,2.8vw,36px);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:32px;padding:24px 28px 24px 24px;border-radius:28px;background:radial-gradient(60% 120% at 0% 50%,rgba(240,224,186,.5),rgba(240,224,186,0) 70%),rgba(255,255,255,.62);border:1px solid #fff;box-shadow:var(--sh-md)}
.cx-ask-slot{width:128px;height:100px;border-radius:18px;border:1.5px dashed rgba(140,109,44,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--gold-ink);font-size:12px;font-weight:500;background:rgba(255,255,255,.55)}
.cx-ask-slot .i{width:22px;height:22px}
.cx-ask-eye{font-size:13px;font-weight:550;color:var(--gold-ink)}
.cx-ask-t{margin:6px 0 8px;font-size:1.5rem;line-height:1.2;letter-spacing:-.03em;font-weight:500;color:var(--ink)}
.cx-ask-d{max-width:620px;font-size:15px;line-height:1.6;color:var(--ink-2)}
/* reviews: the homepage ring, full width with the active cards centred */
.cx-revs .rev-head{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:clamp(26px,3vw,34px)}
.cx-revs .rev-hrow{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 56px;width:100%}
.cx-revs .rev-lead{max-width:420px;padding-bottom:8px;font-size:var(--fs-lead);line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.cx-revs .rev-foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(100%,var(--grp,100%));margin:26px auto 0}
.cx-revs .rev-nav{display:flex;gap:10px;flex:none}
.round-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.85);border:1px solid var(--line-2);box-shadow:var(--sh-xs),inset 0 1px 0 #fff;color:var(--ink);transition:transform .4s var(--ease),border-color .3s,background-color .3s}
.round-btn:hover{transform:translateY(-1px);border-color:rgba(29,29,31,.2);background:#fff}
.round-btn:active{transform:scale(.96)}
.round-btn .i{width:18px;height:18px}
.cx-revs .rev-view{--fade:linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,.62) var(--pk,0px),#000 var(--edge,0px),#000 calc(100% - var(--edge,0px)),rgba(0,0,0,.62) calc(100% - var(--pk,0px)),rgba(0,0,0,0) 100%);position:relative;margin-inline:calc(50% - 50vw);overflow:hidden;padding:14px 0 80px;margin-top:-14px;margin-bottom:-64px;touch-action:pan-y;cursor:grab;-webkit-mask-image:var(--fade);mask-image:var(--fade)}
.cx-revs .rev-view.dragging{cursor:grabbing}
.cx-revs .rev-view:focus-visible{outline:none}
.cx-revs .rev-view:focus-visible::after{content:"";position:absolute;left:calc(var(--edge,0px) - 7px);right:calc(var(--edge,0px) - 7px);top:7px;bottom:73px;border-radius:31px;box-shadow:0 0 0 2px var(--ink);pointer-events:none}
.cx-revs .rev-track{--cw:420px;--gap:20px;display:flex;gap:var(--gap);width:max-content;will-change:transform}
.cx-revs .rev-card{flex:0 0 var(--cw);-webkit-user-select:none;user-select:none}

/* ---------- 9. breakpoints ---------- */
@media (min-width:1024px){
  .cx-story{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);column-gap:clamp(40px,5.5vw,88px)}
  .cx-step{display:contents}
  .cx-step-text{grid-column:1;grid-row:var(--r);min-height:58vh;display:flex;flex-direction:column;justify-content:center;padding-top:40px;padding-bottom:40px}
  .cx-step:not(.on) .cx-step-text{color:var(--ink-3)}
  .cx-step:not(.on) .cx-step-text h2,.cx-step:not(.on) .cx-step-text strong,.cx-step:not(.on) .cx-step-text a{color:var(--ink-3)}
  .cx-step-text,.cx-step-text h2{transition:color .35s}
  .cx-scene{grid-column:2;grid-row:1 / span 4;position:sticky;top:104px;align-self:start;height:min(560px,calc(100vh - 128px));opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s linear .35s}
  .cx-step.on .cx-scene{opacity:1;visibility:visible;transition-delay:0s}
}
@media (max-width:1023.98px){
  .cx-step+.cx-step{margin-top:64px}
  .cx-scene{margin-top:24px}
  .cx-glance{position:static}
  .cx-deliver-side{position:static}
}
@media (max-width:960px){
  .cx-row,.cx-row.flip{grid-template-columns:1fr;padding:10px 10px 4px}
  .cx-row.flip .cx-row-vis{order:0}
  .cx-row-copy{padding:18px clamp(14px,3vw,28px) 24px}
  .cx-row-vis{min-height:400px}
  .cx-feat,.cx-feat.flip{grid-template-columns:1fr;padding:10px 10px 10px}
  .cx-feat.flip .cx-feat-copy{order:0}
  .cx-feat-copy{padding:20px clamp(12px,3vw,28px) 6px}
}
@media (max-width:999.98px){
  .cx-map-body{grid-template-columns:1fr;gap:58px;max-width:540px;margin-inline:auto}
}
@media (max-width:940px){
  .cx-hero-grid,.cx-hsplit,.cx-intro-grid,.cx-next-grid,.cx-deliver{grid-template-columns:1fr}
  .cx-hero-grid{gap:22px}
  .cx-side{padding-bottom:0}
  .cx-head{grid-template-columns:1fr}
  .cx-head .cp-sub{justify-self:start}
  .cx-tcard{grid-template-columns:1fr}
  .cx-ask{grid-template-columns:1fr;gap:20px;padding:24px}
  .cx-ask .btn{justify-self:start}
  .cx-revs .rev-hrow{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (max-width:720px){
  .cx-hero{padding-top:104px}
  .cx-h1{font-size:clamp(2.125rem,9vw,2.75rem);line-height:1.06}
  .cx-ctas .btn{flex:1 1 auto;justify-content:space-between}
  .cx-stage{border-radius:22px;padding:56px 10px 12px}
  .cx-top{left:10px;right:10px;top:10px}
  .replay{height:40px;padding:0 14px 0 12px}
  .cx-map{padding:62px 10px 14px}
  .cx-map-body{gap:54px}
  .cx-way{display:none}
  .cx-recs li,.cx-log li{padding:6px 12px;min-height:42px}
  .cx-steps{padding:10px}
  .cx-twice{grid-template-columns:1fr;gap:14px}
  .cx-fields{padding:12px;gap:8px}
  .cx-mapcard .cx-mh,.cx-mapcard .cx-mr{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);padding:0 12px}
  .cx-arr{margin:0 3px}
  .cx-board .cx-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:8px}
  .cx-col{min-height:150px;padding:7px}
  .cx-board .dm-bar{flex-wrap:wrap;height:auto;min-height:40px;padding:8px 14px;row-gap:6px}
  .cx-board .cx-toast{margin-left:0}
  .cx-hand{grid-template-columns:1fr}
  .cx-step-text{padding-left:52px}
  .cx-dot{left:-52px;width:30px;height:30px;top:calc((clamp(1.75rem,1.3rem + 1.35vw,2.5rem) * 1.08 - 30px) / 2);font-size:12.5px}
  .cx-rail{left:14px}
  .cx-calm{padding:18px}
  .cx-calm .btn{width:100%;justify-content:space-between}
  .cx-glance.cs-glance{padding:20px 18px 8px}
  .cx-glance.cs-glance li{grid-template-columns:1fr;gap:2px}
  .cx-tcard{padding:30px 20px 26px;border-radius:28px}
  .cx-tq blockquote p{font-size:1.1875rem}
  .cx-links a{min-height:76px}
  .cx-remind{min-height:0}
  .cx-mails li{gap:10px;padding:10px 12px}
  .cx-mails .cx-mi{width:30px;height:30px}
  .cx-cad{padding:60px 16px 22px}
  .cx-cad-rail{padding:6px 0 0}
  .cx-cad-track{left:39px;right:auto;top:24px;bottom:24px;width:2px;height:auto}
  .cx-cad-fill{transform-origin:50% 0}
  .js .cx-demo .cx-cad-fill:not(.on){transform:scaleY(0)}
  .cx-cad-dot{left:50%!important;top:100%;transition:top 2.5s linear,opacity .3s}
  .js .cx-demo .cx-cad-dot:not(.on){top:0}
  .cx-cad-nodes{grid-template-columns:1fr;gap:14px}
  .cx-cad-node{display:grid;grid-template-columns:34px 22px 58px minmax(0,1fr) auto;align-items:center;gap:12px;text-align:left}
  .cx-cad-node .cp-knob,.cx-cad-node .cp-chip,.cx-cad-mail{margin:0}
  .cx-cad-node .cp-knob{grid-column:2;grid-row:1}
  .cx-cad-mail{grid-column:1;grid-row:1;width:30px;height:30px}
  .cx-feat .cx-stage{min-height:0}
  .cx-sheet .cx-sh-h,.cx-sheet .cx-sh-r{grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr) minmax(0,.75fr) 22px;gap:8px;padding:0 12px;font-size:11.5px}
  .cx-sh-h span:nth-child(4){font-size:0}
  .cx-sh-r .cx-ev{font-size:0;gap:0}
  .cx-sh-r>span{white-space:normal}
  .cx-dash-cols{grid-template-columns:1fr;gap:6px;padding:10px}
  .cx-dcol{min-height:0}
  .cx-tabs{flex-wrap:wrap;row-gap:4px}
  .cx-deliver .cp-spec{padding:4px 20px}
  .cx-deliver .cp-spec-row{grid-template-columns:1fr;gap:6px}
  .cx-proof .cl{height:72px;padding:0 24px}
  .cx-row-vis{min-height:0}
  .cx-row-copy .btn{width:100%;justify-content:space-between}
  .cx-route{gap:7px;padding:8px 10px}
  .cx-rsys{font-size:11.5px;gap:5px}
  .cx-rsys .cx-bico{width:24px;height:24px}
  .cx-toast2{position:relative;right:auto;bottom:auto;width:auto;margin:10px 0 0}
  .cx-ask .btn{width:100%;justify-content:space-between}
  .cx-revs .rev-card{padding:24px 22px 22px}
  .cx-revs .review-quote{font-size:16px}
}
@media (max-width:420px){
  .cx-mapcard .cx-cell small{font-size:10.5px}
  .cx-mapcard .cx-cell b{font-size:12px}
  .cx-cad-node{grid-template-columns:28px 22px 44px minmax(0,1fr) auto;gap:9px}
  .cx-cad-mail{width:28px;height:28px}
  .cx-cad-track{left:36px}
}

/* ---------- 10. reduced motion: the script shows every end frame; nothing moves on its own ---------- */
@media (prefers-reduced-motion:reduce){
  .cx-row:hover{box-shadow:var(--sh-md)}
  .cx-demo .typing::after{display:none}
}

/* ---------- 11. additions after round 1 ---------- */
.cx-maptitle{display:inline-flex;align-items:center;gap:10px;min-width:0;font-size:13px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.cx-maptitle b{font-weight:600}
.cx-maptitle .dm-chip{margin-left:0}
.cx-mute{font-weight:450;color:var(--ink-3)}
.cx .dm-bar .dm-meta+.dm-ex{margin-left:2px}
.cx-mg{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--gold-fill);color:#fff;transition:transform .28s var(--spring)}
.cx-mg .i{width:11px;height:11px}
.js .cx-demo .cx-mg:not(.on){transform:scale(0)}

/* ---------- 12. round 1 fixes ---------- */
/* the merged deal shows a small round merge mark instead of a pill that covered the name */
.cx-deal .cx-mgb{position:absolute;right:6px;top:6px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--gold-fill);color:#fff;box-shadow:0 0 0 2px #fff;transition:transform .3s var(--spring)}
.cx-mgb .i{width:10px;height:10px}
.js .cx-demo .cx-deal:not(.on) .cx-mgb{transform:scale(0)}
.cx-deal:has(.cx-mgb) b{padding-right:22px}
/* a top row that sits in the flow (the wide map) and one that wraps on phones (the cadence) */
.cx-map{padding-top:18px}
.cx-map .cx-top.cx-top-flow{position:relative;left:auto;right:auto;top:auto;flex-wrap:wrap;row-gap:10px;margin-bottom:26px}
/* index: the CRM row's title line and the systems with their roles */
.cx-rhead{display:flex;align-items:center;gap:10px;margin:2px 2px 10px;font-size:13px;letter-spacing:-.01em;color:var(--ink)}
.cx-rhead b{font-weight:600}
.cx-rhead .dm-chip{margin-left:0}
.cx-rsys>span:last-child{display:flex;flex-direction:column;line-height:1.2}
.cx-rsys b{font-weight:600}
.cx-rsys small{font-size:10.5px;font-weight:500;color:var(--ink-3)}
/* index: CallNote's drafted note and review row */
.cx-call .cx-consent{margin-left:auto}
.cx-call .cx-wave{margin-left:14px}
.cx-nhead{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--gold-ink);transition:opacity .35s var(--ease)}
.cx-nhead .i{width:12px;height:12px}
.js .cx-demo .cx-nhead:not(.on){opacity:0}
.cx-revrow{display:flex;align-items:center;gap:11px;padding:10px 14px;border-top:1px solid var(--line);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.cx-revrow .cx-mi{width:30px;height:30px}
.cx-revrow .cx-btnmock{flex:none}
.js .cx-demo .cx-revrow:not(.on){opacity:0;transform:translateY(6px)}
/* index: the reminder toast sits under the register instead of over it */
.cx-reg{display:flex;flex-direction:column}
.cx-toast2{position:relative;right:auto;bottom:auto;align-self:flex-end;margin:12px 8px 0 0}
@media (min-width:1000px) and (max-width:1199.98px){
  .cx-map .cx-recs .av,.cx-map .cx-log .av{display:none}
  .cx-map-body{gap:40px}
}
@media (min-width:1024px) and (max-width:1279.98px){
  .cx-twice .dm-meta{display:none}
}
@media (min-width:941px) and (max-width:1199.98px){
  .cx-hsplit{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .cx-hsplit .cp-h1{font-size:clamp(2.75rem,1rem + 3.7vw,4.25rem)}
}
@media (max-width:720px){
  .cx-map{padding-top:14px}
  .cx-map .cx-top.cx-top-flow{margin-bottom:18px}
  .cx-cad{padding-top:16px}
  .cx-cad .cx-top.cx-top-wrap{position:relative;left:auto;right:auto;top:auto;flex-wrap:wrap;row-gap:10px;margin:0 0 18px}
  .cx-cad .cx-cad-ob{white-space:normal}
  .cx-call .cx-wave{display:none}
}
@media (max-width:480px){
  .cx-sheet .dm-dots{display:none}
  .cx-wmail .cx-mt b{white-space:normal}
  .cx-log2-r{flex-wrap:wrap;row-gap:2px}
  .cx-log2-r b{flex:1 1 100%;white-space:normal}
  .cx-log2-r time{margin-right:auto}
  .cx-rsys .cx-bico{display:none}
  .cx-rhead{font-size:12.5px}
}
@media (max-width:420px){
  .cx-hero .trust-avs .av:nth-child(n+4){display:none}
}

/* ---------- 13. tap targets: breadcrumb links and row titles are at least 40px tall ---------- */
.cx .crumbs{margin-top:-9px;margin-bottom:13px}
.cx .crumbs a{display:inline-flex;align-items:center;min-height:40px}
.cx-row-t a{display:inline-block;padding:6px 0}
@media (max-width:720px){.cx .crumbs{margin-bottom:7px}}

/* ---------- 14. round 2 fixes ---------- */
/* register: long obligation names wrap instead of cutting off */
.cx-sh-r>span:first-child{white-space:normal;line-height:1.3;padding:6px 0}
@media (min-width:961px) and (max-width:1199.98px){
  .cx-sheet .cx-sh-h,.cx-sheet .cx-sh-r{grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr) minmax(0,.8fr) minmax(0,.75fr);gap:8px}
}
/* the merged deal's mark sits on the second line, so the name keeps its room in narrow columns */
.cx-deal .cx-mgb{top:auto;bottom:7px}
.cx-deal:has(.cx-mgb) b{padding-right:0}
.cx-deal:has(.cx-mgb)>span:not(.cx-mgb){padding-right:22px}
/* the reviews pill keeps to one line in a narrow hero column */
@media (max-width:1199.98px){.cx-hero .trust-avs .av:nth-child(n+4){display:none}}

/* ---------- 15. index hero (Ben, 26 Oct): copy grouped in one column, a fan of the real screens beside it ---------- */
.cx-ihero{padding-top:clamp(112px,10.5vw,148px)}
.cx-ihero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px clamp(40px,5vw,80px);align-items:center}
.cx-ihero .cx-h1{font-size:clamp(2.75rem,1.3rem + 3.7vw,4.5rem);line-height:1}
.cx-ihero .cx-h1 .nb{display:block}
.cx-ihero .cx-side-lead{margin-top:20px;max-width:500px}
.cx-ihero .cx-ctas{margin-top:28px;gap:14px 16px}
.cx-ihero .cx-proof{margin-top:clamp(44px,5vw,72px)}
.cx-fan{position:relative;margin:0;min-width:0}
/* the end frame: the sync on top, the register and the call note side by side under it, each tipped a little.
   They start stacked in the middle and fan out to here */
.cx-fan-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"top top" "a b";column-gap:16px;row-gap:14px;padding:6px 4px}
.cx-fan-stage::before{content:"";position:absolute;left:-3%;right:-3%;top:-12%;bottom:-8%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(233,203,138,.5),rgba(233,203,138,.14) 62%,rgba(233,203,138,0))}
.cx-fan-stage::after{content:"";position:absolute;left:-2%;right:-2%;top:-8%;bottom:-4%;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(122,93,34,.14) 1px,transparent 1.2px);background-size:18px 18px;-webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent);mask-image:radial-gradient(closest-side,#000 30%,transparent)}
.cx-fan .cx-fc{position:relative;min-width:0;transition:transform .95s var(--spring),opacity .45s var(--ease);will-change:transform}
.cx-fan .cx-fc2{grid-area:top;justify-self:center;width:84%;z-index:1;transform:rotate(1.2deg)}
.cx-fan .cx-fc1{grid-area:a;align-self:start;z-index:2;transform:rotate(-2.4deg)}
.cx-fan .cx-fc3{grid-area:b;align-self:start;margin-top:18px;z-index:3;transform:rotate(2deg)}
.js .cx-demo .cx-fc2:not(.on){opacity:0;transform:translateY(22%) scale(.92)}
.js .cx-demo .cx-fc1:not(.on){opacity:0;transform:translate(28%,-26%) scale(.9)}
.js .cx-demo .cx-fc3:not(.on){opacity:0;transform:translate(-28%,-34%) scale(.9)}
.cx-fan .dm-bar{height:36px}
.cx-fan .cx-reg-row{min-height:46px;padding:7px 12px;gap:10px}
.cx-fan .cx-mi{width:28px;height:28px;border-radius:8px}
.cx-fan .cx-mi .i{width:14px;height:14px}
.cx-fan .cx-mt b{font-size:12.5px}
.cx-fan .cx-mt span{font-size:11.5px}
.cx-fan .cx-chip{height:22px;padding:0 8px;font-size:11px}
.cx-fan .cx-route{margin:10px 12px 4px;padding:7px 10px;box-shadow:inset 0 0 0 1px var(--line);background:#fbf9f4}
.cx-fan .cx-rsys{font-size:11.5px}
.cx-fan .cx-rsys .cx-bico{width:24px;height:24px}
.cx-fan .cx-log li{min-height:42px;padding:6px 12px}
.cx-fan .cx-call{padding:10px 12px}
.cx-fan .cx-note{padding:10px 12px 12px;gap:8px}
.cx-fn{margin-left:auto;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 7px;border-radius:var(--r-pill);background:#2b2926;color:#f3e3bb;font-size:11px;font-weight:550;white-space:nowrap}
.cx-fn .i{width:11px;height:11px}
.cx-fan-foot{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.cx-fan-cap{font-size:12.5px;line-height:1.4;color:var(--gold-ink)}
.cx-fan .cx-mt b{white-space:normal;line-height:1.25}
@media (min-width:941px) and (max-width:1199.98px){
  .cx-ihero-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .cx-fan .cx-fc2{width:94%}
}
@media (max-width:940px){
  .cx-ihero-grid{grid-template-columns:1fr;gap:44px}
  .cx-fan{width:100%;max-width:620px}
}
@media (max-width:600px){
  .cx-fan-stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "a" "b";row-gap:12px;padding:4px 2px}
  .cx-fan .cx-fc2{width:100%;transform:rotate(1deg)}
  .cx-fan .cx-fc1{width:94%;justify-self:start;transform:rotate(-1.6deg)}
  .cx-fan .cx-fc3{width:94%;justify-self:end;margin-top:0;transform:rotate(1.4deg)}
  .js .cx-demo .cx-fc1:not(.on),.js .cx-demo .cx-fc2:not(.on),.js .cx-demo .cx-fc3:not(.on){opacity:0;transform:translateY(22px) scale(.96)}
  .cx-ihero .cx-ctas .trust{flex:1 1 100%;justify-content:center}
}

/* Ben, 26 Oct: no floating column with empty space above it. On the CRM page the heading runs wide and the
   meta line, buttons and review sit right under it in one group, then the system map follows */
.cx-hero-stack .cx-hero-grid{grid-template-columns:1fr;align-items:start;gap:22px}
.cx-hero-stack .cx-h1{max-width:1000px}
.cx-hero-stack .cx-side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px 16px;padding-bottom:0}
.cx-hero-stack .cx-meta{flex-basis:100%;margin-bottom:2px}
.cx-hero-stack .cx-ctas{display:flex;flex-wrap:wrap;gap:12px}
/* QA, 26 Oct: at 1024 the merge mark's room cut "Refinance" short. The mark sits on the card's corner now, like a badge, so both lines keep the full width */
.cx-deal .cx-mgb{top:-6px;right:-6px;bottom:auto}
.cx-deal:has(.cx-mgb) b,.cx-deal:has(.cx-mgb)>span:not(.cx-mgb){padding-right:0}
/* the reminder toast's second line wraps instead of cutting off */
.cx-toast2 .cx-mt span{white-space:normal;text-wrap:balance}

/* Ben, 26 Oct: the Hunt & Hawk sync was two-way and ran about four times a day. Its screens carry an arrow at each
   end, and the hero map sends a pulse back from HubSpot to Finsure once HubSpot has caught up */
.cx-two .wires .w-base{marker-start:url(#m-arr-s)}
.cx-demo .wires g.rev .w-dot,.cx-demo .wires g.rev .w-glow{stroke-dashoffset:-100}
.cx-demo .wires g.rev.pulse .w-dot{stroke-dashoffset:7}
.cx-demo .wires g.rev.pulse .w-glow{stroke-dashoffset:9}
.cx-two .cx-rpipe::before{content:"";position:absolute;left:-1px;top:50%;width:6px;height:6px;border-bottom:2px solid #c8a455;border-left:2px solid #c8a455;transform:translateY(-50%) rotate(45deg)}
.cx-arr em{position:absolute;left:-1px;top:50%;width:6px;height:6px;border-bottom:2px solid #c8a455;border-left:2px solid #c8a455;border-radius:1px;transform:translateY(-50%) rotate(45deg)}

/* facts panel, redesigned 29 Oct 2026 (Ben: "this section is really ugly ... change it to look much more beautiful"):
   the heading sits above, and each fact is its own card in a grid (three across, two on tablets, one on phones) */
.cx-deliver{grid-template-columns:1fr;gap:clamp(26px,3vw,38px)}
.cx-deliver-side{position:static;max-width:680px}
.cx-deliver .cp-spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.cx-deliver .cp-spec-row{display:flex;flex-direction:column;gap:12px;padding:22px 22px 24px;border:0;border-radius:24px;background:rgba(255,255,255,.86);box-shadow:var(--sh-md)}
.cx-deliver .cp-spec-row:first-child{border-top:0}
.cx-deliver .cp-spec-k{display:flex;align-items:center;gap:11px;font-size:13.5px;font-weight:600;color:var(--gold-ink)}
.cx-deliver .cp-spec-v{font-size:15.5px;line-height:1.55;color:var(--ink)}
.cx-deliver .cx-ki{width:36px;height:36px;border-radius:50%;background:linear-gradient(160deg,var(--gold-wash),var(--gold-tint));box-shadow:inset 0 0 0 1px rgba(200,164,85,.34)}
.cx-deliver .cx-ki .i{width:15px;height:15px}
@media (max-width:999.98px){.cx-deliver .cp-spec{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cx-deliver .cp-spec{grid-template-columns:1fr;gap:10px}.cx-deliver .cp-spec-row{padding:18px 18px 20px;gap:10px}}
/* the last card stretches to fill its row, so there's never an empty gap at the end */
@media (min-width:1000px){
  .cx-deliver .cp-spec-row:last-child:nth-child(3n+2){grid-column:span 2}
  .cx-deliver .cp-spec-row:last-child:nth-child(3n+1){grid-column:1/-1}
}
@media (min-width:641px) and (max-width:999.98px){
  .cx-deliver .cp-spec-row:last-child:nth-child(odd){grid-column:1/-1}
}