/* ==========================================================================
   Openn™ — "Invite our founder" booking popup (loaded on every page)
   One dialog, mounted by assets/js/coffee.js on first use: the lengths on
   the left, a cup on the right that fills with the booking, and a receipt
   with a stamp once Cashfree says paid.
   ========================================================================== */

/* ---------- the dialog ---------- */
.founder[hidden] {
  display: none;
}

.founder {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.founder__scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(10, 10, 10, 0.55);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.founder__sheet {
  position: relative;
  width: min(100% - 1.5rem, 78rem);
  height: calc(100% - 3vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: 1.25rem 1.25rem 0 0;
  background-color: var(--paper);
  transform: translateY(2.5rem);
  opacity: 0;
  transition: transform 0.45s var(--ease-out-quint), opacity 0.3s var(--ease);
}

.founder.is-open .founder__scrim {
  opacity: 1;
}

.founder.is-open .founder__sheet {
  transform: none;
  opacity: 1;
}

/* stays in the corner while the sheet scrolls under it */
.founder__close {
  position: sticky;
  top: 1rem;
  z-index: 2;
  float: right;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 1rem 1rem 0 0;
  border: 1px solid var(--grey-100);
  border-radius: 50%;
  background-color: #fff;
  color: var(--black);
  cursor: pointer;
  transition: border-color 0.2s var(--ease);
}

.founder__close:hover {
  border-color: var(--black);
}

.founder__close:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

.founder__close svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

body.founder-open {
  overflow: hidden;
}

.coffee-hero {
  padding-top: 3.5rem;
}

.coffee-hero__title:focus {
  outline: none;
}

.coffee.is-receipt .coffee-hero {
  display: none;
}

.coffee.is-receipt .coffee-done {
  padding-top: 3.5rem;
}

.coffee-done__close {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.coffee {
  --coffee: #4a2c1d;
  --crema: #c89a6a;
}

/* ---------- hero ---------- */
.coffee-hero__title {
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--black);
}

.coffee-hero__lede {
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--grey-500);
}

/* who you are booking: the founder, by face and name */
.coffee-founder {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.coffee-founder__avatar {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  border: 1px solid var(--grey-100);
  border-radius: 50%;
  background: var(--grey-50);
}

.coffee-founder__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coffee-founder__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.coffee-founder__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--black);
}

.coffee-founder__role {
  font-size: 0.875rem;
  color: var(--grey-400);
}

/* the fee note: said once, plainly, before anyone picks anything */
.coffee-fee {
  max-width: 36rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--grey-100);
  border-radius: var(--radius-md);
  background-color: #fff;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--grey-500);
}

.coffee-fee__label {
  display: block;
  padding-bottom: 0.25rem;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- layout ---------- */
.coffee-order__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: 1.5rem;
  align-items: start;
}

.coffee-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.coffee-form > .form-card {
  border: 1px solid var(--grey-50);
}

/* the step heading on each card: "01  Pick a cup" */
/* float takes the legend out of the fieldset border, so it lays out as an
   ordinary heading inside the card instead of notching the top edge */
.coffee-step {
  float: left;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  width: 100%;
  padding: 1.75rem 2rem 1rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--black);
}

.coffee-step + * {
  clear: both;
}

.coffee-step__num {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent);
}

/* ---------- 01: the menu ---------- */
.coffee-item {
  position: relative;
  display: block;
  padding: 1.25rem 2rem 1.25rem 3.75rem;
  border-top: 1px dotted var(--grey-100);
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}

.coffee-item:hover {
  background-color: var(--paper);
}

/* the radio, drawn as a ring that fills */
.coffee-item__radio {
  position: absolute;
  top: 1.5rem;
  left: 2rem;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--grey-200);
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.coffee-item__radio:checked {
  border-color: var(--black);
  box-shadow: inset 0 0 0 3.5px #fff, inset 0 0 0 9px var(--black);
}

.coffee-item__radio:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 3px;
}

.coffee-item:has(.coffee-item__radio:checked) {
  background-color: var(--paper);
}

