/* NorthOps homepage: example CRM app (round 7). Mirrors the rebuilt /demo/ CRM (board-style design language in NorthOps' own
   identity: light workspace sidebar, white board sheet, view tabs, kanban, full-cell status, widgets) at homepage scale.
   GENERATED: edit ~/NorthOps-flagship/tools/crm_css_src.css and run tools/build_crm_css.py ("calc(12*var(--u))" = 12 canvas pixels).
   The app is laid out on a 1120 x 700 canvas (390 x 488 on phones); --u is one canvas pixel, so the whole app scales with the device.
   JS (crm-story.js) sets the story variables on .crm-device; the defaults here are each screen's finished state (static / no JS). */
/* round 16: flagship.css pins the device to its aspect ratio until this file applies (no layout shift); restore the original sizing */
.crm-device{min-height:auto}
.crm-app{--u:calc(100cqw / 1120);--ink:#1d1d1f;--ink2:#424245;--ink3:#6e6e73;--line:#e8e8ed;--mist:#f5f5f7;
  --blue:#2f6bd3;--purple:#7152c4;--rose:#b8456f;--teal:#11797f;--amber:#a86207;--green:#1b7f4a;--red:#c0363e;--slate:#5d6b7e;--grey:#6b7079;--indigo:#4b57c8;
  position:absolute;inset:0;display:grid;grid-template-columns:calc(196*var(--u)) 1fr;overflow:hidden;border-radius:18px;
  background:#f2f2f5;color:var(--ink);font-size:calc(13*var(--u));line-height:1.42;letter-spacing:-.004em;box-shadow:0 0 0 1px rgba(0,0,0,.07);
  clip-path:inset(0 calc((1 - var(--o)) * 30%) round 18px)}
