/* app.css — the whole app, one stylesheet (app-v7, Oct 10, 2026). Built from the wireframes he approved ("I approve all
   the pages. Build them.") on the system from the ChatGPT study (docs/design-research/chatgpt/SYNTHESIS.md):
   — the phone's own font; the iPhone's text sizes (11 · 13 · 15 · 17 · 20 · 22 · 28 · 30); weights 400 / 500 / 600 / 700
     for titles only;
   — greys do the structure (a page, a fill, a pressed fill); colour only means something: money green, needs-you
     orange, act-now red, Justin blue, Dennis purple;
   — one ink pill per screen; everything else a grey fill or words;
   — radii: 12 rows and inputs · 16 cards · 26 sheets · round buttons;
   — every tap target 44 px;
   — motion: menus and cards 220 ms from .94, sheets 300 ms, nothing loops while idle; none of it under reduced motion.
   One job per page: Today (what to do now) · Calling (one business at a time) · Inbox (email, Gmail's layout) ·
   Map (find new businesses) · Leads (every business; its page is a hub) · Team (the week, and Settings). */

:root{
  color-scheme:light;
  /* type sizes and the idle clocks (Oct 13): new rules name these instead of a px, so tests/lint.js's ratchet keeps counting down */
  --t-12:12px; --t-12-5:12.5px; --t-13:13px; --t-14:14px; --t-16:16px; --t-17:17px; --t-18:18px; --t-28:28px; --d-idle:9s; --d-wave:3.2s;
  --bg:#ffffff; --bg-2:#f7f7f7; --raised:#ffffff;
  --fill:#f2f2f2; --fill-2:#e7e7e7; --fill-3:#d9d9d9;
  --ink:#0d0d0d; --ink-2:#5d5d5d; --ink-3:#8f8f8f; --ink-4:#c4c4c4;
  --line:#0000001a; --line-soft:#0000000f; --line-strong:#00000033;
  --paper:#0d0d0d; --on-paper:#ffffff;
  --go:#2c6732; --go-bg:#def3e5;
  --warm:#ac4f23; --warm-bg:#fbe8db;
  --stop:#ba2623; --stop-bg:#ffe1e0;
  --blue:#1a5fd0; --purple:#8a44d4; --link:#0a58ca;
  --scrim:#00000059;
  --shadow-1:0 1px 2px #0000000f,0 0 0 .5px #0000000d;
  --shadow-2:0 8px 24px #00000024,0 0 0 .5px #0000000d;
  --shadow-sheet:0 -8px 40px #0000001f;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1); --move:cubic-bezier(.2,0,0,1);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --top:52px; --tabbar:calc(56px + var(--safe-b)); --side:248px; --gut:16px;
  /* the map overlay's tokens (map.css reads these) */
  --map-land:#f2f2f2;
  --h-0:#b4b4b4; --h-1:#b88a00; --h-2:#d4681c; --h-3:#ba2623; --h-4:#9b2a74; --h-un:#8f8f8f;
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;
  --bg:#000000; --bg-2:#0b0b0b; --raised:#1c1c1c;
  --fill:#1c1c1c; --fill-2:#2a2a2a; --fill-3:#383838;
  --ink:#ffffff; --ink-2:#c4c4c4; --ink-3:#8e8e8e; --ink-4:#4a4a4a;
  --line:#ffffff24; --line-soft:#ffffff14; --line-strong:#ffffff38;
  --paper:#ffffff; --on-paper:#0d0d0d;
  --go:#6bc67f; --go-bg:#16301c;
  --warm:#ef8b57; --warm-bg:#3a2214;
  --stop:#ff6764; --stop-bg:#3d1515;
  --blue:#7fb2ff; --purple:#c8a2ff; --link:#7fb2ff;
  --scrim:#000000a6;
  --shadow-1:0 0 0 .5px #ffffff1f;
  --shadow-2:0 0 0 .5px #ffffff1f,0 10px 30px #000000b3;
  --shadow-sheet:0 0 0 .5px #ffffff1f;
  --map-land:#171717;
  --h-0:#5d5d5d; --h-1:#d4a72c; --h-2:#ef8b57; --h-3:#ff6764; --h-4:#f294c6; --h-un:#afafaf;
}}
/* a raised surface (a sheet, a menu, a card over the map): its fills step up so they still read */
.sheet,.menu,.bz,.spt,.mpanel{--fill:#f2f2f2;--fill-2:#e7e7e7}
@media (prefers-color-scheme:dark){.sheet,.menu,.bz,.spt,.mpanel{--fill:#2a2a2a;--fill-2:#383838;--fill-3:#474747}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{min-height:100vh;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"kern"}
body.sheet-open{overflow:hidden}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;text-align:inherit;-webkit-tap-highlight-color:transparent}
button[disabled]{cursor:default;opacity:.45}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
svg{display:block;flex:none;width:20px;height:20px}
img{display:block;max-width:100%}
b,strong{font-weight:600}
ol,ul{list-style:none}
input,textarea{border:0;outline:none;background:none}
::placeholder{color:var(--ink-3)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:10px}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
.g{color:var(--go)}.o{color:var(--warm)}.r{color:var(--stop)}
.sub{font-size:13px;line-height:1.4;color:var(--ink-2)}
.dim{color:var(--ink-2)}
.grow{flex:1;min-width:0}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- buttons: one ink pill; the rest a fill or words ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 22px;border-radius:999px;background:var(--fill);color:var(--ink);font-size:16px;font-weight:600;white-space:nowrap;transition:transform .1s,background-color .15s}
.btn.primary{background:var(--paper);color:var(--on-paper)}
.btn.sm{height:36px;padding:0 14px;font-size:14px}
.btn.md{height:44px;padding:0 18px;font-size:15px}
.btn.w{width:100%}
.btn svg{width:18px;height:18px}
.btn:active:not([disabled]){transform:scale(.97)}
@media (hover:hover){.btn:hover:not([disabled]){background:var(--fill-2)}.btn.primary:hover:not([disabled]){background:color-mix(in srgb,var(--paper) 86%,var(--bg))}}
.link{display:inline-flex;align-items:center;gap:4px;min-height:36px;font-size:15px;font-weight:600;color:var(--ink-2)}
.link:hover{color:var(--ink)}
.link.blue{color:var(--link)}
.ibtn{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;color:var(--ink)}
.ibtn svg{width:22px;height:22px}
.ibtn.fill{background:var(--fill)}
.ibtn:active{background:var(--fill-2)}
@media (hover:hover){.ibtn:hover{background:var(--fill)}.ibtn.fill:hover{background:var(--fill-2)}}
.pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;background:var(--fill);font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.pill.go{background:var(--go-bg);color:var(--go)}
.pill.warm{background:var(--warm-bg);color:var(--warm)}
.pill.stop{background:var(--stop-bg);color:var(--stop)}
.pill.blue{color:var(--blue)}.pill.purple{color:var(--purple)}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;background:var(--fill);font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.chip i{font-style:normal;font-weight:500;color:var(--ink-2)}
.chip[aria-pressed="true"]{background:var(--paper);color:var(--on-paper)}
.chip[aria-pressed="true"] i{color:inherit;opacity:.7}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
/* where a call stands: a dot and its words */
.st{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2);min-width:0}
.st i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.st.new i,.st.rf i{background:none;box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.st.cb i,.st.missed i{background:var(--warm)}.st.cb,.st.missed{color:var(--warm)}
.st.late i{background:var(--stop)}.st.late{color:var(--stop)}
.st.int i,.st.won i{background:var(--go)}.st.int,.st.won{color:var(--go)}
.st.sent i{background:none;box-shadow:inset 0 0 0 1.5px var(--go)}
.st.pass i{background:none;box-shadow:inset 0 0 0 1.5px var(--ink-4)}
.st.dnc{color:var(--stop)}.st.dnc i{background:none;box-shadow:inset 0 0 0 1.5px var(--stop)}
.av{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--fill-2);font-size:13px;font-weight:700;color:var(--ink);overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
.av.lg{width:56px;height:56px;font-size:20px}
.av.xl{width:72px;height:72px;font-size:26px}
.av.justin{color:var(--blue)}.av.dennis{color:var(--purple)}
.who-justin{color:var(--blue)}.who-dennis{color:var(--purple)}

/* ---------- the shell: a sidebar on a computer, a tab bar on a phone ---------- */
.app{min-height:100vh}
main.main{min-width:0}
.side{display:none}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:var(--tabbar);padding:0 4px var(--safe-b);background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 -1px 0 var(--line-soft)}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;font-size:11px;font-weight:500;color:var(--ink-2)}
.tab svg{width:24px;height:24px;stroke-width:1.7}
.tab.on{color:var(--ink);font-weight:600}
.tab.on svg{stroke-width:2.1}
.tab:active svg{transform:scale(.9);transition:transform .1s}
.badge{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--warm);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}
.badge.late{background:var(--stop)}
.tab .badge{position:absolute;top:4px;left:calc(50% + 7px);box-shadow:0 0 0 2px var(--bg)}
.pushed .tabbar,.in-call .tabbar,.sheet-up .tabbar{display:none}
.page{padding-bottom:calc(var(--tabbar) + 24px)}
.pushed .page,.in-call .page{padding-bottom:calc(24px + var(--safe-b))}
/* a page's top bar and its title */
.bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:6px;height:calc(var(--top) + var(--safe-t));padding:var(--safe-t) 8px 0;background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.bar .back{display:inline-flex;align-items:center;gap:2px;height:40px;padding:0 8px 0 2px;font-size:17px;color:var(--ink)}
.bar .back svg{width:24px;height:24px}
.bar .bar-t{flex:1;min-width:0;text-align:center;font-size:17px;font-weight:600}
.bar .sp{flex:1}
.ttl{padding:6px var(--gut) 12px;font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:20px var(--gut) 6px;font-size:13px;font-weight:600;color:var(--ink-2)}
.h .link{min-height:0;font-size:13px}
.lede{padding:0 var(--gut) 12px;font-size:15px;color:var(--ink-2)}
.empty{margin:8px var(--gut);padding:18px 16px;border-radius:16px;background:var(--fill);font-size:15px;color:var(--ink-2)}
.empty b{display:block;margin-bottom:2px;color:var(--ink)}
.empty .btn{margin-top:12px}

