/* getusta.com, d1 brand (kit 1.1). One light theme on cream, one ink stage for the call.
   Radius rule: interactive controls are pills; cards and panels are 28px (24px on phones); inputs are 14px.
   Colour rule: body text in ink; copper only for the dot, large type, the live call and UI accents.
   Copper text on ink uses --copper-hi so small labels stay readable; the dot itself is always #B4532A. */

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #F3ECE1;
  --cream-2: #EAE0D0;
  --paper: #FBF7F0;
  --ink: #1A1714;
  --ink-2: #26211D;
  --ink-3: #322B26;
  --copper: #B4532A;
  --copper-hi: #E39368;
  --ink-soft: #4E4640;
  --ink-mute: #665C53;
  --copper-text: #9A4420;
  --line: rgba(26, 23, 20, .12);
  --line-strong: rgba(26, 23, 20, .22);
  --cream-soft: rgba(243, 236, 225, .76);
  --cream-mute: rgba(243, 236, 225, .7);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --top: 68px;
  --gutter: clamp(20px, 4vw, 48px);
  --max: 1240px;
  --r-card: 28px;
  --shadow-1: 0 1px 2px rgba(26, 23, 20, .06), 0 8px 24px -12px rgba(26, 23, 20, .18);
  --shadow-2: 0 2px 4px rgba(26, 23, 20, .06), 0 30px 60px -24px rgba(26, 23, 20, .38);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top) + 12px); }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.55;
  font-feature-settings: "ss01" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--copper); color: var(--cream); }
:focus-visible { outline: 2.5px solid var(--copper); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 30;
  padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--cream);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }
/* text for screen readers only (the call cards are drawn for the eye and hidden from assistive tech) */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- type ---------- */
.h2 {
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.04;
  letter-spacing: -.03em;
  font-weight: 600;
  text-wrap: balance;
  max-width: 18ch;
}
.lede { margin-top: 18px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--ink-soft); max-width: 46ch; text-wrap: pretty; }
h3 { font-size: 21px; line-height: 1.25; letter-spacing: -.012em; font-weight: 600; }

.who {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cream-mute);
}
.who--usta { color: var(--copper-hi); }

