/* Digits only, from Press Start 2P, as on the Pricing page: Pixelify's 5 reads as S. */
@font-face{font-family:'Px Digits';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/press-start-2p-400.woff2) format('woff2');unicode-range:U+0030-0039;size-adjust:72%}
/* The agent dashboard's home page (New Leads), in the Pricing page's style with the pig pen theme. Tokens from base.css
   and the Pricing page's cream stripes. Settled on the home page design board (layout 1, tabs on the left, rounds 1-3). */
:root{--cream:#f1e3c6;--stripe:#e9d8b4;--paper:#fbf6ea;--muted:#5a625c;--text:#26322f;--line:#e6dcc4;
  --pxf:'Px Digits','Pixelify Sans',monospace;--tiny:Silkscreen,monospace;--ps:'Press Start 2P',monospace;
  --rim:0 -3px 0 0 var(--teal-dark),0 3px 0 0 var(--teal-dark),-3px 0 0 0 var(--teal-dark),3px 0 0 0 var(--teal-dark)}
html{background:var(--cream)}
body{font-family:var(--pxf);color:var(--text);font-size:16px;line-height:1.4;
  background:var(--cream) repeating-linear-gradient(90deg,transparent 0 24px,var(--stripe) 24px 32px)}
.type-labels *{font-variant-ligatures:none!important}
h1,h2,p{margin:0}
a{color:var(--teal)}
canvas.px{display:block}
button{font:inherit;color:inherit}
.bx{box-shadow:var(--rim),6px 8px 0 0 rgba(8,60,54,.16)}
.tl{font:400 8px/1.51 var(--ps);text-transform:uppercase;color:var(--muted);white-space:nowrap}
.chip-ph{display:inline-block;margin:26px 0 0;padding:3px 8px;background:#fff1a8;border:1px dashed #b98a10;color:#4a3500;font:700 13px/1.4 var(--pxf)}

/* ---------- the page: icon bar on the left, then the home page ---------- */
.dash{display:grid;grid-template-columns:96px minmax(0,1fr);min-height:100vh}
.rail{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;gap:20px;padding:20px 0 24px;background:var(--teal-dark);
  background-image:repeating-linear-gradient(180deg,transparent 0 22px,rgba(255,255,255,.04) 22px 24px);z-index:10}
.logo{position:relative;display:grid;place-items:center;width:58px;height:58px;margin-bottom:8px}
/* the coin is a link back to the landing page */
a.logo:focus-visible{outline:3px dashed var(--pink);outline-offset:5px}
.logo canvas{width:56px;height:56px}
.rail .sep{width:46px;height:3px;background:#2c6b62}
.tabs{display:flex;flex-direction:column;gap:18px}

/* tab buttons: icon tiles, the word on hover */
.tab{all:unset;box-sizing:border-box;position:relative;display:grid;place-items:center;width:54px;height:54px;cursor:pointer;background:var(--paper);box-shadow:var(--rim)}
.tab canvas{width:36px;height:36px}
.tab:hover{background:#fff6c8}
.tab.on{background:var(--coin);box-shadow:0 -3px 0 0 #6b3f00,0 3px 0 0 #6b3f00,-3px 0 0 0 #6b3f00,3px 0 0 0 #6b3f00,0 7px 0 0 #6b3f00}
.tab .lock{position:absolute;right:-6px;top:-7px;width:14px;height:16px;display:none}
body[data-plan="starter"] .tab.pen .lock{display:block}
.pplock{display:none}
body[data-plan="starter"] .pplock{display:inline-block}
.tab:focus-visible,.rbell:focus-visible{outline:3px dashed var(--pink);outline-offset:5px}
/* the hover word: a pixel speech box to the right of the icon */
.tt{position:absolute;z-index:20;display:none;left:calc(100% + 16px);top:50%;transform:translateY(-50%);padding:7px 10px 6px;white-space:nowrap;
  font:700 13px/1 var(--tiny);letter-spacing:.05em;text-transform:uppercase;background:#222;color:#fff;pointer-events:none;box-shadow:0 0 0 3px #fff,0 0 0 6px #222}
.tt::after{content:'';position:absolute;left:-10px;top:50%;margin-top:-4px;width:8px;height:8px;background:#222;box-shadow:-3px 0 0 #fff}
.hov:hover .tt,.hov:focus-visible .tt{display:block}
.tt .soon{margin-left:6px;padding:2px 4px 1px;font-size:8px;background:var(--pink);color:#fff}
/* in the welcome card the word drops below its button */
.datecard .tt{left:50%;top:calc(100% + 18px);transform:translateX(-50%)}
.datecard .tt::after{left:50%;top:-10px;margin:0 0 0 -4px;box-shadow:0 -3px 0 #fff}
.rbell{all:unset;box-sizing:border-box;position:relative;display:grid;place-items:center;width:54px;height:54px;margin-top:auto;flex:none;cursor:pointer;background:var(--paper);
  box-shadow:0 -3px 0 0 #052a26,0 3px 0 0 #052a26,-3px 0 0 0 #052a26,3px 0 0 0 #052a26}
.rbell canvas{width:30px;height:30px}
.rbell em,.bell em{position:absolute;right:-11px;top:-11px;min-width:26px;padding:4px 5px 3px;font:400 14px/1 var(--ps);font-style:normal;text-align:center;background:var(--red);color:#fff;box-shadow:2px 2px 0 #8f1d16}
em.zero{display:none}
/* the bell is the Notifications tab's button: on that tab it is lit like a tab that is on (.tab.on) */
.rbell.on,.datecard .bell.on{background:var(--coin);box-shadow:0 -3px 0 0 #6b3f00,0 3px 0 0 #6b3f00,-3px 0 0 0 #6b3f00,3px 0 0 0 #6b3f00,0 7px 0 0 #6b3f00}
.aptop .bell.on{background:var(--coin);box-shadow:0 0 0 2px #6b3f00}

.main{padding:22px 26px 30px;min-width:0}
/* shorter screens: the icon bar tightens up so the bell still sits in the bottom-left corner; on the shortest it
   scrolls with the page instead (it never scrolls on its own, which would clip the hover words) */
@media (max-height:940px){.rail{gap:12px;padding:12px 0 14px}.tabs{gap:10px}.logo{width:48px;height:48px;margin-bottom:0}.logo canvas{width:42px;height:42px}}
@media (max-height:800px){
  .rail{gap:10px}.tabs{gap:8px}.logo{width:40px;height:40px}.logo canvas{width:35px;height:35px}
  .tab,.rbell,.rail .motion-toggle{width:40px;height:40px}.tab canvas{width:24px;height:24px}.rbell canvas{width:20px;height:20px}
  .tt{left:calc(100% + 14px)}
}
@media (max-height:619px){.rail{position:relative;height:auto}}
/* the pause toggle (pixel.js), moved into the bar above the bell */
.rail .motion-toggle{position:static;flex:none;margin-top:auto}
.rail .motion-toggle+.rbell{margin-top:6px}

/* ---------- the welcome banner: the pig pen ---------- */
.banner{position:relative;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;min-height:178px;padding:22px 18px 18px 28px;
  box-shadow:0 0 0 3px var(--teal-dark);background:#bde6ff}
.banner.tall{padding-bottom:104px}
.banner canvas.scene{position:absolute;inset:0;width:100%;height:100%}
.welcome{position:relative;max-width:46ch}
.welcome h1{font:700 34px/1.1 var(--pxf);color:var(--teal-dark);text-shadow:3px 3px 0 #fff6c8}
/* the line under the heading sits on a cream sign so it reads over the sky and the grass */
.welcome p{display:inline-block;margin-top:10px;padding:6px 10px 5px;font:700 16px/1.35 var(--pxf);color:var(--teal-dark);background:#fff6c8;box-shadow:0 0 0 3px var(--teal-dark),4px 5px 0 3px rgba(8,60,54,.18)}
.datecard{position:relative;display:flex;align-items:center;gap:22px;padding:8px 10px 8px 14px;margin-top:-6px;background:var(--paper)}
.datecard .d{font:700 14px/1.35 var(--pxf);color:var(--teal-dark);white-space:nowrap}
.datecard .d small{display:block;font:400 8px/1.79 var(--ps);text-transform:uppercase;color:var(--muted)}
.take{display:flex;align-items:center;gap:8px;padding:0 4px}
.take b{display:block;font:700 14px/1.1 var(--tiny);text-transform:uppercase;color:var(--teal-dark);white-space:nowrap}
.take small{display:block;font:600 12px/1.2 var(--pxf);color:var(--muted);white-space:nowrap}
.sw{all:unset;box-sizing:border-box;position:relative;display:inline-block;flex:none;width:48px;height:24px;cursor:pointer;background:var(--lime);box-shadow:var(--rim)}
.sw i{position:absolute;left:27px;top:3px;width:18px;height:18px;background:#fff;box-shadow:inset -3px -3px 0 #d9c29a}
.sw[aria-checked="false"]{background:#b9ab88}
.sw[aria-checked="false"] i{left:3px}
.sw:focus-visible,.bell:focus-visible,.lgout:focus-visible,.avatar:focus-visible{outline:3px dashed var(--pink);outline-offset:4px}
.bell,.lgout{all:unset;box-sizing:border-box;position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;cursor:pointer;background:var(--paper);box-shadow:var(--rim)}
.bell canvas,.lgout canvas{width:30px;height:30px}
/* the date card's Log out sits where its bell was; Notifications is the icon bar's bell */
.lgout:hover{background:#fff6c8}
.avatar{all:unset;box-sizing:border-box;position:relative;display:grid;place-items:center;flex:none;width:62px;height:62px;cursor:pointer;background:#bfe8ff;box-shadow:0 0 0 3px var(--teal-dark)}
.avatar canvas{width:52px;height:42px}
body[data-plan="pro"] .avatar{background:#1f4fa8}
body[data-plan="max"] .avatar{background:#2a0f2e;box-shadow:0 0 0 3px var(--coin),0 0 0 6px #6b3f00}

/* the short banner (a title strip) the tabs after the home page use */
.banner.short{min-height:132px}
/* every tab's date card shows the date and time only, with Change States under the switch (.take: it outranks .lk below) */
.take .chs{display:block;margin-top:3px;font:400 8px/1.65 var(--ps);text-transform:uppercase;color:#c9347d}
/* "Your profile" opens to the left of the pig, inside the banner, so nothing clips it */
.datecard .avatar .tt{left:auto;right:calc(100% + 16px);top:50%;transform:translateY(-50%)}
.datecard .avatar .tt::after{left:auto;right:-10px;top:50%;margin:-4px 0 0;box-shadow:3px 0 0 #fff}
/* a button's insides never take the pointer, so the hand shows over its whole face */
.main button *,.rail .tab *{pointer-events:none}

/* ---------- the header chips ---------- */
.hdr{display:flex;align-items:center;flex-wrap:wrap;gap:16px 18px;margin:24px 0}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 10px;background:var(--paper);white-space:nowrap}
.planchip{gap:10px;padding:4px 12px 4px 6px}
.planchip canvas{width:52px;height:42px}
.planchip .pn{font:400 15px/1 var(--ps);text-transform:uppercase;color:var(--teal)}
.planchip .up{font:700 12px/1 var(--tiny);text-transform:uppercase;color:#c9347d;text-underline-offset:3px}
.planchip .lv{display:none}
body[data-plan="max"] .planchip .lv{display:inline-block}
body[data-plan="pro"] .planchip{background:#173f8c;box-shadow:0 -3px 0 0 #6fb6ff,0 3px 0 0 #6fb6ff,-3px 0 0 0 #6fb6ff,3px 0 0 0 #6fb6ff,0 -6px 0 0 #0e1f4d,0 6px 0 0 #0e1f4d,-6px 0 0 0 #0e1f4d,6px 0 0 0 #0e1f4d}
body[data-plan="pro"] .planchip .pn{color:#fff;text-shadow:2px 2px 0 #0e1f4d}
body[data-plan="pro"] .planchip .up{color:#ffc2dc}
body[data-plan="max"] .planchip{background:#2a0f2e;box-shadow:0 -3px 0 0 var(--coin),0 3px 0 0 var(--coin),-3px 0 0 0 var(--coin),3px 0 0 0 var(--coin),0 -6px 0 0 var(--pink),0 6px 0 0 var(--pink),-6px 0 0 0 var(--pink),6px 0 0 0 var(--pink)}
body[data-plan="max"] .planchip .pn{color:var(--coin);text-shadow:2px 2px 0 #8a5a00}
body[data-plan="max"] .planchip .up{color:var(--coin)}
.scorechip canvas{width:24px;height:24px}
.scorechip b{font:400 16px/1 var(--ps);color:var(--teal-dark)}
.scorechip .w{display:block;font:600 12px/1.2 var(--pxf);color:var(--muted)}
.slotchip .grp{display:inline-flex;align-items:center;gap:5px}
.slotchip .pponly{margin-left:8px}
body[data-plan="starter"] .pponly{display:none}
.coins{display:inline-flex;gap:4px}
.coins i{width:18px;height:18px;background:var(--coin);box-shadow:inset -3px -3px 0 #e9a90f,inset 3px 3px 0 #fff6b0,0 0 0 2px #8a5a00}
.coins i.e{background:#e6dcc4;box-shadow:inset 0 0 0 2px #cdbf9e,0 0 0 2px #b9ab88}
.coins.pp i:not(.e){background:var(--pink);box-shadow:inset -3px -3px 0 #c9347d,inset 3px 3px 0 #ffc2dc,0 0 0 2px var(--plum)}
.slotchip .n{font:400 11px/1 var(--ps);color:var(--teal-dark)}
.credchip canvas{width:28px;height:28px}
.credchip b{font:400 18px/1 var(--ps);color:var(--teal-dark)}
/* buttons that read as links */
.lk{all:unset;cursor:pointer;color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.lk:focus-visible{outline:3px dashed var(--pink);outline-offset:3px}
.credchip .lk{display:block;font:400 8px/1.79 var(--ps);text-transform:uppercase}

/* ---------- panels ---------- */
.grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,19vw,480px);gap:24px;align-items:start}
.panel{background:var(--paper);padding:16px 18px 18px}
.ph{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.ph canvas{width:24px;height:24px}
.ph h2{font:700 22px/1.1 var(--pxf);color:var(--teal-dark)}
.ph .va{margin-left:auto;font:700 12px/1 var(--tiny);text-transform:uppercase}
.live{display:inline-flex;align-items:center;gap:6px;padding:4px 7px 3px;font:400 8px/1.38 var(--ps);text-transform:uppercase;background:var(--teal);color:var(--coin)}
.live i{width:8px;height:8px;background:var(--lime);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.alerts{margin-left:auto;font:400 8px/1.65 var(--ps);text-transform:uppercase;color:var(--muted)}
.alerts b{color:#127a34}
.snd{margin-left:10px;font:400 8px/1.65 var(--ps);text-transform:uppercase}
.snd[hidden]{display:none}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.fch{position:relative;display:inline-flex;align-items:center;gap:4px;padding:0 0 0 10px;font:700 12px/1 var(--tiny);text-transform:uppercase;color:var(--teal-dark);background:#fff;box-shadow:0 0 0 3px var(--teal)}
.fch select{all:unset;field-sizing:content;cursor:pointer;padding:7px 24px 6px 2px;font:700 12px/1 var(--tiny);text-transform:uppercase;color:var(--teal)}
.fch::after{content:'';position:absolute;right:9px;top:50%;margin-top:-2px;border:5px solid transparent;border-top:6px solid var(--teal-dark);pointer-events:none}
.fch:focus-within{outline:3px dashed var(--pink);outline-offset:4px}
.nomatch{padding:14px 4px;font:600 15px/1.35 var(--pxf);color:var(--muted)}

/* ---------- lead cards ---------- */
.feed{display:grid;gap:16px}
.lead{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 214px;gap:16px;padding:14px 16px;background:#fff;box-shadow:var(--rim),5px 7px 0 0 rgba(8,60,54,.14)}
.lead[hidden]{display:none}
.ltop{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.tag{display:inline-block;padding:4px 6px 3px;font:400 8px/1.38 var(--ps);text-transform:uppercase;white-space:nowrap}
.tag.fit{background:var(--pink);color:#fff;box-shadow:2px 2px 0 var(--plum)}
.tag.aca{background:var(--teal);color:#fff;box-shadow:2px 2px 0 var(--teal-dark)}
.tag.prv{background:#1f4fa8;color:#fff;box-shadow:2px 2px 0 #0e1f4d}
.tag.lang{background:#fff6c8;color:#6b3f00;box-shadow:0 0 0 2px #e9a90f}
.tag.ok{background:#e3f7e6;color:#127a34;box-shadow:0 0 0 2px #7fd08c}
.ltop .ago{margin-left:auto;font:700 12px/1 var(--tiny);text-transform:uppercase;color:var(--muted)}
/* the four that matter big (state, exact age, income, work), the rest small */
.facts{display:grid;max-width:640px;gap:8px 14px;margin:0;padding:0;list-style:none}
.facts li{min-width:0}
.facts small{display:block;font:400 8px/1.5 var(--ps);text-transform:uppercase;color:var(--muted)}
.facts.big{grid-template-columns:minmax(0,.6fr) minmax(0,.55fr) minmax(0,1fr) minmax(0,1.35fr);margin-bottom:10px}
.facts.big span{font:700 22px/1.15 var(--pxf);color:var(--teal-dark)}
.facts.sm{grid-template-columns:repeat(3,minmax(0,1fr))}
.facts.sm span{font:600 14px/1.25 var(--pxf);color:var(--muted)}
.buy{display:flex;flex-direction:column;gap:8px;padding-left:16px;border-left:3px dashed var(--line)}
.pr{display:flex;align-items:baseline;justify-content:space-between}
.pr b{font:400 22px/1 var(--ps);color:var(--teal-dark)}
.pr small{font:400 8px/1.38 var(--ps);text-transform:uppercase;color:var(--muted)}
/* the claim countdown: 15 s, red for the last 5 */
.cd{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px}
.cd canvas{width:21px;height:27px}
.cd .bar{display:flex;gap:2px;height:14px;padding:2px;background:var(--line);box-shadow:0 0 0 2px var(--teal-dark)}
.cd .bar i{flex:1;background:var(--lime)}
.cd .bar i.x{background:transparent}
.cd .t{min-width:52px;font:400 13px/1 var(--ps);color:var(--teal-dark);text-align:right}
.cd .cap{grid-column:1/-1;font:400 8px/1.65 var(--ps);text-transform:uppercase;color:var(--muted)}
.cd.low .bar i:not(.x){background:var(--red)}
.cd.low .t{color:var(--red)}
.claim{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;min-height:44px;font:700 16px/1 var(--tiny);text-transform:uppercase;background:var(--pink);color:#fff;text-shadow:2px 2px 0 var(--plum);
  box-shadow:0 -4px 0 0 var(--plum),0 4px 0 0 var(--plum),-4px 0 0 0 var(--plum),4px 0 0 0 var(--plum),0 8px 0 0 #c9347d,0 11px 0 0 var(--plum)}
.claim:hover{filter:brightness(1.1)}
.claim:focus-visible{outline:3px dashed var(--teal-dark);outline-offset:6px}
.claim:disabled{cursor:default;filter:grayscale(1) opacity(.6)}
/* Pass asks twice: "Really?", then "Are you sure?" */
.pass{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;min-height:34px;margin-top:4px;font:700 13px/1 var(--tiny);text-transform:uppercase;color:var(--teal-dark);background:var(--paper);box-shadow:0 0 0 3px var(--teal-dark)}
.pass:hover{background:#fff6c8}
.pass[data-step="1"]{background:#fff6c8;box-shadow:0 0 0 3px #8a5a00;color:#6b3f00}
.pass[data-step="2"]{background:#ffe1e0;box-shadow:0 0 0 3px #8f1d16;color:#8f1d16}
.pass:focus-visible{outline:3px dashed var(--pink);outline-offset:4px}
/* the left side runs as tall as the buy column, the check-in note at its foot */
.about{display:flex;flex-direction:column;min-width:0}
.ckn{margin-top:auto;padding-top:10px;font:600 13px/1.3 var(--pxf);color:var(--muted)}
.ckn b{color:var(--teal-dark)}
.done{display:none;padding:10px 0;font:700 12px/1.3 var(--tiny);text-transform:uppercase;text-align:center;color:var(--muted)}
.lead:is(.gone,.passed,.claimed) :is(.cd,.claim,.pass){display:none}
.lead:is(.gone,.passed,.claimed) .done{display:block}
.lead:is(.gone,.passed,.claimed) :is(.facts,.ltop,.ckn){opacity:.45}
.lead.claimed .done{color:#127a34}
.lead.taken{background:#f3efe4}
.lead.taken :is(.facts,.ltop,.pr){opacity:.45}
.stamp{align-self:center;justify-self:center;padding:8px 14px 7px;font:700 18px/1 var(--tiny);text-transform:uppercase;color:#8f1d16;box-shadow:0 0 0 3px #8f1d16;transform:rotate(-6deg);background:rgba(255,255,255,.6)}

/* ---------- the side column: just claimed, Peter's tip, opening soon ---------- */
.side{display:grid;gap:22px;align-content:start}
.claimed{padding:14px 16px;background:#effaf1;box-shadow:0 -3px 0 0 #127a34,0 3px 0 0 #127a34,-3px 0 0 0 #127a34,3px 0 0 0 #127a34,5px 7px 0 0 rgba(8,60,54,.14)}
.claimed .who{font:700 20px/1.2 var(--pxf);color:var(--teal-dark)}
.claimed .ph2{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:8px 0 12px}
.claimed .ph2 span{font:400 13px/1 var(--ps);color:var(--teal-dark);white-space:nowrap}
.call1{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;font:700 13px/1 var(--tiny);text-transform:uppercase;background:var(--teal);color:var(--coin);box-shadow:0 0 0 3px var(--teal-dark),0 5px 0 3px var(--teal-dark)}
.call1:focus-visible{outline:3px dashed var(--pink);outline-offset:6px}
.claimed .meta{font:600 13px/1.35 var(--pxf);color:var(--muted)}
.tip{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:end;padding:14px 16px;background:#fff6c8;
  box-shadow:0 -3px 0 0 #8a5a00,0 3px 0 0 #8a5a00,-3px 0 0 0 #8a5a00,3px 0 0 0 #8a5a00,5px 7px 0 0 rgba(8,60,54,.14)}
.tip canvas{width:72px;height:58px}
.tip .bub{position:relative;padding:10px 12px;background:#fff;box-shadow:0 0 0 3px var(--teal-dark);font:600 15px/1.35 var(--pxf)}
.tip .bub b.h{display:block;margin-bottom:3px;font:400 8px/1.65 var(--ps);text-transform:uppercase;color:#8a5a00}
.tip .bub::before{content:'';position:absolute;left:-11px;bottom:12px;width:8px;height:8px;background:#fff;box-shadow:0 0 0 3px var(--teal-dark)}
.soonbox{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;background:var(--paper)}
.soonbox canvas{width:28px;height:36px;margin:0 4px}
.soonbox b{display:block;font:700 16px/1.25 var(--pxf);color:var(--teal-dark)}
.soonbox span{font:600 14px/1.35 var(--pxf);color:var(--muted)}

/* the "not built yet" and profile notes */
.toast{position:fixed;z-index:40;right:24px;top:24px;display:none;max-width:300px;padding:10px 14px;font:700 13px/1.35 var(--tiny);text-transform:uppercase;background:#222;color:#fff;box-shadow:0 0 0 3px #fff,0 0 0 6px #222}
.toast.show{display:block}
.toast b{color:var(--coin)}
/* a new lead's alert on the tabs away from New Leads: bottom right, above the Feedback button, where a desktop alert shows */
.leadpop{position:fixed;z-index:40;right:24px;bottom:96px;display:none;width:260px;padding:12px 14px;background:#222;color:#fff;box-shadow:0 0 0 3px #fff,0 0 0 6px #222}
.leadpop.show{display:grid;gap:6px}
.leadpop b{font:700 14px/1.1 var(--tiny);text-transform:uppercase;color:var(--coin)}
.leadpop span{font:600 13px/1.35 var(--pxf)}
.leadpop .lk{justify-self:start;font:400 8px/1.65 var(--ps);text-transform:uppercase;color:var(--coin)}

/* ---------- narrower desktops and laptops ---------- */
@media (max-width:1180px){.grid{grid-template-columns:minmax(0,1fr)}.side{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}}
@media (max-width:900px){
  .main{padding:18px 18px 26px}
  .lead{grid-template-columns:minmax(0,1fr)}
  .buy{padding:10px 0 0;border-left:0;border-top:3px dashed var(--line)}
  .facts.big{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- phones: no phone web dashboard, this page instead ---------- */
.gate{display:none}
@media (max-width:700px){
  .dash,.motion-toggle{display:none}
  body{background:var(--cream)}
  .gate{display:flex;flex-direction:column;min-height:100vh}
}
.gtop{display:flex;align-items:center;height:58px;padding:0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));background:var(--teal-dark)}
.gtop .wm{width:142px;height:auto}
.gbody{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:440px;margin:0 auto;padding:22px 16px 30px;text-align:center}
.gbody>div:not(.gscene):not(.stores){display:grid;gap:12px}
.gscene{position:relative;width:100%;height:150px;overflow:hidden;box-shadow:0 0 0 3px var(--teal-dark);background:#bde6ff}
.gscene canvas{width:100%;height:100%}
.gate h1{font:700 25px/1.15 var(--pxf);color:var(--teal-dark)}
.gate p{font:600 15px/1.45 var(--pxf)}
.gbtn{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:center;min-height:50px;padding:10px 12px;margin-bottom:5px;
  font:700 14px/1.2 var(--tiny);text-transform:uppercase;text-align:center;background:var(--teal);color:var(--coin);
  box-shadow:0 -4px 0 0 var(--teal-dark),0 4px 0 0 var(--teal-dark),-4px 0 0 0 var(--teal-dark),4px 0 0 0 var(--teal-dark),0 9px 0 0 var(--teal-dark)}
.gbtn.sent{background:#127a34;color:#fff;box-shadow:0 -4px 0 0 #0b4d20,0 4px 0 0 #0b4d20,-4px 0 0 0 #0b4d20,4px 0 0 0 #0b4d20,0 9px 0 0 #0b4d20}
.gbtn.pink{background:var(--pink);color:#fff;text-shadow:2px 2px 0 var(--plum);box-shadow:0 -4px 0 0 var(--plum),0 4px 0 0 var(--plum),-4px 0 0 0 var(--plum),4px 0 0 0 var(--plum),0 9px 0 0 var(--plum)}
.gbtn:focus-visible{outline:3px dashed var(--pink);outline-offset:8px}
.gbtn.pink:focus-visible{outline-color:var(--teal-dark)}
.gate .or{font:700 12px/1 var(--tiny);text-transform:uppercase;color:var(--muted)}
.stores{display:flex;gap:10px;width:100%}
.store{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;background:#222;color:#fff;font:700 12px/1.1 var(--tiny);text-transform:uppercase;box-shadow:0 0 0 3px #111;opacity:.55}
.store small{font:400 8px/1.4 var(--ps);color:#bbb}
.gate .soon{padding:3px 6px 2px;font:400 8px/1.38 var(--ps);text-transform:uppercase;background:var(--pink);color:#fff;box-shadow:2px 2px 0 var(--plum)}
.gate .fine{font:600 13px/1.4 var(--pxf);color:#127a34}
.gate .fine:empty{display:none}
.gate .chip-ph{margin-top:6px}
body[data-plan="starter"] .only-paid,body:not([data-plan="starter"]) .only-starter{display:none!important}

/* In the phone app (js/app-mode.js) the Starter screen has no stores and a way out. */
.lout{margin-top:6px;font:700 12px/1 var(--tiny);text-transform:uppercase;color:var(--teal);text-decoration:underline;text-underline-offset:4px}