.coffee-item__row {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}

.coffee-item__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--black);
}

/* café-menu dot leader between the name and the price */
.coffee-item__leader {
  flex: 1;
  min-width: 1rem;
  border-bottom: 2px dotted var(--grey-200);
  transform: translateY(-0.3rem);
}

.coffee-item__price {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--black);
}

.coffee-item__price--open {
  font-size: 0.9375rem;
  color: var(--grey-400);
}

.coffee-item__meta {
  display: block;
  padding-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--grey-400);
}

.coffee-item__time {
  display: inline-block;
  margin-right: 0.5rem;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black);
}

/* your blend: an amount field that opens under the row */
.coffee-blend {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin: 0 2rem 1.25rem 3.75rem;
  padding: 0 1rem;
  border: 1px solid var(--grey-200);
  border-radius: 0.75rem;
  background-color: #fff;
}

.coffee-menu:has(.coffee-item--blend .coffee-item__radio:checked) .coffee-blend {
  display: flex;
}

/* "Your choice" also picks its length, up to four hours */
/* .coffee-form fieldset resets margins, so this needs the extra weight */
.coffee-form .coffee-blend-len {
  display: none;
  margin: 0 2rem 1.5rem 3.75rem;
}

.coffee-form .coffee-menu:has(.coffee-item--blend .coffee-item__radio:checked) .coffee-blend-len {
  display: block;
}

.coffee-blend-len__label {
  margin-bottom: 0.625rem;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #101010;
}

.coffee-blend:focus-within {
  border-color: var(--black);
}

.coffee-blend__cur {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.coffee-blend__field {
  flex: 1;
  min-width: 0;
  height: 3.25rem;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--black);
}

.coffee-blend__field:focus {
  outline: none;
}

.coffee-blend__hint {
  font-size: 0.8125rem;
  color: var(--grey-400);
  white-space: nowrap;
}

.coffee-menu__error {
  margin: -0.5rem 2rem 1.25rem 3.75rem;
  padding-top: 0;
}

/* ---------- 02: when and how ---------- */
.coffee-when__body {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: 0.25rem 2rem 2rem;
}

.coffee-when legend.form-label,
.coffee-cal legend.form-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin-bottom: 0.875rem;
  padding: 0;
}

.coffee-cal[hidden],
.coffee-cal__off[hidden] {
  display: none;
}

.coffee-cal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.coffee-cal__tz {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-400);
}

.coffee-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* chips: meeting type and times share the same pill */
.coffee-chip,
.coffee-time {
  position: relative;
  display: inline-flex;
}

