/* Digits only, from Press Start 2P: Pixelify's 5 reads as S and its 2 is shaky at body sizes.
   Every other character falls through to Pixelify Sans. */
@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 capital C from Silkscreen: Pixelify's C reads as an O, and Silkscreen's sits on the baseline at the same height
   and weight (Press Start 2P's sat high; owner's demo, 2026-10-25). */
@font-face{font-family:'Px C';font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/silkscreen-400.woff2) format('woff2');unicode-range:U+0043}
@font-face{font-family:'Px C';font-style:normal;font-weight:600 900;font-display:swap;src:url(../fonts/silkscreen-700.woff2) format('woff2');unicode-range:U+0043}
/* Pricing page. Tokens from base.css; the wall, whiteboard, pink C2 button, teal
   Login button, wood floor and legal strip are the landing page's, laid out as a scrolling page. */
:root{--cream:#f1e3c6;--stripe:#e9d8b4;--paper:#fbf6ea;--muted:#5a625c;--text:#26322f;
  --body:'Px Digits','Px C','Pixelify Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--pxf:'Px Digits','Px C','Pixelify Sans',monospace;--tiny:Silkscreen,monospace}
html{background:var(--cream)}
body{font-family:var(--body);color:var(--text);font-size:17px;line-height:1.55;
  background:var(--cream) repeating-linear-gradient(90deg,transparent 0 24px,var(--stripe) 24px 32px)}
.type-labels *{font-variant-ligatures:none!important}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
@media (max-width:700px){.wrap{padding:0 16px}body{font-size:16px}}
a{color:var(--teal)}


/* top bar: the landing page's header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;padding-bottom:10px}
.brand{line-height:0}
.wm{width:284px;height:auto}
.nav{display:flex;align-items:center;gap:22px}
.nlink{font:400 19px/1 var(--tiny);color:var(--teal);text-decoration:none;padding:8px 4px;white-space:nowrap}
.nlink:hover{color:#c9347d}
.nlink.on{box-shadow:inset 0 -4px 0 var(--coin)}
.nbtn{font:400 19px/1 var(--tiny);background:var(--teal);color:var(--coin);text-decoration:none;padding:11px 18px;white-space:nowrap;
  box-shadow:0 -5px 0 0 var(--teal-dark),0 5px 0 0 var(--teal-dark),-5px 0 0 0 var(--teal-dark),5px 0 0 0 var(--teal-dark),0 11px 0 0 var(--teal-dark)}
.nbtn:hover{background:var(--teal-2)}
.short{display:none}
/* the full header needs about 805px, so it goes compact below 820px */
@media (max-width:820px){
  .top{padding-top:14px}
  .wm{width:142px}
  .nav{gap:10px}
  .nlink,.nbtn{font-size:13px}
  .nlink{padding:6px 2px}
  .nbtn{padding:8px 10px;box-shadow: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),0 7px 0 0 var(--teal-dark)}
  .full{display:none}.short{display:inline}
}
@media (max-width:480px){.nav .nlink.on{display:none}}
@media (max-width:359px){.top{gap:10px}.wm{width:120px}}

