/* Sales desk demo, the whole page. Built 12 Nov 2026 to match soltrack-ai.com one to one: Inter, pills, one card per
   drawing with real shadows, Soltrack's own iPhone (try.css, in real points), and the apps drawn as they look. */
@import url("/fonts/fonts.css");
:root { --bg:#F5F5F3; --card:#FFFFFF; --line:#E7E6E2; --ink:#111114; --ink2:#55555D; --ink3:#8E8E96; --gold:#A97C19;
  --spring:cubic-bezier(.3,1.35,.5,1); --ease:cubic-bezier(.2,.7,.2,1); --green:#34C759;
  --sh:0 1px 2px rgba(17,17,20,.05), 0 10px 30px -18px rgba(17,17,20,.28); color-scheme:light; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; letter-spacing:-.006em; -webkit-font-smoothing:antialiased; }
button, input, textarea { font:inherit; color:inherit; letter-spacing:inherit; }
a { color:inherit; }
.wrap { max-width:1180px; margin:0 auto; padding:0 24px; }

/* ── hero ── */
.hero { padding:64px 0 10px; text-align:center; }
.for { display:inline-flex; align-items:center; gap:10px; min-height:42px; padding:4px 18px 4px 16px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px var(--line), 0 8px 24px -16px rgba(17,17,20,.25); font-size:13px; color:var(--ink2); }
.for img { height:16px; width:auto; display:block; }
.hero h1 { font-weight:700; font-size:58px; line-height:1.03; letter-spacing:-.04em; margin:22px auto 16px; max-width:900px; }
.hero p { font-size:18px; color:var(--ink2); max-width:640px; margin:0 auto; }
.hero .row { display:flex; justify-content:center; gap:10px; margin-top:26px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 20px; border-radius:999px; border:0; background:#fff; box-shadow:0 0 0 1px var(--line); font-weight:600; font-size:15px; text-decoration:none; cursor:pointer; }
.btn.dark { background:var(--ink); color:#fff; box-shadow:0 8px 20px -10px rgba(17,17,20,.5); }
.stack { display:flex; justify-content:center; align-items:center; gap:26px; margin-top:30px; color:var(--ink3); font-size:12.5px; }
.stack img { height:24px; width:auto; display:block; }
.stack .bx24 { height:19px; }

/* ── sections ── */
.sec { padding:84px 0 0; }
.sec-h { text-align:center; margin-bottom:28px; }
.num { display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px var(--line); font-size:12.5px; font-weight:600; color:var(--ink2); }
.sec h2 { font-weight:700; font-size:38px; line-height:1.08; letter-spacing:-.03em; margin:14px 0 10px; }
.sec .lede { font-size:16.5px; color:var(--ink2); max-width:640px; margin:0 auto; }
.foot { padding:90px 0 120px; text-align:center; color:var(--ink3); font-size:12.5px; }
@media (max-width:760px) { .hero { padding:36px 0 0; } .hero h1 { font-size:36px; } .hero p { font-size:16px; } .sec { padding:60px 0 0; } .sec h2 { font-size:27px; } .sec .lede { font-size:15px; } .wrap { padding:0 16px; } .stack { gap:18px; } .stack img { height:19px; } }

/* ── the drawing: one card, everything on it casts its own shadow (motion from Soltrack's mock.css) ── */
.mk { --mk-ease:var(--ease); --mk-gold:var(--gold); container:mk / inline-size; position:relative; margin:0; }
.mk-shot { --cw:1080; --ch:640; position:relative; width:100%; aspect-ratio:var(--cw)/var(--ch); overflow:hidden; border-radius:22px; background:#FBFBFA; box-shadow:0 0 0 1px var(--line), 0 1px 2px rgba(17,17,20,.04), 0 30px 60px -40px rgba(17,17,20,.30); }
.mk-cv { position:absolute; left:0; top:0; width:calc(var(--cw) * 1px); height:calc(var(--ch) * 1px); transform-origin:0 0; transform:scale(var(--k, tan(atan2(100cqw, calc(var(--cw) * 1px))))); }
.mk-cv > * { height:100%; }
@container mk (max-width:640px) { .mk-shot { --cw:400; --ch:var(--chn,1320); --mk-narrow:1; border-radius:18px; } }
.mk [data-t] { transition:opacity .5s var(--mk-ease), transform .6s var(--mk-ease); }
.mk.mk-armed [data-t]:not(.mk-in) { opacity:0; }
.mk.mk-armed .fx-up:not(.mk-in) { transform:translateY(10px); }
.mk.mk-armed .fx-pop:not(.mk-in) { transform:scale(.94); }
.mk.mk-armed [data-t].fx-keep:not(.mk-in) { opacity:1; transform:none; }
.mk .fx-temp { opacity:0; pointer-events:none; }
.mk.mk-armed .fx-temp.mk-in:not(.mk-out) { opacity:1; transform:none; }
.mk .fx-pre { opacity:0; transition:opacity .35s var(--mk-ease); }
.mk.mk-armed .fx-pre:not(.mk-out) { opacity:1; }
.mk.mk-reset, .mk.mk-reset * { transition:none !important; animation:none !important; }
.mk-replay { position:absolute; right:18px; bottom:18px; z-index:30; display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 14px 0 11px; border:0; border-radius:999px; background:#fff; color:var(--ink2); font-weight:600; font-size:12.5px; box-shadow:0 0 0 1px var(--line), 0 8px 20px -12px rgba(17,17,20,.35); cursor:pointer; opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s; }
.mk-replay[hidden] { display:none; }
.mk.mk-done .mk-replay { opacity:1; transform:none; }
.mk-replay svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.duo { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:34px; padding:22px 30px 22px 44px; }
@container mk (max-width:640px) { .duo { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); justify-items:center; align-items:start; gap:20px; padding:20px 16px; } .duo > :last-child { justify-self:stretch; } }

/* ── the iPhone, Soltrack's try.css in real points (402 x 874 screen) ── */
.ip { --z:.66; zoom:var(--z); position:relative; width:420px; height:892px; padding:3px; border-radius:66px; flex:0 0 auto;
  background:linear-gradient(145deg,#4A4A4E 0%,#2A2A2D 30%,#3D3D41 55%,#1E1E21 80%,#38383C 100%);
  box-shadow:0 0 0 .6px rgba(0,0,0,.5), 0 60px 90px -50px rgba(10,10,20,.55), 0 24px 40px -26px rgba(10,10,20,.35); }
@container mk (max-width:640px) { .ip { --z:.84; } }
.ip-btn { position:absolute; width:4px; border-radius:2px; background:linear-gradient(90deg,#2C2C2F,#4C4C50 60%,#2A2A2D); }
.ip-act { left:-2.5px; top:158px; height:34px; } .ip-vu { left:-2.5px; top:220px; height:64px; } .ip-vd { left:-2.5px; top:298px; height:64px; }
.ip-pwr { right:-2.5px; top:256px; height:104px; } .ip-cam { right:-2.5px; top:560px; height:72px; border-radius:3px; }
.ip-bezel { width:414px; height:886px; padding:6px; border-radius:63px; background:#050506; }
.ip-screen { position:relative; width:402px; height:874px; border-radius:57px; overflow:hidden; background:#F2F2F7; isolation:isolate; -webkit-mask-image:-webkit-radial-gradient(#fff,#000); }
.ip-rim { position:absolute; z-index:60; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1.5px #000; pointer-events:none; }
.ip-status { position:absolute; z-index:30; left:0; right:0; top:0; height:59px; color:#000; }
.ip-time { position:absolute; left:0; width:138px; top:0; height:59px; display:flex; align-items:center; justify-content:center; padding-left:6px; font:600 16.5px/1 "Inter",sans-serif; letter-spacing:-.015em; font-variant-numeric:tabular-nums; }
.ip-sys { position:absolute; right:0; width:138px; top:0; height:59px; display:flex; align-items:center; justify-content:center; gap:6px; padding-right:6px; }
.ip-cell { display:inline-flex; align-items:flex-end; gap:1.5px; height:10.5px; } .ip-cell i { width:3px; border-radius:.8px; background:currentColor; }
.ip-wifi { width:15.5px; height:11px; fill:currentColor; }
.ip-batt { position:relative; width:24.5px; height:11.5px; margin-right:2px; border-radius:3.6px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.4); }
.ip-batt i { position:absolute; left:2px; top:2px; bottom:2px; width:15.5px; border-radius:1.8px; background:currentColor; }
.ip-batt::after { content:""; position:absolute; right:-2.6px; top:4px; width:1.4px; height:3.5px; border-radius:0 1px 1px 0; background:rgba(0,0,0,.4); }
.ip-island { position:absolute; z-index:40; top:11px; left:50%; width:126px; height:37px; margin-left:-63px; border-radius:20px; background:#000; }
.ip-home { position:absolute; z-index:30; left:50%; bottom:8px; width:139px; height:5px; margin-left:-69.5px; border-radius:3px; background:rgba(0,0,0,.85); }

/* ── WhatsApp for iPhone, light mode ── */
.wa { position:absolute; inset:0; display:flex; flex-direction:column; background:#EFEAE2; font-family:"Inter",-apple-system,sans-serif; letter-spacing:-.01em; }
.wa-top { position:relative; z-index:5; padding-top:59px; background:rgba(246,246,246,.97); box-shadow:0 .5px 0 #C6C6C8; }
.wa-row { height:54px; display:flex; align-items:center; gap:9px; padding:0 16px 0 6px; }
.wa-back { display:flex; align-items:center; gap:1px; color:#000; font-size:17px; font-weight:400; }
.wa-back svg { width:13px; height:22px; fill:none; stroke:#000; stroke-width:2.7; stroke-linecap:round; stroke-linejoin:round; }
.wa-av { width:38px; height:38px; border-radius:50%; overflow:hidden; flex:0 0 auto; background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.12); display:grid; place-items:center; }
.wa-av img { width:100%; height:100%; object-fit:cover; display:block; }
.wa-av.pad img { width:70%; height:70%; object-fit:contain; }
.wa-who { min-width:0; flex:1; line-height:1.15; }
.wa-name { font-size:17px; font-weight:600; color:#000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:4px; }
.wa-name .vf { width:15px; height:15px; flex:0 0 auto; }
.wa-sub { font-size:12.5px; color:#8A8A8E; margin-top:1px; }
.wa-ic { display:flex; gap:22px; color:#000; }
.wa-ic svg { width:24px; height:24px; fill:none; stroke:#000; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.wa-bg { position:relative; flex:1; overflow:hidden; padding:10px 14px 8px;
  background:#EFEAE2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='%23000' stroke-opacity='.045' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18h16v12H14z M18 18v-4h8v4'/%3E%3Ccircle cx='78' cy='22' r='7'/%3E%3Cpath d='M74 22l3 3 5-6'/%3E%3Cpath d='M100 60c4-6 12-2 8 5l-8 8-8-8c-4-7 4-11 8-5z'/%3E%3Cpath d='M20 70l6 10 6-10 M23 75h6'/%3E%3Cpath d='M58 92a9 9 0 1 0 18 0 9 9 0 1 0-18 0 M63 90h0 M71 90h0 M63 96c2 2 6 2 8 0'/%3E%3Cpath d='M96 104l4-8 4 8 8 1-6 5 2 8-8-4-8 4 2-8-6-5z'/%3E%3Cpath d='M40 44c6 0 6 8 12 8 M42 40v4'/%3E%3C/svg%3E") 0 0/180px 180px; }
.wa-list { display:flex; flex-direction:column; gap:2px; transition:transform .6s var(--ease); }
.wa-note { align-self:center; max-width:92%; margin:4px 0 8px; padding:7px 12px; border-radius:9px; background:#FCF4CB; color:#54656F; font-size:12.5px; line-height:1.35; text-align:center; box-shadow:0 1px .5px rgba(11,20,26,.1); }
.wa-date { align-self:center; margin:2px 0 8px; padding:5px 11px; border-radius:9px; background:rgba(255,255,255,.95); color:#54656F; font-size:12.5px; font-weight:500; box-shadow:0 1px .5px rgba(11,20,26,.13); }
.bub { position:relative; max-width:82%; padding:7px 10px 7px 11px; border-radius:16px; font-size:16px; line-height:1.31; color:#111B21; box-shadow:0 1px .5px rgba(11,20,26,.13); white-space:pre-wrap; overflow-wrap:anywhere; margin-top:2px; }
.bub.out { align-self:flex-end; background:#D9FDD3; }
.bub.in { align-self:flex-start; background:#fff; }
.bub.tail.out { border-bottom-right-radius:4px; margin-right:6px; }
.bub.tail.in { border-bottom-left-radius:4px; margin-left:6px; }
.bub.tail.out::after, .bub.tail.in::after { content:""; position:absolute; bottom:0; width:10px; height:14px; }
.bub.tail.out::after { right:-7px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M0 0c0 7 3 11.5 10 14H0z' fill='%23D9FDD3'/%3E%3C/svg%3E") 0 0/100% 100%; }
.bub.tail.in::after { left:-7px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M10 0c0 7-3 11.5-10 14h10z' fill='%23fff'/%3E%3C/svg%3E") 0 0/100% 100%; }
.bub .m { float:right; display:inline-flex; align-items:center; gap:3px; margin:7px -3px -5px 12px; font-size:11.5px; line-height:1; color:#667781; font-variant-numeric:tabular-nums; }
.bub .m svg { width:17px; height:11px; fill:none; stroke:#53BDEB; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.en { max-width:80%; margin:3px 10px 9px; font-size:11.5px; line-height:1.3; color:#7C7768; font-style:italic; }
.en.out { align-self:flex-end; text-align:right; } .en.in { align-self:flex-start; }
.bub.dots { padding:12px 14px; } .bub.dots i { display:inline-block; width:7px; height:7px; margin:0 2px; border-radius:50%; background:#A6ADB1; animation:wd 1.1s infinite ease-in-out; }
.bub.dots i:nth-child(2) { animation-delay:.16s; } .bub.dots i:nth-child(3) { animation-delay:.32s; }
@keyframes wd { 0%,80%,100% { opacity:.35; transform:none; } 40% { opacity:1; transform:translateY(-2px); } }
.wa-bar { position:relative; z-index:5; display:flex; align-items:center; gap:13px; padding:8px 12px 38px 12px; background:rgba(246,246,246,.97); box-shadow:0 -.5px 0 #C6C6C8; }
.wa-bar > svg { width:26px; height:26px; flex:0 0 auto; fill:none; stroke:#000; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.wa-field { flex:1; min-width:0; height:38px; display:flex; align-items:center; gap:8px; padding:0 10px 0 15px; border-radius:19px; background:#fff; box-shadow:inset 0 0 0 .5px #C6C6C8; color:#8A8A8E; font-size:16px; }
.wa-field span, .wa-field input { flex:1; min-width:0; }
.wa-field input { border:0; outline:0; background:transparent; font-size:16px; color:#000; padding:0; }
.wa-field svg { width:22px; height:22px; flex:0 0 auto; fill:none; stroke:#000; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.8; }
.wa-send { display:none; width:38px; height:38px; border:0; border-radius:50%; background:#1DAA61; place-items:center; cursor:pointer; flex:0 0 auto; }
.wa-send svg { width:20px; height:20px; fill:#fff; }
.wa-bar.typing .wa-send { display:grid; } .wa-bar.typing .wa-mute { display:none; }

/* ── the side card in the first drawing ── */
.log { align-self:center; width:100%; max-width:470px; background:#fff; border-radius:18px; padding:26px 28px; box-shadow:0 0 0 1px var(--line), var(--sh); font-family:"Inter",sans-serif; }
.log .big { display:flex; align-items:baseline; gap:10px; padding-bottom:18px; margin-bottom:8px; border-bottom:1px solid #EFEEEA; }
.log .big b { font-size:56px; font-weight:700; letter-spacing:-.045em; line-height:1; }
.log .big span { font-size:15px; color:var(--ink2); }
.log .row { display:flex; gap:12px; align-items:center; padding:9px 0; font-size:15.5px; color:var(--ink); }
.log .ck { flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:#E8F6EC; display:grid; place-items:center; }
.log .ck svg { width:13px; height:13px; fill:none; stroke:#1F8A43; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.log .chip { display:flex; gap:12px; align-items:center; margin-top:14px; padding:13px 15px; border-radius:14px; background:#F7F8FA; box-shadow:inset 0 0 0 1px #E6E9EE; }
.log .chip img { height:26px; width:auto; }
.log .chip b { display:block; font-size:14.5px; font-weight:600; } .log .chip small { color:var(--ink2); font-size:13px; }
.log .note { margin-top:14px; font-size:12px; color:var(--ink3); }
@container mk (max-width:640px) { .log { padding:22px; } .log .big b { font-size:46px; } .log .row { font-size:15px; } }

/* ── Salesforce Lightning, a lead record ── */
.sf { position:relative; display:flex; flex-direction:column; width:100%; height:100%; max-height:596px; border-radius:14px; overflow:hidden; background:#F3F3F3; box-shadow:0 0 0 1px #DDDBDA, var(--sh); font:13px/1.4 "Inter",-apple-system,"Segoe UI",Arial,sans-serif; letter-spacing:0; color:#181818; }
.sf-g { display:flex; align-items:center; gap:16px; height:50px; padding:0 14px; background:#fff; border-bottom:1px solid #E5E5E5; }
.sf-g .lg { height:30px; width:auto; }
.sf-s { flex:1; max-width:420px; margin:0 auto; height:32px; display:flex; align-items:center; gap:8px; padding:0 12px; border-radius:4px; box-shadow:inset 0 0 0 1px #C9C9C9; color:#747474; font-size:13px; }
.sf-s svg, .sf-u svg { width:15px; height:15px; fill:none; stroke:#747474; stroke-width:1.8; stroke-linecap:round; }
.sf-u { display:flex; align-items:center; gap:14px; }
.sf-u .bell { position:relative; } .sf-u .bell b { position:absolute; top:-6px; right:-7px; min-width:15px; height:15px; border-radius:8px; background:#EA001E; color:#fff; font-size:9.5px; display:grid; place-items:center; font-weight:700; }
.sf-u .me { width:28px; height:28px; border-radius:50%; background:#0B5CAB; color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; }
.sf-n { display:flex; align-items:stretch; height:40px; padding:0 10px; background:#fff; box-shadow:0 2px 2px -1px rgba(0,0,0,.08); }
.sf-n .waf { width:20px; margin:0 10px 0 4px; background:radial-gradient(circle,#5C5C5C 1.25px,transparent 1.6px) 50% 50%/6.5px 6.5px; }
.sf-n .app { display:flex; align-items:center; font-size:17px; font-weight:700; margin-right:18px; }
.sf-n span { display:flex; align-items:center; gap:4px; padding:0 12px; font-size:13px; }
.sf-n span.on { box-shadow:inset 0 -3px 0 #0176D3; background:#fff; font-weight:600; }
.sf-n span i { font-style:normal; color:#747474; font-size:10px; }
.sf-b { position:relative; flex:1; min-height:0; padding:12px; background:linear-gradient(180deg,#B0C4DF 0,#CFDDEE 70px,#F3F3F3 160px); display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); gap:12px; }
.sf-c { background:#fff; border-radius:4px; box-shadow:0 0 0 1px #DDDBDA, 0 2px 2px rgba(0,0,0,.06); }
.sf-hd { grid-column:1 / -1; padding:13px 16px 14px; }
.sf-t { display:flex; align-items:center; gap:12px; }
.sf-ico { width:34px; height:34px; border-radius:4px; background:#F88962; display:grid; place-items:center; flex:0 0 auto; }
.sf-ico svg { width:20px; height:20px; fill:#fff; }
.sf-t small { display:block; font-size:12px; color:#444; }
.sf-t h3 { margin:0; font-size:18px; font-weight:700; line-height:1.2; letter-spacing:-.01em; }
.sf-btns { margin-left:auto; display:flex; }
.sf-btns span { display:flex; align-items:center; height:32px; padding:0 14px; background:#fff; color:#0176D3; font-size:13px; box-shadow:inset 0 0 0 1px #C9C9C9; margin-left:-1px; }
.sf-btns span:first-child { border-radius:4px 0 0 4px; } .sf-btns span:last-child { border-radius:0 4px 4px 0; padding:0 9px; }
.sf-hl { display:flex; gap:34px; margin-top:13px; padding-left:46px; }
.sf-hl dt, .sf-f dt { font-size:12px; color:#444; } .sf-hl dd, .sf-f dd { margin:2px 0 0; font-size:13px; min-height:18px; }
.lnk { color:#0B5CAB; }
.sf-pr { display:flex; align-items:center; gap:10px; margin-top:14px; }
.sf-p { flex:1; display:flex; height:32px; }
.sf-p div { position:relative; flex:1; display:grid; place-items:center; font-size:13px; color:#181818; background:#ECEBEA; margin-right:-2px; clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); }
.sf-p div:first-child { clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); border-radius:16px 0 0 16px; }
.sf-p div:last-child { clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%); border-radius:0 16px 16px 0; }
.sf-p .lay { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-weight:600; }
.sf-p .ok { background:#2E844A; } .sf-p .cur { background:#014486; }
.sf-mk { height:32px; display:flex; align-items:center; gap:6px; padding:0 14px; border-radius:4px; background:#0176D3; color:#fff; font-size:13px; white-space:nowrap; }
.sf-d { padding:0 16px 14px; overflow:hidden; }
.sf-tabs { display:flex; gap:22px; margin:0 -16px 14px; padding:0 16px; box-shadow:inset 0 -1px 0 #E5E5E5; }
.sf-tabs span { padding:12px 0 10px; font-size:13px; color:#444; } .sf-tabs span.on { color:#181818; font-weight:600; box-shadow:inset 0 -2px 0 #0176D3; }
.sf-f { display:grid; grid-template-columns:1fr 1fr; gap:10px 26px; margin:0; }
.sf-f > div { padding-bottom:6px; box-shadow:inset 0 -1px 0 #EEEDEC; min-width:0; }
.sf-f dd b { font-weight:500; }
.hot { display:inline-block; padding:1px 9px; border-radius:10px; background:#FDDDE3; color:#B60554; font-weight:600; font-size:12px; }
.sf-a { padding:12px 14px; overflow:hidden; display:flex; flex-direction:column; gap:10px; }
.sf-a h4 { margin:0; font-size:14px; font-weight:700; }
.sf-qa { display:flex; gap:6px; } .sf-qa span { width:30px; height:30px; border-radius:4px; display:grid; place-items:center; box-shadow:inset 0 0 0 1px #C9C9C9; }
.sf-qa svg { width:14px; height:14px; fill:none; stroke:#0176D3; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sf-grp { font-size:11.5px; font-weight:600; color:#444; padding:5px 8px; background:#F3F3F3; border-radius:4px; }
.sf-i { display:flex; gap:10px; align-items:flex-start; }
.sf-i .c { flex:0 0 auto; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; }
.sf-i .c svg { width:13px; height:13px; fill:#fff; }
.c-ev { background:#EB7092; } .c-tk { background:#3BA755; } .c-wa { background:#25D366; } .c-cl { background:#48C3CC; }
.sf-i b { display:block; font-weight:600; color:#0B5CAB; font-size:13px; } .sf-i small { color:#444; font-size:12px; }
.sf-toast { position:absolute; z-index:6; left:0; right:0; top:104px; margin:0 auto; width:max-content; display:flex; align-items:center; gap:10px; padding:12px 18px 12px 14px; border-radius:4px; background:#2E844A; color:#fff; font-size:14px; font-weight:500; box-shadow:0 2px 4px rgba(0,0,0,.18), 0 10px 24px -8px rgba(0,0,0,.35); }
.sf-toast svg { width:16px; height:16px; fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
@container mk (max-width:640px) {
  .sf { max-height:none; } .sf-n span:not(.on), .sf-s, .sf-btns span:not(:last-child), .sf-mk, .sf-u .bell { display:none; }
  .sf-b { grid-template-columns:1fr; grid-template-rows:auto auto auto; } .sf-hl { flex-wrap:wrap; gap:8px 22px; padding-left:0; }
  .sf-p div { font-size:11px; } .sf-toast { top:98px; font-size:12.5px; }
}

/* ── Bitrix24, a CRM lead card ── */
.bx { position:relative; display:grid; grid-template-columns:62px minmax(0,1fr); width:100%; height:100%; max-height:596px; border-radius:14px; overflow:hidden; background:#EEF2F4; box-shadow:0 0 0 1px #DCE2E7, var(--sh); font:13px/1.4 "Inter",-apple-system,"Segoe UI",Arial,sans-serif; letter-spacing:0; color:#333; }
.bx-l { background:#1B2B3C; display:flex; flex-direction:column; align-items:center; gap:16px; padding-top:16px; }
.bx-l i { width:26px; height:26px; border-radius:7px; background:rgba(255,255,255,.16); display:block; } .bx-l i.on { background:#2FC6F6; }
.bx-m { display:flex; flex-direction:column; min-width:0; }
.bx-t { display:flex; align-items:center; gap:18px; height:52px; padding:0 18px; background:#fff; box-shadow:0 1px 0 #E4E8EB; }
.bx-t img { height:21px; width:auto; }
.bx-t .q { flex:1; max-width:320px; height:32px; border-radius:16px; background:#F1F4F6; color:#9AA2AA; display:flex; align-items:center; padding:0 14px; font-size:12.5px; }
.bx-t .tm { margin-left:auto; color:#525C69; font-size:13px; font-weight:600; }
.bx-t .me { width:30px; height:30px; border-radius:50%; background:#2FC6F6; }
.bx-c { flex:1; min-height:0; padding:14px 18px; display:flex; flex-direction:column; gap:12px; }
.bx-h { display:flex; align-items:center; gap:10px; }
.bx-h .tag { font-size:11px; color:#fff; background:#2FC6F6; border-radius:4px; padding:3px 7px; font-weight:700; letter-spacing:.03em; }
.bx-h h3 { margin:0; font-size:20px; font-weight:600; letter-spacing:-.01em; color:#333; }
.bx-h .bt { margin-left:auto; display:flex; gap:8px; } .bx-h .bt span { height:30px; display:flex; align-items:center; padding:0 14px; border-radius:15px; background:#fff; box-shadow:inset 0 0 0 1px #C6CDD3; font-size:12px; font-weight:600; color:#535C69; } .bx-h .bt span.pri { background:#3BC8F5; box-shadow:none; color:#fff; }
.bx-s { display:flex; gap:3px; height:32px; }
.bx-s div { position:relative; flex:1; display:grid; place-items:center; font-size:11.5px; color:#535C69; background:#DDE3E8; border-radius:4px; }
.bx-s .lay { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-weight:600; border-radius:4px; }
.s1 { background:#39A8EF; } .s2 { background:#2FC6F6; } .s3 { background:#55D0E0; }
.bx-g { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:14px; }
.bx-b { background:#fff; border-radius:10px; padding:14px 16px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.bx-b h4 { margin:0 0 10px; font-size:11.5px; color:#525C69; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.bx-f { margin:0; display:flex; flex-direction:column; gap:8px; }
.bx-f dt { font-size:11.5px; color:#80868E; } .bx-f dd { margin:1px 0 0; min-height:18px; font-size:13px; }
.bx-f .who { display:flex; align-items:center; gap:7px; } .bx-f .who i { width:22px; height:22px; border-radius:50%; background:#2FC6F6; display:block; }
.bx-tabs { display:flex; gap:14px; font-size:12.5px; color:#80868E; margin-bottom:12px; padding-bottom:8px; box-shadow:inset 0 -1px 0 #EEF1F3; } .bx-tabs b { color:#333; font-weight:600; }
.bx-tl { display:flex; flex-direction:column; gap:10px; border-left:2px solid #DDE3E8; margin-left:8px; padding-left:16px; }
.bx-e { position:relative; background:#F8FAFB; border-radius:9px; padding:9px 12px; box-shadow:inset 0 0 0 1px #E7EBEE; }
.bx-e::before { content:""; position:absolute; left:-24px; top:11px; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 2.5px var(--c,#2FC6F6); }
.bx-e b { display:block; font-size:13px; font-weight:600; } .bx-e small { color:#80868E; font-size:12px; }
@container mk (max-width:640px) { .bx { grid-template-columns:1fr; max-height:none; } .bx-l, .bx-t .q, .bx-h .bt { display:none; } .bx-g { grid-template-columns:1fr; } .bx-s div { font-size:10px; } }

/* ── the task in the third drawing ── */
.tk { align-self:center; width:100%; max-width:560px; background:#fff; border-radius:14px; padding:0; overflow:hidden; box-shadow:0 0 0 1px #DDDBDA, var(--sh); font:13.5px/1.45 "Inter",sans-serif; letter-spacing:0; }
.tk-top { display:flex; align-items:center; gap:10px; height:46px; padding:0 18px; border-bottom:1px solid #EEEDEC; }
.tk-top img { height:22px; width:auto; } .tk-top span { font-size:12px; color:#747474; }
.tk-b { padding:16px 20px 18px; }
.tk-h { display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.tk-h .ic { width:32px; height:32px; border-radius:4px; background:#3BA755; display:grid; place-items:center; } .tk-h .ic.bxi { background:#2FC6F6; }
.tk-h .ic svg { width:18px; height:18px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.tk-h small { display:block; font-size:12px; color:#444; } .tk-h h3 { margin:0; font-size:17px; font-weight:700; letter-spacing:-.01em; }
.tk dl { margin:0; display:grid; grid-template-columns:120px 1fr; gap:7px 12px; }
.tk dt { color:#555; font-size:12.5px; } .tk dd { margin:0; }
.tk .why { margin-top:14px; padding:11px 13px; border-radius:8px; background:#FEF7E5; box-shadow:inset 0 0 0 1px #F5DFA5; color:#5A4510; font-size:13px; }
.tk .nev { margin-top:11px; font-size:12px; color:#747474; }

/* ── the fact check drawing: a document with comments in the margin ── */
.fc { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:24px; padding:28px; }
.doc { background:#fff; border-radius:12px; padding:30px 34px; box-shadow:0 0 0 1px var(--line), var(--sh); font:15.5px/1.8 "Inter",sans-serif; color:#2A2A2E; overflow:hidden; }
.doc .dk { display:inline-flex; height:24px; align-items:center; padding:0 10px; border-radius:999px; background:#F3F2EF; font-size:11.5px; font-weight:600; color:#6B6A66; margin-bottom:14px; }
.doc h3 { font-size:23px; font-weight:700; letter-spacing:-.025em; line-height:1.2; margin:0 0 12px; }
.w { position:relative; }
.w .hl { position:absolute; inset:-1px -3px; background:rgba(234,67,53,.11); border-radius:4px; }
.w .u { position:absolute; left:0; right:0; bottom:-1px; height:2.5px; background:#EA4335; border-radius:2px; }
.nb { display:inline-grid; place-items:center; width:17px; height:17px; border-radius:50%; background:#EA4335; color:#fff; font-size:10px; font-weight:700; vertical-align:2px; margin-left:3px; line-height:1; }
.cm { display:flex; flex-direction:column; gap:9px; min-height:0; }
.cm-h { display:flex; align-items:center; justify-content:space-between; font-weight:600; font-size:14px; }
.cm-h .cnt { font-size:12.5px; color:#C5221F; background:#FCE8E6; border-radius:999px; padding:3px 10px; font-weight:600; }
.c1 { display:flex; gap:10px; background:#fff; border-radius:12px; padding:10px 13px; box-shadow:0 0 0 1px var(--line), 0 6px 16px -12px rgba(17,17,20,.3); font-size:12.5px; line-height:1.4; }
.c1 .av { flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:#111114; color:#fff; font-size:10.5px; font-weight:700; display:grid; place-items:center; }
.c1 b { display:block; font-size:13px; margin-bottom:1px; } .c1 small { color:var(--ink3); font-size:11px; }
.c1.ok .av { background:#1F8A43; }
@container mk (max-width:640px) { .fc { grid-template-columns:1fr; padding:18px; } .doc { padding:22px; font-size:14.5px; } }

/* ── the live desk ── */
.live { padding-top:84px; }
.seg { display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px var(--line), 0 8px 24px -18px rgba(17,17,20,.3); }
.seg button { height:34px; padding:0 16px; border:0; border-radius:999px; background:transparent; font-size:13.5px; font-weight:600; color:var(--ink2); cursor:pointer; }
.seg button[aria-selected="true"] { background:var(--ink); color:#fff; }
.pills { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin:18px 0 26px; }
.pill { display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 13px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px var(--line); font-size:13px; font-weight:500; color:var(--ink3); transition:all .4s var(--ease); }
.pill i { width:8px; height:8px; border-radius:50%; background:#D3D2CE; transition:background .4s; }
.pill.on { color:var(--ink); box-shadow:0 0 0 1px #BFE3C9, 0 6px 16px -10px rgba(31,138,67,.5); } .pill.on i { background:#1F8A43; }
.pill.warn.on { box-shadow:0 0 0 1px #F2D58A; } .pill.warn.on i { background:#D69E0B; }
.lv { display:grid; grid-template-columns:auto minmax(0,1fr); gap:30px; align-items:start; }
.lv .ip { --z:.74; }
.lv .wa-bg { overflow-y:auto; scroll-behavior:smooth; }
.lv .wa-list { min-height:100%; justify-content:flex-end; }
.starters { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:16px; max-width:330px; }
.starters button { height:32px; padding:0 13px; border:0; border-radius:999px; background:#fff; box-shadow:0 0 0 1px var(--line); font-size:12.5px; font-weight:500; cursor:pointer; }
.starters button:hover { box-shadow:0 0 0 1px #C9C8C3; }
.lv-side { display:flex; flex-direction:column; gap:14px; min-width:0; }
.rec { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 0 0 1px var(--line), var(--sh); }
.rec-top { display:flex; align-items:center; gap:12px; height:48px; padding:0 16px; border-bottom:1px solid #EEEDEC; background:#fff; }
.rec-top img { height:24px; width:auto; } .rec-top .k { font-size:12.5px; color:var(--ink3); }
.rec-top .new { margin-left:auto; height:28px; padding:0 12px; border:0; border-radius:999px; background:#F3F2EF; font-size:12.5px; font-weight:600; color:var(--ink2); cursor:pointer; }
.rec-h { display:flex; align-items:center; gap:12px; padding:14px 16px 4px; }
.rec-h .ic { width:34px; height:34px; border-radius:4px; background:#F88962; display:grid; place-items:center; flex:0 0 auto; } .rec-h .ic svg { width:20px; height:20px; fill:#fff; }
.rec-h .ic.bxi { background:#2FC6F6; border-radius:8px; }
.rec-h small { display:block; font-size:12px; color:#555; } .rec-h h3 { margin:0; font-size:19px; font-weight:700; letter-spacing:-.015em; }
.rec-h .rt { margin-left:auto; }
.rec-p { display:flex; height:30px; margin:12px 16px 4px; }
.rec-p div { position:relative; flex:1; display:grid; place-items:center; font-size:12px; color:#181818; background:#ECEBEA; margin-right:-2px; clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%); transition:background .5s, color .5s; }
.rec-p div:first-child { clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%); border-radius:15px 0 0 15px; }
.rec-p div:last-child { clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 11px 50%); border-radius:0 15px 15px 0; }
.rec-p div.ok { background:#2E844A; color:#fff; font-weight:600; } .rec-p div.cur { background:#014486; color:#fff; font-weight:600; }
.bxm .rec-p { gap:3px; } .bxm .rec-p div { clip-path:none; border-radius:4px; margin:0; } .bxm .rec-p div.ok { background:#39A8EF; } .bxm .rec-p div.cur { background:#55D0E0; }
.fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 24px; margin:0; padding:14px 16px 16px; }
.fields > div { min-width:0; padding-bottom:6px; box-shadow:inset 0 -1px 0 #EEEDEC; }
.fields dt { font-size:12px; color:#555; } .fields dd { margin:2px 0 0; font-size:13.5px; min-height:19px; overflow-wrap:anywhere; }
.fields dd.empty { color:#C4C3BE; } .fields .wide { grid-column:1 / -1; }
.fields dd.flash { animation:fl 1.8s var(--ease); } @keyframes fl { 0% { background:#FFF0B8; } 100% { background:transparent; } }
.tasks { padding:0 16px 16px; } .tasks .lb { font-size:12px; color:#555; margin-bottom:6px; }
.tasks ol { margin:0; padding:0; list-style:none; display:flex; gap:6px; flex-wrap:wrap; } .tasks li { height:28px; display:flex; align-items:center; padding:0 11px; border-radius:999px; background:#F3F6F9; font-size:12.5px; color:#3E4B5B; }
.hand { padding:14px 16px; border-radius:14px; background:#FEF7E5; box-shadow:0 0 0 1px #F2D58A; } .hand b { font-size:14px; } .hand p { margin:3px 0 0; font-size:13.5px; color:#5A4510; }
.facts { padding:14px 16px; border-radius:14px; background:#fff; box-shadow:0 0 0 1px var(--line); } .facts .lb { font-size:12px; color:#555; margin-bottom:6px; }
.facts ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; } .facts li { font-size:13px; color:var(--ink2); } .facts li b { color:var(--ink); margin-right:5px; } .facts a { color:#0B5CAB; }
.note-s { font-size:12px; color:var(--ink3); margin:0 4px; }
.check { max-width:860px; margin:0 auto; background:#fff; border-radius:18px; padding:24px; box-shadow:0 0 0 1px var(--line), var(--sh); }
.check textarea { width:100%; margin-top:6px; border:0; border-radius:12px; padding:14px 16px; font-size:16px; line-height:1.55; resize:vertical; background:#F7F7F5; box-shadow:inset 0 0 0 1px var(--line); outline:none; }
.check .row { display:flex; gap:8px; margin-top:12px; }
.finding { display:flex; gap:10px; padding:12px 0; border-top:1px solid #EFEEEA; } .finding:first-of-type { border-top:0; }
.finding .nb { flex:0 0 auto; margin:2px 0 0; } .finding q { display:block; font-style:italic; quotes:none; } .finding .p { color:#C5221F; font-size:14px; margin-top:3px; } .finding .a { font-size:14px; margin-top:3px; } .finding .a a { color:#0B5CAB; }
.csum { margin:16px 0 4px; font-weight:600; } .err { color:#C5221F; font-size:13.5px; }
.gate { position:fixed; inset:0; z-index:-1; display:grid; place-items:center; padding:20px; } .gate[hidden] { display:none; } .gate.on { z-index:10; background:var(--bg); }
.gate form { padding:26px; width:min(420px,100%); display:flex; flex-direction:column; gap:12px; background:#fff; border-radius:18px; box-shadow:0 0 0 1px var(--line), var(--sh); }
.gate h2 { margin:0; font-size:20px; letter-spacing:-.02em; } .gate input { height:44px; border:0; border-radius:12px; padding:0 14px; font-size:16px; background:#F7F7F5; box-shadow:inset 0 0 0 1px var(--line); }
.view[hidden] { display:none !important; }
@media (max-width:860px) {
  .lv { grid-template-columns:1fr; justify-items:center; }
  .lv .ip { --z:var(--zfit,.74); }
  .lv-side { width:100%; }
  .fields { grid-template-columns:1fr 1fr; }
}

/* ── the transcript card in the first drawing (Soltrack's call panel) ── */
.tr { align-self:stretch; display:flex; flex-direction:column; min-height:0; background:#fff; border-radius:18px; box-shadow:0 0 0 1px var(--line), var(--sh); overflow:hidden; font-family:"Inter",sans-serif; }
.tr-h { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 22px 0; }
.tr-h b { font-size:15px; font-weight:600; } .tr-h span { font-size:13px; color:var(--ink3); }
.tr-sub { padding:3px 22px 12px; font-size:12.5px; color:var(--ink3); border-bottom:1px solid #F0EFEB; }
.tr-b { flex:1; min-height:0; overflow:hidden; padding:14px 22px 6px; display:flex; flex-direction:column; gap:11px; }
.ln { display:grid; grid-template-columns:52px minmax(0,1fr); gap:10px; font-size:14.5px; line-height:1.45; }
.ln span { font-size:13px; font-weight:600; padding-top:1px; } .ln .d { color:var(--gold); } .ln .b { color:var(--ink3); }
.ln p { margin:0; color:var(--ink); }
.tr-f { margin:8px 16px 16px; padding:13px 14px; border-radius:14px; background:#F8F8F6; box-shadow:inset 0 0 0 1px #EEEDE9; }
.tr-fh { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--ink2); margin-bottom:9px; }
.tr-fh .ok { font-size:12px; font-weight:600; color:#1F7A3A; background:#E3F4E8; border-radius:999px; padding:4px 10px; }
.chs { display:flex; flex-wrap:wrap; gap:6px; }
.ch { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px 0 8px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px var(--line); font-size:12.5px; font-weight:500; }
.ch i { display:grid; place-items:center; } .ch svg { width:12px; height:12px; fill:none; stroke:#1F8A43; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
@container mk (max-width:640px) { .tr-h, .tr-b { padding-left:18px; padding-right:18px; } .tr-sub { padding-left:18px; padding-right:18px; } .ln { font-size:14px; } }

/* rating in the live record */
.rt { display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600; }
.rt.Hot { background:#FDDDE3; color:#B60554; } .rt.Warm { background:#FEF1CD; color:#855B00; } .rt.Cold { background:#E6ECF2; color:#3D4E66; }

.starters[hidden] { display:none; }
.wa-back { padding-left:4px; }