.coffee-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.coffee-chip span,
.coffee-time {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 1px solid var(--grey-100);
  border-radius: var(--radius-pill);
  background-color: #fff;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--black);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.coffee-chip span:hover,
.coffee-time:hover {
  border-color: var(--black);
}

.coffee-chip input:checked + span,
.coffee-time[aria-checked="true"] {
  border-color: var(--black);
  background-color: var(--black);
  color: #fff;
}

.coffee-chip input:focus-visible + span,
.coffee-time:focus-visible,
.coffee-day:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

/* the day strip: scrolls sideways on a phone, never wraps */
.coffee-days {
  display: flex;
  gap: 0.5rem;
  margin-inline: -2rem;
  padding: 0.125rem 2rem 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 2rem;
  scrollbar-width: thin;
}

.coffee-day {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  width: 4.25rem;
  height: 5rem;
  border: 1px solid var(--grey-100);
  border-radius: var(--radius-md);
  background-color: #fff;
  color: var(--black);
  font-family: var(--font-display);
  cursor: pointer;
  scroll-snap-align: start;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.coffee-day:hover:not(:disabled) {
  border-color: var(--black);
}

.coffee-day__dow {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-400);
}

.coffee-day__num {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.coffee-day__mon {
  font-size: 0.75rem;
  color: var(--grey-400);
}

.coffee-day[aria-checked="true"] {
  border-color: var(--black);
  background-color: var(--black);
  color: #fff;
}

.coffee-day[aria-checked="true"] .coffee-day__dow,
.coffee-day[aria-checked="true"] .coffee-day__mon {
  color: var(--white-70);
}

.coffee-day:disabled {
  cursor: default;
  opacity: 0.4;
  background-color: transparent;
}

/* "Today" gets the accent dot */
.coffee-day--today .coffee-day__dow::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 0.25rem;
  border-radius: 50%;
  background-color: var(--accent);
  vertical-align: 0.2em;
}

.coffee-times {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.coffee-time {
  border-style: solid;
}

.coffee-cal__status,
.coffee-cal__off {
  font-size: 0.875rem;
  color: var(--grey-400);
}

.coffee-cal__status:empty {
  display: none;
}

/* ---------- 03: about you ---------- */
.coffee-about .form-grid {
  border-top: 1px dotted var(--grey-100);
}

.coffee-about .form-cell:last-child {
  border-bottom: 0;
}

/* ---------- the cup + ticket ---------- */
.coffee-cup {
  position: sticky;
  top: 4.5rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--grey-50);
  border-radius: 1rem;
  background-color: #fff;
  overflow: hidden;
}

.coffee-cup__stage {
  display: flex;
  justify-content: center;
  padding: 1.5rem 1.5rem 0.5rem;
  background-color: var(--paper);
}

.coffee-cup__art {
  width: 100%;
  max-width: 15rem;
  height: auto;
  overflow: visible;
}

.coffee-cup__body,
.coffee-cup__handle,
.coffee-cup__saucer {
  fill: none;
  stroke: var(--black);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.coffee-cup__saucer--foot {
  stroke: var(--grey-200);
}

.coffee-cup__coffee {
  fill: var(--coffee);
}

.coffee-cup__crema {
  fill: var(--crema);
}

/* the liquid rises to --level (0–1) of the cup's 109-unit inside;
   JS sets it, and the wave rolls sideways while it sits */
.coffee-cup__liquid {
  --level: 0.62;
  transform: translateY(calc((1 - var(--level)) * 109px));
  transition: transform 0.9s var(--ease-out-quint);
}

.coffee-cup__coffee,
.coffee-cup__crema {
  animation: coffee-wave 3.2s linear infinite;
}

@keyframes coffee-wave {
  from { transform: translateX(0); }
  to { transform: translateX(-60px); }
}

/* steam: three wisps, drawn up and faded; the bigger the cup, the more rise */
.coffee-cup__wisp {
  fill: none;
  stroke: var(--grey-200);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  opacity: 0;
  animation: coffee-steam 3s var(--ease) infinite;
}

.coffee-cup__wisp--2 { animation-delay: 0.9s; }
.coffee-cup__wisp--3 { animation-delay: 1.8s; }

[data-steam="1"] .coffee-cup__wisp--1,
[data-steam="1"] .coffee-cup__wisp--3,
[data-steam="2"] .coffee-cup__wisp--2 {
  display: none;
}

@keyframes coffee-steam {
  0% { stroke-dashoffset: 70; opacity: 0; transform: translateY(8px); }
  30% { opacity: 1; }
  100% { stroke-dashoffset: -70; opacity: 0; transform: translateY(-10px); }
}

.coffee-ticket {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.5rem 1.75rem 1.75rem;
  border-top: 1px dotted var(--grey-100);
}

.coffee-ticket__label {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-400);
}

.coffee-ticket__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.coffee-ticket__time {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--grey-400);
}

.coffee-ticket__when {
  font-size: 0.875rem;
  color: var(--grey-500);
}

.coffee-ticket__total {
  padding: 0.5rem 0 1rem;
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--black);
}

.coffee-ticket__pay {
  width: 100%;
  min-height: 3.25rem;
  font-size: 1rem;
}

.coffee-ticket__note {
  padding-top: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--grey-400);
}

.coffee-ticket__fail {
  padding: 0.5rem 0 0;
}

/* ---------- receipt (back from checkout) ---------- */
.coffee-done[hidden],
.coffee-order[hidden] {
  display: none;
}