/* ---------- buttons ---------- */
.btn {
  --h: 54px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 26px; border-radius: 999px;
  font-size: 16px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap;
  text-decoration: none; border: 0; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn--sm { --h: 42px; padding: 0 18px; font-size: 15px; gap: 8px; }
.btn--wide { width: 100%; }
.btn--ink { background: var(--ink); color: var(--cream); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--copper); flex: none; }
.btn__play { width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; margin-left: 2px; }
@media (hover: hover) and (pointer: fine) {
  .btn--ink:hover { background: #2C2622; }
  .btn--ghost:hover { background: rgba(26, 23, 20, .06); }
}

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 20; height: var(--top);
  background: var(--cream);
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow 200ms ease, background-color 200ms ease;
}
.top[data-scrolled] { box-shadow: 0 1px 0 var(--line-strong); }
.top__logo--rev { display: none; }
.top[data-dark] { background: var(--ink); box-shadow: 0 1px 0 rgba(243, 236, 225, .08); }
.top[data-dark] .top__logo { display: none; }
.top[data-dark] .top__logo--rev { display: block; }
.top[data-dark] .top__nav a, .top[data-dark] .top__login { color: var(--cream-soft); }
.top[data-dark] .btn--ink { background: var(--cream); color: var(--ink); box-shadow: none; }
.top__cta { transition: opacity 220ms ease, transform 260ms var(--ease-out), background-color 200ms ease; }
.top__cta[data-hide] { opacity: 0; transform: translateY(-6px) scale(.96); pointer-events: none; visibility: hidden; transition: opacity 220ms ease, transform 260ms var(--ease-out), visibility 0s linear 260ms; }
.top__in { height: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 32px; }
.top__brand { display: block; padding: 6px 0; flex: none; }
.top__brand img { height: 30px; width: auto; }
.top__nav { display: flex; gap: 28px; margin-left: 12px; }
.top__nav a, .top__login { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink-soft); transition: color 160ms ease; }
.top__act { margin-left: auto; display: flex; align-items: center; gap: 22px; }
@media (hover: hover) and (pointer: fine) { .top__nav a:hover, .top__login:hover { color: var(--ink); } .top[data-dark] .top__nav a:hover, .top[data-dark] .top__login:hover { color: var(--cream); } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: clip; }
.hero__in {
  max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 32px var(--gutter) 48px;
  min-height: min(calc(100svh - var(--top)), 940px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 760px); gap: 40px; align-items: center;
}
.hero__title {
  font-size: clamp(44px, 4vw, 58px);
  line-height: 1.02;
  letter-spacing: -.04em;
  font-weight: 600;
}
.hero__line { display: block; }
.hero__line + .hero__line { color: var(--copper); }
.hero__sub { margin-top: 22px; font-size: clamp(18px, 1.35vw, 20px); line-height: 1.5; color: #3B342F; max-width: 30ch; text-wrap: pretty; }
.hero__sub strong { white-space: nowrap; font-weight: 650; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(180, 83, 42, .6); text-decoration-thickness: .1em; text-underline-offset: .28em; text-decoration-skip-ink: auto; }
.hero__cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
/* try it with your own name: jumps to the greeting demo further down, no network */
.ticket--hero .ticket__wait--live { display: none; }
.hero__secs { font-weight: 500; opacity: .7; }
.try { margin-top: 22px; max-width: 420px; }
.try__label { display: block; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.try__row { display: flex; margin-top: 8px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: box-shadow 200ms ease; }
.try__row:focus-within { box-shadow: inset 0 0 0 2px var(--copper); }
.try input { flex: 1; min-width: 0; height: 48px; padding: 0 6px 0 20px; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.try input::placeholder { color: var(--ink-mute); opacity: 1; }
.try__go { flex: none; margin: 5px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--copper-text); color: #FFFCF6; font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; transition: transform 160ms var(--ease-out); }
.try__go:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .try__go:hover { background: #87391A; } }

/* A call card and the paper it fills: Brian in the hero, Theo's order further down. */
.callcard { position: relative; height: 598px; }
.callcard::before { content: ""; position: absolute; z-index: 0; left: 34%; top: 50%; width: 820px; height: 820px; margin: -410px 0 0 -410px; border-radius: 50%; background: radial-gradient(closest-side, rgba(180, 83, 42, .13), rgba(180, 83, 42, .04) 60%, rgba(180, 83, 42, 0)); pointer-events: none; }

/* the live call card */
.live {
  position: absolute; z-index: 1; left: 0; top: 0; width: 504px;
  border-radius: 36px; padding: 26px 28px 22px;
  background: linear-gradient(180deg, #2A241F 0%, var(--ink) 40%);
  color: var(--cream);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(255, 255, 255, .04), 0 2px 4px rgba(26, 23, 20, .1), 0 30px 50px -30px rgba(26, 23, 20, .45);
}
.live__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; font-size: 15px; font-weight: 600; }
.live__brand { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.live__for { font-weight: 500; color: var(--cream-soft); }
.live__state { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.live__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cream-mute); flex: none; }
.callcard[data-oncall] .live__dot, .callcard--regular[data-run]:not([data-ended]) .live__dot { background: #6FCF7F; box-shadow: 0 0 0 4px rgba(111, 207, 127, .18); }
.live__time { min-width: 36px; text-align: right; color: var(--cream-soft); }
.live__caller { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.live__avatar {
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; flex: none;
  background: var(--ink-3); color: var(--cream); font-size: 24px; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(243, 236, 225, .08);
}
.live__avatar svg { width: 24px; height: 24px; }
.live__id { display: grid; min-width: 0; }
.live__name { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.live__num { margin-top: 3px; font-size: 15px; color: var(--cream-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live__wave { display: flex; align-items: center; justify-content: space-between; height: 48px; margin-top: 20px; margin-right: 66px; }
.live__wave i { display: block; width: 4px; height: 100%; border-radius: 2px; background: rgba(243, 236, 225, .3); transform-origin: 50% 50%; transform: scaleY(var(--s, .08)); }
.live__wave i.u { background: var(--copper-hi); }
.live__wave i.c { background: var(--cream); }
.live__caps { position: relative; height: 278px; margin-top: 12px; margin-right: 66px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px); mask-image: linear-gradient(180deg, transparent 0, #000 14px); }
.cap__track { position: absolute; left: 0; right: 0; top: 0; transition: transform 460ms var(--ease-out); will-change: transform; }
.cap { display: grid; gap: 4px; padding-top: 14px; transition: opacity 300ms ease 260ms, transform 420ms var(--ease-out) 260ms; }
.cap__who { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(243, 236, 225, .72); }
.cap--usta .cap__who { color: var(--copper-hi); }
.cap__text { font-size: 20px; line-height: 1.38; font-weight: 500; letter-spacing: -.008em; color: var(--cream); transition: color 320ms ease; text-wrap: pretty; }
.cap[data-future] { opacity: 0; transform: translateY(10px); }
.cap[data-old] { opacity: 0; transition: opacity 260ms ease; }
.cap[data-past] .cap__text { color: rgba(243, 236, 225, .78); }
/* Without the live run (no JS or reduced motion) the card rests on the end of the call. */
[data-live]:not([data-run]) .cap__track { top: auto; bottom: 0; }
[data-live]:not([data-run]) .cap__track > li:nth-child(-n+2) { display: none; }
[data-live]:not([data-run]) .cap:not(:last-child) .cap__text { color: rgba(243, 236, 225, .78); }
.live__foot { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 16px; border-top: 1px solid rgba(243, 236, 225, .1); }
.live__listen {
  width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
  background: var(--cream); color: var(--ink); display: grid; place-items: center;
  transition: transform 160ms var(--ease-out), box-shadow 240ms ease;
  -webkit-tap-highlight-color: transparent;
}
.live__listen:active { transform: scale(.94); }
.live__icon { width: 0; height: 0; border-left: 14px solid var(--ink); border-top: 8.5px solid transparent; border-bottom: 8.5px solid transparent; margin-left: 4px; }
.callcard[data-playing] .live__listen { box-shadow: 0 0 0 5px rgba(227, 147, 104, .45); }
.callcard[data-playing] .live__icon { width: 13px; height: 15px; margin: 0; border: 0; border-left: 4.5px solid var(--ink); border-right: 4.5px solid var(--ink); }
.live__hint { display: grid; line-height: 1.3; }
.live__label { font-size: 16px; font-weight: 600; }
.live__small { font-size: 14px; color: var(--cream-soft); }
@media (hover: hover) and (pointer: fine) { .live__listen:hover { box-shadow: 0 0 0 5px rgba(243, 236, 225, .14); } }

/* the ticket the call prints: it grows line by line, like paper out of a printer */
.hticket {
  position: absolute; z-index: 2; left: 452px; top: 60px; width: 308px;
  transform: rotate(2.2deg); transform-origin: 0 0;
  filter: drop-shadow(0 0 .5px rgba(26, 23, 20, .35)) drop-shadow(0 2px 2px rgba(26, 23, 20, .12)) drop-shadow(0 14px 16px rgba(26, 23, 20, .15));
}
.tk { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: .6em; }
.tk span { color: var(--ink-soft); font-size: .93em; }
.tk b { font-weight: 700; font-size: 1.08em; }
.ticket__check + .tk { margin-top: .9em; }

/* ---------- hero call: Brian, a regular ----------
   A drawn call with no audio. The greeting is up from the first frame; scrolling or a tap brings the
   next line (no autoplay, no play or pause control). Without JS or with reduced motion the whole call
   shows. The guest card on the right holds only what the guest book stores. */
.callcard--regular { height: auto; }
.callcard--regular::before { left: 40%; }
.live--regular { position: relative; width: 470px; padding: 24px 26px 20px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.live--regular .live__caller { margin-top: 20px; }
.reg { margin-top: 16px; margin-right: 34px; }
.reg__sys { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--cream-mute); }
.reg__sys::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6FCF7F; flex: none; }
.reg .cap { padding-top: 0; margin-top: 12px; }
.reg .cap__text { font-size: 19px; }
.reg .cap--notice .cap__text { font-size: 15px; line-height: 1.4; color: var(--cream-soft); }
.callcard--regular[data-run] .reg .item[data-on] { margin-top: 12px; }
.callcard--regular[data-run] .reg .reg__sys.item[data-on] { margin-top: 0; }
.live__foot--note { display: grid; gap: 3px; margin-top: 18px; padding-top: 14px; }
.live__foot--note .live__label { font-size: 15px; font-weight: 500; color: var(--cream-soft); }
.live__foot--note .live__small { font-size: 13.5px; }
@media (hover: hover) and (pointer: fine) { .callcard--regular[data-run]:not([data-ended]) .live--regular { cursor: pointer; } }

.hticket--guest { left: 446px; top: 84px; width: 304px; }
.ticket--guest { font-size: 15px; }
.guest__name { margin-top: .9em; font-size: 1.75em; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; }
.guest__name span { font-weight: 500; color: var(--copper-text); }
.guest__hint { margin-top: .35em; font-size: .87em; color: var(--ink-soft); }
.tk--last { align-items: flex-start; }
.tk--last b { max-width: 62%; text-align: right; font-size: 1em; line-height: 1.3; }
.tk--last small { display: block; margin-top: 2px; font-size: .85em; font-weight: 500; color: var(--ink-soft); }
.guest__k { margin-top: .85em; font-size: .78em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--copper-text); }
.callcard--regular[data-run] .guest__new.item[data-on] { max-height: 360px; }
.callcard--regular[data-measure], .callcard--regular[data-measure] * { transition: none !important; animation: none !important; }

/* tickets */
.ticket {
  --edge: 7px;
  position: relative; background: var(--paper); color: var(--ink);
  padding: 20px 20px 18px;
  font-size: 14px; line-height: 1.35; font-variant-numeric: tabular-nums;
  -webkit-mask: radial-gradient(circle at 50% 0, transparent 4.5px, #000 5px) 50% 0 / 12px 51% repeat-x, radial-gradient(circle at 50% 100%, transparent 4.5px, #000 5px) 50% 100% / 12px 51% repeat-x;
  mask: radial-gradient(circle at 50% 0, transparent 4.5px, #000 5px) 50% 0 / 12px 51% repeat-x, radial-gradient(circle at 50% 100%, transparent 4.5px, #000 5px) 50% 100% / 12px 51% repeat-x;
}
.ticket__head { display: flex; justify-content: space-between; font-size: .78em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ticket__meta { display: flex; justify-content: space-between; gap: 12px; margin-top: .85em; font-weight: 600; font-size: 1.07em; }
.ticket__row { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.ticket__row b { font-weight: 700; margin-right: 6px; }
.ticket__row--meta { margin-top: 12px; font-weight: 600; font-size: 15px; }
.ticket__row--total { font-weight: 600; }
.ticket__mod { margin: 2px 0 0 20px; font-size: 13px; color: var(--ink-soft); }
.ticket__rule { margin-top: .85em; border-top: 1.5px dashed rgba(26, 23, 20, .3); }
.ticket__check { margin-top: .85em; display: flex; align-items: center; gap: 8px; font-size: .93em; font-weight: 600; }
.tick { position: relative; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); flex: none; transition: background-color 240ms ease, box-shadow 240ms ease; }
.tick::after { content: ""; position: absolute; left: 6px; top: 3.5px; width: 4.5px; height: 8.5px; border: solid var(--cream); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(.6); opacity: 0; transition: opacity 200ms ease, transform 240ms var(--ease-out); }
.tick--on { background: var(--copper); box-shadow: none; }
.tick--on::after { opacity: 1; transform: rotate(45deg) scale(1); }

.tl { display: grid; grid-template-columns: 1.4em minmax(0, 1fr) auto; gap: .55em; margin-top: .65em; align-items: start; }
.tl b { font-weight: 700; }
.tl i { font-style: normal; font-weight: 500; }
.tl small { display: block; font-size: .9em; color: var(--ink-soft); margin-top: 1px; }
.tl--total { font-weight: 700; }
.tl--total i { font-weight: 700; }

.ticket--hero { width: 100%; padding: 24px 22px 24px; background: #FFFCF6; font-size: 16px; }
.ticket--hero small { color: var(--ink-soft); }
/* the hero ticket ends on an ink stamp, not another line */
.ticket--hero .ticket__sent {
  width: max-content; margin: 1.1em auto 0; padding: .45em .9em .45em .55em; gap: .55em;
  border: 2.5px solid var(--copper-text); border-radius: 10px; color: var(--copper-text);
  box-shadow: inset 0 0 0 2px #FFFCF6, inset 0 0 0 3.5px rgba(154, 68, 32, .55);
  font-size: 1.02em; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  transform: rotate(-4deg); mix-blend-mode: multiply;
  /* worn ink: a fine grain knocks small holes out of the stamp */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.2 2.05'/%3E%3C/filter%3E%3Crect width='120' height='60' filter='url%28%23n%29'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.2 2.05'/%3E%3C/filter%3E%3Crect width='120' height='60' filter='url%28%23n%29'/%3E%3C/svg%3E");
}
.ticket--hero .ticket__sent .seal path:first-child { fill: var(--copper-text); }
.ticket--hero .ticket__sent .seal { width: 1.8em; height: 1.8em; }
.callcard[data-run] .ticket--hero .ticket__sent.item[data-on] { margin-top: 1.1em; animation: stamp 520ms cubic-bezier(.34, 1.5, .64, 1) both; }
.callcard[data-run] .ticket--hero .ticket__sent.item[data-on][data-quiet] { animation: none; }
@keyframes stamp { from { transform: rotate(-12deg) scale(1.7); opacity: 0; } 60% { opacity: 1; } to { transform: rotate(-4deg) scale(1); opacity: 1; } }
/* each line flashes copper as it prints, so the eye goes from the word said to the line written */
@keyframes inked { from { background-color: rgba(180, 83, 42, .18); } to { background-color: rgba(180, 83, 42, 0); } }
.callcard[data-run] .ticket--hero .item[data-on]:not([data-quiet]) { animation: inked 900ms ease-out both; border-radius: 4px; }
.ticket__sent { margin-top: 1em; display: flex; align-items: center; gap: .7em; font-weight: 700; font-size: 1em; }
.ticket__sent small { display: block; font-weight: 500; font-size: .87em; color: var(--ink-soft); }
.ticket__wait { margin-top: .8em; display: flex; align-items: center; gap: 8px; font-size: .93em; font-weight: 600; color: var(--ink-mute); }
.ticket__wait .livedot { width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(180, 83, 42, .18); }
.livedot { width: 8px; height: 8px; border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 4px rgba(180, 83, 42, .22); flex: none; }
.fill { display: inline-grid; }
.fill > * { grid-area: 1 / 1; }
.fill__blank { color: var(--ink-mute); font-weight: 500; border-bottom: 1.5px dotted var(--line-strong); padding-right: 24px; }
.fill__ink { color: var(--ink); }
.seal { flex: none; }

/* printing: a container with data-run hides what the call has not said yet */
[data-run] .item { max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; transition: max-height 420ms var(--ease-out), margin-top 420ms var(--ease-out), opacity 260ms ease; }
[data-run] .item[data-on] { max-height: 120px; opacity: 1; }
[data-run] .tl.item[data-on] { margin-top: .65em; }
[data-run] small.item[data-on] { margin-top: 1px; }
[data-run] .ticket__check.item[data-on] { margin-top: .85em; }
[data-run] .ticket__sent.item[data-on] { margin-top: 1em; }
[data-run] .tk.item[data-on] { margin-top: .6em; }
[data-run] .ticket__check + .tk.item[data-on] { margin-top: .9em; }
[data-run] .fill__ink { opacity: 0; transform: translateY(3px); transition: opacity 240ms ease, transform 280ms var(--ease-out); }
[data-run] .fill[data-on] .fill__ink { opacity: 1; transform: none; }
[data-run] .fill[data-on] .fill__blank { color: transparent; border-color: transparent; }
[data-run] .ticket__sent .seal { transform: scale(1.8) rotate(-18deg); opacity: 0; transition: transform 520ms cubic-bezier(.34, 1.4, .64, 1), opacity 200ms ease; }
[data-run] .ticket__sent[data-on] .seal { transform: none; opacity: 1; }
[data-run] .ticket__wait { max-height: 30px; overflow: hidden; transition: opacity 200ms ease, max-height 300ms var(--ease-out), margin-top 300ms var(--ease-out); }
[data-run] .ticket__wait[data-off] { opacity: 0; max-height: 0; margin-top: 0; }
[data-run] .tick { transition: background-color 240ms ease; }
.callcard:not([data-run]) .ticket__wait, .stage:not([data-run]) .ticket__wait,
.callcard:not([data-run]) .fill__blank, .stage:not([data-run]) .fill__blank { display: none; }

/* reservation card */
.rv { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: .7em; }
.rv__k { color: var(--ink-soft); font-size: .9em; }
.rv__v { font-weight: 650; text-align: right; }
.rv__v small { display: block; font-weight: 500; font-size: .85em; color: var(--ink-soft); margin-top: 2px; }
.rv--when { align-items: flex-end; margin-top: .9em; }
.rv__day { font-size: 1.15em; font-weight: 700; }
.rv__time { font-size: 2.6em; font-weight: 650; line-height: 1; letter-spacing: -.03em; }
.rv__time small { font-size: .38em; font-weight: 700; letter-spacing: .04em; }
.rv--qa { align-items: flex-start; }
.stage[data-run] .ticket--stage .rv.item { margin-top: .7em; }
.stage[data-run] .ticket--stage .rv--when.item { margin-top: .9em; }

/* ---------- call stage ---------- */
.stage { position: relative; z-index: 1; background: var(--ink); color: var(--cream); }
.stage__pin { max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 104px var(--gutter) 104px; }
.stage__title { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.04; letter-spacing: -.03em; font-weight: 600; max-width: 16ch; text-wrap: balance; }
.stage__note { margin-top: 12px; font-size: 17px; line-height: 1.45; color: var(--cream-soft); max-width: 40ch; }
.stage .who { font-size: 11px; color: var(--cream-mute); }
.stage .who--usta { color: var(--copper-hi); }

.stage__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "head ticket" "convo ticket"; column-gap: 64px; row-gap: 40px; align-items: start; }
.stage__left { display: contents; }
.stage__head { grid-area: head; }
.convo { grid-area: convo; min-height: 0; }
.stage__ticketwrap { grid-area: ticket; }
.convo__track { display: grid; gap: 18px; }
.line { display: grid; gap: 4px; }
.line__text { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.4; letter-spacing: -.006em; font-weight: 500; max-width: 36ch; color: var(--cream); }
.stage__ticketwrap { display: flex; justify-content: flex-end; align-items: center; align-self: stretch; }
.ticket--stage { position: relative; width: min(560px, 100%); padding: 32px 34px 32px; font-size: clamp(16px, 1.45vw, 21px); }
.ticket--stage .seal { width: 1.9em; height: 1.9em; }

.scrub { display: flex; align-items: center; gap: 18px; margin-top: 48px; padding: 10px 22px 10px 10px; border-radius: 999px; background: rgba(243, 236, 225, .06); box-shadow: inset 0 0 0 1px rgba(243, 236, 225, .08); }
.scrub__btn {
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
  background: var(--cream); color: var(--ink); display: grid; place-items: center;
  transition: transform 160ms var(--ease-out), box-shadow 240ms ease;
  -webkit-tap-highlight-color: transparent;
}
.scrub__btn:active { transform: scale(.95); }
.scrub__icon { width: 0; height: 0; border-left: 15px solid var(--ink); border-top: 9.5px solid transparent; border-bottom: 9.5px solid transparent; margin-left: 4px; }
.scrub[data-playing] .scrub__btn { box-shadow: 0 0 0 5px rgba(227, 147, 104, .45); }
.scrub[data-playing] .scrub__icon { width: 13px; height: 16px; margin: 0; border: 0; border-left: 4.5px solid var(--ink); border-right: 4.5px solid var(--ink); }
.scrub__wave { flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.scrub__wave i { display: block; flex: 1 1 0; max-width: 4px; height: 100%; border-radius: 2px; background: rgba(243, 236, 225, .4); transform: scaleY(var(--s, .1)); transition: background-color 160ms ease; }
.scrub__wave i[data-on] { background: var(--copper-hi); }
.scrub__time { font-size: 16px; font-weight: 600; color: var(--cream); font-variant-numeric: tabular-nums; min-width: 96px; text-align: right; }
@media (hover: hover) and (pointer: fine) { .scrub__btn:hover { box-shadow: 0 0 0 5px rgba(243, 236, 225, .14); } }

/* scroll-driven stage (JS + motion only). Two viewports of scroll play the call; then the next
   section slides up over the finished call, so nothing ever scrolls out under the header. */
.stage + .handles { position: relative; z-index: 2; padding-top: 104px; background: var(--cream); }
/* Pinned: the stage holds for the call (2.3 viewports), then the next sheet slides up over the
   finished call, so nothing scrolls out under the header. Later sections stay opaque above it. */
.motion .stage[data-ready] { height: 230svh; }
.motion .stage[data-ready] .stage__pin { transform-origin: 50% 0; }
.motion .stage[data-ready] .stage__pin { position: sticky; top: 0; height: 100svh; padding-top: calc(var(--top) + 36px); padding-bottom: max(28px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.motion .stage[data-ready] .stage__grid { flex: 1; min-height: 0; align-items: stretch; }
.motion .stage[data-ready] .convo {
  position: relative; align-self: stretch; min-height: 0; overflow: hidden;
}
.motion .stage[data-ready] .convo[data-moved] {
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 16px);
  mask: linear-gradient(180deg, transparent 0, #000 16px);
}
.motion .stage[data-ready] .convo__track { will-change: transform; transition: transform 460ms var(--ease-out); }
.motion .stage[data-ready] .line { transition: opacity 320ms ease; }
.motion .stage[data-ready] .line[data-future] { opacity: 0; }
.motion .stage[data-ready] .line[data-past] .line__text { color: var(--cream-mute); }
.stage:not([data-ready])[data-audio] .line:not([data-now]) .line__text { color: var(--cream-mute); }
.motion .stage[data-ready] .stage__ticketwrap { min-height: 0; }
/* On the stage the whole ticket is laid out from the start: lines appear in place as they are said. */
.stage[data-run] .ticket--stage .item { max-height: none; overflow: visible; transition: opacity 320ms ease; }
.stage[data-run] .ticket--stage .tl.item { margin-top: .65em; }
.stage[data-run] .ticket--stage small.item { margin-top: 1px; }
.stage[data-run] .ticket--stage .ticket__check.item { margin-top: .85em; }
.stage[data-run] .ticket--stage .ticket__sent.item { margin-top: 1em; }
.stage[data-run] .ticket--stage .ticket__wait { display: none; }
/* Before a field is said only its faint label shows; values ink in as the call plays. No bars. */
.stage[data-run] .ticket--stage .item { opacity: 1; transition: color 320ms ease; }
.stage[data-run] .ticket--stage .item:not([data-on]) { color: transparent; }
.stage[data-run] .ticket--stage .item:not([data-on]) .rv__k { color: var(--ink-mute); }
.stage[data-run] .ticket--stage .item :is(.rv__v, .rv__day, .ticket__sent > span), .stage[data-run] .ticket--stage .rv__time.item { transition: color 320ms ease; }
.stage[data-run] .ticket--stage .item:not([data-on]) :is(.rv__v, .rv__day, small, .ticket__sent > span) { color: transparent; }
.stage[data-run] .ticket--stage :is(.ticket__check, .ticket__sent).item:not([data-on]) { visibility: hidden; }
.stage[data-run] .ticket--stage .item:not([data-on]) .ticket__rule { opacity: .5; }
.stage[data-run] .ticket--stage .ticket__check.item { width: fit-content; }
.stage[data-run] .ticket--stage .ticket__check.item:not([data-on]) .tick { opacity: 0; }
.motion .stage[data-ready] .scrub { margin-top: 24px; }

/* ---------- order: Theo's pickup call, with its audio ---------- */
.order { padding: 64px 0 112px; }
.order__grid { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 1fr); grid-template-areas: "card head"; gap: 56px; align-items: center; }
.order__head { grid-area: head; }
.order .callcard { grid-area: card; }
.order .h2 { max-width: 12ch; }
.order__note { margin-top: 18px; font-size: 15px; color: var(--ink-mute); }


/* ---------- handles (bento) ---------- */
.handles { padding: 8px 0 72px; }
.bento { margin-top: 56px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.cell { border-radius: var(--r-card); padding: 34px; position: relative; overflow: hidden; }
.cell p { margin-top: 8px; color: var(--ink-soft); font-size: 17px; max-width: 34ch; }
.cell--book { grid-column: span 7; background: var(--cream-2); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: center; }
.cell--ask { grid-column: span 5; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.cell--menu { grid-column: span 5; background: #EFD9CB; }
.cell--clock { grid-column: span 7; background: var(--ink); color: var(--cream); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.cell--clock p { color: var(--cream-soft); }

.resv { background: var(--paper); border-radius: 22px; padding: 22px; box-shadow: var(--shadow-2); }
.resv__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; }
.resv__day { letter-spacing: .1em; text-transform: uppercase; font-size: 12px; font-weight: 700; }
.resv__ok { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.resv__ok .tick { width: 16px; height: 16px; }
.resv__ok .tick::after { left: 5px; top: 3px; width: 4px; height: 7.5px; }
/* .resv scope: the bento's `.cell p` rule otherwise wins and sets 17px */
.resv .resv__time { margin-top: 8px; font-size: 56px; font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.resv__time small { font-size: 22px; letter-spacing: 0; color: var(--ink-soft); }
.resv__grid { margin-top: 18px; display: grid; grid-template-columns: auto auto 1fr; gap: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.resv__grid dt { font-size: 12px; color: var(--ink-mute); font-weight: 600; }
.resv__grid dd { font-size: 16px; font-weight: 600; margin-top: 2px; }

.qa { margin-top: 26px; display: grid; gap: 8px; }
.qa p { margin: 0; font-size: 16px; line-height: 1.4; padding: 10px 14px; border-radius: 18px; max-width: 86%; }
.qa__q { background: var(--cream-2); color: var(--ink); justify-self: start; border-bottom-left-radius: 6px; }
.qa__a { background: var(--ink); color: var(--cream) !important; justify-self: end; border-bottom-right-radius: 6px; }
.qa__a + .qa__q { margin-top: 6px; }

.menuitem { margin-top: 26px; background: var(--paper); border-radius: 20px; padding: 18px; box-shadow: var(--shadow-1); }
.menuitem__name { font-weight: 600; font-size: 17px; color: var(--ink) !important; margin: 0 !important; }
.menuitem__opts { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.opt { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.opt--on { background: var(--ink); color: var(--cream); box-shadow: none; }
.opt--add::before { content: "+"; margin-right: 5px; color: var(--copper); font-weight: 700; }
.menuitem { display: grid; gap: 12px; }
.cell .menuitem__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; max-width: none; font-size: 17px; color: var(--ink); }
.menuitem__price { font-weight: 600; font-variant-numeric: tabular-nums; }
.menuitem__row--out .menuitem__name { color: var(--ink-mute) !important; text-decoration: line-through; text-decoration-color: rgba(26, 23, 20, .35); }
.opt--out { height: 30px; padding: 0 12px; font-size: 13px; white-space: nowrap; background: var(--cream-2); color: var(--ink-soft); box-shadow: none; }

.clock { position: relative; width: 200px; height: 200px; }
.clock__label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.clock__label small { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--copper-hi); }
.clock svg { width: 200px; height: 200px; overflow: visible; }
.clock__hand { transform-origin: 100px 100px; transform: rotate(var(--a, 40deg)); }

/* ---------- setup ---------- */
.setup { padding: 96px 0 88px; background: var(--cream-2); }
.setup__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.tune { margin-top: 36px; display: grid; gap: 22px; max-width: 460px; }
.tune[data-flash] input[type="text"] { box-shadow: inset 0 0 0 2px var(--copper); }
.tune__field { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.tune__label { font-size: 14px; font-weight: 600; color: var(--ink-soft); padding: 0; }
.tune input[type="text"], .compose input {
  height: 54px; border-radius: 14px; border: 0; padding: 0 16px; width: 100%;
  background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-strong);
  font-size: 17px; font-weight: 500; color: var(--ink);
  transition: box-shadow 160ms ease;
}
.tune input[type="text"]:focus, .compose input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--copper); }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(26, 23, 20, .07); width: max-content; max-width: 100%; }
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--ink-soft); transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease; pointer-events: none; }
.seg input:checked + span { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-1); }
.seg input:focus-visible + span { outline: 2.5px solid var(--copper); outline-offset: 2px; }

.speech { display: grid; gap: 14px; }
.speech__card { background: var(--ink); color: var(--cream); border-radius: var(--r-card); padding: 22px 26px 24px; display: grid; gap: 8px; box-shadow: var(--shadow-2); }
.speech__card--in { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); margin-right: 64px; }
.speech__card--in .who { color: var(--ink-mute); }
.speech__card:not(.speech__card--in) { margin-left: 64px; }
.speech__line { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.28; letter-spacing: -.016em; font-weight: 500; transition: filter 220ms ease, opacity 220ms ease; }
.speech__line[data-swap] { filter: blur(3px); opacity: .5; }

.steps { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; border-top: 1px solid var(--line-strong); padding-top: 32px; }
.steps li { position: relative; }
.steps__n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--cream); font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.steps h3 { font-size: 20px; }
.steps p { margin-top: 6px; font-size: 17px; line-height: 1.5; color: var(--ink-soft); }

/* ---------- owner: the big moment in the middle of the page ---------- */
.owner { position: relative; padding: 128px 0 80px; background: var(--ink); color: var(--cream); overflow: clip; }
.owner__visual::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; background: radial-gradient(closest-side, rgba(180, 83, 42, .3), rgba(180, 83, 42, .08) 55%, rgba(180, 83, 42, 0)); pointer-events: none; }
.owner__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 72px; align-items: center; }
.owner__copy { grid-column: 1; grid-row: 1; }
.owner__visual { grid-column: 2; grid-row: 1; position: relative; z-index: 0; justify-self: center; width: 100%; max-width: 430px; }
.owner .h2 { font-size: clamp(44px, 5.6vw, 84px); max-width: 11ch; }
.owner .lede { color: rgba(243, 236, 225, .84); font-size: clamp(19px, 1.6vw, 23px); max-width: 30ch; }
.phone { width: 100%; border-radius: 62px; padding: 14px; background: linear-gradient(160deg, #5A5047, #2E2722 45%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 1px rgba(0, 0, 0, .5), 0 60px 120px -40px rgba(0, 0, 0, .7); }
.phone__screen { border-radius: 49px; background: var(--cream); padding: 92px 16px 20px; color: var(--ink); }
.phone__top { display: flex; justify-content: space-between; align-items: baseline; padding: 0 10px 16px; }
.phone__top > span:first-child { font-size: 36px; font-weight: 700; letter-spacing: -.03em; }
.phone__ex { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.notif {
  position: absolute; z-index: 2; left: -28px; right: -28px; top: -30px;
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border-radius: 26px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 24px 40px -18px rgba(0, 0, 0, .55);
}
.notif svg { flex: none; }
.notif__body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.notif__top { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-soft); }
.notif__top b { color: var(--ink); font-weight: 700; }
.notif__line { font-size: 17px; font-weight: 650; line-height: 1.3; }
.notif__sub { font-size: 16px; color: var(--ink-soft); }
.motion .owner__visual.reveal .notif { transform: translateY(-26px) scale(.96); opacity: 0; transition: transform 700ms var(--ease-out) 380ms, opacity 400ms ease 380ms; }
.motion .owner__visual.reveal[data-in] .notif { transform: none; opacity: 1; }
.calls { display: grid; gap: 7px; }
.call {
  width: 100%; text-align: left; border: 0; cursor: pointer; background: var(--paper); color: var(--ink); font: inherit;
  border-radius: 22px; padding: 13px 18px; display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 2px;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 160ms var(--ease-out), box-shadow 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.call:active { transform: scale(.985); }
.call[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--copper), var(--shadow-1); }
.call__time { font-size: 13px; color: var(--ink-mute); font-weight: 600; font-variant-numeric: tabular-nums; }
.call__kind { grid-column: 1; font-size: 14px; font-weight: 700; }
.call__kind::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--ink-mute); }
.call__kind--order::before { background: var(--copper); }
.call__kind--resv::before { background: var(--ink); }
.call__kind--msg::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--copper); }
.call__who { grid-column: 1; font-size: 19px; font-weight: 600; }
.call__amt { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.call__more { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; font-size: 16px; color: var(--ink-soft); line-height: 1.45; overflow: hidden; opacity: 0; transition: opacity 220ms ease, margin 220ms ease; }
.call[aria-expanded="true"] .call__more { opacity: 1; margin-top: 8px; display: block; }
.call[aria-expanded="false"] .call__more { display: none; }

/* ---------- story ---------- */
.story { padding: 112px 0; background: var(--paper); }
.story__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.story__logo { width: 300px; height: auto; }
.story__pron { margin-top: 22px; font-size: 18px; color: var(--ink-mute); font-weight: 500; }
.story__pron span { color: var(--copper-text); font-weight: 700; letter-spacing: .04em; margin-right: 6px; }
.story__say { margin-top: 10px; font-size: clamp(22px, 2vw, 28px); line-height: 1.32; letter-spacing: -.015em; font-weight: 500; max-width: 24ch; }
.story__body { padding-top: 8px; }
.story__body p { margin-top: 20px; font-size: 19px; line-height: 1.55; color: var(--ink-soft); max-width: 40ch; }

/* ---------- faq ---------- */
.faq { padding: 112px 0 64px; }
.faq__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.faq__list { display: grid; }
.faq details { border-top: 1px solid var(--line-strong); }
.faq details:last-child { border-bottom: 1px solid var(--line-strong); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; margin-top: -9px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 200ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq details p { padding: 0 0 24px; font-size: 17px; color: var(--ink-soft); max-width: 52ch; }

/* ---------- demo ---------- */
.demo { padding: 64px 0 112px; }
.demo__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; background: var(--cream-2); border-radius: 40px; padding: 72px clamp(28px, 5vw, 72px); max-width: calc(var(--max) + var(--gutter) * 2); }
.demo__title { font-size: clamp(38px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.035em; font-weight: 600; max-width: 14ch; text-wrap: balance; }
.demo__mail { margin-top: 22px; font-size: 16px; color: var(--ink-soft); }
.demo__mail a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.compose { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 14px; background: var(--paper); border-radius: var(--r-card); padding: 26px; box-shadow: var(--shadow-2); }
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.field__opt { font-weight: 500; color: var(--ink-mute); margin-left: 4px; }
.field__err { font-size: 13px; font-weight: 600; color: #9A3F1C; min-height: 0; }
.field label .field__opt { font-size: 13px; }
.field__err:empty { display: none; }
.compose select, .compose textarea {
  width: 100%; border-radius: 14px; border: 0; padding: 0 16px; height: 54px;
  background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-strong);
  font: inherit; font-size: 17px; font-weight: 500; color: var(--ink);
  transition: box-shadow 160ms ease;
}
.compose select {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231A1714' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 18px center; background-size: 12px 8px; background-repeat: no-repeat;
}
.compose textarea { height: auto; min-height: 92px; padding: 14px 16px; resize: vertical; line-height: 1.45; }
.compose select:focus, .compose textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--copper); }
.field.has-error input, .field.has-error select, .field.has-error textarea { box-shadow: inset 0 0 0 2px #9A3F1C; }
.compose .btn { grid-column: 1 / -1; margin-top: 6px; }
.compose .btn[aria-disabled="true"] { opacity: .7; cursor: progress; }
.panels { grid-column: 1 / -1; }
.panel { display: none; padding: 16px 18px; border-radius: 16px; background: var(--cream); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.panel:target, .panel.is-shown { display: block; }
.panel--ok { box-shadow: inset 0 0 0 1.5px var(--copper); }
.panel--warn { box-shadow: inset 0 0 0 1.5px #9A3F1C; }
.panel__h { font-weight: 700; font-size: 17px; }
.panel p + p { margin-top: 4px; font-size: 15px; color: var(--ink-soft); }
.panel a { font-weight: 600; text-underline-offset: 3px; }
.panel__list { margin-top: 8px; display: grid; gap: 4px; font-size: 15px; }
.panel__list a { color: #9A3F1C; }
.compose__note { grid-column: 1 / -1; font-size: 14px; color: var(--ink-soft); }
.compose__more { display: contents; }
.compose__add { display: none; }
.compose__note a { font-weight: 600; text-underline-offset: 3px; }

/* ---------- footer ---------- */
.foot { padding: 0 0 56px; }
.foot__in { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 28px; border-top: 1px solid var(--line-strong); padding-top: 32px; }
.foot__logo { width: 92px; height: auto; }
.foot__by, .foot__small { font-size: 15px; color: var(--ink-soft); }
.foot__by a { color: var(--ink); text-underline-offset: 3px; }
.foot__nav { display: flex; gap: 24px; justify-self: end; }
.foot__nav a { font-size: 15px; font-weight: 500; color: var(--ink-soft); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot__nav a:hover { color: var(--ink); } }

/* ---------- reveal on enter (one shot) ---------- */
.motion .reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out); }
.motion .reveal[data-in] { opacity: 1; transform: none; }
/* The hero paints at full opacity on first frame; motion lives only inside the call card. */
html[data-init] *, html[data-init] *::before, html[data-init] *::after { transition: none !important; }

/* ---------- privacy page ---------- */
.doc { padding: 72px 0 120px; }
.doc__wrap { max-width: 760px; }
.doc h1 { font-size: clamp(40px, 5vw, 64px); letter-spacing: -.035em; line-height: 1; font-weight: 600; }
.doc__meta { margin-top: 18px; color: var(--ink-soft); }
.doc h2 { margin-top: 44px; font-size: 24px; letter-spacing: -.015em; font-weight: 600; }
.doc p { margin-top: 10px; color: var(--ink-soft); font-size: 18px; }
.doc a { font-weight: 600; text-underline-offset: 3px; }

/* ---------- tablet ---------- */
@media (max-width: 1080px) {
  .top__nav { display: none; }
  .hero__in { grid-template-columns: 1fr; gap: 48px; padding-top: 40px; min-height: 0; }
  .hero__sub { max-width: 40ch; }
  .callcard { justify-self: center; width: 744px; max-width: 100%; }

  .stage__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .cell--book, .cell--clock { grid-column: span 12; }
  .cell--ask, .cell--menu { grid-column: span 6; }
  .setup__grid, .owner__grid, .story__grid, .faq__grid, .demo__grid { grid-template-columns: 1fr; gap: 48px; }
  .owner__copy { grid-row: 1; grid-column: 1; }
  .owner__visual { grid-row: 2; grid-column: 1; }
  .order__grid { grid-template-columns: 1fr; grid-template-areas: "head" "card"; gap: 40px; }
}

/* ---------- phone ---------- */
@media (max-width: 767px) {
  :root { --top: 60px; --r-card: 24px; }
  body { font-size: 17px; }
  .top__brand img { height: 26px; }
  .top__login { display: none; }
  .btn { --h: 52px; padding: 0 22px; }
  .btn--sm { --h: 40px; padding: 0 16px; font-size: 14px; }
  .hero__in { padding: 2px var(--gutter) 40px; gap: 0; }
  /* Phones: copy, one primary action and one listen control, then the call card and its ticket
     from the first frame; the name field sits under the ticket. */
  .hero__copy { display: contents; }
  .hero__title { font-size: clamp(32px, 9vw, 38px); }
  .hero__sub { margin-top: 8px; font-size: 16px; line-height: 1.42; max-width: none; }
  .hero__cta { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero__cta .btn { --h: 46px; padding: 0 12px; }
  .callcard { margin-top: 12px; width: 100%; height: auto; display: grid; }
  .callcard::before { display: none; }
  .live { position: relative; left: auto; width: 100%; border-radius: 24px; padding: 12px 16px 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 2px 4px rgba(26, 23, 20, .1), 0 22px 36px -24px rgba(26, 23, 20, .5); }
  .live__top { font-size: 14px; }
  .live__for { display: none; }
  .live__caller, .live__foot { display: none; }
  .live__wave, .live__caps { margin-right: 0; }
  /* Theo's order call keeps its listen control on phones */
  .callcard[data-live] .live__foot { display: flex; margin-top: 10px; padding-top: 10px; }
  .callcard[data-live] .live__listen { width: 42px; height: 42px; }
  /* Brian's card keeps his name and the whole call in compact type */
  .live--regular { padding: 14px 16px 14px; }
  .live--regular .live__caller { display: flex; margin-top: 12px; gap: 12px; }
  .live--regular .live__avatar { width: 40px; height: 40px; font-size: 18px; }
  .live--regular .live__name { font-size: 20px; }
  .live--regular .live__num { margin-top: 1px; font-size: 13.5px; }
  .reg { margin-top: 10px; }
  .reg .cap, .callcard--regular[data-run] .reg .item[data-on] { margin-top: 8px; }
  .callcard--regular[data-run] .reg .item:not([data-on]) { margin-top: 0; }
  .reg .cap__text { font-size: 16px; }
  .reg .cap--notice .cap__text { font-size: 13.5px; }
  .live--regular .live__foot--note { display: grid; margin-top: 12px; padding-top: 10px; }
  .live__foot--note .live__label { font-size: 14px; }
  .live__foot--note .live__small { font-size: 12.5px; }
  .reg { margin-right: 0; }
  .ticket--guest { font-size: 13.5px; }
  /* the guest card has room under the order: its stamp sits in the flow, clear of the lines */
  .callcard--regular .hticket--guest .ticket__sent, .callcard--regular[data-run] .hticket--guest .ticket--guest .ticket__sent.item[data-on] { position: static; margin: 1.1em auto 0; max-width: none; }
  .order { padding: 40px 0 64px; }
  /* the wave rides in the header line, so the card is the header plus one turn of transcript */
  .live__wave { position: absolute; left: 92px; right: 164px; top: 16px; height: 18px; margin: 0; }
  .live__wave i { width: 3px; }
  /* only the current exchange: the box holds one turn, the newest at the bottom */
  .live__caps { height: 62px; margin-top: 8px; }
  .cap { display: block; padding-top: 4px; }
  .cap__who { display: inline; margin-right: 7px; font-size: 11px; }
  .cap__text { font-size: 15px; line-height: 1.3; letter-spacing: -.01em; }
  [data-live]:not([data-run]) .cap__track > li:not(:last-child) { display: none; }
  .hticket { position: relative; z-index: 0; left: auto; top: auto; width: calc(100% - 24px); justify-self: center; margin-top: -18px; transform: none; }
  .ticket--hero { padding: 24px 18px 20px; font-size: 13.5px; line-height: 1.28; }
  /* hidden rows take no space at all, so the paper never shows a gap */
  .ticket--hero .tl, [data-run] .ticket--hero .tl.item[data-on] { margin-top: .42em; }
  .ticket--hero .ticket__rule { margin-top: .7em; }
  .ticket--hero .ticket__check, [data-run] .ticket--hero .ticket__check.item[data-on] { margin-top: .7em; }
  [data-run] .ticket--hero .item:not([data-on]) { margin-top: 0; }
  /* while the call runs, a live row at the foot of the slip says it is still being written */
  .callcard[data-run] .ticket--hero .ticket__wait--live { display: flex; margin-top: .8em; color: var(--copper-text); }
  .callcard[data-run] .ticket__wait--live[data-off] { margin-top: 0; }
  .ticket--hero .tk { width: max-content; justify-content: flex-start; gap: .5em; margin-top: .35em; }
  [data-run] .ticket--hero .tk.item:not([data-on]), [data-run] .ticket--hero .ticket__check.item:not([data-on]) + .tk.item { margin-top: 0; }
  [data-run] .ticket--hero .tk.item[data-on] { margin-top: .35em; }
  .ticket--hero .ticket__check + .tk, [data-run] .ticket--hero .ticket__check.item[data-on] + .tk.item[data-on] { margin-top: .8em; }
  /* the stamp lands beside the name and the time, like a real one on the corner of the slip */
  .ticket--hero .ticket__sent, .callcard[data-run] .ticket--hero .ticket__sent.item[data-on] { position: absolute; right: 26px; bottom: 22px; margin: 0; max-width: 168px; font-size: 14px; line-height: 1.12; letter-spacing: .06em; padding: .55em .8em .55em .55em; }
  .callcard[data-run] .ticket--hero .ticket__sent.item { max-height: none; }
  .try { order: 1; margin-top: 28px; max-width: none; }
  .try__label { font-size: 14px; }
  .try__row { margin-top: 8px; }
  .try input { height: 46px; padding-left: 18px; }
  .try__go { background: var(--ink); color: var(--cream); }

  .owner { padding: 80px 0 88px; }
  .owner .h2 { font-size: 44px; }
  .owner__visual { max-width: 360px; }
  .notif { left: -8px; right: -8px; top: -26px; padding: 13px 14px; border-radius: 22px; gap: 11px; }
  .notif__line { font-size: 15.5px; }
  .notif__sub { font-size: 13.5px; }
  .phone__screen { padding-top: 84px; }
  .call__who { font-size: 17px; }
  .call__amt { font-size: 15.5px; }
  .call__more { font-size: 14.5px; }

  .stage__pin { padding: 72px var(--gutter) 72px; }
  .stage__title { font-size: 32px; }
  .stage__note { font-size: 15px; }
  .stage__grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "head" "convo" "ticket"; row-gap: 28px; }
  .ticket--stage { width: 100%; padding: 20px 18px 18px; font-size: 15px; }
  .line__text { font-size: 18px; }
  .scrub { gap: 12px; margin-top: 32px; padding-right: 16px; }
  .scrub__btn { width: 46px; height: 46px; }
  .scrub__time { min-width: 0; font-size: 14px; }

  .motion .stage[data-ready] .stage__pin { padding-top: calc(var(--top) + 18px); }
  .motion .stage[data-ready] .stage__title { font-size: 24px; }
  .motion .stage[data-ready] .stage__note { margin-top: 4px; font-size: 14px; }
  .motion .stage[data-ready] .stage__grid { grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 12px; }
  .motion .stage[data-ready] .convo[data-moved] { -webkit-mask: linear-gradient(180deg, transparent 0, #000 14px); mask: linear-gradient(180deg, transparent 0, #000 14px); }
  .motion .stage[data-ready] .line__text { font-size: 17px; }
  .motion .stage[data-ready] .ticket--stage { padding: 14px 16px 20px; font-size: 13.5px; }
  .motion .stage[data-ready] .scrub { margin-top: 14px; padding: 6px 14px 6px 6px; }
  .stage + .handles { padding-top: 64px; }
  .top__cta { margin-left: 0; }


  .handles { padding: 8px 0 64px; }
  .bento { margin-top: 36px; gap: 14px; }
  .cell { padding: 24px; grid-column: span 12 !important; }
  .cell--book, .cell--clock { grid-template-columns: 1fr; gap: 22px; }
  .clock { justify-self: center; }
  .resv .resv__time { font-size: 48px; }

  .setup { padding: 64px 0 64px; }
  .tune { margin-top: 28px; }
  .speech__card { padding: 18px 20px 20px; }
  .speech__card:not(.speech__card--in) { margin-left: 24px; }
  .speech__card--in { margin-right: 24px; }
  .steps { grid-template-columns: 1fr; margin-top: 64px; gap: 22px; }

  .phone { border-radius: 50px; padding: 11px; }
  .phone__screen { border-radius: 40px; min-height: 0; padding-left: 12px; padding-right: 12px; }

  .story { padding: 64px 0; }
  .story__logo { width: 200px; }
  .story__grid { gap: 40px; }
  .faq { padding: 64px 0 32px; }
  .faq summary { font-size: 18px; }
  .demo { padding: 32px 0 72px; }
  .demo .wrap.demo__grid { padding: 0 var(--gutter); background: none; border-radius: 0; gap: 28px; }
  .compose { grid-template-columns: 1fr; padding: 20px; }
  /* phones: the four needed fields first; the optional ones open from a link */
  .js .compose__add { display: inline-flex; align-items: baseline; gap: 8px; justify-self: start; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 650; color: var(--copper-text); text-decoration: none; cursor: pointer; }
  .js .compose__addt { text-decoration: underline; text-underline-offset: 4px; }
  .js .compose__opt { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
  .js .compose__add[aria-expanded="true"] { display: none; }
  .js .compose__more:not([data-open]) { display: none; }
  .foot__in { grid-template-columns: 1fr; gap: 16px; }
  .foot__nav { justify-self: start; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; scroll-behavior: auto !important; }
}