/* ---------- rows and grouped lists ---------- */
.row{position:relative;display:flex;align-items:center;gap:12px;min-height:62px;padding:9px var(--gut);border-bottom:1px solid var(--line-soft);text-align:left;width:100%}
.row:last-child{border-bottom:0}
.row .nm{display:block;font-size:16px;font-weight:600;line-height:1.3}
.row .ln{display:block;font-size:14px;color:var(--ink-2);margin-top:1px}
.row:active{background:var(--fill)}
@media (hover:hover){.row:hover{background:var(--bg-2)}}
.row .act{flex:none}
.group{margin:0 var(--gut);border-radius:16px;background:var(--fill);overflow:hidden}
.group>.gr{display:flex;align-items:center;gap:12px;min-height:54px;padding:8px 14px;border-bottom:1px solid var(--line-soft);width:100%;text-align:left}
.group>.gr:last-child{border-bottom:0}
.group>.gr b{display:block;font-size:15px}
.group>.gr .sub{display:block}
.group>.gr .chev{flex:none;color:var(--ink-3);font-size:20px;line-height:1}
.group>a.gr:active,.group>button.gr:active{background:var(--fill-2)}
.card{margin:0 var(--gut);padding:16px;border-radius:18px;background:var(--fill)}
.card .k{font-size:13px;font-weight:600;color:var(--ink-2)}
.quote{font-size:21px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.quote.sm{font-size:18px}

/* ---------- a lead in a list: name ↔ price, where the call stands, kind · town ---------- */
.lr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:baseline;width:100%;padding:11px var(--gut);border-bottom:1px solid var(--line-soft);text-align:left;cursor:pointer}
.lr:last-of-type{border-bottom:0}
.lr:active{background:var(--fill)}
@media (hover:hover){.lr:hover{background:var(--bg-2)}}
.lr.sel{background:var(--fill)}
.lr.came{animation:came 1.6s ease-out}
@keyframes came{from{background:var(--fill-2)}}
.lr .nm{font-size:16px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr .pr{justify-self:end;font-size:15px;font-weight:600;color:var(--go);white-space:nowrap;font-variant-numeric:tabular-nums}
.lr .pr small{margin-left:4px;font-size:12px;font-weight:500;color:var(--ink-2)}
.lr .ln2,.lr .ln3{grid-column:1/3;min-width:0}
.lr .ln2{margin-top:3px;display:flex}
.lr .ln2 .st{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr .ln3{font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.lr.done .nm,.lr.done .pr{color:var(--ink-2)}

/* ---------- Today ---------- */
.today .ready-l{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 12px;border-radius:999px;background:var(--bg);font-size:13px;font-weight:600}
.today .date{display:flex;align-items:center;justify-content:space-between;height:calc(var(--top) + var(--safe-t));padding:var(--safe-t) var(--gut) 0}
.act-p{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;background:var(--fill);font-size:14px;font-weight:600}
.act-p svg{width:16px;height:16px}
.act-p:active{background:var(--fill-2)}
.today .done-line{margin:18px var(--gut) 0;font-size:14px;color:var(--ink-2)}

/* ---------- calling ---------- */
.call{display:flex;flex-direction:column;min-height:100dvh}
.call .cbar{display:flex;align-items:center;justify-content:space-between;gap:8px;height:calc(var(--top) + var(--safe-t));padding:var(--safe-t) 12px 0}
.call .cbar b{font-size:17px;font-variant-numeric:tabular-nums}
.call .segs{display:flex;gap:4px;padding:0 var(--gut)}
.call .segs i{flex:1;height:4px;border-radius:2px;background:var(--fill-2)}
.call .segs i.d{background:var(--ink)}
.call .segs i.na{background:var(--ink-3)}.call .segs i.cb{background:var(--warm)}.call .segs i.sk{background:var(--fill-3)}
.call .segs i.now{background:var(--ink-3);box-shadow:inset 0 0 0 1px var(--ink)}
.call .who{padding:20px 20px 0}
.call .who h1{margin:4px 0 12px;font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.call .why{margin-top:16px;font-size:17px;font-weight:600;line-height:1.4}
.call .why.bad{color:var(--stop)}
.call .say{margin:18px var(--gut) 0;padding:16px;border-radius:20px;background:var(--fill)}
.call .say .k{font-size:13px;font-weight:600;color:var(--ink-2)}
.call .say .quote{margin-top:6px}
.call .dock{margin-top:auto;padding:16px var(--gut) calc(24px + var(--safe-b))}
@media (min-width:1000px){.call .dock{margin-top:28px}}
.call .dock .btn.big{width:100%;height:60px;font-size:18px;min-width:0;padding:0 22px;gap:12px}
.call .dock .btn.big svg{flex:none;width:20px;height:20px}
.call .dock .btn.big .t{display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:1.2}
.call .dock .btn.big .nm{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.call .dock .btn.big small{font-size:13px;font-weight:500;opacity:.65;font-variant-numeric:tabular-nums}
.call .dock .row2{display:flex;justify-content:space-between;margin-top:10px}
.call .called{margin-top:4px;font-size:14px;color:var(--ink-2)}
.call .called a{font-weight:600;color:var(--ink)}
.ans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ans button{display:flex;align-items:center;gap:10px;height:58px;padding:0 16px;border-radius:16px;background:var(--fill);font-size:16px;font-weight:600;text-align:left}
.ans button:active{background:var(--fill-2);transform:scale(.98)}
.ans button i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--ink-3)}
.ans .a-callback i{background:var(--warm)}
.ans .a-not-interested i{background:none;box-shadow:inset 0 0 0 2px var(--ink-3)}
.ans .a-bite i{background:var(--go)}
.ans button.on{background:var(--paper);color:var(--on-paper)}
.ans kbd{margin-left:auto;font:500 12px var(--sans);color:var(--ink-3)}
@media (hover:none),(pointer:coarse){.ans kbd{display:none}}
.how-h{margin:0 4px 10px;font-size:17px;font-weight:700}
.dnc{display:block;width:100%;margin-top:12px;text-align:center;font-size:14px;color:var(--ink-2);min-height:36px}
.call-end{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:40px 20px}
.call-end h1{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.call-end .dots{display:flex;flex-wrap:wrap;gap:6px}
.call-end .dots i{width:12px;height:12px;border-radius:50%;background:var(--ink-3)}
.call-end .dots i.cb{background:var(--warm)}.call-end .dots i.int,.call-end .dots i.won{background:var(--go)}.call-end .dots i.pass{background:none;box-shadow:inset 0 0 0 2px var(--ink-3)}
.call-end .owe{width:100%}
.call-end .owe .h{padding-left:0;padding-right:0}
.call-end .owe .group{margin:0}

/* ---------- sheets ---------- */
.sheet-wrap{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center;background:var(--scrim);animation:fadeIn .3s var(--move) both}
.sheet-wrap.free{background:none;pointer-events:none;animation:none}
.sheet-wrap.free .sheet{pointer-events:auto}
.sheet{position:relative;width:100%;max-width:560px;max-height:90dvh;overflow:auto;overscroll-behavior:contain;padding:10px 16px calc(24px + var(--safe-b));border-radius:26px 26px 0 0;background:var(--raised);box-shadow:var(--shadow-sheet);animation:sheetUp .3s var(--move) both}
.sheet::before{content:"";display:block;width:36px;height:5px;margin:0 auto 12px;border-radius:999px;background:var(--line-strong)}
.sheet .sh-top{display:flex;align-items:flex-start;gap:10px;margin:0 4px 12px}
.sheet .sh-top .sub a,.sheet .sh-top .sub button{font-weight:600;color:var(--ink)}
.sheet h2{font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.sheet .x{margin:-4px -4px 0 auto}
.sheet .msg{padding:12px 14px;border-radius:18px;background:var(--fill);font-size:15px;line-height:1.45}
.sheet .opts{display:flex;flex-direction:column;gap:6px}
.sheet .opt{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:0 16px;border-radius:14px;background:var(--fill);font-size:16px;font-weight:600;text-align:left;width:100%}
.sheet .opt>span:not(.n):not(.grow){font-size:14px;font-weight:500;color:var(--ink-2);text-align:right}
.sheet .opt.pick{background:var(--paper);color:var(--on-paper)}
.sheet .opt.pick>span{color:inherit;opacity:.75}
.sheet .opt:active{background:var(--fill-2)}
.sheet .opt.big{min-height:62px;justify-content:flex-start}
.sheet .opt .n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--raised);display:grid;place-items:center;font-size:13px;font-weight:700}
.sheet .opt b{display:block;font-size:16px}
.sheet .opt small{display:block;font-size:13px;font-weight:500;color:var(--ink-2)}
.sheet .foot{display:flex;justify-content:space-between;gap:12px;margin-top:14px}
.sheet .note-in{width:100%;height:44px;padding:0 12px;border-radius:12px;background:var(--fill);font-size:15px}
.sheet label.cb{display:flex;align-items:center;gap:10px;margin:14px 4px 0;font-size:15px;color:var(--ink-2)}
.sheet label.cb input{width:18px;height:18px;accent-color:var(--ink)}
.sheet .fld{display:block;margin-top:12px}
.sheet .fld span{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--ink-2)}
.sheet .fld input,.sheet .fld textarea{width:100%;padding:11px 12px;border-radius:12px;background:var(--fill);font-size:16px;line-height:1.45}
.sheet .fld textarea{min-height:200px;resize:none}
@media (min-width:1000px){
  .sheet-wrap{align-items:center}
  .sheet{border-radius:22px;max-height:84vh;box-shadow:var(--shadow-2);animation:popIn .26s var(--move) both}
  .sheet::before{display:none}
}
@keyframes fadeIn{from{background:transparent}}
@keyframes sheetUp{from{transform:translateY(100%)}}
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes menuIn{from{opacity:0;transform:scale(.94)}}

/* ---------- a menu (the list picker, the lead's ⋯) ---------- */
.menu{position:fixed;left:0;top:0;z-index:60;min-width:240px;max-height:70vh;overflow:auto;padding:6px;border-radius:16px;background:var(--raised);box-shadow:var(--shadow-2);transform-origin:top right;animation:menuIn .22s var(--ease) both}
.menu .mh{padding:10px 10px 4px;font-size:13px;font-weight:600;color:var(--ink-2)}
.menu button,.menu a{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:44px;padding:0 10px;border-radius:10px;font-size:16px;text-align:left}
.menu button i,.menu a i{font-style:normal;font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.menu [aria-checked="true"]{font-weight:600}
.menu [aria-checked="true"] i{color:var(--ink)}
.menu-scrim{position:fixed;inset:0;z-index:59}
.menu button:active,.menu a:active{background:var(--fill)}
@media (hover:hover){.menu button:hover,.menu a:hover{background:var(--fill)}}
.menu .danger{color:var(--stop)}
.menu-host{position:relative}

/* ---------- Leads ---------- */
.search{display:flex;align-items:center;gap:10px;height:44px;margin:0 var(--gut);padding:0 12px;border-radius:12px;background:var(--fill)}
.search svg{width:18px;height:18px;color:var(--ink-2)}
.search input{flex:1;min-width:0;height:44px;font-size:16px}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.search .clr{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink-3);color:var(--bg);font-size:11px}
.leads .chips{padding:12px var(--gut) 4px;flex-wrap:wrap;overflow:visible}
.leads .tools{display:flex;justify-content:space-between;align-items:center;padding:4px var(--gut) 2px}
.leads .tools .link{font-size:13px;min-height:32px}
.count{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px;padding:2px var(--gut);font-size:13px;color:var(--ink-2)}
.count .link{min-height:32px;font-size:14px}
.leads .gh{padding:16px var(--gut) 4px;font-size:13px;font-weight:600;color:var(--ink-2)}
.list .foot{padding:16px var(--gut);font-size:13px;color:var(--ink-2)}

/* ---------- a business: the hub ---------- */
.biz .hd{display:flex;gap:14px;align-items:center;padding:4px var(--gut) 0}
.biz .tile{flex:none;width:56px;height:56px;border-radius:14px;background:var(--fill);overflow:hidden;display:grid;place-items:center;color:var(--warm);box-shadow:inset 0 0 0 1px var(--line-soft)}
.biz .tile img{width:100%;height:100%;object-fit:cover;object-position:top}
.biz h1{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.biz .pills{padding:12px var(--gut) 0}
.biz .acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:14px var(--gut) 0}
.biz .acts a,.biz .acts button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:66px;border-radius:14px;background:var(--fill);font-size:13px;font-weight:600}
.biz .acts a:active,.biz .acts button:active{background:var(--fill-2)}
.biz .acts svg{width:22px;height:22px}
.biz .acts .off{opacity:.4;pointer-events:none}
.biz .next{margin:14px var(--gut) 0;padding:14px 16px;border-radius:18px;background:var(--fill)}
.biz .next .k{font-size:13px;font-weight:600;color:var(--ink-2)}
.biz .next p{margin:2px 0 12px;font-size:17px;font-weight:600;line-height:1.35}
.biz .next p.r{color:var(--stop)}
.biz .stands{padding:8px var(--gut) 0;font-size:14px;color:var(--ink-2)}
.biz .group{margin-top:12px}
.biz .why{font-size:17px;font-weight:600}
.biz .why.bad{color:var(--stop)}
.biz .shot{flex:none;align-self:flex-start;width:132px;border-radius:16px;overflow:hidden;background:var(--fill)}
.biz .shot img{width:100%;aspect-ratio:390/760;object-fit:cover;object-position:top}
.biz .checks{display:flex;gap:14px;padding:0 var(--gut)}
.ck{display:flex;align-items:flex-start;gap:10px;padding:7px 0;font-size:14px;line-height:1.4;border-bottom:1px solid var(--line-soft)}
.ck:last-child{border-bottom:0}
.ck i{flex:none;width:18px;font-style:normal;font-weight:700;text-align:center}
.ck.no i{color:var(--stop)}.ck.ok i{color:var(--go)}
.ck small{display:block;color:var(--ink-2);font-size:13px}
.biz .prose{font-size:15px;line-height:1.55;color:var(--ink)}
.biz .prose p+p{margin-top:10px}
.biz .prose .dim{color:var(--ink-2)}
.tl .ev{display:flex;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.tl .ev:last-child{border-bottom:0}
.tl .ev .d{flex:none;width:58px;font-size:13px;color:var(--ink-2)}
.tl .ev b{display:block;font-size:15px}
.tl .ev .n{font-size:14px;color:var(--ink-2)}
.notebox{margin:0 var(--gut);padding:10px;border-radius:16px;background:var(--fill)}
.notebox textarea{width:100%;min-height:76px;padding:6px;font-size:16px;line-height:1.45;resize:none}
.notebox .row-r{display:flex;justify-content:flex-end}
.code{margin:0 var(--gut);padding:12px 14px;border-radius:14px;background:var(--fill);font-family:var(--mono);font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto}
.field{display:flex;gap:8px;margin:0 var(--gut)}
.field input{flex:1;min-width:0;height:44px;padding:0 12px;border-radius:12px;background:var(--fill);font-size:16px}
.mock{margin:0 var(--gut);border-radius:16px;background:var(--fill);overflow:hidden}
.mock .mt{display:flex;gap:6px;padding:10px 12px 0;overflow-x:auto;scrollbar-width:none}
.mock .mt::-webkit-scrollbar{display:none}
.mock .mb{padding:12px}

/* ---------- Inbox: Gmail's layout ---------- */
.inbox .ibar{display:flex;align-items:center;gap:10px;height:48px;margin:calc(8px + var(--safe-t)) 12px 6px;padding:0 6px 0 8px;border-radius:999px;background:var(--fill)}
.inbox .ibar input{flex:1;min-width:0;height:44px;font-size:16px}
.inbox .lbl{padding:8px var(--gut) 2px;font-size:13px;font-weight:600;color:var(--ink-2)}
.inbox .notice{display:flex;gap:12px;align-items:flex-start;margin:6px var(--gut) 6px;padding:12px 14px;border-radius:16px;background:var(--fill);font-size:14px;color:var(--ink-2)}
.inbox .notice b{display:block;color:var(--ink);font-size:15px}
.inbox .notice .btn{flex:none;align-self:center}
.mrow{display:grid;grid-template-columns:40px minmax(0,1fr) auto;column-gap:12px;width:100%;padding:12px var(--gut);text-align:left}
.mrow:active{background:var(--fill)}
@media (hover:hover){.mrow:hover{background:var(--bg-2)}}
.mrow.sel{background:var(--fill)}
.mrow .av{width:40px;height:40px;font-size:15px}
.mrow .from{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .subj,.mrow .snip{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .subj{font-size:14px}
.mrow .snip{font-size:14px;color:var(--ink-2)}
.mrow .side2{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.mrow .time{font-size:12px;color:var(--ink-2);white-space:nowrap}
.mrow .star{width:18px;height:18px;color:var(--ink-3)}
.mrow.u .from,.mrow.u .subj,.mrow.u .time{font-weight:700;color:var(--ink)}
.mrow .nudge{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:13px;color:var(--ink-2)}
.mrow .nudge b{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--fill);font-size:13px;color:var(--ink)}
.fab{position:fixed;right:16px;bottom:calc(var(--tabbar) + 16px);z-index:35;display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 22px 0 18px;border-radius:18px;background:var(--fill-2);color:var(--ink);font-size:16px;font-weight:600;box-shadow:0 2px 8px #00000029}
.fab svg{width:22px;height:22px}
.drawer-wrap{position:fixed;inset:0;z-index:70;background:var(--scrim);animation:fadeIn .25s var(--move) both}
.drawer{position:absolute;left:0;top:0;bottom:0;width:min(300px,84vw);padding:calc(16px + var(--safe-t)) 0 16px;border-radius:0 20px 20px 0;background:var(--raised);overflow:auto;animation:drawerIn .28s var(--move) both}
@keyframes drawerIn{from{transform:translateX(-100%)}}
.drawer .dh{padding:4px 18px 14px}
.drawer .dh b{display:block;font-size:20px}
.drawer .fold{display:flex;align-items:center;gap:14px;width:calc(100% - 12px);height:46px;padding:0 16px;border-radius:0 999px 999px 0;font-size:15px;font-weight:500;text-align:left}
.drawer .fold.on{background:var(--fill-2);font-weight:700}
.drawer .fold svg{width:20px;height:20px}
.drawer .fold .n{margin-left:auto;font-size:13px;font-weight:600}
.drawer .fold .dot{width:10px;height:10px;margin:0 5px;border-radius:50%;background:var(--ink-3)}
.drawer .g{margin:12px 18px 4px;font-size:12px;font-weight:600;color:var(--ink-2)}
.thread .subj-h{padding:4px var(--gut) 8px;font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.thread .bizchip{display:flex;align-items:center;gap:10px;margin:0 var(--gut) 8px;padding:10px 12px;border-radius:14px;background:var(--fill)}
.thread .bizchip .tile{width:32px;height:32px;border-radius:8px;background:var(--fill-2);flex:none;overflow:hidden}
.thread .bizchip .tile img{width:100%;height:100%;object-fit:cover}
.msgx{display:flex;gap:12px;padding:14px var(--gut);border-top:1px solid var(--line-soft)}
.msgx .av{width:40px;height:40px}
.msgx .mh{display:flex;justify-content:space-between;gap:8px}
.msgx .body{margin-top:10px;font-size:15px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.msgx.collapsed .body{display:none}
.msgx .peek{display:block;font-size:14px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread .replybar{position:sticky;bottom:0;padding:12px var(--gut) calc(14px + var(--safe-b));background:var(--bg);border-top:1px solid var(--line-soft)}
.thread .quick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.thread .rb{display:flex;gap:10px}
.thread .rb .btn{flex:1;height:44px;background:none;box-shadow:inset 0 0 0 1px var(--line-strong)}
.compose .cf{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 var(--gut);border-bottom:1px solid var(--line-soft)}
.compose .cf>span:first-child{flex:none;width:58px;color:var(--ink-2)}
.compose .cf input{flex:1;min-width:0;height:48px;font-size:16px}
.compose input:focus-visible,.compose textarea:focus-visible{outline:none}
.compose .cf.to{align-items:flex-start;padding-top:9px;padding-bottom:9px}
.compose .cf.to>span:first-child{line-height:30px}
.compose .tov{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.compose .tov input{flex:1 1 180px;height:30px}
.compose .tpl{display:flex;gap:6px;padding:10px var(--gut);border-bottom:1px solid var(--line-soft);overflow-x:auto;scrollbar-width:none}
.compose .tpl::-webkit-scrollbar{display:none}
.compose textarea{display:block;width:100%;min-height:340px;padding:14px var(--gut);font-size:16px;line-height:1.5;resize:none}
.compose .cnote{padding:0 var(--gut) 12px;font-size:13px;color:var(--ink-2)}
.compose .need{margin:12px var(--gut) 0}

/* ---------- Team and Settings ---------- */
.team .people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 var(--gut)}
.team .pc{display:block;padding:14px;border-radius:18px;background:var(--fill);text-align:left}
.team .pc .who{display:flex;align-items:center;gap:10px}
.team .pc .big{display:block;margin-top:12px;font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.team .pc .lbl{font-size:13px;color:var(--ink-2)}
.team .pc .ln{display:block;margin-top:8px;font-size:13px;color:var(--ink-2)}
.chart{margin:12px var(--gut) 0;padding:14px;border-radius:18px;background:var(--fill)}
.chart .bars{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:4px;align-items:end;height:110px;margin-top:12px}
.chart .day{display:flex;align-items:flex-end;justify-content:center;gap:2px;height:100%}
.chart .day i{width:45%;max-width:9px;min-height:2px;border-radius:3px 3px 0 0;background:var(--blue)}
.chart .day i.d{background:var(--purple)}
.chart .day i.z{background:var(--fill-3)}
.chart .days{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:4px;margin-top:6px;font-size:11px;color:var(--ink-2);text-align:center}
.chart .days .t{font-weight:700;color:var(--ink)}
.chart .key{display:flex;gap:14px;font-size:13px;color:var(--ink-2)}
.chart .key i{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--blue)}
.chart .key i.d{background:var(--purple)}
.settings{background:var(--bg-2);min-height:100vh}
.settings .bar{background:color-mix(in srgb,var(--bg-2) 92%,transparent)}
.settings .group{background:var(--raised)}
.settings .group{--fill:var(--fill)}
.settings .hint{padding:8px calc(var(--gut) + 4px) 0;font-size:13px;color:var(--ink-2)}
.settings .gr .v{flex:none;font-size:15px;color:var(--ink-2);text-align:right}
.settings .gr input{flex:1;min-width:0;height:40px;font-size:16px;text-align:right}
.settings .gr input::placeholder{text-align:right}
.settings .bk textarea{width:100%;min-height:120px;padding:10px;border-radius:12px;background:var(--fill);font-family:var(--mono);font-size:12px}
.seg{display:inline-flex;gap:2px;padding:2px;border-radius:999px;background:var(--fill-2)}
.seg button{height:32px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--raised);color:var(--ink);box-shadow:var(--shadow-1)}

/* ---------- launch ---------- */
.launch{display:flex;flex-direction:column;justify-content:center;min-height:100dvh;max-width:440px;margin:0 auto;padding:24px 24px 80px}
.launch h1{font-size:28px;font-weight:700;letter-spacing:-.02em}
.launch .lines{margin:8px 0 26px;font-size:15px;color:var(--ink-2)}
.launch .lines p+p{margin-top:2px}
.launch .who{display:flex;align-items:center;gap:14px;width:100%;height:64px;padding:0 18px;border-radius:18px;background:var(--fill);font-size:17px;font-weight:600;text-align:left}
.launch .who+.who{margin-top:10px}
.launch .who.last{background:var(--paper);color:var(--on-paper)}
.launch .who.last .av{background:var(--on-paper)}
.launch .who small{margin-left:auto;font-size:13px;font-weight:500;opacity:.7}
.launch .code{display:flex;align-items:center;gap:10px;margin:22px 0 0;padding:0;background:none;font-family:var(--sans)}
.launch .code input{flex:1;height:44px;padding:0 12px;border-radius:12px;background:var(--fill);font-size:16px}

/* ---------- the toast: an inverse pill with its one action ---------- */
.toast{position:fixed;left:16px;right:16px;bottom:calc(var(--tabbar) + 12px);z-index:90;display:flex;align-items:center;gap:12px;width:fit-content;max-width:min(440px,calc(100% - 32px));min-height:48px;margin:0 auto;padding:0 6px 0 16px;border-radius:16px;background:var(--paper);color:var(--on-paper);box-shadow:0 8px 24px #0000003d;font-size:15px;line-height:1.35;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .12s ease-in,transform .12s ease-in}
.toast.on{opacity:1;transform:none;pointer-events:auto;transition:opacity .24s var(--ease),transform .24s var(--ease)}
.toast .nt-t{padding:10px 0}
.toast .nt-a,.toast .nt-x{flex:none;min-height:40px;padding:0 12px;border-radius:12px;font-size:15px;font-weight:700;color:inherit}
.toast .nt-k{display:none}

/* ---------- the map (Map tab): the map is the page; a sheet on a phone, a floating panel on a computer ---------- */
body.v-home{overflow:hidden;overscroll-behavior:none}
.map-host{position:fixed;left:0;right:0;top:0;bottom:var(--map-b,0px);z-index:0;background:var(--map-land)}
.map-host[hidden]{display:none}
.map-el{position:absolute;inset:0;opacity:0;transition:opacity .4s ease}
body.map-ready .map-el{opacity:1}
.map-ph{position:absolute;inset:0;pointer-events:none;transition:opacity .6s ease}
body.map-ready .map-ph{opacity:0}
.map-ph i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--ink-4);opacity:.55}
.h-prog{position:absolute;left:0;top:0;height:2px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease),opacity .4s ease;pointer-events:none;z-index:2}
.h-prog.done{opacity:0}
.page.home{position:fixed;left:0;right:0;top:0;bottom:var(--tabbar);z-index:10;pointer-events:none;padding:0}
.mtop{position:absolute;left:12px;right:12px;top:calc(10px + var(--safe-t));pointer-events:auto;z-index:3}
.msearch{display:flex;align-items:center;gap:10px;width:100%;height:48px;padding:0 8px 0 16px;border-radius:999px;background:var(--raised);box-shadow:var(--shadow-2);font-size:16px;color:var(--ink-2);text-align:left}
.msearch svg{width:20px;height:20px;color:var(--ink)}
.msearch .av{margin-left:auto}
.mchips{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.mchips::-webkit-scrollbar{display:none}
.mchips .chip{background:var(--raised);box-shadow:var(--shadow-1)}
.mchips .chip[aria-pressed="true"]{background:var(--paper);color:var(--on-paper)}
.mchips .chip i.d{width:8px;height:8px;border-radius:50%;background:var(--c,var(--ink-3))}
.h-ctl{position:absolute;right:12px;bottom:calc(var(--sh,240px) + 14px);display:flex;flex-direction:column;border-radius:14px;background:var(--raised);box-shadow:var(--shadow-2);overflow:hidden;pointer-events:auto;transition:bottom .3s var(--move)}
.h-ctl button{display:grid;place-items:center;width:44px;height:44px;font-size:18px;color:var(--ink)}
.h-ctl button+button{box-shadow:inset 0 1px 0 var(--line-soft)}
.h-ctl button:active{background:var(--fill)}
.mpanel{position:absolute;left:0;right:0;bottom:0;height:var(--sh,240px);display:flex;flex-direction:column;border-radius:24px 24px 0 0;background:var(--raised);box-shadow:var(--shadow-sheet);pointer-events:auto;transition:height .34s var(--move);touch-action:none}
.mpanel.dragging{transition:none}
.mpanel .grip{position:relative;flex:none;height:26px;width:100%;cursor:grab}
.mpanel .grip::before{content:"";position:absolute;left:50%;top:9px;width:36px;height:5px;margin-left:-18px;border-radius:999px;background:var(--line-strong)}
.mpanel .mh{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 var(--gut) 8px}
.mpanel .mh b{display:block;font-size:18px;font-weight:700}
.mpanel .mh .sub b{display:inline;font-size:13px;font-weight:600;color:var(--ink)}
.mpanel .mbody{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding-bottom:12px}
.mpanel.s-peek .mbody{visibility:hidden}
.mpanel .lh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px var(--gut) 4px;font-size:13px;font-weight:600;color:var(--ink-2)}
.mpanel .lh .link{min-height:0;font-size:13px;color:var(--link)}
.mpanel details.lh-more>summary{list-style:none;cursor:pointer}
.mpanel details.lh-more>summary::-webkit-details-marker{display:none}
.mpanel details.lh-more>summary::after{content:"›";margin-left:auto;font-size:16px}
.mpanel details.lh-more[open]>summary::after{content:"⌄"}
.mpanel .msay{padding:0 var(--gut) 6px;font-size:14px;color:var(--ink-2)}
.mpanel .msay b{color:var(--ink)}
.mpanel .msay .link{min-height:0;font-size:14px}
.brow{display:grid;grid-template-columns:40px minmax(0,1fr) auto;column-gap:12px;align-items:center;width:100%;padding:9px var(--gut);text-align:left;border-bottom:1px solid var(--line-soft)}
.brow:last-child{border-bottom:0}
.brow:active,.brow.hl{background:var(--fill)}
@media (hover:hover){.brow:hover{background:var(--fill)}}
.brow .ic{width:40px;height:40px;border-radius:10px;background:var(--fill);display:grid;place-items:center;color:var(--ink-2);overflow:hidden}
.brow .nm{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow .ln{display:block;font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow .ln>i{display:inline-block;vertical-align:1px;margin-right:6px;width:8px;height:8px;border-radius:50%;background:var(--c,var(--ink-3))}
.brow .ln>i.un{background:none;box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.brow .ln .st{display:inline;font-size:inherit}.brow .ln .st i{display:inline-block;vertical-align:1px;margin-right:6px}
.brow .rt{font-size:13px;color:var(--ink-2);white-space:nowrap}
.brow .sv{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--ink-2)}
.brow .sv:active{background:var(--fill-2)}
.brow .callb{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--fill)}
.brow .callb svg{width:18px;height:18px}
.sk-r{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 12px;padding:10px var(--gut)}
.sk-r i{height:40px;border-radius:10px;background:var(--fill)}
.sk-r span{display:grid;gap:8px;padding-top:4px}
.sk-r b{display:block;height:10px;width:70%;border-radius:999px;background:var(--fill)}
.sk-r b+b{width:45%}
@media (prefers-reduced-motion:no-preference){.sk-r i,.sk-r b{animation:skPulse 1.4s ease-in-out infinite alternate}}
@keyframes skPulse{to{opacity:.45}}
.fly-sq{position:fixed;left:0;top:0;z-index:90;width:10px;height:10px;border-radius:50%;pointer-events:none}
/* the business card over the map */
.bz-host{position:fixed;inset:0;z-index:50;pointer-events:none}
.bz-host[hidden]{display:none}
.bz{position:absolute;display:flex;flex-direction:column;pointer-events:auto;background:var(--raised);box-shadow:var(--shadow-sheet);opacity:0}
.bz.in{opacity:1}
.bz.as-sheet{left:0;right:0;bottom:0;max-height:min(78dvh,calc(100dvh - 90px));border-radius:24px 24px 0 0;animation:sheetUp .3s var(--move) both}
.bz.cardx{width:380px;max-height:calc(100dvh - 96px);border-radius:18px;box-shadow:var(--shadow-2);overflow:hidden}
.bz.cardx.docked{right:16px;top:16px;left:auto}
.bz.cardx.slide{animation:popIn .22s var(--ease) both}
.bz.out{animation:fadeOut .14s ease-in both}
@keyframes fadeOut{to{opacity:0}}
.bz-grip{position:relative;flex:none;height:22px;cursor:grab}
.bz-grip::before{content:"";position:absolute;left:50%;top:8px;width:36px;height:5px;margin-left:-18px;border-radius:999px;background:var(--line-strong)}
.bz-scroll{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding-bottom:12px}
.bz-top{display:flex;align-items:flex-start;gap:10px;padding:12px var(--gut) 0}
.bz-top h2{min-width:0;overflow-wrap:anywhere;font-size:var(--t-18);font-weight:500;letter-spacing:-.01em;line-height:1.3}
.bz-top .x{flex:none;margin:-4px -6px 0 auto}
.bz-sub{padding:4px var(--gut) 0;font-size:var(--t-12);line-height:1.5;color:var(--ink-2)}
.bz-st{display:flex;flex-wrap:wrap;gap:6px;padding:10px var(--gut) 0}
.bz-acts4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:14px var(--gut) 2px}
.bz-acts4 a,.bz-acts4 button{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;min-height:52px;font-size:var(--t-12);font-weight:400;line-height:1.3;text-align:center;border-radius:var(--r,8px)}
.bz-acts4 span.c{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:var(--raised)}
.bz-acts4 .main span.c{background:var(--paper);color:var(--on-paper)}
.bz-acts4 .done span.c{background:var(--go);color:#fff}
.bz-acts4 svg{width:16px;height:16px}
.bz-acts4 a:not(.main):not(.done):hover .c,.bz-acts4 button:not(.main):not(.done):hover .c{background:var(--fill)}
.bz-acts4 a:focus-visible,.bz-acts4 button:focus-visible{outline:2px solid var(--ink-2);outline-offset:3px}
.bz-say{padding:12px var(--gut) 0;font-size:16px;font-weight:600;line-height:1.4}
.bz-say.bad{color:var(--stop)}.bz-say.warm{color:var(--warm)}.bz-say.ok{color:var(--ink-2);font-weight:500}
.bz-site{margin:14px var(--gut) 0;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--raised);font-size:var(--t-12);line-height:1.5}
.bz-site .sub{font-size:var(--t-12);line-height:1.5}
.bz-site .ck{gap:8px;padding:7px 0;font-size:var(--t-12);line-height:1.5}
.bz-site .ck i{width:14px;font-size:var(--t-12);font-weight:500}
.bz-site .ck.no i{color:var(--ink-2)}
.bz-site .ck small{font-size:var(--t-12)}
.bz-site .link{font-size:var(--t-12);min-height:28px}
.bz-site .sh{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px}
.bz-site .sh b{white-space:nowrap}
.bz-site .sh a{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bz-site .sh b{font-size:var(--t-12);font-weight:500}
.bz-site .reading{display:flex;align-items:center;gap:10px;padding:8px 0 2px;font-size:var(--t-12);color:var(--ink-2)}
.bz-site .reading i{width:8px;height:8px;border-radius:50%;background:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){.bz-site .reading i{animation:pulse 1s ease-in-out infinite}}
@keyframes pulse{50%{opacity:.25}}
.bz-site .shot{float:right;width:72px;margin:6px 0 6px 12px;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px var(--line-soft)}
.bz-site .shot img{width:100%;aspect-ratio:390/760;object-fit:cover;object-position:top}
.bz-kv{margin:12px var(--gut) 0;border-radius:16px;background:var(--fill);overflow:hidden}
.bz-kv .kv{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line-soft);font-size:15px}
.bz-kv .kv:last-child{border-bottom:0}
.bz-kv .kv span:first-child{color:var(--ink-2)}
.bz-kv .kv b{text-align:right}
.bz-kv a{color:var(--link)}
.bz-fold{margin:12px var(--gut) 0;border-radius:16px;background:var(--fill);overflow:hidden}
.bz-fold summary{list-style:none;cursor:pointer;display:flex;align-items:center;min-height:48px;padding:0 14px;font-size:15px;font-weight:600}
.bz-fold summary::-webkit-details-marker{display:none}
.bz-fold summary::after{content:"›";margin-left:auto;font-size:18px;color:var(--ink-2);transition:transform .2s var(--ease)}
.bz-fold[open] summary::after{transform:rotate(90deg)}
.bz-fold .fb{padding:0 14px 14px;font-size:15px;line-height:1.5}
.bz-note{padding:12px var(--gut) 0;font-size:var(--t-12);line-height:1.5;color:var(--ink-2)}
.bz-note .link{font-size:inherit}
.bz-err{padding:10px var(--gut) 0;font-size:14px;color:var(--stop)}
.bz-gen{margin:12px var(--gut) 0;padding:12px 14px;border-radius:16px;background:var(--fill)}
.bz-gen .gen-frame{position:relative;margin-top:10px;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:#fff}
.bz-gen iframe{position:absolute;left:0;top:0;width:390px;height:487px;border:0;transform-origin:0 0;transform:scale(calc((380px - 60px) / 390px));pointer-events:none}
.bz-foot{flex:none;padding:12px var(--gut) calc(12px + var(--safe-b));border-top:1px solid var(--line-soft);background:var(--raised)}
.bz-foot .btn{width:100%}
.bz-foot .row2{display:flex;justify-content:space-between;gap:10px;margin-top:8px}
.bz-ans{margin-top:10px}
.btn.save{position:relative;overflow:hidden;isolation:isolate}
.btn.save::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--blue);transform:scaleX(0);transform-origin:0 50%;transition:transform .38s var(--ease)}
.btn.save.by-dennis::before{background:var(--purple)}
.btn.save.won::before{transform:scaleX(1)}
.btn.save.won{color:#fff}
/* ⌘K: find a business, a town, a lead */
.spot-host{position:fixed;inset:0;z-index:80}
.spot-host[hidden]{display:none}
.spt-bg{position:absolute;inset:0;background:var(--scrim);animation:fadeIn .2s ease both}
.spt{position:absolute;left:50%;top:calc(var(--safe-t) + 60px);transform:translateX(-50%);width:min(600px,calc(100vw - 24px));max-height:min(70dvh,560px);display:flex;flex-direction:column;border-radius:20px;background:var(--raised);box-shadow:var(--shadow-2);overflow:hidden;animation:popIn .26s var(--move) both}
.spt-in{display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;border-bottom:1px solid var(--line-soft)}
.spt-in input{flex:1;min-width:0;height:100%;font-size:17px}
.spt-in kbd{font:500 12px var(--sans);color:var(--ink-3)}
.spt-l{overflow:auto;padding:6px}
.spt-g{padding:10px 10px 4px;font-size:13px;font-weight:600;color:var(--ink-2)}
.spt-r{display:flex;align-items:baseline;gap:12px;width:100%;padding:10px;border-radius:10px;text-align:left}
.spt-r b{font-size:15px;font-weight:600}
.spt-r small{flex:1;min-width:0;font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spt-r.on,.spt-r:hover{background:var(--fill)}
.spt-e{display:flex;align-items:baseline;gap:10px;flex:none;margin-left:auto}
.spt-p{font-style:normal;font-size:13px;font-weight:600;color:var(--go)}
.spt-none{padding:16px;font-size:15px;color:var(--ink-2)}

/* ---------- fun that stays: our pixel handset, a burst when someone's interested ---------- */
.confetti{position:fixed;z-index:300;width:0;height:0;pointer-events:none}
.confetti i{position:absolute;left:0;top:0;display:block;border-radius:2px}
@keyframes ring{0%,100%{transform:rotate(0)}8%,24%,40%,56%{transform:rotate(-16deg)}16%,32%,48%,64%{transform:rotate(16deg)}74%{transform:rotate(0)}}

/* ---------- a computer: a sidebar of places, the page beside it ---------- */
@media (min-width:1000px){
  :root{--tabbar:0px}
  .tabbar{display:none}
  .side{position:fixed;left:0;top:0;bottom:0;z-index:45;display:flex;flex-direction:column;width:var(--side);}
  .side .nav-i{display:flex;align-items:center;}
  .side .nav-i .badge{margin-left:auto}
  .side .nav-i kbd{margin-left:auto;font:500 12px var(--sans);}
  .side .me{display:flex;align-items:center;margin-top:auto;}
  .side .me:hover{background:var(--fill)}
  .side .me .sub{margin-left:auto}
  main.main{margin-left:var(--side)}
  .page{max-width:760px;margin:0 auto}
  .page.wide{max-width:none;margin:0}
  .bar{padding-left:16px;padding-right:16px}
  .toast{bottom:24px}
  .fab{right:32px;bottom:32px}
  /* Leads and Inbox: the list beside what you opened */
  .split{display:grid;min-height:100vh}
  .split>.pane-l{border-right:1px solid var(--line-soft);min-width:0;height:100vh;overflow:auto;position:sticky;top:0}
  .split>.pane-r{min-width:0}
  .split>.pane-r>.page{max-width:720px}
  .split .pane-r .bar .back{display:none}
  .split .pane-r .empty-r{display:grid;place-items:center;height:100vh;color:var(--ink-2);font-size:15px}
  .page.home{left:var(--side);bottom:0;max-width:none;margin:0}
  .map-host{left:var(--side)}
  .mpanel .grip{display:none}
  .mpanel .mh{padding-top:16px}
  .mpanel.s-peek .mbody{visibility:visible}
  .h-ctl{bottom:40px!important}
  .bz.as-sheet{right:auto;max-height:none;animation:popIn .22s var(--ease) both}
  .spt{top:12vh}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- app-v7: the rest of the pieces the pages use ---------- */
:root{--syn-blue:var(--blue);--syn-purple:var(--purple);--accent:var(--warm);
  --stage-new:#8f8f8f;--stage-na:#5d5d5d;--stage-cb:#ac4f23;--stage-late:#ba2623;--stage-int:#2c6732;--stage-sent:#2c6732;--stage-won:#2c6732;--stage-pass:#c4c4c4}
@media (prefers-color-scheme:dark){:root{--stage-new:#afafaf;--stage-na:#cdcdcd;--stage-cb:#ef8b57;--stage-late:#ff6764;--stage-int:#6bc67f;--stage-sent:#6bc67f;--stage-won:#6bc67f;--stage-pass:#4a4a4a}}
.b{font-weight:600}.center{text-align:center}
.link.w{display:flex;width:100%;justify-content:center}
.link-in{font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.syncline{margin:0 var(--gut) 12px;padding:10px 12px;border-radius:12px;background:var(--warm-bg);color:var(--warm);font-size:14px}
.syncline .link{min-height:0;color:inherit;text-decoration:underline}
.row .clr-n{width:32px;height:32px;color:var(--ink-3);margin-left:-4px}
.row .clr-n svg{width:16px;height:16px}
.row .av{width:36px;height:36px;font-size:14px}
.rows .row:last-child{border-bottom:0}
/* calling */
.call .who h1.sm{font-size:24px;margin:0}
.call .say .link{margin-top:6px;color:var(--ink-2)}
.call .dock .row2 .link{font-size:15px}
.call .segs i.pass{background:var(--ink-4)}
.call .segs i.int,.call .segs i.won{background:var(--go)}
.call h2.h{padding-top:18px}
.call .acc{margin-top:0}
.dots{display:flex;flex-wrap:wrap;gap:5px}
.dots i{width:10px;height:10px;border-radius:50%;background:var(--ink-3)}
.dots i.cb{background:var(--warm)}.dots i.int,.dots i.won{background:var(--go)}.dots i.pass{background:none;box-shadow:inset 0 0 0 2px var(--ink-4)}
.dot{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--ink-3);vertical-align:1px}
.dot.cb,.dot.st-cb{background:var(--warm)}.dot.int,.dot.won,.dot.st-int{background:var(--go)}.dot.pass,.dot.st-pass{background:none;box-shadow:inset 0 0 0 2px var(--ink-3)}
/* the after-call sheets */
.sheet textarea.msg{display:block;width:100%;min-height:120px;margin:8px 0 4px;padding:12px 14px;border-radius:18px;background:var(--fill);font-size:16px;line-height:1.45;resize:none}
.sheet .sh-p{margin:0 4px 12px}
.sheet .btn.primary.w{margin-top:14px}
.sheet .opt.big{gap:12px;padding:10px 14px}
.sheet .opt.big .grow{display:flex;flex-direction:column;flex:1;min-width:0;text-align:left}
.sheet .opt.off{opacity:.5;cursor:default}
.sheet .ans{margin-top:4px}
.sheet.tall{max-height:92dvh}
.info-b{--gut:0px}
.info-b .h{padding-left:4px}
/* one accordion: the whole call, the push-backs */
.acc .s{border-bottom:1px solid var(--line-soft)}
.acc .s:last-child{border-bottom:0}
.acc .q{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:10px 14px;font-size:15px;font-weight:600;text-align:left}
.acc .q i{flex:none;font-style:normal;font-weight:400;font-size:20px;line-height:1;color:var(--ink-2)}
.acc .q .n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--bg);display:grid;place-items:center;font-size:12px;font-weight:700}
.acc .s.open .q .n{background:var(--paper);color:var(--on-paper)}
.acc .a{padding:0 14px 14px;font-size:15px;line-height:1.5}
.acc.steps .a{padding-left:50px}
.acc .a em{display:block;margin-top:8px;font-style:normal;font-size:14px;color:var(--ink-2)}
.card.say1{margin-top:4px}
.card .vm{margin:6px 0 10px;font-size:15px;line-height:1.5}
.btn.cp svg{width:15px;height:15px}
.h .btn{margin-left:auto}
/* a business */
.ibtn.on{color:var(--ink)}
.ibtn.on svg path{fill:currentColor}
.biz .next .btn{margin-top:2px}
.biz .next .ans{margin-top:8px}
.biz .next .r{color:var(--stop)}.biz .next .o{color:var(--warm)}.biz .next .g{color:var(--go)}
.visit{padding:12px var(--gut) 0}
.visit .pills{padding:6px 0 0}
.biz.subpage .ttl{padding-top:0;font-size:28px}
.biz .why{padding:0 var(--gut) 8px}
.biz .prose{padding:0 var(--gut) 8px}
.prose-h{font-size:15px;line-height:1.55}
.prose-h p+p,.prose-h ul,.prose-h ol,.prose-h p+ul{margin-top:8px}
.prose-h ul{list-style:disc;padding-left:20px}.prose-h ol{list-style:decimal;padding-left:20px}
.prose-h li+li{margin-top:4px}
.prose-h a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.pad{padding:0 var(--gut)}.pad-t{padding:12px var(--gut) 0}
.pills.pad{padding:0 var(--gut)}
.gr.kv{justify-content:space-between}
.gr.kv>b{flex:0 1 auto;max-width:64%;text-align:right;font-size:15px}
.gr.kv.stack{flex-direction:column;align-items:flex-start;gap:2px}
.gr.kv.stack>b{max-width:none;text-align:left;font-weight:500;line-height:1.4}
.gr.kv .more{display:block;font-size:13px;line-height:1.4}
.gr.col{flex-direction:column;align-items:flex-start;gap:2px}
.gr .v{margin-left:auto}
.gr.pv .n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--bg);display:grid;place-items:center;font-size:12px;font-weight:700}
.gr.pv.done .n{background:var(--go);color:#fff}
.gr.pv.now .n{background:var(--paper);color:var(--on-paper)}
.gr.pv .grow{display:flex;flex-direction:column}
.group .gr .st{font-size:13px;margin-top:2px}
details.fold{margin:12px var(--gut) 0;border-radius:16px;background:var(--fill);overflow:hidden}
details.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;min-height:50px;padding:0 14px;font-size:15px;font-weight:600}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:"›";margin-left:auto;font-size:20px;color:var(--ink-2);transition:transform .2s var(--ease)}
details.fold[open]>summary::after{transform:rotate(90deg)}
details.fold .group{margin:0;background:none;border-top:1px solid var(--line-soft)}
details.fold .pad{padding:0 14px 14px}
.pin{position:sticky;bottom:0;z-index:5;margin-top:16px;padding:16px var(--gut) calc(14px + var(--safe-b));background:linear-gradient(to bottom,transparent,var(--bg) 30%)}
.pin .sub{margin-top:6px;text-align:center}
.acts2{display:flex;flex-wrap:wrap;gap:8px;padding:12px var(--gut) 4px}
.notebox{margin-top:4px}
.tl .ev .grow{display:flex;flex-direction:column}
.tl .ev .grow b{display:flex;align-items:center}
.code{margin-top:0}
.field .btn{flex:none}
.mock .mt .chip{height:30px;font-size:13px}
.mock .mb>.sub{margin-top:10px}
.solo{max-width:720px;margin:0 auto}
/* the booking pages and systems drawn in the offer (the .screen mockups in leads.js) */
.screen{max-width:340px;padding:14px;border-radius:12px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font-size:12px;line-height:1.45;color:var(--ink)}
.screen .shead{font-size:10px;color:var(--ink-2);margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em}
.screen .sbig{font-size:14px;font-weight:600;margin-bottom:9px}
.screen .srow{display:grid;gap:3px;padding:8px 0;border-top:1px solid var(--line-soft)}
.screen .srow span{color:var(--ink-2)}
.screen .sbtn,.screen .btn{display:block;height:auto;margin:8px 0;padding:8px;border-radius:999px;text-align:center;font-size:12px;font-weight:600;background:var(--paper);color:var(--on-paper)}
.screen>.sbtn+small{display:block;color:var(--ink-2);font-size:10.5px}
.screen .fld{margin-top:6px;padding:6px 9px;border-radius:8px;font-size:12px;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-soft)}
.screen .fld b{color:var(--ink)}.screen .fld.done{color:var(--ink)}
.screen .rows{display:grid;gap:5px;margin-top:6px}
.screen .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;min-height:0;padding:7px 9px;border:0;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line-soft)}
.screen .row b{display:block;font-size:12px}.screen .row small{color:var(--ink-2);font-size:11px}
.screen .slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:6px}
.screen .slot{padding:6px 2px;border-radius:8px;text-align:center;font-size:11px;white-space:nowrap;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line-soft)}
.screen .slot small{display:block;font-size:10px;color:var(--ink-2)}
.screen .slot.full{opacity:.4}
.screen .slot.sel{background:var(--paper);color:var(--on-paper);box-shadow:none}.screen .slot.sel small{color:var(--on-paper);opacity:.7}
.screen .pill{height:auto;padding:1px 6px;font-size:10px;font-weight:600;background:var(--fill)}
.screen .pill.g,.screen .pill.t{color:var(--go)}.screen .pill.a{color:var(--warm)}.screen .pill.b{background:var(--paper);color:var(--on-paper)}
.screen .sms{display:grid;gap:5px}
.screen .bub{max-width:90%;padding:7px 10px;border-radius:14px;font-size:12px;line-height:1.45;overflow-wrap:anywhere;background:var(--fill)}
.screen .bub.in{justify-self:start}.screen .bub.out{justify-self:end;background:var(--paper);color:var(--on-paper)}
.screen .bub small{display:block;opacity:.6;font-size:10px;margin-top:2px}
.screen .steps{display:grid;margin-top:4px}
.screen .step{display:grid;grid-template-columns:12px 1fr auto;gap:7px;align-items:center;padding:6px 0;border-top:1px solid var(--line-soft);color:var(--ink-2)}
.screen .dot{width:7px;height:7px;margin:0;border-radius:50%;background:var(--line)}
.screen .step.done .dot{background:var(--go)}.screen .step.now .dot{background:var(--ink)}
.screen .step.done,.screen .step.now{color:var(--ink)}
.screen .when{font-size:11px;color:var(--ink-2)}
.screen .scr-t{font-weight:600}
/* Inbox */
.mlist .mrow{border-radius:0}
.mrow .star.on{color:#e3a008}
.mrow .star.on svg path{fill:currentColor}
.mrow .nudge b{cursor:pointer}
.mrow .from .sub{font-weight:500}
.thread .bizchip{width:calc(100% - var(--gut) * 2);text-align:left}
.thread .bizchip .grow{display:flex;flex-direction:column}
.msgx .av.justin{color:var(--blue)}.msgx .av.dennis{color:var(--purple)}
.msgx.collapsed{cursor:pointer}
.bar .send{background:var(--paper);color:var(--on-paper)}
.bar .send svg{width:20px;height:20px}
.compose .cf .tochip{flex:none;display:inline-flex;align-items:center;height:30px;padding:0 10px;border-radius:999px;background:var(--fill);font-size:14px;font-weight:600}
.page.compose textarea{min-height:46vh;overflow:hidden}
.cwin-wrap{position:fixed;right:24px;bottom:0;z-index:75;width:min(560px,calc(100vw - var(--side) - 48px))}
.cwin{display:flex;flex-direction:column;max-height:min(82vh,760px);border-radius:14px 14px 0 0;background:var(--raised);box-shadow:var(--shadow-2);overflow:hidden;animation:popIn .22s var(--ease) both}
.cwin .bar{position:static;height:48px;padding:0 6px;background:var(--fill);-webkit-backdrop-filter:none;backdrop-filter:none}
.cwin .cf,.cwin .tpl,.cwin textarea,.cwin .cnote,.cwin .need{--gut:16px}
.cwin textarea{flex:1;min-height:280px;resize:none}
.cwin .cf input{height:42px}
/* the map's sheet and card */
.page.home .mpanel .mh .btn{flex:none}
.brow .ic b{font-size:13px;font-weight:700;color:var(--ink)}
.brow.looked .nm::after{content:" ·";color:var(--ink-3)}
.bar-p{display:block;height:4px;margin-top:6px;border-radius:2px;background:var(--fill-2);overflow:hidden}
.bar-p i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transition:transform .4s var(--ease)}
.bz-acts4 .off{opacity:.4;pointer-events:none}
.bz-acts4 .done .c{background:var(--go);color:#fff}
.bz-acts4 .done .c svg path{fill:currentColor}
.bz-site .say{margin:10px 0 4px;font-size:var(--t-12-5);font-weight:500;line-height:1.5}
.bz-site .say.bad{color:var(--ink)}
.bz-site .sh .sub{flex-basis:100%;white-space:normal}
.bz-site .btn,.bz-site .link{margin-top:6px}
.bz-price{padding:12px var(--gut) 0;font-size:var(--t-12-5);line-height:1.5}
.bz-ans{padding:12px var(--gut) 0}
.bz-ans .how-h{margin-left:0}
.bz-gen .sh,.card.gen .sh{display:flex;justify-content:space-between;align-items:center;gap:8px}
.brow .sv svg{width:20px;height:20px}
/* Team */
.lede.presence{margin-top:12px}
.prof{display:flex;align-items:center;gap:16px;padding:6px var(--gut) 14px}
.prof h1{font-size:28px;font-weight:700;letter-spacing:-.02em}
.pfp{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.chart .chart-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.chart .key span{display:inline-flex;align-items:center}
.settings .gr input[type=checkbox]{flex:none;width:22px;height:22px;accent-color:var(--ink);text-align:initial}
.launch .code-msg{margin-top:8px}
/* the toast clears whatever is pinned at the bottom */
body.pushed .toast{bottom:calc(16px + var(--safe-b))}
body.in-call .toast{top:calc(var(--safe-t) + 8px);bottom:auto} /* calling: the note sits over the bar, never over Call, the answers or Skip */
body.sheet-open .toast{top:calc(var(--safe-t) + 12px);bottom:auto}
/* a pushed screen slides in from the right on a phone (View Transitions) */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.34s;animation-timing-function:var(--move)}
  html.vt-push::view-transition-old(root){animation-name:vtOutL}
  html.vt-push::view-transition-new(root){animation-name:vtInR}
  html.vt-pop::view-transition-old(root){animation-name:vtOutR;z-index:2}
  html.vt-pop::view-transition-new(root){animation-name:vtInL}
}
@keyframes vtInR{from{transform:translateX(100%)}}
@keyframes vtOutL{to{transform:translateX(-25%);opacity:.7}}
@keyframes vtInL{from{transform:translateX(-25%);opacity:.7}}
@keyframes vtOutR{to{transform:translateX(100%)}}
.biz .tile,.bizchip .tile{position:relative}
.biz .tile::after,.bizchip .tile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.fld{display:block}
.fld>span{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--ink-2)}
.note-in{display:block;width:100%;height:44px;padding:0 12px;border-radius:12px;background:var(--fill);font-size:16px}
.compose .need,.cwin .need{padding:12px var(--gut) 0;margin:0}
.done-line .link{min-height:0;font-size:inherit;color:var(--ink);font-weight:600}