.coffee-done__wrap {
  display: grid;
  grid-template-columns: 22rem minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
  padding-top: 1rem;
}

.coffee-receipt {
  position: relative;
  padding: 2rem 1.75rem 6rem;
  background-color: #fff;
  border: 1px solid var(--grey-50);
  border-bottom: 0;
  font-variant-numeric: tabular-nums;
  /* torn, zig-zag bottom edge */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 10px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 10px repeat-x;
  animation: coffee-print 0.9s var(--ease-out-quint) both;
}

@keyframes coffee-print {
  from { clip-path: inset(0 0 100% 0); transform: translateY(-1rem); }
  to { clip-path: inset(0 0 0 0); transform: none; }
}

.coffee-receipt__brand {
  display: flex;
  justify-content: center;
}

.coffee-receipt__brand .brand-logo {
  width: 7rem;
  height: auto;
  color: var(--black);
}

.coffee-receipt__sub {
  padding-top: 0.5rem;
  text-align: center;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-400);
}

.coffee-receipt__rule {
  margin: 1.25rem 0;
  border-top: 1px dashed var(--grey-200);
}

.coffee-receipt__rows {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0;
}

.coffee-receipt__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
}

.coffee-receipt__row[hidden] {
  display: none;
}

.coffee-receipt__row dt {
  color: var(--grey-400);
}

.coffee-receipt__row dd {
  margin: 0;
  text-align: right;
  font-weight: 500;
  color: var(--black);
  overflow-wrap: anywhere;
}

.coffee-receipt__total {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
}

.coffee-receipt__foot {
  padding-top: 1rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--grey-400);
}

.coffee-receipt__stamp {
  position: absolute;
  right: 1.5rem;
  bottom: 1.75rem;
  padding: 0.25rem 0.875rem;
  border: 3px solid var(--accent);
  border-radius: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transform: rotate(-12deg) scale(1.6);
}

.coffee-done.is-paid .coffee-receipt__foot {
  padding-top: 1rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--grey-400);
}

.coffee-receipt__stamp {
  animation: coffee-stamp 0.45s 0.8s var(--ease-out-quint) forwards;
}

@keyframes coffee-stamp {
  to { opacity: 0.9; transform: rotate(-12deg) scale(1); }
}

.coffee-done__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--black);
}

.coffee-done__title:focus {
  outline: none;
}

.coffee-done__text {
  max-width: 32rem;
  padding-top: 1rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--grey-500);
}

.coffee-done__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

.coffee-done__actions[hidden],
[data-done-home][hidden] {
  display: none;
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .coffee-order__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* on one column the cup sits last, right above where the thumb is */
  .coffee-cup {
    position: static;
    flex-direction: row;
    align-items: stretch;
  }

  .coffee-cup__stage {
    flex: 0 0 38%;
    min-width: 0;
    align-items: center;
    padding: 1rem;
  }

  .coffee-ticket {
    flex: 1;
    border-top: 0;
    border-left: 1px dotted var(--grey-100);
  }

  .coffee-done__wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .coffee-receipt {
    max-width: 22rem;
  }
}

