:root{
  --gold:#B89C1D;--blue:#0B3A82;--teal:#2F7F6F;--sage:#6FAF9C;
  --black:#000;--white:#fff;--off:#F5F3ED;--ink:#1A1A1A;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:'Inter','Montserrat',system-ui,sans-serif;background:var(--black);color:var(--off);font-size:16px;line-height:1.5;display:flex;flex-direction:column;overflow:hidden}
header{display:flex;align-items:center;gap:12px;padding:calc(10px + var(--safe-t)) 14px 10px;background:var(--black);border-bottom:2px solid var(--gold)}
header img{height:40px;width:auto}
header h1{font-family:'Montserrat',sans-serif;font-size:20px;font-weight:900;margin:0;color:var(--white);line-height:1.1}
header h1 small{display:block;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--sage)}
header .count{margin-left:auto;background:var(--blue);color:#fff;font-weight:700;border-radius:20px;padding:4px 12px;font-size:14px}
header .net{background:var(--gold);color:#000;font-weight:700;border-radius:20px;padding:4px 10px;font-size:13px;margin-left:auto}
header .net:not([hidden]) ~ .count{margin-left:0}
header .install{background:transparent;color:var(--gold);border:2px solid var(--gold);padding:6px 12px;font-size:14px;margin-left:auto}
header .install:not([hidden]) ~ .count{margin-left:0}
[hidden]{display:none!important}

#map{flex:1;min-height:0;background:#dfe6dc}
.leaflet-container{font-family:inherit}
.leaflet-popup-content img{display:block;width:100%;max-width:220px;border-radius:4px;margin-top:6px}

.bar{display:flex;gap:8px;padding:10px 12px calc(10px + var(--safe-b));background:var(--black);border-top:2px solid var(--gold)}
button{font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.03em;border:0;border-radius:4px;padding:14px 12px;cursor:pointer;transition:transform .15s}
button:active{transform:translateY(1px)}
.btn-gold{background:var(--gold);color:#000;flex:2}
.btn-blue{background:var(--blue);color:#fff;flex:1}
.btn-teal{background:var(--teal);color:#fff;flex:1}
.btn-ghost{background:transparent;color:#fff;border:2px solid #fff;flex:1}
button:disabled{opacity:.5}

.status{position:absolute;left:12px;right:12px;top:calc(72px + var(--safe-t));z-index:500;background:rgba(0,0,0,.85);color:#fff;padding:10px 14px;border-radius:8px;font-size:14px;display:none}
.status.show{display:block}

/* Drawer */
.drawer{position:fixed;inset:0;background:var(--off);color:var(--ink);z-index:1000;display:none;flex-direction:column}
.drawer.open{display:flex}
.drawer header{background:var(--black);color:#fff}
.drawer .body{flex:1;overflow:auto;padding:14px}
.lead{background:#fff;border-radius:8px;box-shadow:0 4px 12px rgba(11,58,130,.08);padding:14px;margin-bottom:12px;border-left:5px solid var(--teal)}
.lead.pending{border-left-color:var(--gold)}
.lead .addr{font-weight:700;color:var(--blue);font-size:17px;min-height:1.4em}
.lead .addr:empty::before{content:"(address pending — tap to type it)";color:#777;font-weight:600}
.lead .meta{font-size:14px;color:#555;margin:4px 0 10px}
.lead .badge{display:inline-block;background:var(--gold);color:#000;font-weight:700;font-size:13px;border-radius:12px;padding:1px 9px;margin-left:6px;vertical-align:middle}
.lead .note{width:100%;border:1px solid #ccc;border-radius:4px;padding:8px;font:inherit;font-size:15px;margin-bottom:8px}
.lead .acts{display:flex;gap:8px}
.lead .acts + .acts{margin-top:8px}
.lead .acts button{padding:10px;font-size:14px;flex:1}
.lead .acts .btn-del{color:#a00;border-color:#a00}
.lead .shot{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.lead .shot img{width:96px;height:72px;object-fit:cover;border-radius:6px;border:2px solid var(--sage);cursor:pointer;flex:none}
.lead .shot .acts{flex:1;margin:0;flex-wrap:wrap}
.lead .shot .btn-ghost{color:var(--ink);border-color:#bbb}
.empty{text-align:center;padding:40px 20px;color:#555}
.empty b{color:var(--blue)}

/* Photo viewer */
.photo-body{padding:0!important;background:#000;display:flex;align-items:center;justify-content:center}
.photo-body img{max-width:100%;max-height:100%;object-fit:contain}

/* Postcard */
.pc-wrap{padding:14px;background:#888}
.postcard{background:#fff;width:100%;max-width:600px;margin:0 auto 20px;aspect-ratio:6/4;display:grid;grid-template-columns:1fr 1fr;color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.3);overflow:hidden}
.pc-front{background:#000;color:#fff;padding:5%;display:flex;flex-direction:column;justify-content:space-between}
.pc-front img{width:55%;max-width:160px}
.pc-front h2{font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(14px,3.6vw,24px);line-height:1.15;margin:0;color:#fff}
.pc-front h2 span{color:var(--gold)}
.pc-front .tag{color:var(--sage);font-size:clamp(10px,2.2vw,14px);font-weight:600}
.pc-back{padding:5%;display:flex;flex-direction:column;gap:6px;font-size:clamp(9px,2vw,13px);line-height:1.4;position:relative}
.pc-back p{margin:0}
.pc-back .to{margin-top:auto;border-top:1px solid #ccc;padding-top:6px;font-weight:700;color:var(--blue)}
.pc-back .foot{font-size:.85em;color:#555}
.pc-back .stamp{position:absolute;top:4%;right:4%;width:14%;aspect-ratio:1;border:1px dashed #999;font-size:8px;display:flex;align-items:center;justify-content:center;color:#999;text-align:center}
.pc-note{background:#fff;border-radius:8px;padding:12px;font-size:14px;max-width:600px;margin:0 auto;color:#555}

/* ===================== Demo mockup (only with ?demo=1; see mock.js) ===================== */
.demo-strip{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 10px;padding:8px 14px;background:#111;border-bottom:1px solid #333;font-size:16px}
.demo-strip .co{background:transparent;color:var(--gold);border:0;padding:2px 0;font-size:16px;font-weight:700;text-align:left;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-strip .card{color:var(--sage);font-size:14px;white-space:nowrap}
.demo-strip .links{grid-column:1/-1;display:flex;gap:6px}
.demo-strip .links button{flex:1;background:#222;color:#fff;border:1px solid #444;padding:8px 10px;font-size:15px}
.demo-banner{background:#a00;color:#fff;font-weight:700;padding:8px 14px;font-size:16px}
body.demo .status{top:calc(150px + var(--safe-t))}

.demo-drawer{background:var(--off)}
.auth-body{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:24px!important}
.auth-body .auth-icon{width:96px;height:96px;border-radius:22px}
.auth-body h2{font-family:'Montserrat',sans-serif;font-size:34px;font-weight:900;letter-spacing:-.02em;margin:0;color:#15233F}
.auth-body h2 .less{color:#F28C28}
.auth-body p{margin:0;max-width:420px}
.auth-body #authStep1,.auth-body #authStep2{width:100%;max-width:420px;display:flex;flex-direction:column;gap:12px}
.auth-body label{display:flex;flex-direction:column;gap:4px;font-size:16px;font-weight:600;text-align:left;color:#333}
.auth-body input{font:inherit;font-size:17px;padding:12px;border:1px solid #bbb;border-radius:6px;background:#fff;width:100%}
.lede{font-size:20px;font-weight:700;color:var(--ink)}
.fine{font-size:16px;color:#555}
.demo-tag{margin-top:24px!important;color:#888}
.wide{width:100%}
.btn-ghost.dark{color:var(--ink);border-color:#999}

.form-body{display:flex;flex-direction:column;gap:12px;max-width:560px;width:100%;margin:0 auto}
.form-body section{display:flex;flex-direction:column;gap:12px}
.form-body label{display:flex;flex-direction:column;gap:4px;font-size:16px;font-weight:600;color:#333}
.form-body input[type=text],.form-body input:not([type]),.form-body input[type=email],.form-body input[type=tel]{font:inherit;font-size:17px;padding:12px;border:1px solid #bbb;border-radius:6px;background:#fff;width:100%}
.form-body .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-body h3{font-family:'Montserrat',sans-serif;font-size:18px;margin:14px 0 0;color:var(--blue)}
.form-body p{margin:0;font-size:16px}
.check{flex-direction:row!important;align-items:center;gap:10px!important;font-weight:600}
.check input{width:22px;height:22px}
.choices{display:flex;flex-direction:column;gap:8px}
.choices label{flex-direction:row;align-items:center;gap:10px;background:#fff;border:1px solid #ccc;border-radius:6px;padding:12px;font-weight:400}
.choices label b{color:var(--blue)}
.choices input{width:22px;height:22px}
.logo-pick{display:flex;align-items:center;gap:14px}
.logo-pick img{width:140px;height:94px;object-fit:contain;background:#000;border-radius:6px}

.btn-mail{background:var(--blue);color:#fff;flex:1}
.btn-mail:disabled{background:#889;opacity:.7}
.lead .why{font-size:16px;color:#7a5a00;background:#fff6d6;border-radius:6px;padding:8px 10px;margin:8px 0 0}
.lead .mailed{margin-bottom:8px}
.badge.gold{background:var(--gold);color:#000;font-size:14px;border-radius:12px;padding:3px 10px;font-weight:700;display:inline-block;margin:0}
.track{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:14px;color:#888}
.track span{padding:2px 8px;border-radius:10px;background:#eee}
.track span.done{background:var(--teal);color:#fff}
.track i{flex:1;height:2px;background:#ddd;max-width:40px}

.sheet-wrap{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1500;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:#fff;color:var(--ink);width:100%;max-width:520px;border-radius:16px 16px 0 0;padding:20px 18px calc(20px + var(--safe-b));display:flex;flex-direction:column;gap:12px}
.sheet h3{font-family:'Montserrat',sans-serif;margin:0;font-size:20px;color:var(--blue)}
.sheet-addr{font-size:17px;line-height:1.4;background:var(--off);border-radius:8px;padding:12px}
.sheet-line{font-size:16px}
.sheet-send{font-size:16px;font-weight:700;color:var(--teal);display:flex;align-items:center;gap:10px}
.spin{width:18px;height:18px;border:3px solid #cfe;border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.sheet .acts{display:flex;gap:8px}
.sheet .acts button{flex:1}

/* Neighborhood mailing */
.btn-hood{background:var(--teal);color:#fff;flex:1}
.btn-hood:disabled{background:#889;opacity:.7}
.badge.teal{background:var(--teal);color:#fff;font-size:14px;border-radius:12px;padding:3px 10px;font-weight:700;display:inline-block}
.sheet-wrap.hood{background:transparent;pointer-events:none}
.sheet-wrap.hood .sheet{pointer-events:auto;box-shadow:0 -8px 30px rgba(0,0,0,.35)}
.radius{display:flex;gap:8px}
.radius button{flex:1;background:#fff;color:var(--blue);border:2px solid var(--blue);padding:10px;font-size:16px}
.radius button.on{background:var(--blue);color:#fff}
.sheet .why{font-size:16px;color:#7a5a00;background:#fff6d6;border-radius:6px;padding:8px 10px}
.sheet .acts .btn-teal{flex:1}

/* Budget */
.lead .proof{display:inline-block;margin:6px 0 0;font-size:16px;font-weight:700;color:var(--blue)}
.lead .left{font-size:16px;color:#555;margin-top:8px}
.lead .left.warn{color:#7a5a00;font-weight:700}
.bar-track{height:12px;background:#ddd;border-radius:6px;overflow:hidden}
.bar-fill{height:100%;background:var(--teal);transition:width .3s}
.bar-fill.warn{background:#c47a00}

.alert{background:#a00;color:#fff;font-weight:700;padding:12px;border-radius:8px;font-size:16px}
.card-box{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border-radius:8px;padding:14px;font-size:16px}
.card-box button{flex:0 0 auto;padding:10px 14px}
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:#fff;border-radius:8px;padding:12px;text-align:center}
.stat b{display:block;font-size:24px;color:var(--blue)}
.stat span{font-size:14px;color:#555}
.hist{display:flex;justify-content:space-between;gap:10px;background:#fff;border-radius:8px;padding:12px;font-size:16px}
.hist span{font-size:14px;color:#555}
.hist .amt{text-align:right;font-weight:700;white-space:nowrap}
.hist .amt.failed{color:#a00}
.invite{display:flex;gap:8px}
.invite input{flex:1}
.invite button{flex:0 0 auto;padding:10px 16px}
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;font-size:16px}
.tbl th,.tbl td{padding:10px 8px;text-align:left;border-bottom:1px solid #eee;vertical-align:top}
.tbl th{background:var(--blue);color:#fff;font-size:14px}
.tbl td span{font-size:14px;color:#555}

/* Postcard at the real mailed proportions (6.25 x 4.25 in) with the mail service's address zone */
.postcard.mailsize{aspect-ratio:6.25/4.25}
/* Back of the card as a grid: greeting + main paragraph across the top, the rest down the left,
   and the mail service's address zone bottom-right (copy never runs under it). */
.postcard.mailsize .pc-back{display:grid;grid-template-columns:38% 1fr;grid-template-rows:auto auto auto auto 1fr;gap:3px 4%;padding:4% 0 0 4%;font-size:clamp(7px,1.7vw,11px)}
.postcard.mailsize .pc-back p{grid-column:1/-1;margin-right:4%}
.postcard.mailsize .pc-back p:nth-of-type(n+3){grid-column:1;margin-right:0}
.postcard.mailsize .pc-back .foot{align-self:end;padding-bottom:6%}
.addr-zone{grid-column:2;grid-row:3/6;background:repeating-linear-gradient(45deg,#f3f3f3,#f3f3f3 6px,#e9e9e9 6px,#e9e9e9 12px);border-left:1px dashed #bbb;border-top:1px dashed #bbb;display:flex;flex-direction:column;justify-content:space-between;padding:4%;font-size:clamp(7px,1.6vw,11px);color:#777}
.addr-zone b{color:#333;font-size:clamp(8px,1.9vw,12px);line-height:1.35}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-wrap .tbl{min-width:420px}

/* Billing: charge on demand */
.test-banner{background:#FFF4E5;border:1px solid #F28C28;color:#7A3E00;border-radius:8px;padding:10px 12px;font-size:16px;font-weight:600}
.how{background:#fff;border-left:4px solid var(--gold);border-radius:8px;padding:12px;font-size:16px;line-height:1.45}
.test-cards{display:flex;flex-direction:column;gap:8px}
.test-cards .acts{display:flex;gap:8px}
.test-cards .acts button{flex:1;padding:10px;font-size:15px}

/* Website auto-fill in company setup */
.lookup{display:flex;flex-direction:column;gap:10px;background:#fff;border:2px solid var(--gold);border-radius:10px;padding:14px}
.lookup input{font:inherit;font-size:17px;padding:12px;border:1px solid #bbb;border-radius:6px;background:#fff;width:100%}
.lookup .fine{margin:0}
.form-body label .hint{font-size:16px;font-weight:600}
.form-body label.f-found input{border-color:#2E7D4F;background:#F2FAF4}
.form-body label.f-found .hint{color:#2E7D4F}
.form-body label.f-confirm input{border-color:#2E7D4F;background:#F2FAF4}
.form-body label.f-confirm .hint{color:#8A4B00}
.form-body label.f-missing input{border-color:#F28C28;background:#FFF6EC}
.form-body label.f-missing .hint{color:#B5530A}
.form-body label.check{display:grid;grid-template-columns:22px 1fr;column-gap:10px;align-items:center}
.form-body label.check .hint{grid-column:2}
.hint-line{margin:0;font-size:16px;font-weight:600}
.hint-line.found{color:#2E7D4F}
.hint-line.missing{color:#B5530A}

/* ===================== Knockless colors (demo / knockless.app only) =====================
   Navy #15233F, porch-light orange #F28C28, cream #FBF6EC. Swapping the shared color tokens
   recolors the whole app; postcards put each company's own brand colors back (below). */
body.demo{
  --black:#15233F;   /* page, headers, bottom bars */
  --gold:#F28C28;    /* main buttons, borders, badges */
  --blue:#2E5A9C;    /* second buttons, lead addresses (lighter navy so it shows on navy) */
  --teal:#15233F;    /* photo / neighborhood buttons, progress */
  --sage:#F7C48C;    /* small text on navy */
  --off:#FBF6EC;     /* drawer backgrounds */
  --ink:#15233F;
}
body.demo .btn-gold{color:#15233F}
body.demo header{border-bottom-color:#F28C28}
body.demo .bar{border-top-color:#F28C28}
body.demo .demo-strip{background:#0F1A30;border-bottom-color:#26375C}
body.demo .demo-strip .links button{background:#1E2F52;border-color:#34497A}
body.demo .lead{box-shadow:0 4px 12px rgba(21,35,63,.10)}
body.demo .btn-mail{background:#2E5A9C}
body.demo .radius button{color:#15233F;border-color:#15233F}
body.demo .radius button.on{background:#15233F;color:#FBF6EC}
body.demo .spin{border-color:#FCE0C2;border-top-color:#F28C28}
body.demo .sheet-send{color:#15233F}
body.demo .bar-fill.warn{background:#C4501A}
/* postcards are the company's card, not Knockless: restore the Cool Water / company palette inside them */
body.demo .postcard{--gold:#B89C1D;--blue:#0B3A82;--teal:#2F7F6F;--sage:#6FAF9C;--black:#000;--ink:#1A1A1A}
body.demo .pc-wrap{background:#7C8496}

@media print{
  body{overflow:visible;background:#fff;display:block}
  header,.bar,#map,.status,.demo-strip,.demo-banner,.sheet-wrap,.drawer .body>*:not(.pc-wrap){display:none!important}
  .drawer{position:static;display:block!important}
  .drawer:not(#pcDrawer){display:none!important}
  .pc-wrap{background:#fff;padding:0}
  .postcard{page-break-inside:avoid;margin:0 0 .5in;box-shadow:none;border:1px solid #999;max-width:6in}
  .pc-note{display:none}
}