/* ---------- polish (Oct 10) ---------- */
textarea.msg,.sheet textarea{resize:none}
/* the sheet's head: a long name gives way, Undo stays on its line */
.sheet .sh-top .grow{min-width:0}
.sheet .shm{display:flex;align-items:baseline;min-width:0;white-space:nowrap}
.sheet .shm-n{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sheet .shm>span:last-child{flex:none}
/* the folders drawer: each stage in its own colour */
.drawer .fold .dot.st-int{background:var(--go)}
.drawer .fold .dot.st-cb{background:var(--warm)}
.drawer .fold .dot.st-pass{background:none;box-shadow:inset 0 0 0 2px var(--ink-3)}
/* a list with nobody in it reads quieter */
.menu .zero span,.menu .zero i{color:var(--ink-3)}
/* launch: a fact never breaks in the middle */
.launch .lines span{white-space:nowrap}
/* a person's four numbers */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px var(--gut) 0}
.tl2{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:16px;background:var(--fill)}
.tl2 b{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
/* settings: a long field gets the row's width */
.settings .gr.col{flex-direction:column;align-items:stretch;gap:4px}
.settings .gr.col input.wide{width:100%;text-align:left;height:36px}
.settings .gr.col input.wide::placeholder{text-align:left}
.h .saved{margin-left:auto;font-weight:600;color:var(--go);opacity:0;transition:opacity .2s}
.h .saved.on{opacity:1}
/* the trade icons (3D, made with Higgsfield): they float — no tile, no edge behind them (his words, Oct 10) */
.i3{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none;pointer-events:none}
.brow .ic:has(> .i3){background:none;border-radius:0;overflow:visible}
.brow .ic .i3{width:40px;height:40px}
.biz .tile:has(> .i3),.bizchip .tile:has(> .i3){background:none;box-shadow:none;overflow:visible}
.biz .tile:has(> .i3)::after,.bizchip .tile:has(> .i3)::after{display:none}
.thread .bizchip .tile:has(> .i3){background:none}

/* ---------- their live site beside the lead (app-v8, Oct 11) — a floating browser card, like the Claude app's pane ---------- */
.web{display:none}
.websub{position:relative;height:calc(100dvh - var(--top) - var(--safe-t));background:var(--bg-2)}
.websub iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.sub-web .bar .wdom{font-size:15px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55vw}
.wload{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;background:var(--bg);color:var(--ink-3);font-size:13px;transition:opacity .25s ease;text-align:center;padding:0 24px}
.wload i{width:120px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--fill-2) 0,var(--ink-4) 50%,var(--fill-2) 100%);background-size:200% 100%;animation:wshim 1.1s linear infinite}
.wload.done{opacity:0;pointer-events:none}
@keyframes wshim{from{background-position:100% 0}to{background-position:-100% 0}}
.wempty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;padding:0 32px;text-align:center;font-size:13px;color:var(--ink-2);background:var(--bg)}
.wempty b{font-size:15px;font-weight:600;color:var(--ink)}
.wempty .link{margin-top:6px;font-size:13px}
@media (min-width:1180px){
  body.web-on{background:var(--bg-2)}
  body.web-on .split{background:var(--bg-2)}
  body.web-on .split>.pane-l{background:var(--bg-2);border-right:0}
  body.web-on .split>.pane-r{height:100vh;overflow:auto;position:sticky;top:0;background:var(--bg-2)}
  body.web-on .split>.pane-r>.page{max-width:none}
  .web{position:fixed;z-index:20;display:flex;flex-direction:column;min-width:0;background:var(--bg);box-shadow:0 0 0 1px var(--line-soft),0 1px 2px #0000000a;overflow:hidden;animation:wrise .28s cubic-bezier(.2,.8,.2,1)}
  .web[hidden]{display:none}
  .wbar{display:flex;align-items:center;gap:12px;flex:none;padding:0 8px 0 16px;border-bottom:1px solid var(--line-soft);font-size:13px}
  .wl{display:flex;align-items:baseline;gap:8px;min-width:0;flex:1}
  .wdom{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wmeta{color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wr{display:flex;align-items:center;gap:2px;flex:none}
  .wpos{margin-right:4px;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
  .wsep{width:1px;height:16px;margin:0 6px;background:var(--line)}
  .wib{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;color:var(--ink-2)}
  .wib svg,.wseg svg{width:16px;height:16px}
  .wib:hover:not([disabled]){background:var(--fill);color:var(--ink)}
  .wib[disabled]{opacity:.35}
  .wseg{display:inline-flex;padding:2px;margin-right:4px;border-radius:9px;background:var(--fill)}
  .wseg button{display:inline-grid;place-items:center;width:30px;height:26px;border-radius:7px;color:var(--ink-3)}
  .wseg button[aria-pressed="true"]{background:var(--bg);color:var(--ink);box-shadow:0 0 0 .5px var(--line),0 1px 2px #00000014}
  .wbody{position:relative;flex:1;min-height:0;display:flex;justify-content:center;align-items:flex-start;padding:12px;background:var(--bg-2);overflow:hidden}
  .wdev{position:relative;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line),0 12px 32px -12px #00000026}
  .wbody.phone .wdev{border-radius:24px}
  .wbody.desktop .wdev{border-radius:8px}
  .wbody.none{padding:0}
  .wbody.none .wdev{position:absolute;inset:0;width:auto!important;height:auto!important;border-radius:0;box-shadow:none;background:var(--bg)}
  .wdev iframe{display:block;border:0;background:#fff}
}
@keyframes wrise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.web{animation:none}.wload i{animation:none}}
.wload.shot{place-content:end center;padding-bottom:16px;background:var(--bg) top center/100% auto no-repeat}
.wload.shot span{padding:6px 12px;border-radius:999px;background:#000000b3;color:#fff;font-size:12px;font-weight:500;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (min-width:1180px){
  body.web-on .split>.pane-r .bar{background:color-mix(in srgb,var(--bg-2) 92%,transparent)}
  .wdom{flex:none;max-width:60%}
  .wmeta{flex:1 1 auto;min-width:0}
}

/* ---------- app-v8: a computer reads denser (Oct 11: "scale a lot of things down so you can fit a lot without it looking
   out of place") — the Claude app's measure: 13–14px text, 32px rows, 8px corners. The phone keeps its sizes. ---------- */
@media (min-width:1000px){
  :root{--gut:20px;--top:44px}
  /* the sidebar: a head with its fold button, rows like the Claude app's */
  .side{gap:2px;transition:width .24s cubic-bezier(.2,.8,.2,1)}
  .side-hd{display:flex;align-items:center;gap:8px;height:36px;margin:0 0 10px;padding:0 2px}
  .side-tg{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:8px;color:var(--ink-2)}
  .side-tg svg{width:18px;height:18px}
  .side-tg:hover{background:var(--fill-2);color:var(--ink)}
  .side-nm{letter-spacing:-.01em;white-space:nowrap;overflow:hidden;transition:opacity .16s}
  .side .nav-i{gap:10px;padding:0 9px;border-radius:8px;white-space:nowrap;overflow:hidden}
  .side .nav-i svg{flex:none;width:17px;height:17px}
  .side .me{gap:9px;height:44px;padding:0 8px;border-radius:10px;white-space:nowrap;overflow:hidden}
  .side .me .av{width:26px;height:26px;font-size:11px}
  .side .me .sub{font-size:11.5px}
  main.main,.page.home,.map-host{transition:margin-left .24s cubic-bezier(.2,.8,.2,1),left .24s cubic-bezier(.2,.8,.2,1)}
  .web{transition:left .24s cubic-bezier(.2,.8,.2,1)}
  /* folded: a rail of icons, names on hover */
  body.side-min{--side:56px}
  body.side-min .side-nm,body.side-min .side .nav-i span,body.side-min .side .nav-i kbd,body.side-min .side .me>span:not(.av){opacity:0;pointer-events:none;width:0}
  body.side-min .side .nav-i{justify-content:center;padding:0}
  body.side-min .side .nav-i .badge{position:absolute;margin:0;transform:translate(9px,-8px);min-width:15px;height:15px;font-size:10px}
  body.side-min .side .nav-i{position:relative}
  body.side-min .side .me{justify-content:center;padding:0}
  /* type and controls a step smaller */
  .ttl{padding-top:20px;padding-bottom:10px;}
  .h{padding-top:16px;}
  .link{min-height:30px;}
  .chip{gap:5px}
  .st{font-size:12.5px;gap:5px}
  .st i{width:7px;height:7px}
  .sub{font-size:12.5px}
  /* Leads: more rows on screen */
  .search{gap:8px;padding:0 10px;}
  .search svg{width:15px;height:15px}
  .lfilters .tools{font-size:12.5px}
  .count{min-height:30px;}
  .count .link{min-height:26px;font-size:12.5px}
  .lr .ln2{margin-top:1px}
  .split>.pane-r .bar{height:44px}
  /* a business */
  .biz .hd{gap:12px}
  .biz .tile{width:44px;height:44px;border-radius:11px}
  .biz h1{font-size:19px}
  .biz .pills{padding-top:10px}
  .biz .acts{gap:6px;padding-top:12px}
  .biz .acts a,.biz .acts button{height:50px;gap:4px;border-radius:11px;font-size:12px}
  .biz .acts svg{width:17px;height:17px}
  .biz .next{margin-top:12px;padding:12px 14px;border-radius:14px}
  .biz .next .k{font-size:12px}
  .biz .next p{margin:1px 0 10px;font-size:15px}
  .biz .stands{font-size:12.5px}
  .group{border-radius:12px}
  .biz .why{font-size:15px}
  .biz .prose{font-size:14px}
  .biz.subpage .ttl{font-size:22px}
  .card{border-radius:12px}
}
@media (min-width:1180px){
  .web{left:calc(var(--side) + 700px);top:10px;right:10px;bottom:10px;border-radius:12px}
  .wbar{height:40px;padding-left:14px}
}

/* Oct 11: the list is a floating card too, like their site's card, and no scroll bars show (it still scrolls) */
@media (min-width:1000px){
  .split{background:var(--bg-2)}
  .split>.pane-l,body.web-on .split>.pane-l{position:sticky;top:10px;height:calc(100vh - 20px);background:var(--bg);border:0;border-radius:12px;box-shadow:0 0 0 1px var(--line-soft),0 1px 2px #0000000a;overflow:auto}
  .split>.pane-l .ttl{padding-top:16px}
  .split>.pane-l .lr.sel{background:var(--fill)}
  .split>.pane-l,.split>.pane-r,.web .wbody{scrollbar-width:none}
  .split>.pane-l::-webkit-scrollbar,.split>.pane-r::-webkit-scrollbar{display:none}
  .split>.pane-r{background:var(--bg-2)}
}
@media (min-width:1000px){
  .mbody,.mpanel,.bz,.bz-scroll{scrollbar-width:none}
  .mbody::-webkit-scrollbar,.mpanel::-webkit-scrollbar,.bz::-webkit-scrollbar,.bz-scroll::-webkit-scrollbar{display:none}
}

/* ---------- a business on a computer (Oct 11): one aligned column, no boxes — Linear / Attio record pages ---------- */
@media (min-width:1000px){
  .dl{max-width:none;}
  .split>.pane-r>.page.dl{max-width:none}
  .dl-top{display:flex;align-items:center;}
  .dl-tile{flex:none;display:grid;place-items:center;overflow:hidden;background:var(--fill)}
  .dl-tile img{width:100%;height:100%;object-fit:cover;object-position:top}
  .dl-tile img.i3{object-fit:contain;background:none}
  .dl-tile:has(> .i3){background:none}
  .dl h1{font-weight:650;line-height:1.2}
  .dl-sub{margin-top:1px;font-size:12.5px;color:var(--ink-2)}
  .dl-sub a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:2px}
  .dl-sub a:hover{color:var(--ink)}
  .dl-top .ibtn{color:var(--ink-3)}
  /* the facts, one row, label over value */
  .dl-props{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:18px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
  .dp{display:flex;flex-direction:column;gap:3px;min-width:0}
  .dv{font-size:13px;font-weight:500;white-space:nowrap}
  .dv a{color:inherit}
  .dv a:hover{text-decoration:underline}
  .dv .go{color:var(--go);font-weight:600}
  .dv .stop{color:var(--stop)}
  .dv .dim{color:var(--ink-3);font-weight:400}
  .dv .pill{height:auto;padding:0;background:none;font-size:13px;font-weight:500;color:var(--ink)}
  .dv .pill::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-3);vertical-align:1px}
  .dv .pill.go{color:var(--go)}.dv .pill.go::before{background:var(--go);box-shadow:none}
  .dv .pill.warm{color:var(--warm)}.dv .pill.warm::before{background:var(--warm);box-shadow:none}
  .dv .pill.stop{color:var(--stop)}.dv .pill.stop::before{background:var(--stop);box-shadow:none}
  .dl-who{font-weight:400;color:var(--ink-3)}
  .dl-who.justin{color:var(--blue)}.dl-who.dennis{color:var(--purple)}
  .dl-hook{margin-top:14px;font-size:14px;line-height:1.55;color:var(--ink-2);max-width:62ch}
  /* one call button; the rest are quiet */
  .dl-acts{display:flex;align-items:center;gap:6px;margin-top:16px}
  .dl-acts .sp{flex:1}
  .dl-call{display:inline-flex;align-items:center;gap:7px;background:var(--paper,var(--ink));color:var(--bg);}
  .dl-call svg{width:15px;height:15px}
  .dl-call:hover{opacity:.88}
  .dl-b{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);}
  .dl-b svg{width:15px;height:15px}
  .dl-b:hover{color:var(--ink);background:var(--fill)}
  .dl-next{margin-top:14px}
  .dl-next .next{margin:0;padding:10px 12px;border-radius:10px;background:var(--fill)}
  .dl-next .next .btn{height:32px;font-size:13px}
  /* tabs on the rule */
  .dl-tabs{position:sticky;top:0;z-index:5;display:flex;gap:20px;margin-top:22px;border-bottom:1px solid var(--line-soft);background:var(--bg-2)}
  .dl-tabs button{position:relative;height:36px;font-size:13px;font-weight:500;color:var(--ink-3)}
  .dl-tabs button:hover{color:var(--ink)}
  .dl-tabs button[aria-selected="true"]{color:var(--ink)}
  .dl-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--ink)}
  /* what the tabs hold: flat, aligned to the same column — no cards */
  .dl-body{padding-top:6px}
  .dl-body .ttl{display:none}
  .dl-body .h{padding:20px 0 6px;font-size:11.5px;font-weight:500;color:var(--ink-3)}
  .dl-body .lede,.dl-body .prose,.dl-body .why,.dl-body .checks,.dl-body .stands{padding-left:0;padding-right:0}
  .dl-body .card{margin-left:0;margin-right:0;padding:0;background:none;border-radius:0;box-shadow:none}
  .dl-body .group{margin:0;border-radius:0;background:none;border-top:1px solid var(--line-soft)}
  .dl-body .group>.gr{padding-left:0;padding-right:0;min-height:40px}
  .dl-body .group>.gr:active{background:none}
}
@media (min-width:1180px){
  body.web-on .split{grid-template-columns:320px minmax(0,1fr)}
  body.web-on .split>.pane-r{margin-right:calc(var(--webw,440px) + 20px)}
  body.web-on .call{max-width:none;margin:0 calc(var(--webw,440px) + 20px) 0 0}
  body.web-on .call .cwrap,body.web-on .call .cbar,body.web-on .call .segs,body.web-on .call-end{max-width:760px;margin-left:auto;margin-right:auto}
  .dl-acts a,.dl-acts button{white-space:nowrap}
}
@media (min-width:1000px){
  /* the live card already shows their site and the facts row already says the score — no repeats in the tab */
  .dl-body .checks .shot,.dl-body>.why,.dl-body>.prose.dim:first-of-type{display:none}
  .dl-body .pin{position:static;margin:20px 0 0;padding:0;background:none;box-shadow:none;display:flex;align-items:center;gap:12px}
  .dl-body .pin .btn{width:auto;height:32px;padding:0 14px;font-size:13px}
  .dl-body .pin .sub{margin:0}
  .web .wmeta{display:none}
}
.ba i{font-style:normal}
@media (min-width:1000px){
  .dl-body.t-why>.prose.dim{display:none}
  .dl-body .pills.pad,.dl-body .prose-h.pad,.dl-body .notebox,.dl-body .empty,.dl-body .acts2{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
  .dl-body .pills.pad .pill{height:26px;padding:0 10px;background:var(--fill);font-weight:500}
  .dl-body .ba>.gr.col{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1fr);align-items:baseline;gap:12px;min-height:38px;padding:8px 0}
  .dl-body .ba i{display:none}
  .dl-body .ba b{font-size:13px;font-weight:500}
  .dl-body .ba .sub{font-size:13px;color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--line-strong)}
  .dl-body .ba .af{font-size:13px;color:var(--go);font-weight:500}
  .dl-body .ba:before{content:"";display:none}
  .dl-body .quote.g{font-size:22px}
  .dl-body .notebox{background:var(--bg);border-radius:10px;box-shadow:0 0 0 1px var(--line-soft)}
  .dl-body .notebox textarea{font-size:13.5px}
  .dl-body .empty{padding:14px 0;background:none;color:var(--ink-3);font-size:13px;text-align:left}
  .dl-body .acts2 .btn,.dl-body .btn.md{height:32px;padding:0 13px;font-size:13px}
  .dl-body .btn.md svg,.dl-body .acts2 svg{width:15px;height:15px}
}