@media (max-width: 767px) {
  /* a phone gets the whole screen */
  .founder__sheet {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .coffee-hero {
    padding-top: 1.5rem;
  }

  .founder__close {
    top: 0.75rem;
    margin: 0.75rem 0.75rem 0 0;
  }

  .coffee-step {
    padding: 1.5rem 1.25rem 0.875rem;
  }

  .coffee-item {
    padding: 1.125rem 1.25rem 1.125rem 3rem;
  }

  .coffee-item__radio {
    left: 1.25rem;
    top: 1.375rem;
  }

  .coffee-item__name,
  .coffee-item__price {
    font-size: 1.125rem;
  }

  .coffee-blend,
  .coffee-form .coffee-blend-len,
  .coffee-menu__error {
    margin-inline: 1.25rem;
  }

  .coffee-blend__hint {
    display: none;
  }

  .coffee-when__body {
    padding: 0.25rem 1.25rem 1.5rem;
  }

  .coffee-days {
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
    scroll-padding-inline: 1.25rem;
  }

  .coffee-about .form-cell--divide {
    grid-column: 1 / -1;
    border-right: 0;
  }

  .coffee-about .form-cell--divide + .form-cell {
    grid-column: 1 / -1;
  }

  .coffee-about .form-label-wrap {
    padding: 1.5rem 1.25rem 0.125rem;
  }

  .coffee-about .form-field {
    padding-inline: 1.25rem;
  }

  .coffee-cup {
    flex-direction: column;
  }

  .coffee-cup__stage {
    flex: none;
  }

  .coffee-cup__art {
    width: 10rem;
    max-width: 10rem;
  }

  .coffee-ticket {
    border-left: 0;
    border-top: 1px dotted var(--grey-100);
    padding: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .founder__scrim,
  .founder__sheet,
  .coffee-cup__liquid,
  .coffee-cup__coffee,
  .coffee-cup__crema,
  .coffee-cup__wisp,
  .coffee-receipt {
    animation: none;
    transition: none;
  }

  .coffee-cup__wisp {
    stroke-dasharray: none;
    opacity: 0.6;
  }

  .coffee-done.is-paid .coffee-receipt__foot {
  padding-top: 1rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--grey-400);
}

.coffee-receipt__stamp {
    animation: none;
    opacity: 0.9;
    transform: rotate(-12deg);
  }
}

/* ---------- form states borrowed from page-contact.css ----------
   That sheet loads on /contact only; the popup opens on every page, so it
   carries its own copies, scoped so they cannot touch anything else. */
.coffee .form-field.is-invalid {
  border-bottom: 2px solid var(--accent);
  margin-bottom: -1px;
}

.coffee .form-field.is-invalid::placeholder {
  color: var(--accent);
}

.coffee .form-error {
  padding-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent);
}

.coffee .form-error[hidden],
.coffee .form-fail[hidden] {
  display: none;
}

.coffee .form-fail {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent);
}

.coffee .form-fail a {
  color: inherit;
}

.coffee .btn-dark[aria-busy="true"] {
  opacity: 0.65;
  pointer-events: none;
}

/* ---------- sticky pay bar (phones and tablets) ----------
   It is the last child of the order section, so it pins to the bottom of
   the screen for as long as the form is on screen, and settles at the end
   of the section once you scroll past it. Desktop has the sticky ticket. */
.coffee-bar {
  display: none;
}

@media (max-width: 991px) {
  .coffee-bar {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 1rem;
    padding: 0.75rem var(--pad-global) calc(0.75rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--grey-100);
    background-color: #fff;
  }

  .coffee-bar__sum {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .coffee-bar__cup {
    overflow: hidden;
    font-size: 0.8125rem;
    color: var(--grey-400);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .coffee-bar__price {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--black);
  }

  .coffee-bar__pay {
    min-height: 3rem;
    padding-inline: 1.25rem;
    white-space: nowrap;
  }

  .coffee-bar__fail {
    grid-column: 1 / -1;
  }

  /* the bar carries Pay here; the ticket keeps the cup and the summary */
  .coffee-ticket__pay,
  .coffee-ticket__fail {
    display: none;
  }
}

/* ---------- the /coffee page (desktop) ----------
   The same booking, laid into the page instead of the popup. */
.coffee--page .coffee-hero {
  padding-top: 11rem;
}

.coffee--page .coffee-hero__title {
  font-size: clamp(2.75rem, 7vw, 6rem);
}

.coffee--page .coffee-cup {
  top: 6.5rem;
}

.coffee--page.is-receipt .coffee-done {
  padding-top: 9rem;
}

.coffee-page {
  min-height: 100vh;
}

.coffee-page__error {
  padding: 12rem var(--pad-global) 6rem;
  text-align: center;
  color: var(--grey-500);
}

@media (max-width: 767px) {
  .coffee--page .coffee-hero {
    padding-top: 8rem;
  }

  .coffee--page.is-receipt .coffee-done {
    padding-top: 7rem;
  }
}