/* The bill: a small receipt at the end of every page that tallies this visit */
.bill {
  width: min(100%, 300px); margin: 40px 0 0; padding: 26px 20px 30px; transform: rotate(-1.2deg);
  font: 400 .8125rem/1.6 "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; color: #15130F; text-align: left;
  background: #FFFFFF; box-shadow: 0 18px 30px -20px var(--shadow, rgba(0,0,0,.3));
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
}
.bill .b-head { text-align: center; font-weight: 600; letter-spacing: .02em; }
.bill .b-sub { text-align: center; font-size: .75rem; opacity: .65; }
.bill hr { border: 0; border-top: 1px dashed currentColor; opacity: .4; margin: 12px 0; }
.bill .b-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; }
.bill .b-total { font-weight: 600; font-size: 1.0625rem; }
.bill .b-note { margin-top: 10px; text-align: center; text-wrap: balance; font-size: .75rem; opacity: .7; }
.bill .b-code {
  height: 24px; margin-top: 14px; opacity: .75;
  background:
    repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px, currentColor 5px 6px, transparent 6px 9px),
    repeating-linear-gradient(90deg, transparent 0 11px, currentColor 11px 14px, transparent 14px 17px);
}
.bill .b-tip-row { margin-top: 4px; }
.bill .b-tip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 0; border-radius: 999px;
  font: inherit; font-weight: 600; color: inherit; background: #F2F2F4; cursor: pointer; transition: background .2s, transform .15s;
}
.bill .b-tip:hover { background: #E9E9EC; }
.bill .b-tip:active { transform: scale(.96); }
.bill .b-tip[aria-pressed="true"] { background: #E4F222; }
.bill .b-tip .heart { display: inline-block; }
.bill .b-tip.pop .heart { animation: heartpop .5s cubic-bezier(.3, 1.6, .5, 1); }
.bill .b-tip:focus-visible { outline: 2px solid #15130F; outline-offset: 2px; }
@keyframes heartpop { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } }

/* The email under Let's talk copies on click and says so */
.email {
  font: inherit; color: var(--muted); background: none; border: 0; padding: 2px 10px; border-radius: 8px;
  cursor: pointer; text-decoration: underline dotted; text-underline-offset: 4px; transition: background .2s, color .2s;
}
.email:hover { color: var(--ink); }
.email.copied { text-decoration: none; background: #E4F222; color: #15130F; font-weight: 600; }
.email:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }