/* Flatpay Pitch Trainer — mobile first */
:root{
  --ink:#000; --paper:#fff; --grey:#f1f2f1; --line:#e4e6e4;
  --muted:#6e6e6e; --faint:#9a9a9a;
  --mint:#92f8c2; --mint-soft:#dbf9eb;
  --peach:#f8b185; --pink:#f8b5d3; --cyan:#9beef8; --peri:#afbdfc;
  --good:#1d7a4a; --warn:#c2382f; --amber:#a35a1c;
  --r:14px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  font-family:Calibri,"Segoe UI",-apple-system,system-ui,sans-serif;
  background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3{font-family:"Arial Black","Arial Bold",Arial,sans-serif;letter-spacing:-.01em;margin:0}
button,input,select{font-family:inherit;font-size:16px}
button{cursor:pointer}
.screen{max-width:760px;margin:0 auto;padding:16px}
.center{min-height:100dvh;display:flex;align-items:center;justify-content:center}
.logo{display:inline-block;width:118px;color:inherit}
.logo svg{width:100%;height:auto;display:block}
/* ------------------------------------------------------------- sign in */
#signin{background:var(--ink);color:var(--paper);max-width:none}
.signin-card{width:100%;max-width:420px;padding:24px}
.brand{display:flex;align-items:center;margin-bottom:30px;color:var(--paper)}
.brand.sm{margin:0;color:var(--ink)}
.brand.sm .logo{width:96px}
#signin h1{font-size:32px;line-height:1.05;margin-bottom:10px}
#signin .sub{color:#bebebe;font-size:15px;line-height:1.45;margin:0 0 24px}
#signin label{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mint);margin-bottom:8px}
#signin input{width:100%;padding:15px 16px;border-radius:12px;border:1px solid #333;
  background:#151515;color:var(--paper)}
#signin input:focus{outline:2px solid var(--mint);border-color:transparent}
#signin .primary{background:var(--mint);color:var(--ink);width:100%;margin-top:18px}
.legal{color:#8b8b8b;font-size:12px;line-height:1.5;margin-top:22px}
/* ------------------------------------------------------------- chrome */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:6px 0 14px}
.who{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
/* Ten tabs don't fit a 375px phone, so on a phone the strip scrolls rather than clipping the
   last one. flex:1 0 auto lets them share the width when there's room and keep their label
   when there isn't.

   On anything wider it WRAPS instead. Scrolling is a reasonable trade on a phone, where you
   expect to swipe, but on a laptop it silently hid the last two tabs — Team and Admin — off
   the right edge with nothing on screen to say they were there. Admin work happens on a
   laptop, so that is exactly where the tab needs to be visible without being hunted for. */
.tabs{display:flex;gap:6px;background:var(--grey);padding:4px;border-radius:12px;margin-bottom:18px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
@media (min-width:700px){ .tabs{flex-wrap:wrap;overflow-x:visible} }
.tab{flex:1 0 auto;border:0;background:transparent;padding:10px 12px;border-radius:9px;
  font-weight:700;color:var(--muted);font-size:14px;white-space:nowrap}
.tab.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
h2{font-size:24px;margin-bottom:14px}
.sub-h{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:26px 0 10px}
.lbl{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:20px 0 8px}
.hint{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.5}
.err{color:var(--warn);font-size:14px;margin:12px 0 0}
/* ------------------------------------------------------------- buttons */
.primary{background:var(--ink);color:var(--paper);border:0;border-radius:12px;
  padding:15px 18px;font-weight:700}
.primary:active{transform:translateY(1px)}
.ghost{background:transparent;border:1px solid var(--line);border-radius:10px;
  padding:10px 13px;font-weight:600;color:var(--muted)}
.wide{width:100%;margin-top:18px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg.col{grid-template-columns:1fr}
.seg button{text-align:left;border:1px solid var(--line);background:var(--paper);
  border-radius:var(--r);padding:13px 14px;font-weight:700;font-size:15px}
.seg button small{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-top:3px}
.seg button.on{background:var(--mint-soft);border-color:transparent;box-shadow:inset 0 0 0 2px var(--mint)}
select,.row input,.stack input{padding:13px 14px;border-radius:12px;border:1px solid var(--line);width:100%}
.row{display:flex;gap:8px;margin-top:10px}
.stack{display:grid;gap:8px;margin-top:10px}
.block{margin-top:14px;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.block summary{font-weight:700;cursor:pointer}
/* ------------------------------------------------------------- live */
.live{min-height:100dvh;display:flex;flex-direction:column;background:var(--ink);color:var(--paper)}
.live-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.live .eyebrow{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mint);margin:0 0 4px}
.live h2{font-size:22px}
.live .sub{color:#a8a8a8;font-size:14px;margin:4px 0 0}
.timer{font-family:"Arial Black",Arial,sans-serif;font-size:20px;color:#d8d8d8;white-space:nowrap}
.orb-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:20px 0}
.orb{width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2b2b2b,#101010);
  display:flex;align-items:center;justify-content:center;color:#9a9a9a;font-size:13px;
  box-shadow:0 0 0 1px #262626; transition:transform .12s ease, box-shadow .2s ease}
.orb.speaking{box-shadow:0 0 0 3px var(--mint),0 0 60px rgba(146,248,194,.35)}
.orb.listening{box-shadow:0 0 0 3px #3a3a3a}
.caption{min-height:96px;padding:0 4px}
.caption p{margin:0 0 8px;font-size:16px;line-height:1.45}
.caption .muted{color:#8b8b8b}
.caption .me{color:var(--mint)}
.live-actions{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.live .ghost{border-color:#3a3a3a;color:#d8d8d8}
/* ------------------------------------------------------------- results */
.score-hero{background:var(--ink);color:var(--paper);border-radius:18px;padding:22px;text-align:center}
.score-hero .n{font-family:"Arial Black",Arial,sans-serif;font-size:64px;line-height:1}
.score-hero .of{color:#9a9a9a;font-size:13px}
.score-hero .verdict{margin:12px 0 0;font-size:15px;line-height:1.5;color:#e2e2e2}
.badge{display:inline-block;margin-top:12px;background:var(--mint);color:var(--ink);
  font-family:"Arial Black",Arial,sans-serif;font-size:11px;letter-spacing:.06em;
  padding:6px 12px;border-radius:20px}
.badge.no{background:#3a3a3a;color:#d8d8d8}
/* The one next thing. Sits directly under the score because a rep on 12/100 reads exactly one
   block before their attention is gone. Loud, but never congratulatory. */
.next-up{border:2px solid var(--ink);border-radius:var(--r);padding:15px 16px;margin-top:14px}
.next-up .kicker{font-family:"Arial Black",Arial,sans-serif;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);background:var(--mint);display:inline-block;
  padding:4px 9px;border-radius:20px;margin-bottom:10px}
.next-up .nt{font-size:19px;line-height:1.25}
.next-up .bd{font-size:14.5px;line-height:1.55;color:var(--muted);margin:9px 0 0}
.next-up .say{display:flex;gap:10px;background:var(--grey);border-radius:11px;padding:11px 12px;margin-top:12px}
.next-up .say-k{font-family:"Arial Black",Arial,sans-serif;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);flex:0 0 auto;margin-top:3px}
.next-up .say p{margin:0;font-size:14.5px;line-height:1.5}
/* How far the meeting got. Shown before the bars so the zeros below arrive explained. */
.reach{border:1px solid var(--line);border-left:4px solid var(--peri);border-radius:var(--r);
  padding:13px 15px;margin-top:12px;background:var(--grey)}
.reach .big{margin:0;font-family:"Arial Black",Arial,sans-serif;font-size:15px;line-height:1.3}
.reach .sm{margin:7px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.phase{border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;margin-top:9px}
.phase .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.phase .nm{font-family:"Arial Black",Arial,sans-serif;font-size:15px}
.phase .pts{font-family:"Arial Black",Arial,sans-serif;font-size:16px;margin-left:auto}
/* A zero you never had a chance at and a zero you earned are different facts. */
.phase.unreached{border-style:dashed;background:#fbfbfb}
.phase.unreached .nm,.phase.unreached .pts{color:var(--faint)}
.phase .tag{font-family:"Arial Black",Arial,sans-serif;font-size:9.5px;letter-spacing:.07em;
  color:var(--muted);background:var(--grey);border-radius:20px;padding:3px 8px;white-space:nowrap}
.phase.unreached .bar-track{opacity:.45}
.phase .why{font-size:14px;color:var(--muted);margin-top:5px;line-height:1.45}
.bar-track{height:7px;border-radius:6px;background:var(--grey);margin-top:9px;overflow:hidden}
.bar-fill{height:100%;background:var(--mint);border-radius:6px}
.bar-fill.mid{background:var(--peach)} .bar-fill.low{background:#f6a9a2}
.capped{font-size:12px;color:var(--warn);margin-top:6px}
.checks{display:grid;gap:6px;margin:6px 0 14px}
/* Six short lists instead of one wall. Nothing is collapsed — every red dot stays on screen. */
.chk-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:12px}
.chk-head .g{font-family:"Arial Black",Arial,sans-serif;font-size:13px}
.chk-head .c{font-size:12px;color:var(--muted);white-space:nowrap}
.chk-head .c.all{color:var(--good)} .chk-head .c.none{color:var(--warn)}
.chk{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.4}
.chk .dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;margin-top:5px}
.chk.y .dot{background:var(--good)} .chk.n .dot{background:var(--warn)}
.chk.n{color:var(--warn)}
.notes{margin-top:18px}
.notes ul{margin:6px 0 0;padding-left:20px}
.notes li{font-size:14.5px;line-height:1.55;margin-bottom:6px}
.list{display:grid;gap:9px}
.item{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%;
  background:var(--paper);text-align:left}
.item b{font-size:15px} .item .meta{font-size:12.5px;color:var(--muted);margin-top:2px}
.pill{font-family:"Arial Black",Arial,sans-serif;font-size:13px;padding:5px 10px;
  border-radius:20px;background:var(--mint);color:var(--ink);white-space:nowrap}
.pill.mid{background:#fdebda;color:var(--amber)} .pill.low{background:#fbeaea;color:var(--warn)}
.empty{color:var(--muted);font-size:14px;background:var(--grey);padding:14px;border-radius:12px}
.spend{background:var(--grey);border-radius:12px;padding:14px;font-size:14px;line-height:1.6}
.transcript{margin-top:20px}
.t-turn{font-size:14.5px;line-height:1.5;margin-bottom:9px}
.t-turn .who{font-family:"Arial Black",Arial,sans-serif;font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);display:block}
.t-turn.rep .who{color:var(--good)}
.t-turn .cut{color:var(--faint);font-style:italic}
@media(min-width:620px){
  .screen{padding:26px}
  h2{font-size:28px}
}
/* ------------------------------------------------------- approval call */
.mgr{background:var(--mint);color:var(--ink);margin-bottom:10px}
.orb.oncall{box-shadow:0 0 0 3px var(--peri),0 0 60px rgba(175,189,252,.35)}
body.on-call .live{background:#0a0d1a}
body.on-call .live .eyebrow{color:var(--peri)}
/* -------------------------------------------------------- installations */
.seg.dev button small{font-weight:400}
/* stage rail — scrolls sideways; the current stage is always scrolled into view */
.rail{display:flex;gap:6px;overflow-x:auto;margin:18px 0 4px;padding-bottom:4px;
  scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:flex;align-items:center;gap:6px;border:1px solid var(--line);
  background:var(--paper);border-radius:99px;padding:6px 12px 6px 6px;font-size:13px;
  font-weight:700;color:var(--muted);white-space:nowrap}
.chip .cn{width:19px;height:19px;border-radius:99px;background:var(--grey);color:var(--muted);
  font-size:11px;display:grid;place-items:center}
.chip.ok{background:var(--mint-soft);border-color:transparent;color:var(--good)}
.chip.ok .cn{background:var(--good);color:var(--paper)}
.chip.here{border-color:var(--ink);color:var(--ink)}
.chip.here .cn{background:var(--ink);color:var(--paper)}
.prog{margin:10px 0 4px}
.prog .bar{height:6px;border-radius:99px;background:var(--grey);overflow:hidden}
.prog .bar i{display:block;height:100%;background:var(--mint);
  border-radius:99px;transition:width .3s ease}
.prog-row{display:flex;justify-content:space-between;align-items:center;
  margin-top:8px;font-size:13px;color:var(--muted)}
.ghost.tiny{padding:4px 10px;font-size:13px}
/* ---- the card itself: one step, front and centre */
.card{border:1px solid var(--line);border-radius:18px;padding:20px 18px 16px;margin-top:14px;
  background:var(--paper);box-shadow:0 2px 14px rgba(0,0,0,.05)}
.card.done{background:var(--mint-soft);border-color:transparent}
@keyframes slidein-r{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes slidein-l{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
/* The 22px translate overflowed the initial containing block for the 0.22s it ran, and the
   phone never zoomed back in: Installations and Product demo sat at 380px wide inside a
   375px viewport for the rest of the session. Clipping the strip the card slides through
   costs nothing visually and keeps the page at 1:1. */
.card.in-r,.card.in-l{animation-duration:.22s;animation-timing-function:ease;animation-fill-mode:both}
.card.in-r{animation-name:slidein-r}
.card.in-l{animation-name:slidein-l}
#installBody,#demoBody{overflow-x:clip}
@media(prefers-reduced-motion:reduce){.card.in-r,.card.in-l{animation:none}}
.eyebrow-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.eyebrow-row .stg{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.eyebrow-row .of{font-size:12px;color:var(--faint);white-space:nowrap}
.card .kick{margin:2px 0 14px;font-size:13px;color:var(--muted);line-height:1.4}
.card h3{font-size:21px;line-height:1.2;margin:0 0 10px}
.card .lead{margin:0;font-size:15px;line-height:1.6}
.card ul{margin:12px 0 0;padding-left:20px;font-size:15px;line-height:1.65}
.card li{margin-bottom:7px}
.card li b{font-weight:700}
.card .src{font-size:11.5px;color:var(--faint);margin:14px 0 0;
  letter-spacing:.03em;text-transform:uppercase}
.card .gap{background:#fff5e9;border:1px solid #f0d9bd;color:var(--amber);
  padding:13px 14px;border-radius:12px;font-size:14px;line-height:1.55;margin-bottom:4px}
.cols{display:grid;gap:8px;margin-top:14px}
@media(min-width:620px){.cols{grid-template-columns:repeat(4,1fr)}}
.cols .col{background:var(--grey);border-radius:10px;padding:10px 12px}
.cols h5{margin:0 0 6px;font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.cols ul{margin:0;padding-left:15px;font-size:12.5px;line-height:1.5}
/* portrait phone shots sit in a sideways strip; wide slide grabs stack full-width */
.shots{display:flex;gap:8px;margin-top:14px;overflow-x:auto;padding-bottom:4px}
.shots figure{margin:0;flex:0 0 auto;width:max-content;max-width:260px}
.shots img{height:200px;width:auto;max-width:none;display:block;object-fit:contain;
  background:var(--paper);border-radius:10px;border:1px solid var(--line)}
.shots.wide{display:block;overflow:visible}
.shots.wide figure{width:auto;max-width:none;margin-bottom:10px}
.shots.wide img{height:auto;width:100%;max-width:100%}
.shots figcaption{font-size:12px;color:var(--faint);margin-top:5px;line-height:1.35;
  white-space:normal;overflow-wrap:anywhere}
/* ---- controls */
.card .nav{display:flex;gap:10px;margin-top:20px}
.card .nav .ghost{flex:0 0 auto}
.card .nav .primary{flex:1}
.card .nav button:disabled{opacity:.35}
.linky{display:block;width:100%;margin-top:12px;background:none;border:0;
  color:var(--muted);font-size:13.5px;text-decoration:underline;padding:6px}
.card.finish{text-align:center;padding-top:28px}
.card.finish .tickbig{width:52px;height:52px;margin:0 auto 14px;border-radius:99px;
  background:var(--good);color:var(--paper);font-size:26px;display:grid;place-items:center}
.card.finish .lead{margin-bottom:20px;color:var(--muted)}
.refbox{margin-top:22px;padding:16px;background:var(--grey);border-radius:var(--r)}
.refbox ul{margin:0;padding-left:18px;font-size:14px;line-height:1.6}
.refbox li{margin-bottom:6px}
.refbox .src{font-size:12px;color:var(--faint);margin:12px 0 0}
/* Compact picker: a clean 3-up row rather than flex-wrapping 2 + 1. */
.seg.dev.tight{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:4px}
.seg.dev.tight button{padding:9px 6px;font-size:12.5px;text-align:center;line-height:1.25}
.timer.amber{color:var(--peach)}
.timer.red{color:#ff8f86}
.ended-note{background:#fff5e9;border:1px solid #f0d9bd;color:var(--amber);
  padding:13px 15px;border-radius:12px;font-size:14px;line-height:1.55;margin-bottom:14px}
/* --------------------------------------------------------- ask productHelp */
.chat-pane{display:flex;flex-direction:column;min-height:calc(100dvh - 190px)}
.pane-top{display:flex;align-items:center;justify-content:space-between}
.pane-top h2{margin:0}
.thread{flex:1;overflow-y:auto;padding:14px 0 6px;display:flex;flex-direction:column;gap:14px}
.msg{max-width:100%}
.msg.me{align-self:flex-end;max-width:85%}
.msg .who{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.msg .bod{border-radius:14px;padding:12px 14px;font-size:15px;line-height:1.6}
.msg.her .bod{background:var(--grey)}
.msg.me .bod{background:var(--ink);color:var(--paper);border-bottom-right-radius:5px}
.msg .bod p{margin:0 0 9px}
.msg .bod p:last-child{margin-bottom:0}
.msg .bod ul,.msg .bod ol{margin:0 0 9px;padding-left:20px}
.msg .bod li{margin-bottom:5px}
.msg .bod li:last-child{margin-bottom:0}
.msg .bod code{background:var(--paper);border:1px solid var(--line);border-radius:5px;
  padding:1px 5px;font-size:13.5px}
.msg.her .bod b{font-weight:700}
.typing{display:flex;gap:5px;align-items:center;min-height:44px}
.typing i{width:7px;height:7px;border-radius:99px;background:var(--faint);
  animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media(prefers-reduced-motion:reduce){.typing i{animation:none;opacity:.5}}
.chat-empty{padding:8px 0}
.chat-empty h3{font-size:19px;margin-bottom:8px}
.chat-empty p{font-size:14px;line-height:1.55;color:var(--muted);margin:0 0 16px}
.chips{display:flex;flex-direction:column;gap:8px}
.chip-q{text-align:left;border:1px solid var(--line);background:var(--paper);
  border-radius:12px;padding:11px 13px;font-size:14px;line-height:1.4;color:var(--ink)}
.chip-q:active{background:var(--grey)}
.composer{display:flex;gap:8px;align-items:flex-end;padding:12px 0 4px;
  border-top:1px solid var(--line);background:var(--paper);position:sticky;bottom:0}
.composer textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;font-size:16px;line-height:1.45;max-height:140px;font-family:inherit}
.composer textarea:focus{outline:2px solid var(--mint);border-color:transparent}
.composer .primary{padding:12px 18px;flex:0 0 auto}
.composer .primary:disabled{opacity:.4}
/* ----------------------------------------------------------- territory */
.map{height:300px;border-radius:var(--r);border:1px solid var(--line);overflow:hidden;
  margin-bottom:8px;background:var(--grey)}
.plan-row{display:flex;gap:8px;margin-top:14px}
.plan-row input[type=date]{flex:1;padding:11px 12px;border:1px solid var(--line);
  border-radius:12px}
.plan-row .ghost{flex:0 0 auto}
.leg-time{flex:0 0 54px;font-size:13px;font-weight:700;letter-spacing:-.01em}
.leg-body{flex:1;min-width:0;font-size:15px}
.leg-body .meta{font-size:12.5px;color:var(--muted);margin-top:3px}
.prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.prod{display:block;text-align:left;border:1px solid var(--line);background:var(--paper);
  border-radius:12px;padding:12px 13px;color:var(--ink)}
.prod b{display:block;font-size:15px}
.prod small{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.3}
.prod:active{background:var(--grey)}
.prod-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.prod-head b{font-size:19px}
.prod-banner{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);
  padding-bottom:2px}
.prod-banner .linky{width:auto;margin:0;padding:0;font-size:12px}
.chat-empty .linky{width:auto;margin:0;padding:0;font-size:13px}
.composer textarea:disabled{background:var(--grey);color:var(--faint)}
.warn-note{background:#fff5e9;border:1px solid #f0d9bd;color:var(--amber);
  padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.5;margin:8px 0 10px}
.plan-row select{padding:11px 12px;border:1px solid var(--line);border-radius:12px;
  background:var(--paper)}
/* ----------------------------------------------------------- prospects */
.seg.tight{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:14px 0 4px}
.seg.tight button{padding:9px 6px;font-size:13px;border:1px solid var(--line);
  background:var(--paper);border-radius:10px;font-weight:700;color:var(--muted)}
.seg.tight button.on{background:var(--ink);color:var(--paper);border-color:transparent}
.seg.tight span{opacity:.65;font-weight:400}
.prospect{border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;
  background:var(--paper);overflow:hidden}
.prospect.s-contacted,.prospect.s-callback{background:#fffaf2;border-color:#f0e2cd}
.prospect.s-booked{background:var(--mint-soft);border-color:transparent}
.prospect.s-not_interested{opacity:.55}
/*
 * GRID, not flex, and deliberately so.
 *
 * As flex this row depended on `.p-title{min-width:0}` to let the name column
 * shrink — and a flex item whose content is wider than its box will still push
 * its siblings in some engines (Safari's min-width:auto handling has a long
 * history here). The symptom reported from the field was the cross half cut off
 * at the card edge, which is exactly that.
 *
 * `minmax(0,1fr) auto` removes the argument: the name column is allowed to
 * shrink to nothing, and the marks column always gets its intrinsic width first.
 * There is no width at which the buttons can be squeezed or clipped.
 */
.p-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;
  align-items:start;padding:13px;cursor:pointer}
/* min-width:0 lets the flex item shrink, but it does NOT make the text inside wrap.
   Plenty of registered company names are one long unbroken token, and those ran
   straight over the tick and cross on a phone — the buttons were still there and
   still worked, but they were unreadable and looked broken. Break anywhere. */
.p-title{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}
.p-title b{font-size:15px;line-height:1.3;display:block}
.p-title .meta{font-size:12.5px;color:var(--muted);margin-top:3px}
.p-title .addr{font-size:12px}
/* The director's name sits under the address and is the one line on a collapsed card a rep
   reads OUT LOUD, so it is set in the body ink rather than the muted grey the rest of the
   meta uses. The tag is the quiet half: it labels the name without competing with it. */
.p-title .owner{display:flex;gap:6px;align-items:baseline;color:var(--ink);font-weight:600}
.p-title .owner-tag{color:var(--faint);font-weight:500;font-size:11px;
  text-transform:uppercase;letter-spacing:.04em;flex:none}
.p-marks{display:flex;gap:8px;justify-self:end}

/* "Show more" is a continuation of the list, not a call to action, so it is sized and
   bordered like a card rather than like the search button — a second filled button on the
   screen would compete with Search for the eye. Full width and 46px tall because it is
   tapped with a thumb, one-handed, while walking. */
/* Directors' other companies, inside the open card. The multi-site line is the one a rep
   acts on, so the count is set in body ink; "only company" is quieter because it confirms
   rather than redirects. */
.p-appts{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--line)}
.p-appts-wait{font-size:12.5px;color:var(--faint)}
.p-appt{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-size:13px}
.p-appt-n{font-weight:600;color:var(--ink)}
.p-appt-c{color:var(--ink)}
.p-appt-q{color:var(--faint)}
.p-appt-list{flex-basis:100%;font-size:12px;color:var(--muted);margin-top:1px}

/* The address doubles as a directions link. Underlined rather than coloured, because the
   card already spends its colour budget on status. */
.p-title .addr-link{color:inherit;text-decoration:underline;text-underline-offset:2px;
  overflow-wrap:anywhere}
.p-title .addr-link:hover{color:var(--ink)}

/* The folded-away search form. Reads the query back and reopens on tap; sized for a thumb. */
.pros-summary{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;
  min-height:44px;padding:0 12px;margin-bottom:10px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--paper);color:var(--ink);font:inherit;font-size:13.5px;
  font-weight:600;text-align:left;cursor:pointer}
.pros-summary:hover{background:var(--grey)}
.pros-change{color:var(--faint);font-weight:500;font-size:12.5px;flex:none}
.warn-note.tight-note{padding:8px 10px;font-size:12.5px;line-height:1.4;margin:8px 0}
/* "How this works" is a control, so it should look like one rather than a bare underlined
   line of text. The marker is suppressed and replaced with a chevron that turns when open. */
.hint-toggle > summary{display:inline-flex;align-items:center;gap:7px;min-height:34px;
  padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper);
  color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;list-style:none;
  text-decoration:none;margin-bottom:4px}
.hint-toggle > summary::-webkit-details-marker{display:none}
.hint-toggle > summary::after{content:"";width:7px;height:7px;flex:none;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s ease}
.hint-toggle[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.hint-toggle > summary:hover{background:var(--grey)}

/* One button, not a tab strip: drop the segmented-control tray so it does not read as a
   full-width grey bar wrapped around a single small label. */
.tabs.one{background:none;padding:0;justify-content:flex-start;margin-bottom:12px}
.tabs.one .tab{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;
  background:var(--paper);color:var(--ink);padding:8px 14px;font-size:13px;min-height:34px}
.tabs.one .tab:hover{background:var(--grey)}
.tabs.one .tab.on{box-shadow:none;background:var(--grey)}

.p-more{width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;
  gap:8px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  color:var(--ink);font:inherit;font-weight:600;font-size:14px;cursor:pointer;
  margin-top:4px}
.p-more:hover{background:var(--grey)}
.p-more span{color:var(--faint);font-weight:500;font-size:12.5px}

/* Unset: the glyph is VISIBLE but plainly off — a faint tinted outline, so a rep
   can tell the two apart at a glance and knows which does what before tapping.
   The previous version drew white-on-white with no glyph until it was set, which
   left two blank squares on a white card. */
.p-tick,.p-cross{flex:0 0 44px;width:44px;height:44px;border-radius:12px;border:2px solid;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:800;line-height:1;padding:0;background:var(--paper);
  transition:background .12s,border-color .12s,color .12s}
.p-tick{color:var(--good);border-color:#bfe0cd}
.p-cross{color:var(--warn);border-color:#f0c9c6}

/* Set: solid fill, white glyph — unmistakable across a long list. */
.p-tick.on{background:var(--good);border-color:var(--good);color:#fff}
.p-cross.on{background:var(--warn);border-color:var(--warn);color:#fff}

.p-tick:hover{border-color:var(--good)}
.p-cross:hover{border-color:var(--warn)}
.p-tick:active,.p-cross:active{transform:scale(.94)}
.p-body{padding:0 13px 13px;border-top:1px solid var(--line)}
.p-status{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.p-chip{border:1px solid var(--line);background:var(--paper);border-radius:99px;
  padding:6px 11px;font-size:12.5px;color:var(--muted)}
.p-chip.on{background:var(--ink);color:var(--paper);border-color:transparent}
.p-body textarea{width:100%;resize:vertical;border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;font-family:inherit;font-size:14px;line-height:1.5}
.p-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.p-foot a{text-decoration:none}
#prosSaved{min-height:16px;color:var(--good)}
.seg.tight{grid-template-columns:repeat(4,1fr)}
.p-phone{display:flex;align-items:center;gap:8px;margin-top:5px;flex-wrap:wrap}
.p-phone .call{font-size:14px;font-weight:700;color:var(--ink);text-decoration:none;
  background:var(--mint);border-radius:8px;padding:4px 10px;display:inline-block}
.p-phone .unsure{font-size:11.5px;color:var(--amber);background:#fff5e9;
  border:1px solid #f0d9bd;border-radius:6px;padding:2px 7px}
.p-find{display:flex;gap:8px;margin:12px 0 0;flex-wrap:wrap}
.p-find a{text-decoration:none}
/* Reveal costs a Google lookup, so it looks like a deliberate action rather than a link. */
.p-phone .reveal{font-size:12.5px;font-weight:700;border:1px solid var(--ink);
  background:var(--paper);color:var(--ink);border-radius:8px;padding:5px 11px}
.p-phone .reveal:disabled{opacity:.5}
.p-phone .nonum{font-size:12px;color:var(--faint)}
/* ------------------------------------------------------- prospects: trades */
/* The trade filter hides ~73% of new registrations. This is how a rep turns it
   off, so it sits with the search controls rather than in a settings menu. */
.pros-trades{display:flex;gap:9px;align-items:flex-start;margin:10px 0 2px;
  font-size:13px;line-height:1.45;color:var(--muted);cursor:pointer}
.pros-trades input{margin-top:2px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--mint)}
.pros-trades span{flex:1}
/* The exclusion, stated. A rep who cannot see why a list is short assumes the
   tool is broken — which is exactly what happened with the old hidden filter. */
.pros-why{margin:8px 0 2px;font-size:13px;color:var(--muted)}
.pros-why summary{cursor:pointer;list-style:none;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--line)}
.pros-why summary::-webkit-details-marker{display:none}
.pros-why ul{margin:8px 0 0;padding-left:18px;line-height:1.6}
.pros-why p{margin:8px 0 0;line-height:1.5}
/* The demo picker has TWO tracks, but reuses install's `.seg.dev.tight`, which
   is a three-column grid. Without this the collapsed picker leaves an empty
   third column. Scoped by id so install's three-track picker is untouched. */
#demoBody .seg.dev.tight{grid-template-columns:repeat(2,1fr)}

/* ------------------------------------------------------- prospects: the map */
/* Visualising the SAME filtered array the list renders, so the two can never
   disagree about how many businesses there are. */
.pros-map{height:320px;border-radius:var(--r);border:1px solid var(--line);
  overflow:hidden;margin:12px 0 6px;background:var(--grey)}
.pros-map .leaflet-container{height:100%;width:100%;font:inherit}
.pros-pop b{display:block;font-size:14px;margin-bottom:3px}
.pros-pop span{color:var(--muted);font-size:12.5px}
.pros-pop button{margin-top:8px;border:1px solid var(--line);background:var(--paper);
  border-radius:8px;padding:5px 10px;font-size:12.5px;cursor:pointer}

/* A follow-up nobody is nudged about is the same as no follow-up. */
.p-due{font-size:12.5px;font-weight:600;color:var(--amber);margin-top:2px}
.p-due.over{color:var(--warn)}
.p-follow{display:flex;align-items:center;gap:10px;margin:12px 0 0;font-size:13px;
  color:var(--muted);flex-wrap:wrap}
.p-follow input[type=date]{border:1px solid var(--line);border-radius:8px;padding:6px 10px;
  font:inherit;font-size:13.5px;background:var(--paper);color:var(--ink)}

/* ------------------------------------------------ prospects: search progress */
/* Indeterminate on purpose. The search is ONE request to Companies House, so the
   client genuinely does not know how far through it is — a percentage here would
   be invented. What it can honestly show is that work is happening, how long it
   has taken, and why a city takes longer. A 1,286-result Manchester search runs
   ~29s, which without this reads as a hang. */
.pros-prog{margin:10px 0 2px}
.pros-bar{height:4px;border-radius:99px;background:var(--grey);overflow:hidden}
.pros-bar i{display:block;height:100%;width:38%;border-radius:99px;background:var(--mint);
  animation:pros-slide 1.15s ease-in-out infinite}
@keyframes pros-slide{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(365%)}
}
@media (prefers-reduced-motion:reduce){
  .pros-bar i{animation:none;width:100%;opacity:.55}
}
#prosProgNote{margin-top:6px}

/* ---------------------------------------------------- contract & kyc */
/* Four sub-views in one pane. `quad` is a 2x2 on a phone rather than four squeezed
   columns — at 375px a four-across row gives each label about 80px, which wraps
   "The contract" onto three lines. */
.seg.quad{grid-template-columns:1fr 1fr;gap:6px}
.seg.quad button{text-align:center;padding:11px 8px;font-size:14px}
.seg.sub{margin-bottom:4px}
.qblock{margin-top:22px}
.qblock .lbl{text-transform:none;font-size:15px;letter-spacing:0;line-height:1.35;
  margin-bottom:10px}
.qhint{font-size:13px;color:var(--muted);margin:-6px 0 10px;line-height:1.45}
.card.verdict{background:var(--mint-soft);border-color:transparent}
.card.verdict .vh{display:flex;align-items:center;gap:8px;margin:16px 0 2px;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--good)}
.card.verdict .vh .vi{font-size:15px}
.card.verdict ul{margin-top:6px}
.card.verdict .ghost{background:var(--paper)}
.card.verdict .gap{margin-top:16px}

/* The checklist row is a button so it is reachable by keyboard and announces its
   state; the tick is always drawn in a bordered box so an unticked row still reads
   as something you can tick, rather than as blank space. */
.checkrow{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;
  border:1px solid var(--line);background:var(--paper);border-radius:12px;
  padding:12px 13px;margin-top:8px}
.checkrow.on{background:var(--mint-soft);border-color:transparent}
.checkrow .cbox{flex:0 0 22px;width:22px;height:22px;border-radius:7px;
  border:1.5px solid var(--line);background:var(--paper);display:flex;
  align-items:center;justify-content:center;font-size:14px;font-weight:700;
  color:var(--good);margin-top:1px}
.checkrow.on .cbox{background:var(--good);border-color:var(--good);color:var(--paper)}
.checkrow .cbody{flex:1;min-width:0}
/* Only the row title is a block. Scoped to the direct child, because the
   description also uses <b> for the bits that matter and those must stay inline. */
.checkrow .cbody>b{display:block;font-size:15px;line-height:1.35}
.checkrow .cd{display:block;font-size:13px;color:var(--muted);line-height:1.5;margin-top:3px}
.checkrow.on .cd{color:#4a6558}
#pane-contract .card .lead ul{margin:10px 0 0;padding-left:20px}
@media (min-width:520px){
  .seg.quad{grid-template-columns:repeat(4,1fr)}
}

/* ---------------------------------------- the contract, marked up in colour */
/* The page is a flat image of the real contract; the highlights are absolutely
   positioned over it in % so they stay on their boxes at any width. Colours are
   deliberately loud — the whole point is that a rep can see what is still missing
   from across a counter, without reading. */
.cpage-card{padding:16px 14px 14px}
/* A4, so the box reserves its full height before the page image arrives. Without this
   the highlights — positioned in % — collapse into a sliver on first paint and the card
   jumps once the image lands. */
.cshot{position:relative;margin-top:12px;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:#fff;line-height:0;aspect-ratio:595/842}
.cshot img{display:block;width:100%;height:auto}

.hl{position:absolute;border:2.5px solid var(--hc);background:var(--hf);
  border-radius:5px;padding:0;cursor:pointer;transition:opacity .15s ease}
.hl .hn{position:absolute;top:-9px;right:-7px;width:18px;height:18px;border-radius:99px;
  background:var(--hc);color:#fff;font-family:"Arial Black",Arial,sans-serif;font-size:11px;
  line-height:18px;text-align:center;box-shadow:0 0 0 2px #fff}
/* Focusing one box fades the rest rather than hiding them, so you keep the sense of
   how much is left to do. */
.cshot.solo .hl{opacity:.16}
.cshot.solo .hl.on{opacity:1}
.hl:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

.k-ask {--hc:#F5B301;--hf:rgba(255,214,0,.30);--hb:#FFF4CC;--ht:#7A5600}
.k-ch  {--hc:#1F5CFF;--hf:rgba(31,92,255,.20);--hb:#E3EBFF;--ht:#123CAD}
.k-map {--hc:#00A9BA;--hf:rgba(0,201,222,.24);--hb:#DCF5F8;--ht:#00646F}
.k-sign{--hc:#00A85A;--hf:rgba(0,214,114,.26);--hb:#DDF6E9;--ht:#00693A}
.k-you {--hc:#7B3FE4;--hf:rgba(140,82,255,.22);--hb:#EEE6FD;--ht:#4A1C9B}
.k-read{--hc:#F2541B;--hf:rgba(255,94,40,.22);--hb:#FDE6DD;--ht:#8C2C06}
.k-auto{--hc:#9aa09a;--hf:rgba(150,155,150,.16);--hb:var(--grey);--ht:var(--muted)}

/* The colour key replaces the old list of rows — it is the only text on screen when
   nothing is selected. */
.ckey{display:flex;flex-wrap:wrap;gap:7px 12px;margin-top:12px}
.kk{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.kk i{width:11px;height:11px;border-radius:3px;background:var(--hf);
  border:2px solid var(--hc)}

.zdet{margin-top:12px;border-radius:10px;padding:11px 13px;
  background:var(--hb);border:1px solid var(--hc)}
.zdet .ztop{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.zdet .ztop b{flex:1;min-width:0;font-size:16px;color:var(--ht)}
.zdet .hn{position:static;flex:0 0 20px;width:20px;height:20px;border-radius:99px;
  background:var(--hc);color:#fff;font-family:"Arial Black",Arial,sans-serif;
  font-size:11px;line-height:20px;text-align:center;box-shadow:none}
.zdet .ztag{flex:0 0 auto;font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:99px;
  background:#fff;color:var(--ht);white-space:nowrap}
.zdet p{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
#pane-contract .linky{margin-top:10px}
@media (min-width:520px){
  .cshot{max-width:460px;margin-left:auto;margin-right:auto}
}

/* Sole trader vs limited company. The choice sits above the page because it changes what
   half of page 1 means, and a rep must be able to see which one they picked. */
.typebar{display:flex;align-items:center;gap:10px;width:100%;text-align:left;margin-top:12px;
  border:1px solid var(--line);background:var(--grey);border-radius:12px;padding:10px 13px}
.typebar .tl{flex:1;font-size:15px;font-weight:700}
.typebar .tx{font-size:12.5px;color:var(--muted);text-decoration:underline}
/* The AMEX tick sits inside the "already done" block, so it has to paint over it. Its
   box is narrow, so the badge goes beside it rather than on top of the word AMEX. */
.hl.top{z-index:2}
.hl.top .hn{right:-23px;top:50%;transform:translateY(-50%)}

/* The three sole-trader traps, stated before the page rather than only inside a tap. */
.solenote{margin-top:12px;border:1px solid #f0d9bd;border-left:3px solid var(--amber);
  background:#fff5e9;border-radius:10px;padding:11px 13px;color:#7a4a12}
.solenote b{color:#6b3f0d}
.solenote>b{display:block;font-size:14px;margin-bottom:6px}
.solenote ul{margin:0;padding-left:18px;font-size:14px;line-height:1.55}
.solenote li{margin-bottom:5px}
.solenote li:last-child{margin-bottom:0}

/* ---- claims: who is walking into this shop right now */
.prospect.held{opacity:.62}
.p-claim{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 13px;font-size:12.5px;border-top:1px solid var(--line)}
.p-claim .cw{font-weight:700}
.p-claim .cu{color:var(--muted)}
.p-claim.other{background:#fdf0ee;color:var(--warn);border-top-color:#f6ded9}
.p-claim.other .cu{color:#a85d55}
.p-claim.mine{background:var(--mint-soft);color:var(--good);border-top-color:#cdecdc}
.p-claim.mine .cu{color:#4a6558}
.p-claim .linky{width:auto;margin:0 0 0 auto;padding:0;font-size:12.5px;color:inherit}
/* Who marked it, and how long ago — a lead turned down last year is a fresh lead. */
.p-by{font-size:12px;color:var(--muted);margin-top:3px;font-weight:600;min-height:15px}
/* Reserved, not hidden: the row exists from the start so ticking a lead cannot reflow
   the cards below it under the rep's finger. NOT called .empty — that class is already the
   app's empty-state text and its padding made the reserved row taller than the real one. */
.p-by.blank{visibility:hidden}
/* Someone else's lead: the shared marks are inert, so it looks the way it behaves. */
.p-marks.locked .p-tick,.p-marks.locked .p-cross{cursor:not-allowed}
.p-marks.locked{opacity:.75}


/* Intro copy as a scannable list rather than a paragraph. Same size and colour as the
   .hint it replaces — this is about being able to find one fact quickly, not about
   shouting. Tight leading so five bullets cost no more height than the prose did. */
.hint-list{margin:10px 0 16px;padding-left:18px;font-size:13px;color:var(--muted);line-height:1.5}
.hint-list li{margin-bottom:4px}
.hint-list li:last-child{margin-bottom:0}
.hint-list b{color:var(--ink);font-weight:700}
.pane > .hint-list:first-of-type{margin-top:4px}
/* Approval Call inside a transcript */
.t-mark{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
  text-align:center;border-top:1px dashed var(--line);padding-top:8px;margin:12px 0}
.t-turn.mgr .who{color:var(--amber)}

/* Every box on the page as a row you can hit with a finger. The overlays on the image are
   ~11px tall on a phone and sit 6px apart, so they cannot be enlarged without overlapping;
   this is the reliable way in. */
.zlist{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.zrow{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;
  padding:8px 12px;text-align:left;background:var(--hb);border:1px solid var(--hc);
  border-left-width:4px;border-radius:10px;cursor:pointer;font:inherit;color:var(--ink)}
.zrow:active{filter:brightness(.97)}
.zrow .hn{position:static;flex:0 0 22px;width:22px;height:22px;line-height:22px;
  border-radius:99px;background:var(--hc);color:#fff;font-family:"Arial Black",Arial,sans-serif;
  font-size:11px;text-align:center;box-shadow:none}
.zrow .zt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.zrow .zt b{font-size:14.5px;line-height:1.3;overflow-wrap:anywhere}
.zrow .ztag{font-size:11.5px;color:var(--ht)}
.zrow:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* Offering the 4-minute drill to a rep who has not finished a meeting yet. Inline, so it
   reads as part of the sentence rather than another button competing with Start. */
#drillNudge{background:var(--mint-soft);border:1px solid #bfeed8;border-radius:12px;
  padding:11px 13px;margin-top:10px;color:var(--good);font-size:13.5px;line-height:1.5}
#drillNudge b{color:var(--good)}
#drillNudge .linky{display:inline;width:auto;margin:0;padding:0;font-size:13.5px;
  text-decoration:underline;color:var(--good)}