.crm-app svg{flex:none}
.crm-app b{font-weight:600}
.crm-app small{font-size:inherit}
.crm-app ul{list-style:none;margin:0;padding:0}
/* workspace sidebar (light) */
.ca-side{color:var(--ink2);padding:calc(14*var(--u)) calc(10*var(--u)) calc(12*var(--u));display:flex;flex-direction:column;gap:calc(2*var(--u));min-width:0}
.ca-brand{display:flex;align-items:center;gap:calc(9*var(--u));padding:calc(2*var(--u)) calc(6*var(--u)) calc(10*var(--u));color:var(--ink)}
.ca-brand svg{width:calc(20*var(--u));height:calc(20*var(--u));color:var(--ink)}
.ca-brand span{display:grid;font-size:calc(13.5*var(--u));font-weight:650;letter-spacing:-.02em;line-height:1.2}
.ca-brand small{font-size:calc(10*var(--u));font-weight:450;letter-spacing:0;color:var(--ink3)}
.ca-ws{display:flex;align-items:center;gap:calc(8*var(--u));padding:calc(8*var(--u)) calc(9*var(--u));margin-bottom:calc(6*var(--u));border-radius:calc(10*var(--u));background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05),0 0 0 .5px rgba(0,0,0,.06)}
.ca-ws i{display:grid;place-items:center;width:calc(24*var(--u));height:calc(24*var(--u));border-radius:calc(7*var(--u));background:var(--ink);color:#fff;font-style:normal;font-size:calc(9.5*var(--u));font-weight:700;flex:none}
.ca-ws b{display:block;font-size:calc(11.5*var(--u));line-height:1.25}
.ca-ws small{display:block;font-size:calc(9.5*var(--u));color:var(--ink3)}
.ca-lbl{font-size:calc(10*var(--u));font-weight:600;color:var(--ink3);padding:calc(8*var(--u)) calc(9*var(--u)) calc(3*var(--u))}
.ca-nav{display:flex;align-items:center;gap:calc(9*var(--u));height:calc(32*var(--u));padding:0 calc(9*var(--u));border-radius:calc(8*var(--u));font-size:calc(12*var(--u));font-weight:500;color:var(--ink2);transition:background-color .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease)}
.ca-nav svg{width:calc(15*var(--u));height:calc(15*var(--u));color:var(--ink3)}
.ca-nav em{margin-left:auto;font-style:normal;font-size:calc(10*var(--u));font-weight:600;min-width:calc(20*var(--u));text-align:center;background:var(--ink);color:#fff;border-radius:99px;padding:0 calc(6*var(--u));line-height:calc(17*var(--u));font-variant-numeric:tabular-nums}
.ca-sample{margin-top:auto;font-size:calc(10*var(--u));color:var(--ink3);padding:0 calc(9*var(--u))}
/* the current tab: a class on the six nav items only (an attribute selector on the device made every switch restyle the whole app) */
.ca-nav.cur{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.05),0 0 0 .5px rgba(0,0,0,.06)}
/* the white board sheet: crumb bar and the example strip */
.ca-main{position:relative;display:flex;flex-direction:column;min-width:0;margin:calc(8*var(--u)) calc(8*var(--u)) calc(8*var(--u)) 0;background:#fff;border-radius:calc(14*var(--u));box-shadow:0 1px 2px rgba(0,0,0,.05),0 0 0 .5px rgba(0,0,0,.06);overflow:hidden}
.ca-top{display:flex;align-items:center;gap:calc(8*var(--u));height:calc(42*var(--u));padding:0 calc(16*var(--u)) 0 calc(20*var(--u));border-bottom:1px solid var(--line);flex:none;font-size:calc(11.5*var(--u));color:var(--ink3)}
.ca-crumb{white-space:nowrap}
.ca-title{display:grid;color:var(--ink);font-weight:600}
.ca-title span{grid-area:1/1;opacity:0;transition:opacity .3s var(--ease)}
.ca-title .cur{opacity:1}
.ca-chip{margin-left:auto;font-size:calc(10*var(--u));font-weight:600;color:var(--ink2);background:var(--mist);border-radius:99px;padding:calc(3*var(--u)) calc(9*var(--u))}
.ca-cta{font-size:calc(10.5*var(--u));font-weight:550;color:#fff;background:#1f5fd1;border-radius:99px;padding:calc(5*var(--u)) calc(11*var(--u))}
.ca-av{display:grid;place-items:center;width:calc(26*var(--u));height:calc(26*var(--u));border-radius:50%;background:#3d4a5c;color:#fff;font-size:calc(10*var(--u));font-weight:650}
.ca-strip{flex:none;padding:calc(6*var(--u)) calc(20*var(--u));border-bottom:1px solid var(--line);background:#fbfbfd;color:var(--ink3);font-size:calc(10.5*var(--u))}
.ca-strip b{margin-right:calc(4*var(--u));color:var(--ink2)}
.ca-view{position:relative;flex:1;min-height:0}
/* screens: stacked, crossfaded by --v0..--v5. The .001 floor keeps every screen painted (invisibly), so a crossfade never waits
   on a first raster of the next screen (it dropped a frame mid-scroll in round 7) */
.ca-scr{will-change:opacity;position:absolute;inset:0;padding:calc(16*var(--u)) calc(20*var(--u)) calc(14*var(--u));display:flex;flex-direction:column;gap:calc(11*var(--u));overflow:hidden}
.ca-scr[data-s="0"]{opacity:max(var(--v0),.001);translate:0 calc((1 - var(--v0)) * calc(10*var(--u)))}
.ca-scr[data-s="1"]{opacity:max(var(--v1),.001);translate:0 calc((1 - var(--v1)) * calc(10*var(--u)))}
.ca-scr[data-s="2"]{opacity:max(var(--v2),.001);translate:0 calc((1 - var(--v2)) * calc(10*var(--u)))}
.ca-scr[data-s="3"]{opacity:max(var(--v3),.001);translate:0 calc((1 - var(--v3)) * calc(10*var(--u)))}
.ca-scr[data-s="4"]{opacity:max(var(--v4),.001);translate:0 calc((1 - var(--v4)) * calc(10*var(--u)))}
.ca-scr[data-s="5"]{opacity:max(var(--v5),.001);translate:0 calc((1 - var(--v5)) * calc(10*var(--u)))}
.ca-head{flex:none;display:flex;align-items:flex-start;gap:calc(12*var(--u))}
.ca-head > div{flex:1;min-width:0}
.ca-head h3{margin:0;font-size:calc(21*var(--u));font-weight:650;letter-spacing:-.028em;line-height:1.15}
.ca-head p{margin-top:calc(3*var(--u));color:var(--ink3);font-size:calc(11.5*var(--u));max-width:calc(560*var(--u))}
.ca-st{font-style:normal;font-size:calc(9.5*var(--u));font-weight:600;color:var(--ink2);background:var(--mist);border-radius:99px;padding:calc(2*var(--u)) calc(8*var(--u));white-space:nowrap}
.ca-tabs{flex:none;display:flex;gap:calc(2*var(--u));border-bottom:1px solid var(--line);margin-top:calc(-2*var(--u))}
.ca-tabs span{position:relative;display:flex;align-items:center;gap:calc(6*var(--u));padding:0 calc(10*var(--u)) calc(8*var(--u));font-size:calc(11.5*var(--u));font-weight:550;color:var(--ink3)}
.ca-tabs span svg{width:calc(13*var(--u));height:calc(13*var(--u))}
.ca-tabs span.on{color:var(--ink)}
.ca-tabs span.on::after{content:"";position:absolute;left:calc(8*var(--u));right:calc(8*var(--u));bottom:-1px;height:calc(2*var(--u));border-radius:calc(2*var(--u));background:var(--ink)}
.ca-tb{flex:none;display:flex;align-items:center;gap:calc(4*var(--u));margin:calc(-3*var(--u)) 0 calc(-2*var(--u));font-size:calc(11*var(--u));color:var(--ink2)}
.ca-tb span{display:flex;align-items:center;gap:calc(5*var(--u));padding:calc(5*var(--u)) calc(8*var(--u));border-radius:99px}
.ca-tb svg{width:calc(12*var(--u));height:calc(12*var(--u))}
.ca-tb .new{background:#1f5fd1;color:#fff;font-weight:550;padding:calc(5*var(--u)) calc(11*var(--u));margin-right:calc(6*var(--u))}
.ca-tb .q{color:var(--ink3);width:calc(110*var(--u))}
.ca-card{background:#fff;border-radius:calc(12*var(--u));box-shadow:inset 0 0 0 1px var(--line)}
.ca-cardh{display:flex;align-items:center;gap:calc(7*var(--u));padding:calc(10*var(--u)) calc(14*var(--u)) 0}
.ca-cardh b{font-size:calc(12*var(--u))}
.ca-cardh small{font-size:calc(10*var(--u));color:var(--ink3)}
.ca-cardh .ca-st{margin-left:auto}
/* small notification toast (near-black, like the demo's), used on several screens */
.ca-toast{position:absolute;z-index:3;display:flex;align-items:center;gap:calc(9*var(--u));padding:calc(8*var(--u)) calc(13*var(--u)) calc(8*var(--u)) calc(9*var(--u));border-radius:calc(11*var(--u));background:#1d1d1f;color:#fff;
  box-shadow:0 calc(12*var(--u)) calc(30*var(--u)) rgba(0,0,0,.22);font-size:calc(11.5*var(--u));line-height:1.35;
  opacity:var(--t,1);translate:0 calc((1 - var(--t,1)) * calc(-10*var(--u)));scale:calc(.96 + var(--t,1) * .04)}
.ca-toast small{display:block;color:#a1a1a6;font-size:calc(9.5*var(--u))}
.ca-toast .ti{display:grid;place-items:center;width:calc(26*var(--u));height:calc(26*var(--u));border-radius:calc(7*var(--u));background:rgba(255,255,255,.12);color:#fff}
.ca-toast .ti svg{width:calc(13*var(--u));height:calc(13*var(--u))}
/* 0 dashboard: widgets */
.t-enq{--t:var(--t0,1);right:calc(20*var(--u));top:calc(14*var(--u))}
.ca-dw{flex:1;min-height:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto minmax(0,1fr);gap:calc(10*var(--u))}
.ca-rec{grid-column:span 5;border-radius:calc(12*var(--u));background:#1d1d1f;color:#fff;padding:calc(13*var(--u)) calc(16*var(--u));display:flex;flex-direction:column}
.rec-h{display:flex;align-items:center;font-size:calc(11.5*var(--u));font-weight:600}
.rec-h i{margin-left:auto;font-style:normal;font-size:calc(9*var(--u));font-weight:600;background:rgba(255,255,255,.12);border-radius:99px;padding:calc(2*var(--u)) calc(7*var(--u))}
.rec-n{display:block;margin-top:calc(6*var(--u));font-size:calc(34*var(--u));font-weight:650;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums}
.rec-s{font-size:calc(10*var(--u));color:#a1a1a6;margin-top:calc(4*var(--u))}
.rec-note{font-size:calc(9.5*var(--u));color:#a1a1a6;margin-top:auto;padding-top:calc(8*var(--u))}
.rec-note b{color:#f5f5f7}
.ca-imp{grid-column:span 7;padding:calc(12*var(--u)) calc(14*var(--u));display:flex;flex-direction:column;gap:calc(9*var(--u))}
.ca-imp .ca-cardh{padding:0}
.imp3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(8*var(--u))}
.imp3 div{background:var(--mist);border-radius:calc(9*var(--u));padding:calc(8*var(--u)) calc(10*var(--u))}
.imp3 b{display:block;font-size:calc(17*var(--u));font-weight:650;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.imp3 span{font-size:calc(9.5*var(--u));color:var(--ink3)}
.ca-mix small{font-size:calc(9.5*var(--u));color:var(--ink3)}
.ca-bat{display:flex;gap:calc(2*var(--u));height:calc(9*var(--u));border-radius:99px;overflow:hidden;margin-top:calc(4*var(--u))}
.ca-bat i{background:var(--c)}
.ca-kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(10*var(--u))}
.ca-kpis div{border-radius:calc(11*var(--u));box-shadow:inset 0 0 0 1px var(--line);padding:calc(9*var(--u)) calc(12*var(--u))}
.ca-kpis b{display:block;font-size:calc(19*var(--u));font-weight:650;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.ca-kpis span{font-size:calc(10*var(--u));color:var(--ink3)}
.ca-kpis em{display:block;font-style:normal;font-size:calc(9.5*var(--u));font-weight:600;color:var(--green);margin-top:calc(2*var(--u))}
.ca-line{grid-column:span 7;display:flex;flex-direction:column;min-height:0}
.ca-lc{position:relative;flex:1;min-height:0;margin:calc(10*var(--u)) calc(44*var(--u)) calc(8*var(--u)) calc(14*var(--u))}
.ca-lc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ca-lc > i{position:absolute;left:0;right:0;height:1px;background:var(--line)}
.ca-lc > i:nth-of-type(1){top:0}.ca-lc > i:nth-of-type(2){top:50%}.ca-lc > i:nth-of-type(3){top:100%}
.ca-lc b{position:absolute;right:calc(-42*var(--u));font-size:calc(10.5*var(--u));font-weight:650;color:var(--blue);translate:0 -50%}
.ca-lx{display:flex;justify-content:space-between;margin:0 calc(44*var(--u)) calc(10*var(--u)) calc(14*var(--u));font-size:calc(9.5*var(--u));color:var(--ink3)}
.ca-after{grid-column:span 5;padding:0 0 calc(10*var(--u))}
.ca-after ul{display:grid;gap:calc(5*var(--u));padding:calc(9*var(--u)) calc(14*var(--u)) 0}
.ca-after li{display:flex;gap:calc(7*var(--u));align-items:center;font-size:calc(11*var(--u));color:var(--ink2)}
.ca-after li svg{width:calc(11*var(--u));height:calc(11*var(--u));color:var(--green)}
/* 1 lead pipeline (Kanban view): Tom's card (.pm) is picked up (--pl) and glides New enquiry -> Quote sent (--pm, measured pitch --px) */
.ca-kan{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(10*var(--u));overflow:hidden}
.ca-col{background:var(--mist);border-radius:calc(11*var(--u));padding:0 calc(7*var(--u)) calc(7*var(--u));display:flex;flex-direction:column;gap:calc(7*var(--u));min-height:0;border-top:calc(3*var(--u)) solid var(--sc)}
.ca-colh{display:flex;align-items:center;gap:calc(6*var(--u));font-size:calc(11.5*var(--u));font-weight:600;padding:calc(8*var(--u)) calc(3*var(--u)) 0}
.ca-colh em{font-style:normal;font-weight:500;color:var(--ink3)}
.ca-colv{margin-left:auto;font-size:calc(10*var(--u));color:var(--ink3);font-weight:500;font-variant-numeric:tabular-nums}
.ca-kc{display:block;position:relative;background:#fff;border-radius:calc(9*var(--u));padding:calc(8*var(--u)) calc(10*var(--u));box-shadow:0 1px 2px rgba(0,0,0,.05),0 0 0 .5px rgba(0,0,0,.06);flex:none}
.kc-t{display:flex;align-items:center;gap:calc(6*var(--u));font-size:calc(11.5*var(--u))}
.kc-t i.new{margin-left:auto;font-style:normal;font-size:calc(8.5*var(--u));font-weight:650;color:#fff;background:var(--blue);border-radius:calc(4*var(--u));padding:calc(1*var(--u)) calc(5*var(--u))}
.kc-s{font-size:calc(10*var(--u));color:var(--ink3);margin-top:calc(1*var(--u));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc-v{display:flex;align-items:center;gap:calc(4*var(--u));margin-top:calc(7*var(--u))}
.kc-v .av{display:grid;place-items:center;width:calc(17*var(--u));height:calc(17*var(--u));border-radius:50%;color:#fff;font-size:calc(8*var(--u));font-weight:650;font-style:normal}
.kc-v .pr{font-style:normal;font-size:calc(8.5*var(--u));font-weight:600;color:#fff;background:var(--c);border-radius:calc(4*var(--u));padding:calc(1*var(--u)) calc(5*var(--u))}
.kc-v .src{font-style:normal;font-size:calc(8.5*var(--u));color:var(--ink2);background:var(--mist);border-radius:99px;padding:calc(1*var(--u)) calc(6*var(--u));white-space:nowrap}
.kc-v b{margin-left:auto;font-size:calc(11.5*var(--u));font-variant-numeric:tabular-nums}
.kc-n{display:flex;align-items:center;gap:calc(5*var(--u));margin-top:calc(7*var(--u));padding-top:calc(6*var(--u));border-top:1px solid #f0f0f3;font-size:calc(10*var(--u));color:var(--ink3);font-weight:500}
.kc-n svg{width:calc(10*var(--u));height:calc(10*var(--u))}
.pm .kc-n{color:#1f5fd1;font-weight:600}
.ca-kc.slot{background:transparent;box-shadow:inset 0 0 0 1.5px #d2d2d7;min-height:var(--kh,calc(96*var(--u)));padding:0;border-radius:calc(9*var(--u))}
.ca-kc.slot.home{box-shadow:none}
.ca-kc.pm{position:absolute;inset:0 0 auto 0;z-index:2;
  translate:calc(var(--pm,1) * var(--px,calc(100% + calc(24*var(--u))))) calc(var(--pl,0) * calc(-5*var(--u)));rotate:calc(var(--pl,0) * -1.6deg);
  box-shadow:0 0 0 calc(var(--ph,0) * calc(3*var(--u))) rgba(31,95,209,.25),0 1px 2px rgba(0,0,0,.05),0 0 0 .5px rgba(0,0,0,.06),0 calc(var(--pl,0) * calc(14*var(--u))) calc(var(--pl,0) * calc(30*var(--u))) rgba(0,0,0,.2)}
.pm .kc-n span{display:grid}
.pm .kc-n span > *{grid-area:1/1}
/* 2 automations: the sequence and recipes as sentences */
.ca-a2{flex:1;min-height:0;display:grid;grid-template-columns:1.55fr 1fr;grid-template-rows:auto minmax(0,1fr);gap:calc(10*var(--u))}
.ca-seq{grid-column:1/-1;overflow:hidden}
.seq-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);padding:calc(10*var(--u)) calc(10*var(--u)) calc(6*var(--u));text-align:center}
.seq-track::before,.seq-fill{content:"";position:absolute;left:12.5%;right:12.5%;top:calc(26*var(--u));height:calc(2*var(--u));border-radius:calc(2*var(--u));background:var(--line)}
.seq-fill{right:auto;width:calc(75% * (var(--af,1) + var(--ar,1) * 2) / 3);background:var(--indigo)}
.seq-n{position:relative;display:grid;justify-items:center;gap:calc(1*var(--u));font-size:calc(10*var(--u));color:var(--ink3);line-height:1.3}
.seq-n i{display:grid;place-items:center;width:calc(32*var(--u));height:calc(32*var(--u));border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px #d2d2d7;color:var(--ink3);margin-bottom:calc(4*var(--u));transition:background-color .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease)}
.seq-n i svg{width:calc(14*var(--u));height:calc(14*var(--u))}
.seq-n b{font-size:calc(10.5*var(--u));color:var(--ink)}
.seq-n.on i{background:var(--indigo);box-shadow:0 0 0 calc(4*var(--u)) rgba(75,87,200,.15);color:#fff}
.seq-n:last-child.on i{background:var(--green);box-shadow:0 0 0 calc(4*var(--u)) rgba(27,127,74,.15)}
.seq-n.sk{opacity:.55}
.seq-feed{display:grid;grid-template-columns:1fr 1fr;gap:calc(8*var(--u));padding:0 calc(14*var(--u)) calc(12*var(--u))}
.seq-feed p{display:flex;align-items:center;gap:calc(8*var(--u));padding:calc(7*var(--u)) calc(10*var(--u));border-radius:calc(9*var(--u));background:#eef0fb;font-size:calc(11*var(--u));color:var(--ink);
  opacity:var(--ap,1);translate:0 calc((1 - var(--ap,1)) * calc(6*var(--u)))}
.seq-feed p + p{opacity:var(--aq,1);translate:0 calc((1 - var(--aq,1)) * calc(6*var(--u)));background:#e8f4ee}
.seq-feed svg{width:calc(13*var(--u));height:calc(13*var(--u));color:var(--indigo)}
.seq-feed p + p svg{color:var(--green)}
.seq-feed small{margin-left:auto;color:var(--ink3);font-size:calc(9.5*var(--u))}
.ca-rules{display:flex;flex-direction:column;gap:calc(7*var(--u));min-height:0;overflow:hidden}
.ca-rule{display:flex;align-items:center;gap:calc(11*var(--u));padding:calc(9*var(--u)) calc(12*var(--u));border-radius:calc(11*var(--u));box-shadow:inset 0 0 0 1px var(--line);position:relative}
.ca-rule.fire{box-shadow:inset 0 0 0 calc(1px + var(--ag,0) * calc(1.5*var(--u))) rgba(75,87,200,calc(.25 + var(--ag,0) * .75)),0 0 0 calc(var(--ag,0) * calc(4*var(--u))) rgba(75,87,200,.14)}
.ca-rule > i{display:grid;place-items:center;width:calc(26*var(--u));height:calc(26*var(--u));border-radius:calc(8*var(--u));background:var(--mist);color:var(--ink);flex:none}
.ca-rule > i svg{width:calc(13*var(--u));height:calc(13*var(--u))}
.rule-s{flex:1;min-width:0;font-size:calc(11.5*var(--u));line-height:1.45;color:var(--ink2)}
.rule-s b{color:var(--ink);text-decoration:underline;text-decoration-color:#d2d2d7;text-decoration-thickness:calc(1.2*var(--u));text-underline-offset:calc(3*var(--u))}
.rule-s b.c{color:var(--c);text-decoration-color:currentColor}
.rule-s small{display:block;font-size:calc(9.5*var(--u));color:var(--ink3)}
.ca-rule u{text-decoration:none;width:calc(30*var(--u));height:calc(18*var(--u));border-radius:99px;background:var(--green);position:relative;flex:none}
.ca-rule u::after{content:"";position:absolute;right:calc(2*var(--u));top:calc(2*var(--u));width:calc(14*var(--u));height:calc(14*var(--u));border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.rule-tag{flex:none;white-space:nowrap;font-size:calc(8.5*var(--u));font-weight:600;color:var(--indigo);background:#eef0fb;border-radius:99px;padding:calc(1*var(--u)) calc(7*var(--u));opacity:var(--ap,1)}
.rule-tag.done{color:var(--green);background:#e8f4ee;opacity:1}
.ca-act{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.ca-act p{display:flex;align-items:center;gap:calc(8*var(--u));padding:calc(7*var(--u)) calc(12*var(--u));border-bottom:1px solid #f0f0f3;font-size:calc(10.5*var(--u));color:var(--ink2)}
.ca-act p:last-child{border-bottom:0}
.ca-act p i{display:grid;place-items:center;width:calc(20*var(--u));height:calc(20*var(--u));border-radius:calc(6*var(--u));background:#eef0fb;color:var(--indigo);flex:none}
.ca-act p i svg{width:calc(11*var(--u));height:calc(11*var(--u))}
.ca-act small{margin-left:auto;color:var(--ink3);font-size:calc(9*var(--u));white-space:nowrap}
/* 3 quotes and invoices: grouped table with full-cell statuses */
.ca-grp{flex:none;display:flex;flex-direction:column}
.ca-gh{display:flex;align-items:center;gap:calc(6*var(--u));font-size:calc(12.5*var(--u));font-weight:650;letter-spacing:-.01em;color:var(--gc);margin:0 0 calc(5*var(--u))}
.ca-gh small{font-size:calc(10*var(--u));font-weight:500;color:var(--ink3);letter-spacing:0}
.ca-gh svg{width:calc(11*var(--u));height:calc(11*var(--u))}
.ca-qt table{width:100%;border-collapse:separate;border-spacing:0;font-size:calc(11*var(--u));table-layout:fixed}
.ca-qt th,.ca-qt td{height:calc(27*var(--u));padding:0 calc(8*var(--u));border-bottom:1px solid var(--line);border-right:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.ca-qt th{height:calc(24*var(--u));font-size:calc(9.5*var(--u));font-weight:550;color:var(--ink3);border-top:1px solid var(--line)}
.ca-qt tr > :first-child{text-align:left;border-left:1px solid var(--line);box-shadow:inset calc(3*var(--u)) 0 0 var(--gc);padding-left:calc(11*var(--u))}
.ca-qt th:first-child{border-top-left-radius:calc(8*var(--u))}
.ca-qt th:last-child{border-top-right-radius:calc(8*var(--u))}
.ca-qt td:first-child b{font-weight:550}
.ca-qt td:first-child small{color:var(--ink3);margin-left:calc(5*var(--u))}
.ca-qt .r{font-variant-numeric:tabular-nums}
.ca-qt td.s{padding:0;border-right-color:#fff}
.cs{display:grid;place-items:center;height:100%;color:#fff;font-size:calc(10.5*var(--u));font-weight:550;background:var(--c)}
.cs.e{background:#e3e4e9}
.cs > *{grid-area:1/1}
.c-purple{--c:var(--purple)}.c-rose{--c:var(--rose)}.c-green{--c:var(--green)}.c-amber{--c:var(--amber)}.c-slate{--c:var(--slate)}.c-grey{--c:var(--grey)}.c-teal{--c:var(--teal)}
.ca-qt tr.me td{background:rgba(31,95,209,calc(var(--qa,0) * .07))}
.ca-qt tr.me td.s{background:transparent}
.ca-qt [data-x="qq"]{scale:calc(1 + var(--qa,0) * .04)}
.ca-qt col.c1{width:31%}.ca-qt col.c2{width:11%}.ca-qt col.c3{width:17%}.ca-qt col.c4{width:17%}.ca-qt col.c5{width:12%}.ca-qt col.c6{width:12%}
.t-acc{--t:var(--t3,1);right:calc(20*var(--u));top:calc(14*var(--u))}
/* 4 job calendar: month grid with full-colour events */
.ca-calh{flex:none;display:flex;align-items:center;gap:calc(8*var(--u));font-size:calc(13*var(--u));font-weight:650;letter-spacing:-.015em;margin-top:calc(-2*var(--u))}
.ca-calh span{margin-left:auto;display:flex;gap:calc(10*var(--u));font-size:calc(9.5*var(--u));font-weight:500;color:var(--ink3);letter-spacing:0}
.ca-calh span i{display:inline-block;width:calc(8*var(--u));height:calc(8*var(--u));border-radius:calc(2*var(--u));background:var(--c);margin-right:calc(4*var(--u));vertical-align:calc(-.5*var(--u))}
.ca-cal{flex:1;min-height:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:auto repeat(6,minmax(0,1fr));border-radius:calc(10*var(--u));box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.ca-cal > p{font-size:calc(9.5*var(--u));font-weight:600;color:var(--ink3);padding:calc(5*var(--u)) calc(7*var(--u));border-bottom:1px solid var(--line);background:#fbfbfd}
.ca-cal > span{position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:calc(3*var(--u)) calc(4*var(--u));font-size:calc(9.5*var(--u));font-weight:550;color:var(--ink2);min-height:0;overflow:hidden;font-variant-numeric:tabular-nums}
.ca-cal > span:nth-of-type(7n){border-right:0}
.ca-cal > span.x{background:#fbfbfd;color:var(--ink3)}
.ca-cal > span.today > em{background:var(--ink);color:#fff}
.ca-cal em{display:inline-grid;place-items:center;width:calc(17*var(--u));height:calc(17*var(--u));border-radius:50%;font-style:normal}
.ca-cal i{display:block;margin-top:calc(2*var(--u));font-style:normal;font-size:calc(9*var(--u));font-weight:550;color:#fff;background:var(--c,var(--teal));border-radius:calc(4*var(--u));padding:calc(1*var(--u)) calc(5*var(--u));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ca-cal i small{opacity:.9;margin-right:calc(3*var(--u));font-weight:500}
.ca-cal i.new{opacity:var(--cj,1);scale:calc(.7 + var(--cj,1) * .3);translate:0 calc((1 - var(--cj,1)) * calc(-8*var(--u)));
  box-shadow:0 0 0 calc((1 - var(--cj,1)) * calc(6*var(--u)) + calc(2*var(--u))) rgba(17,121,127,.22)}
.ca-cal u{display:block;margin-top:calc(2*var(--u));text-decoration:none;font-size:calc(8.5*var(--u));color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:var(--t4,1)}
.ca-agenda{display:none}
.t-rem{--t:var(--t4,1);right:calc(20*var(--u));top:calc(14*var(--u))}
/* 5 reports: widgets */
.ca-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(9*var(--u));flex:none}
.ca-tiles > div{padding:calc(10*var(--u)) calc(12*var(--u))}
.ca-tiles b{display:block;font-size:calc(19*var(--u));font-weight:650;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.ca-tiles small{font-size:calc(10*var(--u));color:var(--ink3)}
.ca-tiles .tick b{color:var(--green);text-shadow:0 0 calc(var(--rt,0) * calc(10*var(--u))) rgba(27,127,74,.45)}
.ca-rg{flex:1;min-height:0;display:grid;grid-template-columns:1.25fr 1fr;gap:calc(10*var(--u))}
.ca-rg > .ca-card{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.ca-rev{flex:1;min-height:0;display:grid;grid-template-columns:repeat(6,1fr);gap:calc(14*var(--u));align-items:end;padding:calc(12*var(--u)) calc(18*var(--u)) calc(10*var(--u))}
.ca-rev span{display:flex;flex-direction:column;align-items:center;gap:calc(6*var(--u));height:100%;justify-content:flex-end;font-size:calc(9.5*var(--u));color:var(--ink3)}
.ca-rev i{width:62%;height:calc(var(--h) * 100%);border-radius:calc(5*var(--u)) calc(5*var(--u)) calc(2*var(--u)) calc(2*var(--u));background:#b9c7e6;transform-origin:50% 100%;scale:1 calc(.08 + var(--rc,1) * .92)}
.ca-rev span:last-child i{background:#1f5fd1}
.ca-batl{display:flex;gap:calc(2*var(--u));height:calc(10*var(--u));border-radius:99px;overflow:hidden;margin:calc(10*var(--u)) calc(14*var(--u)) calc(2*var(--u))}
.ca-batl i{background:var(--c);transform-origin:0 50%;scale:var(--rc,1) 1}
.ca-stg{flex:1;display:grid;align-content:space-evenly;gap:calc(5*var(--u));padding:calc(6*var(--u)) calc(14*var(--u)) calc(10*var(--u))}
.ca-stg p{display:grid;grid-template-columns:calc(86*var(--u)) 1fr;align-items:center;gap:calc(10*var(--u));font-size:calc(10.5*var(--u));color:var(--ink2)}
.ca-stg p > span{position:relative;height:calc(9*var(--u));border-radius:99px;background:var(--mist);overflow:visible}
.ca-stg p > span::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--sc);transform-origin:0 50%;scale:calc(var(--w) * var(--rc,1)) 1}
.ca-stg p > span b{position:absolute;right:calc(-2*var(--u));top:50%;translate:100% -50%;font-size:calc(9.5*var(--u));color:var(--ink2);font-weight:650}
.ca-stg p{padding-right:calc(16*var(--u))}
.ca-stg p.tick > span::before{scale:calc((var(--w) + var(--rt2,1) * var(--dw,0)) * var(--rc,1)) 1}
/* D10 pointer: a soft translucent dot (iPadOS-style concept), JS sets its size, colour and position */
.crm-cursor{display:none;position:absolute;left:0;top:0;z-index:8;pointer-events:none;border-radius:50%;background:rgba(60,60,67,.3);
  box-shadow:0 0 0 .5px rgba(255,255,255,.45),0 1px 5px rgba(0,0,0,.12);-webkit-backdrop-filter:saturate(1.4);backdrop-filter:saturate(1.4)}
.crm-device.is-auto .crm-cursor{display:block}
.crm-device.is-seek .ca-scr,.crm-device.is-seek .ca-kc.pm,.crm-device.is-seek .crm-cursor{transition:opacity .45s var(--ease),translate .45s var(--ease)}
/* phones: the 390 x 488 canvas; the sidebar becomes a strip of icons and each screen keeps its key parts */
@media (max-width:640px){
  .crm-app{--u:calc(100cqw / 390);grid-template-columns:1fr;grid-template-rows:auto 1fr;font-size:calc(12.5*var(--u));border-radius:16px}
  .ca-side{flex-direction:row;align-items:center;gap:calc(2*var(--u));padding:calc(6*var(--u)) calc(6*var(--u)) 0}
  .ca-brand{padding:0 calc(6*var(--u)) 0 calc(4*var(--u))}
  .ca-brand svg{width:calc(20*var(--u));height:calc(20*var(--u))}
  .ca-brand span,.ca-ws,.ca-lbl,.ca-sample,.ca-nav b,.ca-nav em{display:none}
  .ca-nav{flex:1;justify-content:center;height:calc(34*var(--u));padding:0;border-radius:calc(9*var(--u))}
  .ca-nav svg{width:calc(17*var(--u));height:calc(17*var(--u))}
  .ca-main{margin:calc(6*var(--u))}
  .ca-top{height:calc(34*var(--u));padding:0 calc(10*var(--u)) 0 calc(12*var(--u));gap:calc(6*var(--u))}
  .ca-crumb,.ca-cta,.ca-strip{display:none}
  .ca-title{font-size:calc(13*var(--u))}
  .ca-chip{font-size:calc(9.5*var(--u));padding:calc(2*var(--u)) calc(7*var(--u))}
  .ca-av{width:calc(22*var(--u));height:calc(22*var(--u));font-size:calc(9*var(--u))}
  .ca-scr{padding:calc(11*var(--u)) calc(11*var(--u));gap:calc(8*var(--u))}
  .ca-head p,.ca-head .ca-st{display:none}
  .ca-head h3{font-size:calc(17*var(--u))}
  .ca-tabs span{padding:0 calc(7*var(--u)) calc(6*var(--u));font-size:calc(10.5*var(--u))}
  .ca-tabs span:nth-child(n+3){display:none}
  .ca-tb .q,.ca-tb span:nth-child(n+4){display:none}
  .ca-toast{font-size:calc(10.5*var(--u));padding:calc(7*var(--u)) calc(11*var(--u)) calc(7*var(--u)) calc(8*var(--u))}
  .ca-toast small{font-size:calc(9*var(--u))}
  .t-enq,.t-acc{right:calc(10*var(--u));left:calc(10*var(--u));top:auto;bottom:calc(10*var(--u))}
  .t-rem{right:calc(10*var(--u));left:calc(10*var(--u));top:auto;bottom:calc(10*var(--u))}
  /* dashboard */
  .ca-dw{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;gap:calc(7*var(--u))}
  .ca-rec{grid-column:1/-1;padding:calc(10*var(--u)) calc(12*var(--u))}
  .rec-n{font-size:calc(28*var(--u))}
  .rec-note{display:none}
  .ca-imp{grid-column:1/-1;padding:calc(9*var(--u)) calc(10*var(--u));gap:calc(7*var(--u))}
  .ca-imp .ca-cardh small,.ca-imp .ca-st{display:none}
  .imp3 div{padding:calc(6*var(--u)) calc(7*var(--u))}
  .imp3 b{font-size:calc(14*var(--u))}
  .imp3 span{font-size:calc(8.5*var(--u));display:block;line-height:1.25}
  .ca-kpis{grid-template-columns:1fr 1fr;gap:calc(7*var(--u))}
  .ca-kpis div:nth-child(n+3){display:none}
  .ca-kpis div{padding:calc(7*var(--u)) calc(9*var(--u))}
  .ca-kpis b{font-size:calc(15*var(--u))}
  .ca-line,.ca-after{display:none}
  /* pipeline: New enquiry and Quote sent only */
  .ca-kan{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(7*var(--u))}
  .ca-col:nth-child(n+3){display:none}
  .ca-col{padding:0 calc(6*var(--u)) calc(6*var(--u));gap:calc(6*var(--u))}
  .ca-kc{padding:calc(7*var(--u)) calc(8*var(--u))}
  .kc-v .src{display:none}
  .ca-kc.pm{translate:calc(var(--pm,1) * var(--px,calc(100% + calc(20*var(--u))))) calc(var(--pl,0) * calc(-5*var(--u)))}
  /* automations */
  .ca-a2{grid-template-columns:1fr;gap:calc(7*var(--u))}
  .seq-track{padding:calc(8*var(--u)) calc(2*var(--u)) calc(4*var(--u))}
  .seq-track::before,.seq-fill{top:calc(22*var(--u))}
  .seq-n{font-size:calc(9*var(--u))}
  .seq-n i{width:calc(26*var(--u));height:calc(26*var(--u))}
  .seq-n span{display:none}
  .seq-feed{grid-template-columns:1fr;padding:0 calc(9*var(--u)) calc(9*var(--u));gap:calc(5*var(--u))}
  .seq-feed p{font-size:calc(10*var(--u));padding:calc(5*var(--u)) calc(8*var(--u))}
  .ca-cardh{padding:calc(8*var(--u)) calc(10*var(--u)) 0}
  .ca-cardh small{display:none}
  .ca-rule{padding:calc(7*var(--u)) calc(9*var(--u))}
  .ca-rule:nth-child(n+3),.ca-rule > i,.ca-act{display:none}
  .rule-s{font-size:calc(10.5*var(--u))}
  /* quotes */
  .ca-qt col.c2,.ca-qt col.c4,.ca-qt col.c6,.ca-qt th:nth-child(2),.ca-qt td:nth-child(2),.ca-qt th:nth-child(4),.ca-qt td:nth-child(4),.ca-qt th:nth-child(6),.ca-qt td:nth-child(6){display:none}
  .ca-qt col.c1{width:47%}.ca-qt col.c3{width:31%}.ca-qt col.c5{width:22%}
  .ca-qt td:first-child small{display:none}
  .ca-grp + .ca-grp{display:none}
  /* calendar: events become marks, and an agenda line names the new one */
  .ca-calh span{display:none}
  .ca-cal > span{padding:calc(2*var(--u)) calc(3*var(--u));font-size:calc(9*var(--u))}
  .ca-cal em{width:calc(15*var(--u));height:calc(15*var(--u))}
  .ca-cal i{height:calc(5*var(--u));padding:0;margin-top:calc(3*var(--u));font-size:0;border-radius:calc(3*var(--u))}
  .ca-cal u{display:none}
  .ca-agenda{display:flex;align-items:center;gap:calc(8*var(--u));flex:none;font-size:calc(10.5*var(--u));padding:calc(7*var(--u)) calc(10*var(--u));border-radius:calc(9*var(--u));background:#e7f2f2;opacity:var(--cj,1)}
  /* reports: tiles and pipeline by stage */
  .ca-tiles{grid-template-columns:1fr 1fr;gap:calc(7*var(--u))}
  .ca-tiles > div{padding:calc(7*var(--u)) calc(10*var(--u))}
  .ca-tiles > div:nth-child(n+5){display:none}
  .ca-tiles b{font-size:calc(15*var(--u))}
  .ca-rg{grid-template-columns:1fr}
  .ca-rg > .ca-card:first-child{display:none}
  .ca-stg{gap:calc(4*var(--u));padding:calc(6*var(--u)) calc(12*var(--u)) calc(8*var(--u))}
}
@media (prefers-reduced-motion:reduce){.crm-app *{transition:none!important}}