/* whiteboard headline */
.hero{padding-top:26px;padding-bottom:44px}
.board{position:relative;max-width:860px;margin:0 auto;background:#fbfbf7;text-align:center;padding:30px 40px 34px;
  box-shadow:0 -10px 0 0 #8e96a3,0 10px 0 0 #8e96a3,-10px 0 0 0 #8e96a3,10px 0 0 0 #8e96a3,0 0 0 14px #bcc3cc,10px 18px 0 6px rgba(18,59,58,.12)}
.board .kick{margin:0 0 6px;font:700 13px/1 var(--tiny);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.board h1{position:relative;margin:0;font-family:var(--pxf);font-weight:700;line-height:1.05;display:flex;flex-direction:column;align-items:center}
.board .l1{font-size:46px;color:#1f4fa8;text-shadow:2px 2px 0 rgba(31,79,168,.22)}
.board .l2{font-size:28px;color:#2c3140;font-weight:600;margin-top:8px}
.board .l3{font-size:clamp(48px,9.6vw - 17px,58px);color:var(--red);margin-top:4px;padding:0 10px;
  background:linear-gradient(transparent 58%,#ffe57a 58%,#ffe57a 90%,transparent 90%);text-shadow:3px 3px 0 rgba(143,29,22,.25);animation:wob 1.4s steps(2) infinite}
@keyframes wob{50%{transform:rotate(-3deg) scale(1.05)}}
.board .sub{max-width:58ch;margin:18px auto 0;font-weight:700;color:#2f4b45}
.chip-ph{display:inline-block;margin:12px 0 0;padding:3px 8px;background:#fff1a8;border:1px dashed #b98a10;color:#4a3500;font:700 13px/1.4 var(--body)}
.board .tray{position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);width:62%;height:10px;background:#8e96a3;display:flex;gap:12px;padding:0 6%}
.board .tray .mk{width:28px;height:5px;margin-top:-5px;transition:transform .15s steps(2),opacity .15s steps(2)}
.board .tray .mk.up{transform:translateY(-10px);opacity:0}
.mk.r{background:var(--red)}.mk.b{background:#1f4fa8}.mk.k{background:#2c3140}.mk.g{background:#2f9d4a}
@media (max-width:700px){
  .hero{padding-top:18px;padding-bottom:36px}
  .board{padding:20px 16px 24px;box-shadow:0 -6px 0 0 #8e96a3,0 6px 0 0 #8e96a3,-6px 0 0 0 #8e96a3,6px 0 0 0 #8e96a3,0 0 0 9px #bcc3cc}
  /* l3 shrinks with the screen so "a posted time delay." stays on one line down to 320px */
  .board .l1{font-size:27px}.board .l2{font-size:19px}.board .l3{font-size:clamp(20px,9.6vw - 10px,34px)}
  .board .sub{font-size:15px}
  .board .tray{bottom:-16px;height:7px}
  .board .marker{width:30px}
}

/* monthly / annual switch */
.billrow{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:16px 24px;padding-bottom:22px}
/* what joining costs, in plain words */
.perks{position:relative;flex-basis:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 16px;margin:0;padding:0;list-style:none}
.perks li{display:inline-flex;align-items:center;gap:8px;padding:8px 12px 8px 10px;font:700 15px/1.1 var(--tiny);text-transform:uppercase;letter-spacing:.03em;color:var(--teal-dark);background:#fff6c8;
  box-shadow:0 -3px 0 0 #8a5a00,0 3px 0 0 #8a5a00,-3px 0 0 0 #8a5a00,3px 0 0 0 #8a5a00,4px 5px 0 0 rgba(8,60,54,.18)}
.perks .ico{width:24px;height:24px}
@media (max-width:820px){.perks li{font-size:12px;padding:7px 9px 7px 8px}.perks .ico{width:18px;height:18px}}
.bill{position:relative;display:inline-flex;align-items:center;gap:12px;padding:10px 16px;background:var(--paper);
  box-shadow: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),6px 7px 0 0 rgba(8,60,54,.18)}
.bl{font:700 15px/1.2 var(--tiny);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.bl.on{color:var(--teal-dark)}
.bl em{display:inline-block;margin-left:6px;padding:3px 5px 2px;font:400 8px/1 'Press Start 2P',monospace;font-style:normal;background:var(--pink);color:#fff;box-shadow:2px 2px 0 var(--plum);vertical-align:1px}
.sw{position:relative;width:56px;height:28px;padding:0;border:0;cursor:pointer;background:#b9b2a0;
  box-shadow: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)}
.sw i{position:absolute;left:4px;top:4px;width:20px;height:20px;background:#fff;box-shadow:inset -3px -3px 0 #d9c29a;transition:left .16s steps(3)}
.sw[aria-checked="true"]{background:var(--lime)}
.sw[aria-checked="true"] i{left:32px}
@media (max-width:820px){.billrow{justify-content:center;padding-bottom:20px}.bill{gap:9px;padding:8px 12px}.bl{font-size:13px}}
@media (max-width:400px){.bl em{display:block;margin:4px 0 0}}

/* plan cards: a "character select" row, one Peter per plan, each in his own scene */
.plans{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px;align-items:stretch;padding-top:14px;padding-bottom:34px}
.plan{position:relative;display:flex;flex-direction:column;min-width:0;padding:0 22px 22px;font-family:var(--pxf);background:var(--paper);color:var(--text);
  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),10px 14px 0 0 rgba(8,60,54,.18)}
.p-pro{background:#173f8c;color:#e2f5ff;
  box-shadow:0 -4px 0 0 #6fb6ff,0 4px 0 0 #6fb6ff,-4px 0 0 0 #6fb6ff,4px 0 0 0 #6fb6ff,0 -8px 0 0 #0e1f4d,0 8px 0 0 #0e1f4d,-8px 0 0 0 #0e1f4d,8px 0 0 0 #0e1f4d,14px 18px 0 0 rgba(14,31,77,.3)}
.p-max{background:#2a0f2e;color:#fff3d6;transform:translateY(-12px);
  box-shadow:0 -4px 0 0 #fff6b0,0 4px 0 0 #e9a90f,-4px 0 0 0 #fff6b0,4px 0 0 0 #e9a90f,0 -8px 0 0 var(--coin),0 8px 0 0 var(--coin),-8px 0 0 0 var(--coin),8px 0 0 0 var(--coin),
    0 -12px 0 0 #6b3f00,0 12px 0 0 #6b3f00,-12px 0 0 0 #6b3f00,12px 0 0 0 #6b3f00,0 -16px 0 0 var(--pink),0 16px 0 0 var(--pink),-16px 0 0 0 var(--pink),16px 0 0 0 var(--pink),20px 26px 0 0 rgba(42,15,46,.32)}
.stage{position:relative;height:168px;margin:0 -22px 16px;overflow:hidden;border-bottom:4px solid var(--teal-dark);background:#bfe8ff}
.p-pro .stage{border-color:#0e1f4d;background:#1f4fa8}
.p-max .stage{border-color:#6b3f00;background:#2a0f2e}
.stage .scene{position:absolute;top:0;height:168px;width:auto}
.ptop{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 0 6px}
.pname{margin:0;font:400 24px/1.25 'Press Start 2P',monospace;text-transform:uppercase;color:var(--teal);text-shadow:3px 3px 0 rgba(13,95,85,.22)}
.p-pro .pname{font-size:31px;color:#fff;text-shadow:3px 3px 0 #6fb6ff,6px 6px 0 #0e1f4d}
.p-max .pname{font-size:38px;color:var(--coin);text-shadow:-2px -2px 0 #fff6b0,3px 3px 0 #e9a90f,6px 6px 0 #8a5a00,9px 9px 0 #1a0a1e}
.crown{width:33px;height:24px;margin-right:-4px}
.tags{display:inline-flex;flex-direction:column;align-items:flex-start;gap:5px}
.off,.bv{display:inline-block;padding:4px 6px 3px;font:700 12px/1 var(--tiny);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.off{background:var(--pink);color:#fff;box-shadow:2px 2px 0 var(--plum)}
.bv{background:var(--lime);color:var(--teal-dark);box-shadow:2px 2px 0 var(--teal-dark)}
.off[hidden],.save[hidden],[data-was][hidden],.pnote[hidden]{display:none}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:10px 0 4px}
.price b{font:400 32px/1 'Press Start 2P',monospace;color:var(--teal-dark)}
.p-pro .price b{color:#fff}
.p-max .price b{color:var(--coin)}
.price s{font:400 18px/1 'Press Start 2P',monospace;color:#c9347d;text-decoration-thickness:3px}
.p-pro .price s,.p-max .price s{color:#ff8fb8}
.price span{font:700 14px/1.2 var(--tiny);color:var(--muted)}
.p-pro .price span{color:#bfe8ff}
.p-max .price span{color:#f3d98a}
.price .lv{margin-left:auto;padding:4px 6px 3px;font:700 12px/1 var(--tiny);font-style:normal;background:var(--coin);color:#2a0f2e;box-shadow:2px 2px 0 #6b3f00}
.price.flip b,.price.flip s{animation:flip .3s steps(3)}
@keyframes flip{0%{transform:scaleY(1)}50%{transform:scaleY(.1)}100%{transform:scaleY(1)}}
.pnote{margin:0 0 14px;font:700 13px/1.3 var(--tiny);color:var(--muted)}
.p-pro .pnote{color:#bfe8ff}
.p-max .pnote{color:#f3d98a}
/* the three big lines: held at once, window, wait */
.stats{display:grid;gap:12px;margin:0;padding:14px 14px 16px;list-style:none;background:rgba(13,95,85,.06);box-shadow:inset 0 0 0 3px rgba(13,95,85,.18)}
.stats ul{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.p-pro .stats{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 3px rgba(111,182,255,.4)}
.p-max .stats{background:rgba(255,210,63,.07);box-shadow:inset 0 0 0 3px rgba(255,210,63,.35)}
.stats li{display:grid;grid-template-columns:27px minmax(0,1fr);gap:11px;align-items:start;font:600 19px/1.3 var(--pxf)}
.stats .ico{width:27px;height:27px;margin-top:1px}
.stats b{font:400 14px/1 'Press Start 2P',monospace;color:var(--teal-dark)}
.n{font:400 12px/1 'Press Start 2P',monospace}
.p-pro .stats b{color:#fff}
.p-max .stats b{color:var(--coin)}
.stats small{display:block;margin-top:4px;font:600 16px/1.3 var(--pxf);color:var(--muted)}
.p-pro .stats small{color:#bfe8ff}
.p-max .stats small{color:#f3d98a}
/* Max's size slider: three stops, like Higgsfield's Ultra credits slider */
.lvl{position:relative;padding:2px 0 4px 38px}
.lvl input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:28px;margin:0;background:transparent;cursor:pointer;--p:0%}
.lvl input::-webkit-slider-runnable-track{height:8px;background:linear-gradient(90deg,var(--coin) 0 var(--p),#4f1f57 var(--p));box-shadow:0 0 0 2px #6b3f00}
.lvl input::-moz-range-track{height:8px;background:linear-gradient(90deg,var(--coin) 0 var(--p),#4f1f57 var(--p));box-shadow:0 0 0 2px #6b3f00}
.lvl input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-7px;border:0;border-radius:0;background:#fff6b0;box-shadow:0 0 0 3px #6b3f00,inset -3px -3px 0 #e9a90f}
.lvl input::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:0;background:#fff6b0;box-shadow:0 0 0 3px #6b3f00,inset -3px -3px 0 #e9a90f}
.lvl input:focus-visible{outline:3px dashed var(--pink);outline-offset:4px}
.ticks{display:flex;justify-content:space-between;margin-top:4px}
.ticks button{all:unset;cursor:pointer;display:inline-flex;align-items:baseline;gap:6px;min-height:28px;font:700 13px/1 var(--tiny);color:#c9a86a}
.ticks .ph{width:12px;height:12px;margin:0;align-self:center}
.stats .ph{margin:0 4px 0 0;vertical-align:-2px}
.ticks button b{font:400 12px/1 'Press Start 2P',monospace;color:#c9a86a}
.ticks button.on,.ticks button.on b{color:var(--coin)}
.ticks button:focus-visible{outline:3px dashed var(--pink);outline-offset:3px}
/* "More leads?" from the dashboard: the slider lights up and a note points down at the agent's level */
.lvl.glow input{background:rgba(255,210,63,.16);box-shadow:0 0 0 4px var(--coin),0 0 0 8px rgba(255,95,168,.45);animation:lvglow 1s steps(2) infinite}
@keyframes lvglow{50%{box-shadow:0 0 0 4px rgba(255,210,63,.35)}}
.lvl.glow .ticks{margin-top:10px}
.lvnote{position:relative;margin:4px 0 16px;padding:9px 11px;font:700 15px/1.35 var(--pxf);color:#2a0f2e;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,5px 6px 0 0 rgba(26,10,30,.5)}
.lvnote[hidden]{display:none}
/* the pointer: a pixel arrow down at the thumb on the agent's level (--at: 0 or .5), outline under fill */
.lvnote::before,.lvnote::after{content:'';position:absolute;top:100%;--x:calc(11px + (100% - 22px) * var(--at,0))}
.lvnote::before{left:calc(var(--x) - 12px);width:24px;height:12px;background:#6b3f00;
  clip-path:polygon(0 0,24px 0,24px 4px,20px 4px,20px 8px,16px 8px,16px 12px,8px 12px,8px 8px,4px 8px,4px 4px,0 4px)}
.lvnote::after{left:calc(var(--x) - 8px);width:16px;height:8px;background:var(--coin);
  clip-path:polygon(0 0,16px 0,16px 4px,12px 4px,12px 8px,4px 8px,4px 4px,0 4px)}
/* "Everything in X, PLUS" */
.inc{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:20px 0 12px}
.inc span{font:700 13px/1.2 var(--tiny);letter-spacing:.06em;text-transform:uppercase;color:var(--teal)}
.p-pro .inc span{color:#bfe8ff}
.p-max .inc span{color:#f3d98a}
.plus{font:400 22px/1 'Press Start 2P',monospace;text-transform:uppercase;color:var(--pink);text-shadow:3px 3px 0 var(--plum)}
.plus::before{content:'+';margin-right:4px}
.feats{display:grid;gap:9px;margin:0 0 22px;padding:0;list-style:none}
.feats li{position:relative;padding-left:24px;font:600 17px/1.35 var(--pxf)}
.feats li::before{content:'';position:absolute;left:0;top:6px;width:12px;height:12px;background:var(--coin);
  box-shadow:inset -2px -2px 0 #e9a90f,inset 2px 2px 0 #fff6b0,0 0 0 2px #8a5a00}
.p-pro .feats li::before{background:#6fb6ff;box-shadow:inset -2px -2px 0 #3f7cf5,inset 2px 2px 0 #e2f5ff,0 0 0 2px #0e1f4d}
/* a feature you can point at */
.ft{all:unset;cursor:help;font:700 16px/1.4 var(--body);color:inherit;text-decoration:underline dotted 2px;text-decoration-color:rgba(13,95,85,.55);text-underline-offset:4px}
.plan .ft{font:inherit}
.p-pro .ft{text-decoration-color:rgba(111,182,255,.85)}
.p-max .ft{text-decoration-color:rgba(255,210,63,.7)}
.ft:hover,.ft[aria-expanded="true"]{background:var(--coin);color:var(--teal-dark);text-decoration-color:var(--teal-dark)}
.ft:hover b,.ft[aria-expanded="true"] b{color:var(--teal-dark)}
.ft:focus-visible{outline:3px dashed var(--pink);outline-offset:3px}
.ft.inl{font-size:inherit}
.soon{display:inline-block;margin-left:4px;padding:3px 5px 2px;font:400 8px/1.2 'Press Start 2P',monospace;letter-spacing:0;text-transform:uppercase;background:var(--pink);color:#fff;vertical-align:2px;
  box-shadow:2px 2px 0 var(--plum)}
.go{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 14px;text-decoration:none;
  font:700 15px/1.1 var(--tiny);letter-spacing:.02em;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)}
.go:hover{background:var(--teal-2)}
.go:active{transform:translateY(3px)}
.p-pro .go{background:#6fb6ff;color:#0e1f4d;box-shadow:0 -4px 0 0 #0e1f4d,0 4px 0 0 #0e1f4d,-4px 0 0 0 #0e1f4d,4px 0 0 0 #0e1f4d,0 9px 0 0 #0e1f4d}
.p-pro .go:hover{background:#a5d3ff}
.p-max .go{background:var(--coin);color:#2a0f2e;box-shadow:0 -4px 0 0 #6b3f00,0 4px 0 0 #6b3f00,-4px 0 0 0 #6b3f00,4px 0 0 0 #6b3f00,0 9px 0 0 #6b3f00}
.p-max .go:hover{background:#ffe27a}
.go .arr{font:400 11px 'Press Start 2P',monospace}
.save{margin:16px 0 0;text-align:center;font:700 13px/1.3 var(--tiny);color:#bfe8ff}
.save b{font:400 11px 'Press Start 2P',monospace;color:#fff}
.p-max .save{color:#f3d98a}
.p-max .save b{color:var(--coin)}
@media (max-width:1100px){.plans{gap:32px}.plan{padding:0 18px 20px}.stage{margin:0 -18px 14px}.p-max .pname{font-size:32px}.p-pro .pname{font-size:27px}.pname{font-size:21px}.stats li{font-size:17px}.price b{font-size:27px}}
@media (max-width:820px){
  .plans{grid-template-columns:minmax(0,1fr);gap:46px;max-width:520px}
  .p-max{transform:none;
    box-shadow:0 -3px 0 0 #fff6b0,0 3px 0 0 #e9a90f,-3px 0 0 0 #fff6b0,3px 0 0 0 #e9a90f,0 -6px 0 0 var(--coin),0 6px 0 0 var(--coin),-6px 0 0 0 var(--coin),6px 0 0 0 var(--coin),
      0 -9px 0 0 #6b3f00,0 9px 0 0 #6b3f00,-9px 0 0 0 #6b3f00,9px 0 0 0 #6b3f00,0 -12px 0 0 var(--pink),0 12px 0 0 var(--pink),-12px 0 0 0 var(--pink),12px 0 0 0 var(--pink),12px 16px 0 0 rgba(42,15,46,.32)}
}
@media (max-width:420px){.stage{height:144px}.stage .scene{height:144px}.p-max .pname{font-size:30px}.p-pro .pname{font-size:26px}.price b{font-size:26px}}


/* section heads and panels */
.sec{margin:0 0 6px;font:700 32px/1.12 var(--pxf);color:var(--teal-dark)}
.sec .pl{display:inline-block;vertical-align:6px;margin-left:6px;padding:3px 6px 2px;font:400 8px/1.2 'Press Start 2P',monospace;letter-spacing:.06em;text-transform:uppercase;background:var(--teal);color:var(--coin)}
.lead{margin:0 0 18px;font-weight:700;color:#2f4b45}
.fine{margin:14px 0 0;font:600 14.5px/1.5 var(--body);color:var(--muted)}
.panel{position:relative;background:#fff;padding:28px 32px;
  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),8px 10px 0 0 rgba(8,60,54,.18)}
@media (max-width:700px){.sec{font-size:25px}.panel{padding:20px 16px}}

/* three things to know */
.know{padding-top:20px;padding-bottom:40px}
.know .sec{text-align:center;margin-bottom:18px}
.know ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.know li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;background:rgba(255,255,255,.75);padding:16px;
  box-shadow:0 -3px 0 0 var(--teal),0 3px 0 0 var(--teal),-3px 0 0 0 var(--teal),3px 0 0 0 var(--teal)}
.know .num{width:39px;height:39px;filter:drop-shadow(3px 3px 0 var(--teal-dark))}
.know p{margin:0;font-size:15.5px;line-height:1.5}
.know b{color:var(--teal-dark)}
@media (max-width:820px){.know ol{grid-template-columns:minmax(0,1fr);gap:16px}}

/* compare table */
.cmpwrap{padding-bottom:40px}
.tblbox{position:relative}
.cmp{width:100%;border-collapse:collapse;font-size:15.5px}
.cmp thead th{position:sticky;top:0;z-index:2;padding:14px 10px;background:var(--teal);color:var(--coin);font:400 15px/1 'Press Start 2P',monospace;text-transform:uppercase;text-align:center}
.cmp thead th.c-pro{background:#173f8c;color:#fff}
.cmp thead th.c-max{background:#2a0f2e;color:var(--coin)}
.cmp .rn{font:700 16px/1.4 var(--body)}
.cmp thead th.rl{background:var(--teal)}
.cmp tbody th{text-align:left;font-weight:700;padding:10px 10px 10px 4px;width:34%}
.cmp td{width:22%;text-align:center;padding:10px;font-weight:700;color:var(--teal-dark)}
.cmp tbody tr{border-bottom:2px dashed #e6dcc4}
.cmp tbody tr:nth-child(odd){background:#fbf8f0}
.cmp tbody tr:hover{background:#fff6c8}
/* the cell you point at turns green; the plan names in the header stay as they are */
.cmp td:hover{color:#127a34}
.cmp td:hover .yes{--ck:#127a34}
.yes,.no{display:inline-block;width:18px;height:18px;vertical-align:middle}
.yes{background:
  linear-gradient(var(--ck,var(--teal)),var(--ck,var(--teal))) 0 8px/4px 4px no-repeat,linear-gradient(var(--ck,var(--teal)),var(--ck,var(--teal))) 4px 12px/4px 4px no-repeat,
  linear-gradient(var(--ck,var(--teal)),var(--ck,var(--teal))) 8px 8px/4px 4px no-repeat,linear-gradient(var(--ck,var(--teal)),var(--ck,var(--teal))) 12px 4px/4px 4px no-repeat,linear-gradient(var(--ck,var(--teal)),var(--ck,var(--teal))) 14px 0/4px 4px no-repeat}
/* not in this plan: a red pixel X */
.no{background:
  linear-gradient(var(--red),var(--red)) 0 0/4px 4px no-repeat,linear-gradient(var(--red),var(--red)) 14px 0/4px 4px no-repeat,
  linear-gradient(var(--red),var(--red)) 3px 3px/4px 4px no-repeat,linear-gradient(var(--red),var(--red)) 11px 3px/4px 4px no-repeat,
  linear-gradient(var(--red),var(--red)) 7px 7px/4px 4px no-repeat,
  linear-gradient(var(--red),var(--red)) 3px 11px/4px 4px no-repeat,linear-gradient(var(--red),var(--red)) 11px 11px/4px 4px no-repeat,
  linear-gradient(var(--red),var(--red)) 0 14px/4px 4px no-repeat,linear-gradient(var(--red),var(--red)) 14px 14px/4px 4px no-repeat}
/* a lead count not set yet: a yellow box holds its place */
.ph{display:inline-block;width:18px;height:18px;margin:0 3px;vertical-align:middle;background:var(--coin);box-shadow:inset -3px -3px 0 #e9a90f,inset 3px 3px 0 #fff6b0,0 0 0 2px #8a5a00}
/* phones: one drop-down per plan (pricing.js builds them from the table), closed until tapped */
.cmpacc{display:none}
.cmpacc details{background:#fff;box-shadow: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)}
.cmpacc summary{position:relative;display:flex;align-items:center;min-height:52px;padding:0 14px 0 52px;list-style:none;cursor:pointer;
  font:400 14px/1 'Press Start 2P',monospace;text-transform:uppercase;background:var(--teal);color:var(--coin)}
.cmpacc summary::-webkit-details-marker{display:none}
.cmpacc summary::before{content:'+';position:absolute;left:14px;top:50%;translate:0 -50%;width:24px;height:24px;display:grid;place-items:center;font:400 12px/1 'Press Start 2P',monospace;background:var(--coin);color:var(--teal-dark);box-shadow:0 0 0 2px #8a5a00}
.cmpacc details[open] summary::before{content:'-'}
.cmpacc .c-pro summary{background:#173f8c;color:#fff}
.cmpacc .c-max summary{background:#2a0f2e;color:var(--coin)}
.cmpacc .crow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:2px dashed #e6dcc4;font:700 15px/1.35 var(--body)}
.cmpacc .crow:nth-child(odd){background:#fbf8f0}
.cmpacc .crow:last-child{border-bottom:0}
.cmpacc .cn{flex:1;min-width:0}
.cmpacc .cv{flex:none;max-width:50%;text-align:right;color:var(--teal-dark)}
@media (max-width:700px){
  .tblbox .cmp{display:none}
  .cmpacc{display:grid;gap:14px}
}

/* FAQ */
.faq{max-width:860px;padding-bottom:40px}
.faq .sec{margin-bottom:14px}
.faq details{margin:0 0 12px;background:#fff;box-shadow: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)}
.faq summary{list-style:none;cursor:pointer;padding:14px 18px 14px 50px;position:relative;font:700 18px/1.3 var(--pxf);color:var(--teal-dark)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+';position:absolute;left:16px;top:12px;width:22px;height:22px;display:grid;place-items:center;font:400 12px/1 'Press Start 2P',monospace;background:var(--coin);color:var(--teal-dark);box-shadow:0 0 0 2px #8a5a00}
.faq details[open] summary::before{content:'-'}
.faq summary:hover{background:#fff6c8}
.faq details p{margin:0;padding:0 18px 16px 50px}

/* end CTA: the landing page's C2 */
.end{display:flex;justify-content:center;padding-top:10px;padding-bottom:70px}
.cta{display:inline-flex;align-items:center;gap:12px;text-decoration:none;white-space:nowrap;font:700 22px/1 var(--tiny);padding:16px 28px;background:var(--pink);color:#fff;text-shadow:2px 2px 0 var(--plum);
  box-shadow:0 -5px 0 0 var(--plum),0 5px 0 0 var(--plum),-5px 0 0 0 var(--plum),5px 0 0 0 var(--plum),0 14px 0 0 #c9347d,0 19px 0 0 var(--plum);animation:halo 1.2s steps(2) infinite}
.cta:hover{filter:brightness(1.12)}
.cta svg{width:22px;height:22px;overflow:visible}
@keyframes halo{50%{outline:12px solid rgba(255,95,168,.35);outline-offset:10px}}
@media (max-width:700px){.cta{font-size:17px;padding:14px 20px}}

/* floor: wainscot, wood, Peter walking, legal strip */
.floor{position:relative}
.wain{height:56px;background:#6fa38e;border-top:6px solid #4f8670;
  background-image:linear-gradient(90deg,transparent 0 12px,#5f9580 12px 15px,transparent 15px 100%),linear-gradient(transparent 0 10px,#5f9580 10px 13px,transparent 13px 43px,#5f9580 43px 46px,transparent 46px);background-size:120px 100%,100% 100%}
.wood{position:relative;height:96px;border-top:6px solid #8a5a33;background:repeating-linear-gradient(180deg,#d39a60 0 14px,#a8713f 14px 16px,#c98f55 16px 30px,#a8713f 30px 32px)}
.walker{position:absolute;left:0;bottom:12px;width:100%;height:120px}
.legal{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 22px;min-height:40px;padding:6px 16px 6px 76px;background:var(--teal-dark);font:600 15px/1.3 var(--pxf);color:#d3e6e0}
.legal a{color:#fff;text-decoration:underline;text-underline-offset:.15em;text-decoration-color:rgba(255,255,255,.5)}
.legal a:hover{color:var(--coin)}
@media (max-width:700px){.legal{justify-content:flex-start;padding-left:70px;font-size:13px}.legal .copy{display:none}}

/* the feature explainer: a pixel window with a blank preview monitor */
.tip{position:absolute;z-index:50;width:400px;max-width:calc(100vw - 24px);background:#222;color:#fff;padding:14px 16px 16px;pointer-events:none;
  box-shadow:0 0 0 4px #fff,10px 10px 0 4px #fff,10px 10px 0 7px #222}
.tip .tn,.sheet .tn{margin:0 0 6px;font:700 18px/1.2 var(--pxf);color:var(--coin)}
.tip .tx,.sheet .tx{margin:0 0 12px;font:700 14.5px/1.45 var(--body)}
.pv{display:grid;gap:6px}
.pv[hidden]{display:none}
.pv .scr{display:flex;flex-direction:column;aspect-ratio:16/9;background:#0e132c;box-shadow:0 0 0 4px #3d3a4a,0 0 0 6px #111118,inset 0 0 0 2px #1b2547}
.pv>span{font:400 8px/1.3 'Press Start 2P',monospace;letter-spacing:.05em;text-transform:uppercase;color:#a8b0c4;margin-top:6px}
dialog.sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;border:0;padding:22px 18px 26px;background:#222;color:#fff;box-shadow:0 -4px 0 0 #fff,0 -8px 0 0 #222}
dialog.sheet::backdrop{background:rgba(16,33,43,.45)}
.sheet .x{position:absolute;right:10px;top:8px;min-width:44px;min-height:44px;background:none;border:0;color:#fff;font:700 18px var(--tiny);cursor:pointer}
.sheet .tn{padding-right:44px}

@media (prefers-reduced-motion:reduce){.board .l3,.cta,.lvl.glow input{animation:none}.go:active{transform:none}}
h1,h2,h3,.sec,.board *{font-variant-ligatures:none}
.soon[hidden]{display:none}

/* Starter works on a computer: on a phone, say so on the card, up where the name is */
.wc{display:none;padding:4px 6px 3px;font:400 8px/1.1 'Press Start 2P',monospace;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--teal-dark);box-shadow:2px 2px 0 rgba(8,60,54,.3)}
@media (max-width:700px){.wc{display:inline-block}}

/* In the phone app (js/app-mode.js): Pro and Max, and a line about Starter. The app is one phone column. */
.in-app .plans{grid-template-columns:minmax(0,1fr);max-width:520px}
.in-app .board h1 .l1{font-size:32px}
.sline{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:14px 14px 16px;background:var(--paper);color:var(--teal-dark);
  box-shadow: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),6px 8px 0 0 rgba(8,60,54,.16)}
.sline canvas{width:52px;height:auto;margin-top:2px}
.sline b{display:block;font:700 18px/1.2 var(--pxf)}
.sline span{display:block;margin-top:4px;font:600 14px/1.4 var(--pxf);color:#3d4a46}
.sline a{display:inline-block;margin-top:10px;font:700 12px/1.3 var(--tiny);text-transform:uppercase;color:var(--teal)}
.feats .from{margin-left:4px;font:700 12px/1 var(--tiny);color:#bfe8ff;white-space:nowrap}

/* the explainer's previews: the dashboard's pieces, small */
.pvb{flex:1;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:10px 12px;background:var(--paper);color:var(--teal-dark);overflow:hidden}
.pvb p{margin:0;font:600 11px/1.3 var(--pxf);color:var(--muted)}
.pvb b{font-family:var(--pxf)}
.pt{display:inline-block;padding:3px 5px 2px;font:400 7px/1.3 'Press Start 2P',monospace;text-transform:uppercase;white-space:nowrap}
.pt.aca{background:var(--teal);color:#fff;box-shadow:2px 2px 0 var(--teal-dark)}
.pt.lang{background:#fff6c8;color:#6b3f00;box-shadow:0 0 0 2px #e9a90f}
.pt.ok{background:#e3f7e6;color:#127a34;box-shadow:0 0 0 2px #7fd08c}
.pt.prv{background:#1f4fa8;color:#fff;box-shadow:2px 2px 0 #0e1f4d}
.pchip{display:flex;align-items:center;gap:8px;padding:7px 9px;background:#fff;box-shadow:0 -2px 0 0 var(--teal-dark),0 2px 0 0 var(--teal-dark),-2px 0 0 0 var(--teal-dark),2px 0 0 0 var(--teal-dark)}
.pchip .tl{font:400 7px/1.5 'Press Start 2P',monospace;text-transform:uppercase;color:var(--muted)}
.pchip b{font:700 14px/1 var(--pxf)}
.coins{display:inline-flex;gap:3px}
.coins i{width:14px;height:14px;background:var(--coin);box-shadow:inset -2px -2px 0 #e9a90f,inset 2px 2px 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.pig i:not(.e){background:var(--pink);box-shadow:inset -2px -2px 0 #c9347d,inset 2px 2px 0 #ffc2dc,0 0 0 2px var(--plum)}
.pl{padding:8px 10px;background:#fff;box-shadow:0 0 0 2px var(--teal-dark)}
.plt{display:flex;align-items:center;gap:5px;margin-bottom:7px}
.plt em{margin-left:auto;font:400 7px/1 'Press Start 2P',monospace;font-style:normal;text-transform:uppercase;color:var(--muted)}
.pl dl{display:grid;grid-template-columns:repeat(4,auto);gap:4px 12px;margin:0;justify-content:start}
.pl.small dl{grid-template-columns:repeat(2,auto)}
.pl dl div{min-width:0}
.pl dt{font:400 6px/1.5 'Press Start 2P',monospace;text-transform:uppercase;color:var(--muted)}
.pl dd{margin:0;font:700 13px/1.2 var(--pxf);color:var(--teal-dark)}
.pnote2{margin:7px 0 0!important;font:600 10px/1.3 var(--pxf)!important}
.pvrow{flex-direction:row;align-items:stretch}
.pvrow .pl{flex:1.1;display:flex;flex-direction:column;justify-content:center}
.pp{flex:1;display:grid;gap:5px;align-content:center;padding:8px 10px;background:#fff;box-shadow:0 0 0 2px var(--teal-dark)}
.pp .pt2{font:400 6px/1.4 'Press Start 2P',monospace;text-transform:uppercase;color:var(--muted)}
.pp b{font:400 18px/1 'Press Start 2P',monospace;color:var(--teal-dark)}
.ptm{display:block;height:8px;background:#e6dcc4;box-shadow:inset 0 0 0 2px var(--teal-dark)}
.ptm i{display:block;width:60%;height:100%;background:#43d35b}
.pclaim,.ppass{display:flex;align-items:center;justify-content:center;min-height:22px;font:400 8px/1 'Press Start 2P',monospace;text-transform:uppercase}
.pclaim{background:var(--pink);color:#fff;text-shadow:1px 1px 0 var(--plum);box-shadow:0 0 0 2px var(--plum)}
.ppass{background:#fff;color:var(--teal-dark);box-shadow:0 0 0 2px var(--teal-dark)}
.pbuy{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.pbuy li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 9px;background:#fff;box-shadow:0 0 0 2px #e6dcc4}
.pbuy b{font-size:13px}
.pchip.sc{display:grid;gap:2px;justify-items:start}
.pchip.sc .big{font:400 22px/1 'Press Start 2P',monospace;color:var(--teal-dark)}
.pchip.sc small{font:600 11px/1.2 var(--pxf);color:var(--muted)}
.pscale{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.pscale i{height:12px;box-shadow:0 0 0 2px var(--teal-dark)}
.pscale i.me{outline:3px solid var(--pink);outline-offset:1px}
.pends{display:flex;justify-content:space-between}
.pends span{font:400 7px/1 'Press Start 2P',monospace;color:var(--muted)}
.pcard3{display:flex;gap:10px;align-items:center;padding:8px 10px;background:#fff;border-top:3px solid #0E4B54;font:13px/1.3 -apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:#14232A}
.pcard3 img{width:44px;height:44px;border-radius:50%;flex:none}
.pcard3 small{display:block;font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#5E7076}
.pcard3 b{display:block;font:600 16px/1.2 Georgia,serif}
.pcard3 span{font-size:10px;color:#5E7076}
.pcall3{display:flex;justify-content:space-between;gap:6px;padding:6px 10px;background:#E7EFF0;border-radius:8px;font:11px/1.3 -apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:#5E7076}
.pcall3 b{color:#14232A;font-size:12px}
.pbtn3{padding:7px;text-align:center;border-radius:999px;background:#C0503A;color:#fff;font:700 11px/1.2 -apple-system,'Segoe UI',Roboto,Arial,sans-serif}
/* the Pig Pen preview: the Pig Pen tab's lead card and its "How the price falls" chart, small */
.pvpen{gap:8px;padding:8px 10px}
.ppl2{display:flex;flex-direction:column;gap:5px;padding:7px 9px}
.ppl2 .plt{margin:0}
.ppl2 dl{grid-template-columns:repeat(2,auto)}
.pbuy2{display:flex;align-items:baseline;gap:8px}
.pbuy2 .pt2{font:400 6px/1.4 'Press Start 2P',monospace;text-transform:uppercase;color:var(--muted)}
.pbuy2 b{font:400 14px/1 'Press Start 2P',monospace;color:var(--teal-dark)}
.plad{display:flex;align-items:flex-end;gap:2px;height:18px;padding:2px;background:#e6dcc4;box-shadow:0 0 0 2px var(--teal-dark)}
.plad i{flex:1;background:#bdb8ac}
.plad i.now{background:var(--pink)}
.plad i.now.fl{background:var(--lime)}
.ppl2 .pclaim{min-height:20px}
.pwhy{margin:0!important;font:600 10px/1.2 var(--pxf)!important;color:#7a1f4a!important}
.pfall{align-content:center}
.pfall canvas{width:100%;height:auto;image-rendering:pixelated}
.pcax{display:flex;justify-content:space-between;font:400 6px/1.4 'Press Start 2P',monospace;text-transform:uppercase;color:#c9347d}
.pcax .g{color:#127a34}