/* ---------- Consultancy booking page: one checkout receipt + a sticky note (builds on intro.css + work.css) ---------- */
.book { position: relative; min-height: 100%; padding: 0 var(--pad); overflow-x: clip; }
.book__head,
.book__desk,
.book__help { max-width: 760px; margin: 0 auto; }

.book__head { padding: 140px 0 48px; }
.book__head .title { font-size: clamp(36px, 5vw, 64px); }
.book__back {
  display: inline-block;
  margin-bottom: 36px;
  font-size: 11px;
  color: var(--muted);
  transition: color 0.2s;
}
.book__back:hover { color: var(--ink); }

/* The desk: the receipt, with the note pinned beside it */
.book__desk {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 250px);
  justify-content: space-between;
  align-items: start;
  gap: 48px;
}

/* ---------- The billing machine: a metal slot the receipt prints out of ---------- */
.printer { position: relative; }
.printer__slot {
  position: relative;
  z-index: 2;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f1f1f1 0%, #d6d6d6 40%, #b4b4b4 78%, #9c9c9c 100%);
  border: 1px solid #9a9a9a;
}
/* the dark slit the paper comes out of */
.printer__slot::before {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 11px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, #0f0f0f, #3a3a3a);
}
/* a thin highlight along the top edge */
.printer__slot::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; top: 3px;
  height: 1px;
  background: rgba(255, 255, 255, 0.9);
}
/* the paper starts at the slit; anything above it is hidden, so it reads as coming out */
.printer__out {
  position: relative;
  z-index: 1;
  margin: -14px 18px 0;
  overflow: hidden;
}
.printer .bill { border-top: 0; padding-top: 36px; }
/* the page script adds .is-printing once the machine is on screen (on phones it sits below the note) */
.js .printer .bill { transform: translate3d(0, -100%, 0); }
.js .printer.is-printing .bill { animation: print-out 2.8s cubic-bezier(0.3, 0, 0.4, 1) 0.3s both; }
/* fed out in short bursts, like a real receipt printer */
@keyframes print-out {
  0%   { transform: translate3d(0, -100%, 0); }
  14%  { transform: translate3d(0, -84%, 0); }
  20%  { transform: translate3d(0, -84%, 0); }
  38%  { transform: translate3d(0, -60%, 0); }
  44%  { transform: translate3d(0, -60%, 0); }
  64%  { transform: translate3d(0, -30%, 0); }
  70%  { transform: translate3d(0, -30%, 0); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .printer .bill,
  .js .printer.is-printing .bill { transform: none; animation: none; }
}

/* ---------- The receipt (same look as the receipt in Proof of concept) ---------- */
.bill {
  padding: 32px 30px 44px;
  background: var(--white);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  /* torn bottom edge */
  -webkit-mask: radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0 / 14px 100% repeat-x;
          mask: radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0 / 14px 100% repeat-x;
}
.bill hr { border: 0; border-top: 1px dashed rgba(0, 0, 0, 0.35); margin: 14px 0; }
.bill__brand {
  font-family: var(--helvetica);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.04em;
  text-align: center;
}
.bill__center { text-align: center; color: var(--muted); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.bill__label { color: var(--muted); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
.bill__items { list-style: none; }
.bill__items li,
.bill__row { display: flex; justify-content: space-between; gap: 16px; }
.bill__items li { padding: 2px 0; }
.bill__total {
  position: relative;
  width: max-content;
  margin: 10px auto 26px;
  padding: 0 6px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.bill__total small { font-size: 11px; letter-spacing: 0.04em; }
.bill__total svg { position: absolute; inset: -12px -14px; width: calc(100% + 28px); height: calc(100% + 24px); overflow: visible; }
.bill__fine { margin-top: 10px; font-size: 9.5px; letter-spacing: 0.02em; text-transform: none; line-height: 1.5; }
.bill__barcode {
  height: 34px;
  margin-top: 20px;
  background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px, #111 4px 5px, transparent 5px 8px, #111 8px 11px, transparent 11px 12px);
}

/* the PayPal button */
.pay { font-family: var(--helvetica); }
.pay__soon {
  display: grid;
  place-items: center;
  min-height: 52px;
  border: 1.5px dashed var(--line);
  border-radius: 6px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}
.pay__soon[hidden] { display: none; }
/* PayPal's hosted button also prints the product name, price and description set in PayPal;
   the receipt already says all of it */
.pay #paypal-container-THHD9WGB8ZQNC :is(.item-header, .item-description) { display: none; }

/* ---------- The sticky note: how it works ---------- */
.memo {
  --r: 3deg;
  margin-top: 72px;
  padding: 30px 22px 26px;
  background-color: var(--paper);
  background-image: var(--grain-light), var(--fibers-light);
  border: 1px solid var(--line);
}
/* a strip of tape holding it down */
.memo::before {
  content: "";
  position: absolute;
  top: -11px; left: 50%;
  width: 84px; height: 22px;
  margin-left: -42px;
  background: rgba(225, 222, 214, 0.75);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transform: rotate(-4deg);
}
.memo__title {
  font-family: var(--hand);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  margin-bottom: 14px;
}
.memo__list { list-style: none; counter-reset: memo; font-family: var(--hand); font-size: 16px; line-height: 1.3; }
.memo__list li { counter-increment: memo; position: relative; padding-left: 24px; margin-bottom: 10px; }
.memo__list li:last-child { margin-bottom: 0; }
.memo__list li::before { content: counter(memo) "."; position: absolute; left: 0; }
.memo__list em { font-style: normal; color: var(--muted); }
.book__desk .obj:nth-child(2) { transition-delay: 0.15s; }

.book__help { padding: 64px 0 96px; font-size: 12px; color: var(--soft); }
.book__help a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Tablets and phones: one column, the note first, then the receipt ---------- */
@media (max-width: 760px) {
  .book__head,
  .book__desk,
  .book__help { max-width: 440px; }
  .book__head { padding: 130px 0 36px; }
  .book__desk { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .memo { order: -1; margin-top: 0; --r: -1.5deg; }
  .book__help { padding: 48px 0 72px; }
}
@media (max-width: 640px) {
  .book__head { padding-top: 160px; } /* the menu stacks into a column on phones */
}
@media (max-width: 400px) {
  .bill { padding-left: 20px; padding-right: 20px; }
}