/* ---------- the business on a computer, take 3 (Oct 12): a dashboard of real pieces, each one showing something ---------- */
@media (min-width:1000px){
  .dl{container-type:inline-size;padding:0 24px 40px}
  .dl-top{gap:12px;padding:20px 0 16px}
  .dl-top .pill{flex:none}
  .dl-tile{width:44px;height:44px;border-radius:11px}
  .dg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
  .dc{grid-column:span 12;min-width:0;}
  @container (min-width:700px){
    .c-call{grid-column:span 7}.c-price{grid-column:span 5}
    .c-site{grid-column:span 7}.c-goog{grid-column:span 5}
    .c-obj{grid-column:span 7}.c-hist{grid-column:span 5}
  }
  .dk{display:block;}
  .dsub b{color:var(--ink);font-weight:600}
  .dbody{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
  .dbody.lg{font-size:16px;color:var(--ink);font-weight:500}
  .dch{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
  .dl-lnk{font-size:12.5px;font-weight:500;color:var(--ink-2)}
  .dl-lnk:hover{color:var(--ink)}
  /* the call */
  .call-who{display:flex;flex-wrap:wrap;gap:12px 32px}
  .call-who b,.call-who .num{display:block;margin-top:3px;font-size:17px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
  .call-who .num:hover{text-decoration:underline}
  .c-call .dl-acts{margin-top:16px}
  .tele{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
  .tele-steps{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -4px 14px}
  .tele-steps::-webkit-scrollbar{display:none}
  .tele-steps button{display:inline-flex;align-items:center;gap:6px;flex:none;height:28px;padding:0 10px 0 4px;border-radius:999px;font-size:12px;font-weight:500;color:var(--ink-3)}
  .tele-steps i{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--fill);font-style:normal;font-size:10.5px;font-weight:600;color:var(--ink-2)}
  .tele-steps button:hover{color:var(--ink)}
  .tele-k{font-size:11.5px;font-weight:500;color:var(--ink-3)}
  .tele-q{margin-top:6px;letter-spacing:-.01em;max-width:52ch;text-wrap:pretty}
  .tele-nav{display:flex;align-items:center;gap:6px;margin-top:14px}
  .tele-nav .cp{margin-left:auto;height:32px;padding:0 12px;font-size:12.5px;background:none;box-shadow:inset 0 0 0 1px var(--line)}
  .tele-nav .dl-b[disabled]{opacity:.35}
  /* the price and their new site's pages */
  .big{margin-top:4px;font-size:40px;font-weight:650;letter-spacing:-.03em;line-height:1}
  .big.go{color:var(--go)}
  .c-price .dsub{margin-top:6px}
  .smap{margin-top:18px}
  .smap-home{display:inline-flex;align-items:center;height:28px;padding:0 12px;background:var(--ink);color:var(--bg);font-size:12px;}
  .smap-kids{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0 14px;padding:10px 0 0 14px;border-left:1.5px solid var(--line)}
  .smap-kids span{position:relative;height:26px;display:inline-flex;align-items:center;padding:0 10px;background:var(--fill);font-size:12px;}
  .pv-row{display:flex;align-items:center;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:12.5px}
  .pv-row>span{flex:1;display:inline-flex;align-items:center;gap:6px}
  .pv-on{color:var(--go);font-weight:600}.pv-on svg{width:15px;height:15px}
  .pv-off{color:var(--ink-2)}
  /* their site's report */
  .score{font-size:12.5px;color:var(--ink-2)}
  .score b{font-size:15px;font-weight:650;color:var(--go)}
  .score.bad b{color:var(--stop)}
  .segbar{display:flex;gap:3px;margin-bottom:14px}
  .segbar i{flex:1;height:6px;border-radius:3px;background:color-mix(in srgb,var(--stop) 85%,transparent)}
  .segbar i.ok{background:var(--go)}
  .ckgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
  .ckt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:var(--fill)}
  .ckt.no{background:color-mix(in srgb,var(--stop) 7%,var(--bg))}
  .ckic{flex:none;display:inline-grid;place-items:center;width:18px;height:18px;margin-top:1px;border-radius:50%;font-size:10px;font-weight:700;color:#fff;background:var(--stop)}
  .ckt.ok .ckic{background:var(--go)}
  .ckt b{display:block;font-size:13px;font-weight:600;line-height:1.35}
  .ckt span{display:block;margin-top:2px;font-size:12px;line-height:1.4;color:var(--ink-2)}
  /* Google */
  .rate{display:flex;align-items:center;gap:10px}
  .rate b{font-size:40px;font-weight:650;letter-spacing:-.03em;line-height:1}
  .stars{position:relative;display:inline-block;font-size:17px;letter-spacing:2px;color:var(--fill-3);line-height:1}
  .stars::before{content:"★★★★★"}
  .stars::after{content:"★★★★★";position:absolute;left:0;top:0;width:var(--r);overflow:hidden;color:#e8a33d;white-space:nowrap}
  .pct{margin-top:16px}
  .pct-bar{position:relative;height:6px;border-radius:3px;background:var(--fill-2);overflow:hidden;margin-bottom:8px}
  .pct-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--ink)}
  .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line-soft)}
  .facts span:last-child{display:block;margin-top:3px;font-size:13px;line-height:1.4}
  /* push-backs */
  .objs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px}
  .objs button{display:flex;align-items:center;gap:6px;min-height:40px;padding:8px 12px;background:var(--fill);font-size:13px;text-align:left;line-height:1.3}
  .objs button svg{width:15px;height:15px;color:var(--ink-2)}
  .objs button:hover{background:var(--fill-2)}
  .ans{margin-top:12px;padding:14px 16px;border-radius:12px;background:var(--fill);font-size:14px;line-height:1.55;animation:wrise .2s ease}
  .ans-q{margin-bottom:6px;font-size:12px;font-weight:600;color:var(--ink-3)}
  .ans .cp{margin-top:10px;height:30px;font-size:12px;background:var(--bg)}
  /* history */
  .c-hist .notebox{display:flex;gap:8px;align-items:flex-end;margin:0;padding:8px 8px 8px 12px;border-radius:10px;background:var(--fill);box-shadow:none}
  .c-hist .notebox textarea{flex:1;min-height:38px;padding:4px 0;font-size:13px;background:none;resize:none}
  .tl2{margin-top:10px}
  .tl2>div{display:flex;align-items:center;gap:10px;min-height:32px;font-size:13px;border-bottom:1px solid var(--line-soft)}
  .tl2>div:last-child{border-bottom:0}
  .tl2 .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--ink-4)}
  .c-hist>.dsub{margin-top:12px}
  .dl-next{margin:0 0 12px}
  .dl-more{margin-top:20px}
  .dl-more .ttl{display:none}
}

@media (min-width:1000px){.ckic svg{display:block;width:11px;height:11px;stroke-width:3;color:#fff;stroke:#fff}}
@media (min-width:1000px){.ckic svg{stroke:#fff!important;color:#fff!important}.c-call .dl-acts{flex-wrap:wrap}}

/* ---------- the Claude app's scale, on a computer (Oct 12, measured off claude.ai/code in his browser):
   warm off-white page, panel one tone warmer with no line, text #0b0b0b / #52514e / #898781, hairlines 10 % and 20 % ink,
   weights 400 and 500 only, radii 4 / 8 / 10, durations 60 / 120 / 200 / 450 ms on cubic-bezier(.165,.84,.44,1),
   one-line 36 px rows, hover = a 5 % wash, tags as 10 % tints. The phone keeps its own sizes. ---------- */
@media (min-width:1000px){
  :root{
    --bg:#fcfcfb; --bg-2:#f9f9f7; --raised:#ffffff;
    --fill:#0b0b0b0d; --fill-2:#0b0b0b1a; --fill-3:#0b0b0b26;
    --ink:#0b0b0b; --ink-2:#52514e; --ink-3:#898781; --ink-4:#c9c8c3;
    --line:#0b0b0b1a; --line-soft:#0b0b0b14; --line-strong:#0b0b0b33;
    --link:#184f95; --blue:#2a78d6; --go:#2f6b2a;
    --d1:60ms; --d2:120ms; --d3:200ms; --d4:450ms; --eo:cubic-bezier(.165,.84,.44,1); --es:cubic-bezier(.32,.72,0,1);
    --shadow-1:0 1px 2px #0b0b0b0f,0 2px 8px #0b0b0b14;
    --shadow-2:0 8px 24px #0000001f,0 2px 6px #00000014;
    --side:240px;
  }
  body{font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
  /* weights: 400 to read, 500 to name — never heavier */
  .ttl,h1,h2,h3,b,strong,.btn,.link,.chip,.pill,.lr .nm,.lr .pr,.side .nav-i.on,.side .me,.nav-i,.gr b,.tab,.cwin b,.row b,.dl h1,.tele-q,.score b,.big,.call-who b,.call-who .num,.ckt b,.rate b,.objs button,.smap-home,.smap-kids span,.dsub b,.dk,.chips .chip,.count .link,.ready b,.today b,.card b,.dp .dv,.dl-call,.dl-b,.side-nm,.pv-on,.tele-steps button,.tele-steps i{font-weight:500}
  .ttl{font-size:20px;letter-spacing:-.01em}
  .dl h1{font-size:20px;letter-spacing:-.01em}
  .big,.rate b{font-weight:500;letter-spacing:-.02em}
  /* the sidebar: a warmer tone, no line; rows 32 px, 14 px grey, selected and hovered are washes */
  .side{background:var(--bg-2);padding:10px 10px 12px}
  .side .nav-i{height:32px;font-size:14px;font-weight:400;color:var(--ink-2);transition:background-color var(--d2) var(--eo),color var(--d2) var(--eo)}
  .side .nav-i:hover{background:var(--fill);color:var(--ink)}
  .side .nav-i.on{background:var(--fill-2);color:var(--ink);font-weight:400}
  .side .nav-i kbd{font-size:11px;color:var(--ink-3)}
  .side-nm{font-size:15px;font-weight:500}
  .side .me{font-size:14px;font-weight:400}
  /* panes: 10 px cards on a hairline, no shadow */
  .split>.pane-l,body.web-on .split>.pane-l,.web,.dc,.cwin,.menu,.sheet{border-radius:10px;box-shadow:0 0 0 1px var(--line)}
  .web{box-shadow:0 0 0 1px var(--line)}
  .dc{box-shadow:0 0 0 1px var(--line)}
  .menu,.cwin{box-shadow:0 0 0 1px var(--line),var(--shadow-2)}
  .wbar{border-bottom:1px solid var(--line)}
  /* the search and the chips: 32 px field, 20 px tinted tags with radius 4 */
  .search{height:32px;border-radius:8px;background:var(--raised);box-shadow:0 0 0 1px var(--line);transition:box-shadow var(--d2) var(--eo)}
  .search:focus-within{box-shadow:0 0 0 1px var(--line-strong)}
  .search input{height:32px;font-size:14px}
  .chips{gap:6px}
  .chip{height:22px;padding:0 8px;border-radius:4px;background:var(--fill);font-size:12.5px;font-weight:400;color:var(--ink-2);transition:background-color var(--d2) var(--eo),color var(--d2) var(--eo)}
  .chip:hover{background:var(--fill-2);color:var(--ink)}
  .chip[aria-pressed="true"]{background:#2a78d61a;color:var(--link);font-weight:500}
  .chip i{color:inherit;opacity:.7}
  .pill{height:20px;padding:0 7px;border-radius:4px;font-size:12px;font-weight:400}
  .lfilters .tools .link{font-size:12.5px;font-weight:400;color:var(--ink-2)}
  .count{font-size:12.5px;color:var(--ink-3)}
  .count .link{font-weight:500}
  /* Two-line lead rows: full-width name, then service/location and price. */
  .lr{display:grid;grid-template-areas:"nm nm" "meta pr" "status status";align-items:baseline;min-height:36px;width:calc(100% - 12px);margin:0 6px;border-bottom:0;border-radius:8px;transition:background-color var(--d2) var(--eo)}
  .lr:hover{background:var(--fill)}
  .lr.sel{background:var(--fill-2)}
  .lr .nm{grid-area:nm;font-size:14px;font-weight:400;color:var(--ink);white-space:normal;overflow-wrap:anywhere}
  .lr .pr{grid-area:pr;font-size:13px;font-weight:400;font-variant-numeric:tabular-nums;margin-top:4px}
  .lr .ln2{grid-area:status;margin:0;display:block}
  .lr .ln2 .st{display:block;font-size:12.5px;margin-top:4px}
  .lr .ln2:has(.st.new){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .lr .ln3{grid-area:meta;margin-top:4px;font-size:13px;color:var(--ink-3);text-align:left;white-space:normal;overflow-wrap:anywhere;line-height:1.4}
  .lr.done .nm{color:var(--ink-2)}
  .list{padding:4px 0}
  /* the business: cards share the pane's tone, their heads at 12.5 px grey */
  .dc{background:var(--raised);padding:16px 18px;border-radius:10px}
  .dk{font-size:12.5px;font-weight:400;color:var(--ink-3)}
  .dsub{font-size:12.5px;color:var(--ink-3)}
  .dl-call{height:30px;padding:0 12px 0 10px;border-radius:8px;font-size:13px;font-weight:500}
  .dl-b{height:30px;padding:0 10px;border-radius:8px;font-size:13px;font-weight:400;box-shadow:0 0 0 1px var(--line);transition:background-color var(--d2) var(--eo),color var(--d2) var(--eo)}
  .tele-q{font-size:17px;line-height:1.5;font-weight:400}
  .tele-steps button[aria-selected="true"]{background:#2a78d61a;color:var(--link)}
  .tele-steps button[aria-selected="true"] i{background:var(--link);color:#fff}
  .ckt{border-radius:8px}
  .objs button{border-radius:8px;font-weight:400;transition:background-color var(--d2) var(--eo),color var(--d2) var(--eo)}
  .objs button[aria-pressed="true"]{background:#2a78d61a;color:var(--link)}
  .objs button[aria-pressed="true"] svg{color:var(--link)}
  .smap-home{border-radius:6px;font-weight:500}
  .smap-kids span{border-radius:6px;font-weight:400}
  .ibtn{width:30px;height:30px;border-radius:8px;color:var(--ink-2);transition:background-color var(--d2) var(--eo),color var(--d2) var(--eo)}
  .ibtn svg{width:16px;height:16px}
  .ibtn:hover{background:var(--fill);color:var(--ink)}
  .wib,.wseg button{transition:background-color var(--d2) var(--eo),color var(--d2) var(--eo)}
  .wseg{border-radius:7px}.wseg button{border-radius:5px}
  .wseg button[aria-pressed="true"]{box-shadow:0 0 0 1px var(--line),0 1px 2px #0b0b0b14}
  .btn{transition:transform var(--d1) var(--eo),background-color var(--d2) var(--eo)}
  .btn:active:not([disabled]){transform:scale(.99)}

}
@media (min-width:1000px) and (prefers-color-scheme:dark){
  :root{--bg:#0b0b0b;--bg-2:#141413;--raised:#1b1b1a;--fill:#ffffff0f;--fill-2:#ffffff1a;--fill-3:#ffffff26;--ink:#f5f5f3;--ink-2:#b4b2ab;--ink-3:#898781;--ink-4:#4a4a47;--line:#ffffff1a;--line-soft:#ffffff12;--line-strong:#ffffff33;--link:#7fb2ff;--go:#6bc67f}
  .chip[aria-pressed="true"],.tele-steps button[aria-selected="true"],.objs button[aria-pressed="true"]{background:#5598e733}
  .tip{background:#f5f5f3;color:#0b0b0b}
}
@media (min-width:1000px){
  .split{grid-template-columns:350px minmax(0,1fr)}
  body.web-on .split{grid-template-columns:350px minmax(0,1fr)}
  .lr{grid-template-columns:minmax(0,1fr) auto;column-gap:8px;padding:9px 10px}
  .lr .pr{color:var(--go)}
  .lr .ln3{font-size:12.5px}
}

/* ---------- the business as a profile (Oct 12): picture · name · stars · one row of icon links, then the facts strip ---------- */
@media (min-width:1000px){
  .pf{display:flex;align-items:flex-start;gap:16px;padding:22px 0 16px}
  .pf-av{flex:none;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;overflow:hidden;background:var(--fill);box-shadow:0 0 0 1px var(--line)}
  .pf-av img{width:100%;height:100%;object-fit:cover;object-position:top}
  .pf-av img.i3{object-fit:contain;padding:10px}
  .pf-main{flex:1;min-width:0}
  .pf-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .pf h1{font-size:22px;font-weight:500;letter-spacing:-.015em;line-height:1.2}
  .pf-sub{margin-top:2px;font-size:13px;color:var(--ink-2)}
  .pf-rate{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;color:var(--ink-2)}
  .pf-rate b{font-size:15px;font-weight:500;color:var(--ink)}
  .pf-rate .stars{font-size:14px;letter-spacing:1px}
  .pf-rate a{color:var(--ink-2)}
  .pf-rate a:hover{color:var(--ink);text-decoration:underline}
  .pf-top{padding:1px 6px;border-radius:4px;background:#2f6b2a1a;color:var(--go);font-size:12px}
  .pf-links{display:flex;gap:4px;margin-top:12px}
  .pf-ic{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;color:var(--ink-2);box-shadow:0 0 0 1px var(--line);transition:background-color var(--d2) var(--eo),color var(--d2) var(--eo)}
  .pf-ic svg{width:15px;height:15px}
  .pf-ic:hover{background:var(--fill);color:var(--ink)}
  .pf-acts{display:flex;gap:2px;flex:none}
  .pf-facts{display:grid;gap:12px 20px;margin-bottom:14px;padding:14px 18px;border-radius:10px;background:var(--raised);box-shadow:0 0 0 1px var(--line)}
  .pf-facts .dk{font-size:12px}
  .pf-facts .fv{display:block;margin-top:3px;font-size:13.5px;text-overflow:ellipsis}
  .pf-facts .fv a{color:inherit;font-variant-numeric:tabular-nums}
  .pf-facts .fv a:hover{text-decoration:underline}
  .pf-facts .fv .dim{color:var(--ink-3)}
  .pf-facts .fv .go{color:var(--go);font-weight:500}
  .c-call .call-who{display:none}
}
@media (min-width:1000px){
  .pf-facts{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
  .pf-facts .fv{white-space:normal;overflow:visible;line-height:1.35}
  .pf-facts .fv .dim{font-size:12px}
}
@media (min-width:1000px){
  /* folded: the hidden labels no longer take their gaps, so the icons sit dead centre */
  body.side-min .side .nav-i{gap:0;width:36px;margin:0 auto}
  body.side-min .side .nav-i span,body.side-min .side .nav-i kbd,body.side-min .side-nm,body.side-min .side .me>span:not(.av){display:none}
  body.side-min .side .me{gap:0;width:36px;margin:auto auto 0}
  body.side-min .side-hd{justify-content:center;padding:0}
}
@media (min-width:1000px){
  /* the list card keeps a 10 px gutter on its right too, so its ring never sits under the page beside it */
  .split,body.web-on .split{grid-template-columns:360px minmax(0,1fr)}
  .split>.pane-l,body.web-on .split>.pane-l{margin:10px 10px 10px 10px}
  .split>.pane-r{padding-left:4px}
}
@media (min-width:1000px){
  /* the list card's head (title, search, chips, count) stays put; only the rows scroll */
  .split>.pane-l:has(.page.leads){display:flex;flex-direction:column;overflow:hidden}
  .pane-l .page.leads{display:flex;flex-direction:column;flex:1;min-height:0;padding-bottom:0}
  .pane-l .page.leads .list{flex:1;min-height:0;overflow:auto;scrollbar-width:none;border-top:1px solid var(--line-soft)}
  .pane-l .page.leads .list::-webkit-scrollbar{display:none}
  .pane-l .page.leads .count{padding-bottom:6px}
}

/* ================================================================================================
   THE SYSTEM on a computer (Oct 12 night, after the audit — docs/design-research/AUDIT-2026-10-12.md).
   Six primitives, specced from Leads as built: button · row · tag · card · field · menu. Every page's
   classes resolve to these below. Tokens: --r-s 4 / --r 8 / --r-l 10 · --ring · --sel-bg · --ctl 30 / --row 36 / --tag 22.
   ================================================================================================ */
@media (min-width:1000px){
  :root{--r-s:4px;--r:8px;--r-l:10px;--ring:0 0 0 1px var(--line);--sel-bg:#2a78d61a;--ctl:30px;--row:36px;--tag:22px;--go-bg:#2f6b2a1a;--warm-bg:#ac4f231a;--stop-bg:#ba26231a;--star:#e8a33d}
  /* every page is a card on --bg, like the Leads list */
  .page{padding-bottom:40px}
  .card,.group,.empty,.chart,.today .ready,.team .pc,.launch .who,.notice,.inbox .notice{border-radius:var(--r-l)}
  .card{background:var(--raised);box-shadow:var(--ring);padding:14px 16px}
  .group{background:var(--raised);box-shadow:var(--ring);margin:0 var(--gut)}
  .group>.gr{min-height:var(--row);padding:6px 12px;gap:10px;border-bottom:1px solid var(--line-soft);transition:background-color var(--d2) var(--eo)}
  .group>.gr b{font-size:14px;font-weight:400}
  .group>.gr .sub{font-size:12.5px;color:var(--ink-3)}
  .group>.gr .chev{font-size:14px;color:var(--ink-4)}
  .group>button.gr:hover,.group>a.gr:hover{background:var(--fill)}
  .group>button.gr:active,.group>a.gr:active{background:var(--fill-2)}
  .h{padding:18px var(--gut) 6px;font-size:12.5px;font-weight:400;color:var(--ink-3)}
  .h .link{font-size:12.5px;font-weight:400;color:var(--ink-2)}
  .empty{margin:8px var(--gut);padding:14px 0;background:none;box-shadow:none;font-size:13px;color:var(--ink-3)}
  .empty b{font-weight:500;color:var(--ink-2)}
  .av{width:26px;height:26px;font-size:11px;font-weight:500;background:var(--fill)}
  .av.xl{width:72px;height:72px;font-size:24px;box-shadow:var(--ring)}
  .lede{font-size:13px;color:var(--ink-3)}
  /* buttons: one primary per screen, the rest rings; all radius 8 */
  .btn{height:38px;padding:0 16px;border-radius:var(--r);font-size:14px;font-weight:500}
  .btn.sm{height:var(--ctl);padding:0 11px;font-size:13px;font-weight:400;background:transparent;box-shadow:var(--ring);color:var(--ink-2)}
  .btn.sm:hover{background:var(--fill);color:var(--ink)}
  .btn.sm.primary,.btn.primary{background:var(--paper);color:var(--on-paper);box-shadow:none;font-weight:500}
  .btn.md{height:34px;padding:0 13px;font-size:13px}
  .btn svg{width:16px;height:16px}
  .link{font-size:13px;font-weight:400;color:var(--ink-2)}
  .link.blue{color:var(--link);font-weight:500}
  .act-p{height:24px;padding:0 9px;border-radius:var(--r-s);font-size:12px;font-weight:400;background:var(--fill)}
  .act-p svg{width:13px;height:13px}
  .seg{padding:2px;border-radius:7px;background:var(--fill)}
  .seg button{height:24px;padding:0 10px;border-radius:5px;font-size:12.5px;font-weight:400;color:var(--ink-2)}
  .seg button[aria-pressed="true"]{background:var(--raised);color:var(--ink);box-shadow:var(--ring),0 1px 2px #0b0b0b14;font-weight:500}
  /* tags */
  .pill.go{background:var(--go-bg)}.pill.warm{background:var(--warm-bg)}.pill.stop{background:var(--stop-bg)}
  .pill.blue{background:#2a78d61a}.pill.purple{background:#8a44d41a}
  .badge{font-weight:500}
  /* fields */
  input[type="text"],input[type="tel"],input[type="search"],input[type="email"],.settings .gr input,.launch .code input,.cwin .cf input,.field input,.note-in,textarea{font-size:14px}
  .settings .gr input,.launch .code input{height:32px;padding:0 10px;border-radius:var(--r);background:var(--raised);box-shadow:var(--ring);text-align:left;transition:box-shadow var(--d2) var(--eo)}
  .settings .gr input::placeholder{text-align:left}
  .settings .gr input:focus,.launch .code input:focus{box-shadow:0 0 0 1px var(--line-strong)}
  .settings .bk textarea{border-radius:var(--r);background:var(--raised);box-shadow:var(--ring);font-size:12px}
  /* the generic row (Today, person page, who view) reads like a Leads row */
  .row{min-height:var(--row);padding:4px 10px;margin:0 6px;border-bottom:0;border-radius:var(--r);gap:10px;transition:background-color var(--d2) var(--eo)}
  .row:hover{background:var(--fill)}
  .row .nm{font-size:14px;font-weight:400;line-height:1.3}
  .row .ln{font-size:12.5px;color:var(--ink-3);margin-top:0}
  .rows{padding:4px 0}
  .rows,.list{background:var(--raised);box-shadow:var(--ring);border-radius:var(--r-l);margin:0 var(--gut)}
  .pane-l .list,.split .list{background:none;box-shadow:none;border-radius:0;margin:0}

  /* ---- TODAY: one card — the next three as rows, the one ink button in the head ---- */
  .today{max-width:720px;margin:0 auto}
  .today .date{height:auto;padding:22px var(--gut) 0}
  .today .date .sub{font-size:12.5px;color:var(--ink-3)}
  .today .ready-l{height:var(--tag);padding:0 8px;border-radius:var(--r-s);background:var(--fill);font-size:12.5px;font-weight:400;color:var(--ink-2)}
  .today .ready-l:hover{background:var(--fill-2);color:var(--ink)}
  .today .row .nm{font-weight:400}
  .today .done-line{margin:14px var(--gut) 0;font-size:12.5px;color:var(--ink-3)}
  .today .syncline{margin:10px var(--gut) 0;border-radius:var(--r);background:var(--warm-bg);font-size:12.5px}
  .today .rows .row .act{display:flex;gap:6px}

  /* ---- CALLING: the lead profile with everything but the call removed ---- */
  .in-call .side{display:flex}
  .in-call main.main{margin-left:var(--side)}
  .call{min-height:0;max-width:760px;margin:0 auto;padding:0 var(--gut)}
  .call .cbar{height:auto;padding:18px 0 8px}
  .call .cbar b{font-size:13px;font-weight:500}
  .call .cbar .sub{font-size:12.5px;color:var(--ink-3)}
  .call .segs{padding:0;gap:3px}
  .call .segs i{height:3px;background:var(--fill-2)}
  .call .segs i.now{background:var(--link);box-shadow:none}
  .call .cwrap{margin-top:14px;padding:16px 18px;border-radius:var(--r-l);background:var(--raised);box-shadow:var(--ring)}
  .call .who{padding:0}
  .call .who .pf{padding:0 0 12px}
  .call .who .pf-av{width:48px;height:48px}
  .call .who h1{margin:0;font-size:20px;font-weight:500;letter-spacing:-.015em}
  .call .who h1.sm{font-size:17px}
  .call .who .pills{margin-top:6px}
  .call .why{margin-top:10px;font-size:14px;font-weight:400;line-height:1.5;color:var(--ink-2)}
  .call .why.bad{color:var(--stop)}
  .call .pf-facts{margin:12px 0 0;padding:12px 14px}
  .call .say{margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line-soft);border-radius:0;background:none}
  .call .say .k{font-size:12.5px;font-weight:400;color:var(--ink-3)}
  .call .say .quote{margin-top:6px;font-size:17px;line-height:1.5;font-weight:400;letter-spacing:-.01em;max-width:52ch;text-wrap:pretty}
  .call .say .link{margin-top:8px;font-size:12.5px}
  .call .dock{margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line-soft)}
  .call .dock .btn.big{width:auto;height:36px;font-size:14px;padding:0 14px 0 12px;gap:8px;border-radius:var(--r)}
  .call .dock .btn.big svg{width:16px;height:16px}
  .call .dock .btn.big .t{flex-direction:row;align-items:baseline;gap:8px}
  .call .dock .btn.big small{font-size:12.5px;font-weight:400}
  .call .dock .row2{margin-top:10px}
  .call .dock .row2 .link{font-size:13px}
  .call .called{font-size:13px;color:var(--ink-2)}
  .call .called a{font-weight:500}
  .ans{gap:6px}
  .ans button{height:var(--row);padding:0 12px;border-radius:var(--r);background:var(--raised);box-shadow:var(--ring);font-size:14px;font-weight:400;transition:background-color var(--d2) var(--eo)}
  .ans button:hover{background:var(--fill)}
  .ans button i{width:7px;height:7px}
  .ans button.on{background:var(--sel-bg);color:var(--link);box-shadow:none}
  .ans kbd{font-size:11px}
  .how-h{font-size:12.5px;font-weight:400;color:var(--ink-3);margin:0 0 8px}
  .dnc{font-size:12.5px;color:var(--ink-3)}
  .call .acc,.call .group.acc{margin:12px 0 0}
  .call-end{padding:0;gap:12px}
  .call-end h1{font-size:20px;font-weight:500;letter-spacing:-.015em}
  .call-end .dots i{width:8px;height:8px}
  .call-end .dots i.pass{box-shadow:inset 0 0 0 1.5px var(--ink-3)}

  /* ---- INBOX: Leads' split ---- */
  .inbox .ibar{height:32px;margin:0 var(--gut) 10px;padding:0 10px;border-radius:var(--r);background:var(--raised);box-shadow:var(--ring);gap:8px;transition:box-shadow var(--d2) var(--eo)}
  .inbox .ibar:focus-within{box-shadow:0 0 0 1px var(--line-strong)}
  .inbox .ibar input{height:32px;font-size:14px}
  .inbox .ibar .ibtn{width:24px;height:24px}
  .inbox .ibar .ibtn svg{width:15px;height:15px}
  .inbox .ibar .av{display:none}
  .inbox .ihead{display:flex;align-items:center;justify-content:space-between;gap:8px;}
  .inbox .ihead .ttl{padding:0}
  .inbox .ihead .btn{height:var(--ctl);padding:0 12px;font-size:13px;gap:6px}
  .inbox .ihead .btn svg{width:14px;height:14px}
  .inbox .lbl{padding:4px var(--gut) 4px;font-size:12.5px;font-weight:400;color:var(--ink-3)}
  .inbox .notice{margin:0 var(--gut) 8px;padding:8px 12px;border-radius:var(--r);background:var(--fill);font-size:12.5px;color:var(--ink-2);align-items:center}
  .inbox .notice b{display:inline;font-size:12.5px;font-weight:500;color:var(--ink);margin-right:6px}
  .inbox .notice .btn{height:26px;padding:0 10px;font-size:12.5px}
  .inbox .empty{margin:4px var(--gut);padding:10px 0}
  .inbox .fchips{gap:6px;padding:0 var(--gut) 8px;overflow-x:auto;scrollbar-width:none}
  .inbox .fchips .chip i{margin-left:4px}
  .mrow{grid-template-columns:auto minmax(0,1.5fr) minmax(0,1fr) auto;align-items:center;column-gap:8px;min-height:var(--row);padding:0 10px;margin:0 6px;border-radius:var(--r);transition:background-color var(--d2) var(--eo)}
  .mrow:hover{background:var(--fill)}
  .mrow.sel{background:var(--fill-2)}
  .mrow .av{display:none}
  .mrow .mdot{width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-3)}
  .mrow.u .mdot{background:var(--ink);box-shadow:none}
  .mrow .from{font-size:14px;font-weight:400}
  .mrow .subj{font-size:12.5px;color:var(--ink-3);text-align:right}
  .mrow .snip,.mrow .nudge{display:none}
  .mrow .side2{flex-direction:row;align-items:center;gap:8px}
  .mrow .time{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
  .mrow .star{width:14px;height:14px}
  .mrow.u .from,.mrow.u .subj,.mrow.u .time{font-weight:500;color:var(--ink)}
  .mrow.u .subj{color:var(--ink-2)}
  .fab{display:none}
  .drawer{border-radius:0;padding-top:16px}
  .drawer .dh b{font-size:14px;font-weight:500}
  .drawer .fold{height:var(--row);min-height:0;border-radius:var(--r);margin:0 8px;padding:0 10px;font-size:14px;font-weight:400}
  .drawer .fold.on{background:var(--fill-2);font-weight:500}
  .drawer .fold .dot{width:7px;height:7px}
  .thread .subj-h{font-size:20px;font-weight:500;letter-spacing:-.015em}
  .thread .bizchip{border-radius:var(--r);background:var(--raised);box-shadow:var(--ring)}
  .thread .bizchip .tile{width:26px;height:26px;border-radius:6px}
  .thread .bizchip b{font-size:14px;font-weight:500}
  .thread .msgx .av{width:26px;height:26px}
  .thread .msgx .body,.thread .msgx p{font-size:14px;line-height:1.5}
  .thread .replybar .chip{height:var(--tag)}
  .thread .rb .btn{height:var(--ctl);font-size:13px;box-shadow:var(--ring)}
  .cwin{border-radius:var(--r-l) var(--r-l) 0 0;box-shadow:var(--ring),var(--shadow-2)}
  .cwin .bar{height:40px;background:var(--raised);border-bottom:1px solid var(--line)}
  .cwin .bar-t{font-size:14px;font-weight:500;text-align:left}
  .cwin .cf{min-height:36px;font-size:14px}
  .cwin .cf>span:first-child{font-size:12.5px;color:var(--ink-3);width:56px}
  .cwin .tochip{height:var(--tag);border-radius:var(--r-s);font-size:12.5px;font-weight:400}
  .cwin .tpl .chip,.cwin .tpl button{height:var(--tag);border-radius:var(--r-s);font-size:12.5px;font-weight:400}
  .cwin textarea{font-size:14px;line-height:1.5}
  .cwin .cnote{font-size:12.5px;color:var(--ink-3)}
  .cwin .ibtn.fill{width:auto;height:var(--ctl);padding:0 12px;border-radius:var(--r);background:var(--paper);color:var(--on-paper);font-size:13px;font-weight:500;gap:6px}

  /* ---- MAP: the Leads list card dropped on the map ---- */
  .mtop{left:10px;right:auto;top:10px;width:360px;pointer-events:none}
  .mtop>*{pointer-events:auto}
  .msearch{height:32px;padding:0 10px;border-radius:var(--r);background:var(--raised);box-shadow:var(--ring);font-size:14px;gap:8px}
  .msearch svg{width:15px;height:15px;color:var(--ink-2)}
  .msearch .av{display:none}
  .mchips{margin-top:8px;gap:6px;padding-bottom:0}
  .mchips .chip{height:var(--tag);padding:0 8px;border-radius:var(--r-s);background:var(--raised);box-shadow:var(--ring);font-size:12.5px;font-weight:400;color:var(--ink-2)}
  .mchips .chip[aria-pressed="true"]{background:var(--sel-bg);color:var(--link);font-weight:500;box-shadow:none}
  .mchips .chip i.d{width:7px;height:7px}
  .mpanel{left:10px;right:auto;top:92px;bottom:10px;width:360px;height:auto!important;border-radius:var(--r-l);box-shadow:var(--ring)}
  .mpanel .mh{padding:14px 14px 10px}
  .mpanel .mh b{font-size:16px;font-weight:500;letter-spacing:-.01em}
  .mpanel .mh .sub{font-size:12.5px;color:var(--ink-3)}
  .mpanel .mh .sub b{font-size:12.5px;font-weight:500}
  .mpanel .mh .btn.sm{height:28px;font-size:12.5px}
  .mpanel .lh{padding:10px 14px 4px;font-size:12.5px;font-weight:400;color:var(--ink-3)}
  .mpanel .lh .link{font-size:12.5px}
  .mpanel .msay{font-size:13px;color:var(--ink-3);padding:0 14px 6px}
  .brow{display:flex;gap:8px;width:calc(100% - 12px);min-height:var(--row);padding:4px 8px;margin:0 6px;border-bottom:0;border-radius:var(--r);transition:background-color var(--d2) var(--eo)}
  .brow>.grow{flex:1;min-width:0}
  .brow>.ic,.brow>.rt,.brow>.sv,.brow>.callb{flex-shrink:0}
  .brow .ic{width:20px;height:20px;border-radius:5px;background:none}
  .brow .ic .i3{width:20px;height:20px}
  .brow .ic b{font-size:11px;color:var(--ink-3)}
  .brow .nm{font-size:14px;font-weight:400}
  .brow .ln{font-size:12.5px;color:var(--ink-3);text-align:left}
  .brow .ln>i,.brow .ln .st i{width:7px;height:7px}
  .brow .rt{font-size:12.5px;color:var(--ink-2)}
  .brow .sv{width:26px;height:26px;border-radius:6px;opacity:0;transition:opacity var(--d2) var(--eo)}
  .brow .sv svg{width:14px;height:14px}
  .brow:hover .sv,.brow:focus-within .sv{opacity:1}
  .brow .callb{width:26px;height:26px;border-radius:6px;background:none;box-shadow:var(--ring)}
  .brow .callb svg{width:13px;height:13px}
  .sk-r{grid-template-columns:20px minmax(0,1fr);padding:9px 10px;margin:0 6px}
  .sk-r i{height:20px;border-radius:5px}
  .sk-r b{height:10px;border-radius:var(--r-s)}
  .h-ctl{border-radius:var(--r);box-shadow:var(--ring),var(--shadow-1)}
  .h-ctl button{width:30px;height:30px;font-size:15px;color:var(--ink-2)}
  .h-ctl button:hover{background:var(--fill);color:var(--ink)}
  .bz.as-sheet{border-radius:var(--r-l);box-shadow:var(--ring),var(--shadow-2)}
  .bz.cardx{border-radius:var(--r-l);box-shadow:var(--ring),var(--shadow-2)}
  .bz-kv,.bz-fold,.bz-gen,.bz-ans{border-radius:var(--r-l);background:var(--raised);box-shadow:var(--ring)}
  .bz-fold summary{font-size:13px;font-weight:500}
  .bz-say{font-size:14px;font-weight:400;line-height:1.5}
  .bz .pill{font-size:12px}

  /* ---- TEAM: two person rows, a quiet chart, three rows ---- */
  .team{max-width:720px;margin:0 auto}
  .team .people{grid-template-columns:1fr;gap:0;padding:0;margin:0 var(--gut);background:var(--raised);box-shadow:var(--ring);border-radius:var(--r-l);overflow:hidden}
  .team .pc{grid-template-columns:auto minmax(0,1fr) auto auto;min-height:44px;padding:6px 12px;border-radius:0;background:none;border-bottom:1px solid var(--line-soft);transition:background-color var(--d2) var(--eo)}
  .team .pc:last-child{border-bottom:0}
  .team .pc:hover{background:var(--fill)}
  .team .pc .who{gap:10px}
  .team .pc .who b{font-size:14px;font-weight:400}
  .team .pc .who .sub{height:18px;padding:0 6px;border-radius:var(--r-s);background:var(--sel-bg);color:var(--link);font-size:11.5px;line-height:18px}
  .team .pc .big{display:inline;margin:0;font-size:14px;font-weight:500;letter-spacing:0}
  .team .pc .lbl{font-size:12.5px;color:var(--ink-3)}
  .team .pc .ln{display:inline;margin:0;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
  .team .pc .ln .g{font-weight:500}
  .chart{margin:10px var(--gut) 0;padding:12px 14px;background:var(--raised);box-shadow:var(--ring)}
  .chart-h b{font-size:12.5px;font-weight:400;color:var(--ink-3)}
  .chart .key{font-size:12.5px;color:var(--ink-3)}
  .chart .key i{width:7px;height:7px}
  .chart .bars{height:72px}
  .chart .day i{border-radius:2px 2px 0 0}
  .chart .day i.z{background:transparent;box-shadow:inset 0 -1px 0 var(--line)}
  .chart .days{font-size:11px;color:var(--ink-3)}
  .chart .days .t{font-weight:500}
  .lede.presence{margin:10px var(--gut) 0;font-size:12.5px;color:var(--ink-3)}
  .syncline{margin:0 var(--gut) 10px;border-radius:var(--r);background:var(--warm-bg);font-size:12.5px}
  .team .group{margin-top:10px}
  .settings{background:var(--bg);max-width:720px;margin:0 auto}
  .settings .bar{background:none}
  .settings .hint{font-size:12.5px;color:var(--ink-3);padding:6px var(--gut) 0}
  .settings .gr .v{font-size:13px;color:var(--ink-3)}
  .settings .group>.gr{min-height:40px}
  .settings .gr.col{align-items:stretch}
  .pushed-p .bar .back{font-size:14px;color:var(--ink-2)}
  .pushed-p .bar .back svg{width:16px;height:16px}
  .person .prof{padding:22px var(--gut) 14px}
  .person .prof h1{font-size:22px;font-weight:500;letter-spacing:-.015em}
  .person .prof .sub{font-size:13px;color:var(--ink-2)}
  .person .pfp .sub{font-size:12px;color:var(--ink-3)}
  .person .tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px;margin:0 var(--gut);padding:12px 16px;border-radius:var(--r-l);background:var(--raised);box-shadow:var(--ring)}
  .person .tl2{padding:0;background:none;border-radius:0}
  .person .tl2 .sub{font-size:12px;color:var(--ink-3)}
  .person .tl2 b{font-size:17px;font-weight:500;letter-spacing:-.01em}
  .person .card .dots i{width:7px;height:7px}
  .person .btn.sm{height:var(--ctl)}

  /* ---- LAUNCH: the Leads card alone on the page ---- */
  .launch{max-width:400px;padding:24px 0 80px}
  .launch h1{font-size:22px;font-weight:500;letter-spacing:-.015em}
  .launch .lines{margin:6px 0 16px;font-size:13px;color:var(--ink-3)}
  .launch .whos{border-radius:var(--r-l);background:var(--raised);box-shadow:var(--ring);padding:4px 0}
  .launch .who{height:40px;padding:0 10px;margin:0 6px;border-radius:var(--r);background:none;font-size:14px;font-weight:400;gap:10px;transition:background-color var(--d2) var(--eo)}
  .launch .who+.who{margin-top:0}
  .launch .who:hover{background:var(--fill)}
  .launch .who.last{background:var(--fill-2);color:var(--ink)}
  .launch .who.last .av{background:var(--fill)}
  .launch .who small{font-size:11.5px;opacity:1;height:18px;line-height:18px;padding:0 6px;border-radius:var(--r-s);background:var(--sel-bg);color:var(--link)}
  .launch .who kbd{font:400 11px var(--sans);color:var(--ink-3);}
  .launch .code{margin-top:12px}
  .launch .code-msg{font-size:12.5px}
}
.mrow .mdot{display:none}
.inbox .fchips{display:none}
.launch .whos{display:contents}
@media (min-width:1000px){.mrow .mdot{display:block}.inbox .fchips{display:flex}.launch .whos{display:block}}
@media (min-width:1000px){
  .team .pc{display:flex;align-items:center;gap:8px}
  .team .pc .who{flex:1;min-width:0}
  .team .pc .big{margin-left:auto}
  .inbox .ihead{padding:14px 14px 8px}
  .inbox .notice .grow{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .inbox .notice .grow b{flex:none}
  .inbox .notice .grow span,.inbox .notice .grow{font-size:12.5px}
  .inbox .fchips{flex-wrap:wrap;overflow:visible}
  .call .why{display:flex;gap:6px;align-items:baseline}
  .call .why::before{content:"Why them";flex:none;color:var(--ink-3);font-size:12.5px}
  .mtop{z-index:12}
  .mchips .chip{white-space:nowrap}
}
/* the profile pieces on a phone too (the calling screen uses them now) */
.pf{display:flex;align-items:flex-start;gap:12px}
.pf-av{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--fill)}
.pf-av img{width:100%;height:100%;object-fit:cover;object-position:top}
.pf-av img.i3{object-fit:contain;padding:8px}
.pf-main{flex:1;min-width:0}
.pf-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pf-sub{margin-top:2px;font-size:14px;color:var(--ink-2)}
.pf-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin-top:14px;padding:12px 14px;border-radius:16px;background:var(--fill)}
.pf-facts .dk{display:block;font-size:12px;color:var(--ink-2)}
.pf-facts .fv{display:block;margin-top:2px;font-size:15px}
.pf-facts .fv .dim{color:var(--ink-3);font-size:13px}
.pf-facts .fv .go{color:var(--go);font-weight:600}
.call .who .pf h1{margin:0}
.call .why{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.call .why::before{content:"Why them";flex:none;color:var(--ink-2);font-size:13px;font-weight:500}
@media (min-width:1000px){
  .bz.as-sheet{left:calc(var(--side) + 10px);top:10px;bottom:10px;width:360px}
  .inbox .notice .grow{font-size:0}
  .inbox .notice .grow b{font-size:12.5px}
  .inbox .notice .grow .r{font-size:12.5px}
}
@media (min-width:1000px){
  /* one page tone everywhere: the panel grey under white cards, as Leads has */
  body,main.main{background:var(--bg-2)}
  main.main{min-height:100vh}
  .side{box-shadow:inset -1px 0 0 var(--line-soft)}
  .cwrap,.today .ready,.rows,.list,.group,.chart,.team .people,.launch .whos,.pf-facts,.tiles,.card,.settings .group{background:var(--raised)}
  .map-host{background:var(--bg-2)}
}
@media (min-width:1000px){.pane-l .page.leads{min-width:0;width:100%;max-width:none}.pane-l .page.leads>*{min-width:0}.pane-l .page.leads .list{width:auto}}
/* the email itself, as Gmail shows it */
.mailbody{position:relative;margin-top:10px;min-height:40px;border-radius:8px;overflow:hidden;background:#fff}
.mailbody iframe{display:block;width:100%;height:40px;border:0;background:#fff}
.mailbody .mail-ld{position:absolute;left:12px;top:14px;width:120px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--fill-2) 0,var(--ink-4) 50%,var(--fill-2) 100%);background-size:200% 100%;animation:wshim 1.1s linear infinite}
.mailbody.on .mail-ld{display:none}
.atts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.att{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:8px;background:var(--fill);font-size:13px;font-weight:500}
.att svg{width:14px;height:14px;color:var(--ink-2)}
.att small{font-size:12px;font-weight:400;color:var(--ink-3)}

/* ======================================================= a computer (≥1000px): every desktop rule, in one block, in the order it was written ======================================================= */
.launch .who kbd{margin-left:auto}.launch .who small{margin-left:auto}.launch .who small+kbd{margin-left:8px}
.mailbody{box-shadow:0 0 0 1px var(--line-soft)}.att{height:26px;font-size:12.5px;font-weight:400;box-shadow:var(--ring);background:var(--raised)}
}

/* a computer, dark */
@media (min-width:1000px) and (prefers-color-scheme:dark){
  :root{--sel-bg:#5598e733;--go-bg:#6bc67f2e;--warm-bg:#ef8b5733;--stop-bg:#ff676433}
}

/* ---------- Today as a deck (Oct 13, his pick "B, without the progress bar"): what the day is in three lines on the left, the
   set of ten as cards on the right — the first three face up and shuffle slowly while you wait; still under reduced motion.
   When nothing is left to call and nothing waits, the page empties to a field of dots waving and one line. ---------- */
.today .ttl{font-size:var(--t-28);font-weight:500;letter-spacing:-.015em;margin:4px var(--gut) 0}
.today .deck{display:flex;flex-direction:column;gap:22px;margin:4px var(--gut) 0}
.today .rd-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:var(--t-14);color:var(--ink-2)}
.today .rd-sub .ready-l{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:var(--r-pill,999px);background:var(--fill);font-size:var(--t-13);font-weight:500;color:var(--ink)}
.today .rd-act{margin:16px 0 0;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.today .rd-act .btn.primary{width:auto}
.today .rd-line{margin:18px 0 0;font-size:var(--t-14);color:var(--ink-3)}
.today .rd-line .link{font-size:inherit;vertical-align:baseline}
.today .stack{position:relative;height:244px;margin:6px 0 40px}
.today .stack .card{position:absolute;inset:0;display:flex;flex-direction:column;text-align:left;padding:18px 20px;border-radius:var(--r-l);background:var(--raised);box-shadow:0 0 0 1px var(--line-soft),0 14px 30px -20px rgba(0,0,0,.35);transform-origin:50% 100%;color:var(--ink);cursor:pointer}
.today .stack .card:nth-child(1){z-index:3}.today .stack .card:nth-child(2){z-index:2;transform:translateY(16px) scale(.96)}.today .stack .card:nth-child(3){z-index:1;transform:translateY(32px) scale(.92);opacity:.9}
.today .card .tr{font-size:var(--t-12);color:var(--ink-3)}
.today .card .nm{font-size:var(--t-18);font-weight:500;margin:3px 0 8px;letter-spacing:-.01em}
.today .card .crow{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-top:1px solid var(--line-soft);font-size:var(--t-13);color:var(--ink-3)}
.today .card .crow b{font-weight:500;color:var(--ink);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.today .card .crow b.go{color:var(--go)}
.today .card .crow b small{font-weight:400;color:var(--ink-3);font-size:var(--t-12)}
@media (prefers-reduced-motion:no-preference){
  .today .stack .card{animation:deckShuffle var(--d-idle) cubic-bezier(.165,.84,.44,1) infinite}
  .today .stack .card:nth-child(2),.today .stack .card:nth-child(3){transform:none;opacity:1}
  @keyframes deckShuffle{0%,30%{transform:translateY(0) scale(1);z-index:3;opacity:1}36%{transform:translateY(-28px) scale(1.02);z-index:3;opacity:0}37%{transform:translateY(40px) scale(.9);z-index:1;opacity:0}45%,66%{transform:translateY(32px) scale(.92);z-index:1;opacity:1}70%{transform:translateY(16px) scale(.96);z-index:2;opacity:1}100%{transform:translateY(0) scale(1);z-index:3;opacity:1}}
  .today .stack:hover .card{animation-play-state:paused}
}
.today .idle{display:flex;flex-direction:column;align-items:center;padding:56px var(--gut) 24px;text-align:center}
.today .idle .dots{display:grid;grid-template-columns:repeat(9,10px);gap:14px}
.today .idle .dots i{width:10px;height:10px;border-radius:50%;background:var(--line-strong)}
.today .idle p{margin:26px 0 0;font-size:var(--t-14);color:var(--ink-3)}
.today .idle p b{display:block;font-weight:500;font-size:var(--t-16);color:var(--ink);margin-bottom:4px}
@media (prefers-reduced-motion:no-preference){.today .idle .dots i{animation:idleWave var(--d-wave) ease-in-out infinite}@keyframes idleWave{0%,100%{transform:translateY(0);background:var(--line-strong)}50%{transform:translateY(-6px);background:var(--ink-3)}}}
@media (min-width:1000px){
  .today{max-width:920px}
  .today .ttl{font-size:var(--t-28);margin:10px var(--gut) 0}
  .today .deck{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:center;margin:8px var(--gut) 0;padding:0}
  .today .deck.none{display:block}
  .today .rd-sub{font-size:var(--t-13)}
  .today .rd-sub .ready-l{height:var(--tag);padding:0 8px;border-radius:var(--r-s);font-size:var(--t-12-5);font-weight:400;color:var(--ink-2)}
  .today .rd-sub .ready-l:hover{background:var(--fill-2);color:var(--ink)}
  .today .rd-act{margin-top:18px}
  .today .rd-act .btn.primary{height:var(--ctl);padding:0 14px;font-size:var(--t-13);border-radius:var(--r)}
  .today .rd-act .link.resume{width:auto;font-size:var(--t-12-5)}
  .today .rd-line{font-size:var(--t-12-5);margin-top:22px}
  .today .stack{height:252px;margin:0}
  .today .stack .card{border-radius:var(--r-l);box-shadow:var(--ring),0 14px 30px -20px rgba(0,0,0,.3)}
  .today .card .nm{font-size:var(--t-17)}
  .today .card .crow{font-size:var(--t-12-5)}
  .today .row .nm{font-weight:400}
  .today .i3{width:24px;height:24px}
}

/* One viewport-level tooltip, outside scrolling lead cards. */
.tip{position:fixed;z-index:1000;box-sizing:border-box;width:max-content;max-width:min(280px,calc(100vw - 24px));padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--ink);color:var(--bg);font-size:12px;line-height:1.45;white-space:normal;overflow-wrap:anywhere;text-align:left;box-shadow:var(--shadow-2);pointer-events:none;visibility:hidden;opacity:0;transform:translateY(2px);transition:opacity var(--d2) var(--eo),transform var(--d2) var(--eo)}
.tip.on{visibility:visible;opacity:1;transform:none}
.tip strong{display:block;font-weight:500}.tip span{display:block;margin-top:3px;color:inherit;opacity:.75;font-size:11px}
@media(prefers-reduced-motion:reduce){.tip{transition:none;transform:none}}

:root{--t-10:10px;--t-11:11px;--t-19:19px;--r-panel:14px;--r-control:9px;--r-mobile:18px;--d-feedback:160ms;--d-reveal:360ms;--d-progress:1.8s}
/* Discovery is a decision surface; the lead profile is where work continues. */
.bz.bz-discovery{display:flex;flex-direction:column;border-radius:var(--r-panel);overflow:hidden;background:var(--raised);box-shadow:var(--shadow-2)}
.bz-discovery .bz-scroll{padding:0 20px 0;flex:1;min-height:0}
.bz-discovery .dc-context{display:flex;align-items:center;justify-content:space-between;margin:12px 0 14px;color:var(--ink-3);font-size:var(--t-11)}
.bz-discovery .dc-context .ibtn{width:26px;height:26px;background:transparent;border-radius:var(--r-s,4px)}
.bz-discovery .bz-top{padding:0;margin:0;display:block}
.bz-discovery .bz-top h2{font-size:var(--t-19);line-height:1.25;font-weight:550;letter-spacing:-.035em;padding:0;margin:0;overflow-wrap:anywhere}
.bz-discovery .bz-sub{font-size:var(--t-12);line-height:1.5;margin:7px 0 0;color:var(--ink-2)}
.dc-rating{font-size:var(--t-12);margin:8px 0 0;color:var(--ink-2)}.dc-rating b{color:var(--ink);font-weight:500}.dc-rating>span{color:var(--ink-2)}
.bz-discovery .dc-website{margin:20px 0 0}
.dc-website>a{display:flex;gap:10px;align-items:center;color:var(--ink);text-decoration:none;padding:10px;border:1px solid var(--line-soft);border-radius:var(--r-control);background:var(--bg);transition:background var(--d-feedback),border-color var(--d-feedback)}
.dc-website>a:hover{background:var(--fill);border-color:var(--line)}
.dc-website>a>span:nth-child(2){min-width:0;flex:1}.dc-website b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-12);font-weight:500}.dc-website small{display:block;margin-top:3px;font-size:var(--t-11);color:var(--ink-3)}
.dc-website svg{width:15px;height:15px;flex-shrink:0;stroke-width:1.6}.dc-site-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r,8px);background:var(--raised);border:1px solid var(--line-soft)}
.dc-tools{display:flex;align-items:center;gap:18px;margin:12px 0 20px}.dc-tool{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-12);color:var(--ink-2);text-decoration:none;min-height:30px}.dc-tool:hover{color:var(--ink)}.dc-tool svg{width:14px;height:14px;stroke-width:1.6}.dc-missing{font-size:var(--t-12);color:var(--ink-3);line-height:1.5}
.bz-discovery .bz-site{border:0;border-top:1px solid var(--line-soft);border-radius:0;background:none;margin:0;padding:16px 0 6px;box-shadow:none}
.bz-discovery .bz-site .sh b{font-size:var(--t-11);color:var(--ink-3);font-weight:400}
.bz-discovery .bz-site .say{font-size:var(--t-12);font-weight:400;line-height:1.5;margin:8px 0 12px;color:var(--ink-2)}
.bz-discovery .bz-site .ck{font-size:var(--t-12);line-height:1.5;padding:9px 0;gap:10px;align-items:flex-start;color:var(--ink-2)}
.bz-discovery .bz-site .ck i{display:grid;place-items:center;width:16px;height:16px;flex-shrink:0;font-size:var(--t-11);background:var(--fill);border-radius:var(--r-s,4px);color:var(--ink-3);margin-top:1px}
.bz-discovery .bz-site .ck.ok i{color:var(--go);background:var(--go-bg)}
.bz-discovery .bz-site .sub{font-size:var(--t-11);line-height:1.55;color:var(--ink-3);margin:12px 0 0}
.dc-source{display:flex;justify-content:space-between;gap:12px;align-items:center;border-top:1px solid var(--line-soft);margin-top:12px;padding:14px 0;font-size:var(--t-10);color:var(--ink-3)}.dc-source .link{font-size:var(--t-11);color:var(--ink-2)}
.dc-handoff{padding:16px 20px;background:var(--raised);border-top:1px solid var(--line-soft);flex-shrink:0}
.dc-primary{display:flex;justify-content:space-between;align-items:center;width:100%;height:38px;padding:0 12px;background:var(--ink);color:var(--bg);border:1px solid var(--ink);border-radius:var(--r,8px);cursor:pointer;font-size:var(--t-12);font-weight:500;box-shadow:var(--shadow-1);transition:transform var(--d-feedback) cubic-bezier(.2,.8,.2,1),box-shadow var(--d-feedback)}
.dc-primary svg{width:15px;height:15px;transition:transform var(--d-feedback) cubic-bezier(.16,1,.3,1)}.dc-primary:hover svg{transform:translateX(3px)}.dc-primary:active{transform:scale(.985);box-shadow:none}
.dc-save-note{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:11px;color:var(--ink-3);font-size:var(--t-10);line-height:1.4}.dc-save-note .link{flex-shrink:0;font-size:var(--t-11);color:var(--ink-2)}
@media(min-width:1000px){.bz.as-sheet.bz-discovery{top:10px;bottom:auto;max-height:calc(100dvh - 20px);width:360px}.bz-discovery .bz-grip{display:none}}
@media(max-width:999px){.bz.as-sheet.bz-discovery{max-height:85dvh;border-radius:var(--r-mobile) var(--r-mobile) 0 0}.bz-discovery .bz-grip{flex-shrink:0}.bz-discovery .dc-context{margin-top:3px;margin-bottom:10px}.bz-discovery .dc-tool{min-height:36px}.dc-primary{height:44px;font-size:var(--t-13)}.dc-handoff{padding-bottom:max(16px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:no-preference){.bz-discovery.in{animation:discoveryArrive var(--d-reveal) cubic-bezier(.16,1,.3,1) both}@keyframes discoveryArrive{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}}

/* Activity stays outside page replacement and does not move the content being read. */
.research-activity{position:fixed;right:20px;bottom:20px;width:328px;max-width:calc(100vw - 24px);z-index:180;background:var(--raised);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--shadow-2);overflow:hidden}
.research-activity[hidden]{display:none}.ra-heading{display:flex;align-items:center;gap:10px;padding:13px 14px}.ra-mark{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line-soft);background:var(--fill);border-radius:var(--r-control);flex-shrink:0;position:relative}.ra-mark svg{width:16px;height:16px;stroke-width:1.7}.ra-mark.complete{background:var(--go-bg);color:var(--go);border-color:transparent}
.ra-toggle{flex:1;min-width:0;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:inherit}.ra-toggle b{display:block;font-size:var(--t-12);font-weight:500;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5}.ra-toggle>span{display:block;font-size:var(--t-11);color:var(--ink-3);line-height:1.5;margin-top:1px}.ra-heading>.ibtn{width:26px;height:26px;flex-shrink:0}
.ra-body{padding:0 14px 13px 56px}.ra-detail{font-size:var(--t-11);color:var(--ink-2);line-height:1.55;margin:0 0 12px;min-height:17px}.ra-actions{display:flex;justify-content:space-between;align-items:center;gap:12px}.ra-actions .link{font-size:var(--t-11);display:inline-flex;align-items:center;gap:5px}.ra-actions svg{width:12px;height:12px}.ra-body>small{display:block;margin-top:10px;color:var(--ink-3);font-size:var(--t-10);line-height:1.5}
.ra-stages{display:flex;gap:3px;margin:0 0 12px;height:3px}.ra-stages>span{flex:1;background:var(--line);border-radius:var(--r-s,4px)}.ra-stages>.finished{background:var(--go)}.ra-stages>.active{background:var(--ink-3)}
@media(prefers-reduced-motion:no-preference){.ra-mark.working:after{content:"";position:absolute;inset:-1px;border:1.5px solid transparent;border-top-color:var(--ink-3);border-radius:50%;animation:researchOrbit var(--d-progress) linear infinite}@keyframes researchOrbit{to{transform:rotate(360deg)}}}
@media(max-width:999px){.research-activity{bottom:calc(68px + env(safe-area-inset-bottom));right:12px;width:300px}.research-activity .ra-heading{padding:10px 12px}.research-activity .ra-body{padding:0 12px 12px 54px}.ra-actions .link{min-height:30px}}
@media(prefers-reduced-motion:reduce){.dc-primary,.dc-primary svg,.dc-website>a{transition:none}.dc-primary:active,.dc-primary:hover svg{transform:none}}

body:has(#cs-card .bz-discovery:not(.out)) .page.home .mpanel{visibility:hidden;pointer-events:none}
.bz-discovery .bz-site .ck i svg{width:12px;height:12px;stroke-width:1.7}
@media(max-width:999px){.bz-discovery .bz-site .ck{font-size:var(--t-13)}.dc-tools .dc-tool{min-height:44px}.dc-source .link,.dc-save-note .link{min-height:32px;display:inline-flex;align-items:center}}

@media(max-width:999px){.bz-discovery .dc-context .ibtn{width:44px;height:44px;margin:-6px -10px -6px 0}.research-activity .ra-heading>.ibtn{width:36px;height:36px}}

@media(prefers-reduced-motion:no-preference){.ra-mark.complete svg path{stroke-dasharray:32;animation:researchCheck var(--d-reveal) var(--ease) both}@keyframes researchCheck{from{stroke-dashoffset:32}to{stroke-dashoffset:0}}}

/* A saved discovery folds into the work tray without navigating away from the map. */
.dc-primary.is-saved{background:var(--go-bg);color:var(--go);border-color:transparent;box-shadow:none}
.discovery-receipt{position:fixed;z-index:190;pointer-events:none;box-sizing:border-box;display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:10px;align-items:center;padding:14px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--shadow-2);transform-origin:top left}
.discovery-receipt>span{grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;background:var(--go-bg);color:var(--go);border-radius:var(--r-control)}.discovery-receipt svg{width:16px;height:16px}
.discovery-receipt b{font-size:var(--t-12);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.discovery-receipt small{font-size:var(--t-11);color:var(--ink-3);margin-top:3px}
.ra-jobs{max-height:180px;overflow:auto;margin:0 0 12px -42px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.ra-jobs button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:10px 8px;border:0;background:none;color:var(--ink-2);text-align:left;cursor:pointer;border-radius:var(--r-s)}
.ra-jobs button:hover,.ra-jobs button[aria-pressed=true]{background:var(--fill);color:var(--ink)}.ra-jobs button>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-11)}.ra-jobs small{font-size:var(--t-10);flex-shrink:0;color:var(--ink-3)}
.research-activity .ra-body{max-height:55dvh;overflow:auto}
@media(max-width:999px){body:has(#cs-card .bz:not(.out)) .research-activity{top:max(12px,env(safe-area-inset-top));bottom:auto}.ra-jobs button{min-height:40px}}
.research-activity.compact .ra-heading>[data-h=research-toggle] svg{transform:rotate(180deg)}