.demo-calendar {
  background: var(--ink-2);
  border: 1px solid var(--line-ink);
  border-radius: var(--r-card);
  color: var(--chalk);
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: clamp(.8rem, 3vw, 1.35rem);
}
.demo-calendar__header { align-items: center; display: flex; justify-content: space-between; gap: .75rem; }
.demo-calendar__header h2 { font-size: var(--t-lg); margin: 0; color: var(--chalk); }
.demo-calendar__badge { background: var(--brass); border-radius: var(--r-pill); color: var(--brass-ink); font-size: .62rem; font-weight: 800; letter-spacing: .1em; padding: .2rem .45rem; white-space: nowrap; }
.demo-calendar__note { color: var(--chalk-2); font-size: var(--t-sm); margin: .45rem 0 .8rem; max-width: 52ch; }
.demo-calendar__message { margin: .8rem 0 0; }
.demo-calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 0; }
.demo-calendar__day { border-left: 1px solid var(--line-ink); min-width: 0; padding: .35rem; }
.demo-calendar__day:first-child { border-left: 0; }
.demo-calendar__day h3 { color: var(--chalk-2); font-size: var(--t-xs); margin: 0 0 .6rem; }
.demo-calendar__none { color: var(--chalk-2); font-size: var(--t-xs); }
.demo-calendar__slot--open {
  background: color-mix(in srgb, var(--verdigris) 22%, var(--ink-2));
  border: 1px dashed var(--verdigris);
  border-radius: var(--r-tag);
  color: var(--chalk);
  display: grid;
  font-size: var(--t-xs);
  gap: .25rem;
  margin: .3rem 0;
  overflow-wrap: anywhere;
  padding: .35rem;
}
.demo-calendar__slot strong { color: var(--brass); font-size: .65rem; letter-spacing: .05em; }

@media (max-width: 720px) {
  .demo-calendar { padding: .8rem; }
  .demo-calendar__header h2 { font-size: var(--t-md); }
  .demo-calendar__badge { font-size: .55rem; letter-spacing: .06em; padding: .16rem .35rem; }
  .demo-calendar__note { font-size: var(--t-xs); }
  .demo-calendar__grid { display: block; }
  .demo-calendar__day { border-left: 0; border-top: 1px solid var(--line-ink); padding: .5rem 0; }
  .demo-calendar__day h3 { margin-bottom: .25rem; }
  .demo-calendar__slot--open { display: inline-grid; margin: .25rem .3rem .25rem 0; max-width: 100%; }
}

/* Keep-this-number: the path from "I just heard my business answer" to owning the line.
   Quiet enough not to fight the number above it, present enough that an owner never has to
   wonder what happens when the thirty minutes run out. */
/* The card an owner sees the moment their own line answers. It is the only place
   on this screen that names a price, so every line of it has to be readable:
   --ink on this site is the DARK PAGE COLOUR, not text. Use the chalk tokens. */
.keep-line { margin-top: 1.1rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line-ink);
  border-radius: var(--r-card); background: var(--ink-2); color: var(--chalk); }
.keep-line[hidden] { display: none; }
.keep-line h3 { margin: 0 0 .35rem; font-size: 1.05rem; color: var(--chalk); }
.keep-line p { margin: 0 0 .5rem; color: var(--chalk-2); font-size: .95rem; line-height: 1.5; }
.keep-line .keep-line-price { color: var(--chalk); font-weight: 600; }
.keep-line .btn { margin-top: .35rem; }