/* AI receptionist. The night it rings (the head, the time it came in set huge behind the phone), what it does as four
   readouts around the phone, the three calls as a call log you can play or read, and the three plans. Motion is tied
   to the scroll or to a call playing; at rest, or with reduced motion, everything is on the page and readable. */
.ticks { display: grid; gap: 8px; }
.ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: baseline; font-size: 18px; line-height: 1.35; }
.ticks li::before { content: ''; height: 3px; background: var(--signal); translate: 0 -5px; }

/* Head: the night, the time the call came in as big as the band allows, the phone in that call over it. */
.rh { position: relative; overflow: clip; background: var(--night); color: var(--on-dark); }
.rh__time { position: absolute; left: 0; right: max(0px, (100vw - var(--wrap)) / 2 - 2vw); bottom: -0.1em; margin: 0; font: 900 min(23.5vw, 39vh)/.8 var(--display); letter-spacing: -0.02em; text-transform: uppercase; text-align: right; white-space: nowrap; color: var(--signal); pointer-events: none; user-select: none; }
.rh__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s4) var(--s5); align-items: start; min-height: min(calc(100svh - var(--head) - 60px), 820px); padding: clamp(36px, 6vh, 72px) 0 0; }
.rh__copy { position: relative; z-index: 1; display: grid; gap: 22px; justify-items: start; max-width: 540px; }
.rh__title { font-size: clamp(56px, 6vw, 100px); font-weight: 900; line-height: .84; }
.rh__lede { max-width: 36ch; font: 500 clamp(19px, 1.45vw, 22px)/1.4 var(--text); }
.rh__price { color: var(--on-dark-soft); font-size: 18px; max-width: 40ch; }
.rh__price b { color: var(--on-dark); }
.rh__phone { position: relative; justify-self: center; align-self: end; display: grid; justify-items: center; gap: 4px; width: min(100%, 470px); margin-bottom: -2px; }
.rh__phone img { width: 100%; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .5)); }
.rh__phone figcaption { position: absolute; right: -8px; top: 22%; max-width: 15ch; padding: 12px 14px; border-radius: 14px; background: var(--bone); color: var(--ink); font: 600 16px/1.3 var(--text); box-shadow: 0 20px 30px -18px rgba(0, 0, 0, .6); }

/* What it does: the phone in the middle, four readouts around it, each joined to it by a short rule. */
.does { background: var(--bone); padding: clamp(72px, 11vh, 112px) 0 clamp(56px, 8vh, 88px); overflow: clip; }
.does__head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s5); align-items: end; margin-bottom: var(--s4); }
.does__head p { max-width: 44ch; color: var(--slate); }
.does__stage { --gap: clamp(20px, 2.4vw, 40px); --reach: 21%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 1.05fr) minmax(0, 1fr); grid-template-areas: "answer phone book" "text phone hand"; gap: var(--s4) var(--gap); align-items: center; }
.does__phone { grid-area: phone; position: relative; z-index: 1; width: 100%; filter: drop-shadow(0 30px 40px rgba(19, 17, 21, .25)); }
.readout { position: relative; display: grid; gap: 14px; width: 100%; max-width: 400px; }
.readout h3 { font-size: clamp(22px, 1.8vw, 26px); }
.readout--answer { grid-area: answer; justify-self: end; }
.readout--text { grid-area: text; justify-self: end; }
.readout--book { grid-area: book; }
.readout--hand { grid-area: hand; }
.does__stage .readout::after { content: ''; position: absolute; top: 60%; width: calc(var(--gap) + 104px); height: 2px; background: var(--signal); }
.readout--answer::after, .readout--text::after { right: calc(-1 * var(--gap) - 104px); }
.readout--book::after, .readout--hand::after { left: calc(-1 * var(--gap) - 104px); }
.piece { display: grid; gap: 6px; padding: 18px 20px; border-radius: var(--r); background: var(--paper); box-shadow: 0 0 0 1px var(--hair), 0 24px 36px -28px rgba(19, 17, 21, .45); font-size: 17px; }
.piece__big { font: 900 clamp(60px, 5vw, 84px)/.85 var(--display); text-transform: uppercase; color: var(--signal-ink); }
.piece__day { font: 800 15px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--signal-ink); }
.piece__slot { font: 700 20px/1.3 var(--text); }
.piece__slot .num { margin-right: 8px; }
.piece__by, .piece__from { color: var(--slate); font-size: 16px; }
.piece__from { font-weight: 700; }
.piece__bubble { justify-self: start; max-width: 32ch; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: var(--hair); }
.piece--hot { background: var(--night); color: var(--on-dark); box-shadow: 0 24px 36px -24px rgba(19, 17, 21, .6); }
.piece--hot .piece__from { color: var(--signal); }
.piece__sample { justify-self: end; color: var(--slate); font: 600 16px/1 var(--text); font-style: italic; }
.piece--hot .piece__sample { color: var(--on-dark-soft); }
.does__more { max-width: 62ch; margin: var(--s5) auto 0; text-align: center; font: 500 20px/1.45 var(--text); }

/* The calls: a call log on the left; the call picked, its phone and what was said; under the log, what happened after. */
.callsec { background: var(--night); color: var(--on-dark); padding: clamp(72px, 11vh, 112px) 0; }
.callsec__head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s5); align-items: end; margin-bottom: var(--s5); }
.callsec__head p { max-width: 44ch; color: var(--on-dark-soft); }
.calls { display: grid; gap: var(--s4); }
.log { display: grid; gap: 6px; }
.calls:not(.is-tabs) .log { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }   /* without the script: the log is a row of links to the calls below */
.log__call { display: grid; gap: 4px; width: 100%; padding: 16px 18px; border: 0; border-radius: var(--r); background: transparent; box-shadow: inset 0 0 0 1px var(--hair-dark); color: var(--on-dark); text-align: left; text-decoration: none; cursor: pointer; transition: background-color .2s var(--ease), box-shadow .2s var(--ease); }
.log__call:hover { background: var(--night-2); }
.log__call[aria-selected="true"] { background: var(--on-dark); color: var(--ink); box-shadow: none; }
.log__call:focus-visible { outline-color: var(--signal); }
.log__biz { font: 700 19px/1.2 var(--text); }
.log__when { font: 600 16px/1.2 var(--text); font-variant-numeric: tabular-nums; color: var(--signal); }
.log__call[aria-selected="true"] .log__when { color: var(--signal-ink); }
.log__why { font-size: 16px; color: var(--on-dark-soft); }
.log__call[aria-selected="true"] .log__why { color: var(--slate); }

.call { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr); grid-template-areas: "phone body" "phone after"; gap: var(--s3) var(--s5); padding-top: var(--s4); border-top: 1px solid var(--hair-dark); }
.call__phone { grid-area: phone; align-self: start; width: 100%; max-width: 420px; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
.call__body { grid-area: body; display: grid; gap: var(--s3); align-content: start; }
.call__top { display: grid; gap: 8px; justify-items: start; }
.call__biz { font: 800 clamp(26px, 2.2vw, 32px)/1.1 var(--text); }
.call__when { color: var(--on-dark-soft); }
.call__player { display: flex; align-items: center; gap: 18px; margin-top: 8px; }
.call__player[hidden] { display: none; }
.call__play::before { content: ''; width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.call__play[aria-pressed="true"]::before { width: 10px; height: 12px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.call__play:focus-visible { outline-color: var(--signal); }
.call__clock { font: 700 18px/1 var(--text); color: var(--on-dark-soft); min-width: 3ch; }
.call__note { font-size: 16px; color: var(--on-dark-soft); }
.call__lines { display: grid; gap: 14px; }
.line { display: grid; gap: 3px; transition: opacity .3s var(--ease); }
.line__who { font: 700 14px/1.2 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-soft); }
.line--desk .line__who { color: var(--signal); }
.line__said { font-size: 18px; line-height: 1.45; transition: color .3s var(--ease); }
.line__en { font-size: 16px; color: var(--on-dark-soft); }
.call__after { grid-area: after; display: grid; gap: 12px; align-content: start; transition: opacity .4s var(--ease); }
.call__h { font: 700 14px/1.2 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-soft); }
.call__h + * { margin-bottom: 10px; }
.call__done { display: grid; gap: 8px; }
.call__done li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: baseline; font-size: 17px; }
.call__done li::before { content: ''; width: 12px; height: 7px; border-left: 3px solid var(--signal); border-bottom: 3px solid var(--signal); rotate: -45deg; translate: 2px -4px; }
.bubble { justify-self: start; display: grid; gap: 6px; max-width: 36ch; padding: 14px 18px; border-radius: 20px 20px 20px 6px; background: var(--on-dark); color: var(--ink); font-size: 17px; line-height: 1.4; }
.bubble__en { color: var(--slate); font-size: 16px; }

/* While a call plays: what has not been said yet waits, the line being said is lit, and what it did after lands at the end. */
.call.is-playing .line { opacity: .32; }
.call.is-playing .line.is-said { opacity: 1; }
.call.is-playing .line.is-now .line__said { color: var(--signal); }
.call.is-playing .call__after { opacity: .28; }
@media (prefers-reduced-motion: no-preference) {
  .call.is-done .call__done li, .call.is-done .bubble { animation: land .5s var(--ease) both; }
  .call.is-done .call__done li:nth-child(2) { animation-delay: .25s; }
  .call.is-done .call__done li:nth-child(3) { animation-delay: .5s; }
  .call.is-done .bubble { animation-delay: .8s; }
}
@keyframes land { from { opacity: 0; translate: 0 14px; } }

/* With the log working as tabs (receptionist.mjs), one call shows at a time: log, phone and words side by side. */
.calls.is-tabs { grid-template-columns: minmax(250px, .78fr) minmax(0, .8fr) minmax(0, 1.3fr); grid-template-rows: auto 1fr; gap: var(--s4) clamp(28px, 3.2vw, 56px); }
.calls.is-tabs .calls__log { position: relative; z-index: 2; grid-area: 1 / 1; }
.calls.is-tabs .call { grid-column: 1 / -1; grid-row: 1 / span 2; grid-template-columns: subgrid; grid-template-rows: subgrid; grid-template-areas: none; padding: 0; border: 0; }
.calls.is-tabs .call__phone { grid-column: 2; grid-row: 1 / span 2; }
.calls.is-tabs .call__body { grid-column: 3; grid-row: 1 / span 2; }
.calls.is-tabs .call__after { grid-column: 1; grid-row: 2; padding-top: var(--s2); border-top: 1px solid var(--hair-dark); }

/* Plans: three, Pro widest and filled, because it is the one we recommend. */
.plans { background: var(--bone); padding: clamp(72px, 11vh, 112px) 0; }
.plans__head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s5); align-items: end; margin-bottom: var(--s5); }
.plans__head p { max-width: 44ch; color: var(--slate); }
.plans__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s3) clamp(24px, 3vw, 48px); align-items: start; }
.plan { display: grid; gap: 12px; align-content: start; padding-top: 18px; border-top: 3px solid var(--ink); }
.plan.is-best { padding: 26px clamp(22px, 2.4vw, 36px) 32px; border: 0; border-radius: var(--r); background: var(--signal); margin-top: -26px; }
.plan.is-best .ticks li::before { background: var(--ink); }
.plan__best { font: 800 17px/1.2 var(--text); }
.plan__name { font: 800 26px/1.1 var(--text); }
.plan__for { color: var(--slate); }
.plan.is-best .plan__for { color: var(--ink); }
.plan__price { display: flex; align-items: baseline; gap: 10px; font: 700 18px/1 var(--text); }
.plan__price span { font: 900 clamp(72px, 6.4vw, 108px)/.8 var(--display); }
.plan.is-best .plan__price span { font-size: clamp(88px, 7.8vw, 132px); }
.plan__heard { font-size: 16px; color: var(--signal-ink); font-weight: 700; }
.plan.is-best .plan__heard { color: var(--ink); }
.plans__setup { margin-top: var(--s4); font: 700 20px/1.35 var(--text); }

/* Motion tied to the scroll: the readouts come in toward the phone; the phone in the head settles as you leave it. */
@media (prefers-reduced-motion: no-preference) {
  .rh__phone img { animation: rise 1s var(--ease) both; }
  @supports (animation-timeline: view()) {
    .readout--answer, .readout--text { animation: from-left linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    .readout--book, .readout--hand { animation: from-right linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    .does__phone { animation: turn linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .rh__time { animation: drift linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}
@keyframes rise { from { opacity: 0; translate: 0 80px; } }
@keyframes from-left { from { opacity: 0; transform: translateX(-60px); } }
@keyframes from-right { from { opacity: 0; transform: translateX(60px); } }
@keyframes turn { from { transform: rotate(-5deg) translateY(40px); } to { transform: rotate(4deg) translateY(-30px); } }
@keyframes drift { to { transform: translateX(-12%); } }

@media (max-width: 899.98px) {
  .rh__in { grid-template-columns: 1fr; min-height: 0; padding-top: 28px; }
  .rh__phone { width: min(84vw, 400px); }
  .rh__phone figcaption { right: -4px; top: 12%; }
  .rh__time { font-size: 30vw; }
  .does__head, .callsec__head, .plans__head { grid-template-columns: 1fr; }
  .does__stage { grid-template-columns: 1fr; grid-template-areas: "phone" "answer" "book" "text" "hand"; gap: var(--s4); }
  .does__phone { width: min(80vw, 380px); justify-self: center; }
  .readout, .readout--answer, .readout--text { justify-self: stretch; max-width: none; }
  .readout::after { display: none; }
  .calls, .calls.is-tabs { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .calls:not(.is-tabs) .log { grid-template-columns: minmax(0, 1fr); }
  .calls.is-tabs .calls__log { grid-area: auto; }
  .log__call { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 12px 16px; }
  .log__biz { grid-column: 1; }
  .log__when { grid-column: 2; grid-row: 1; align-self: center; }
  .log__why { grid-column: 1 / -1; }
  .calls.is-tabs .call { grid-column: auto; grid-row: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .calls.is-tabs .call__phone, .calls.is-tabs .call__body, .calls.is-tabs .call__after { grid-column: auto; grid-row: auto; }
  .call { grid-template-columns: minmax(0, 1fr); grid-template-areas: "phone" "body" "after"; }
  .call__phone { width: min(70vw, 340px); justify-self: center; }
  .plans__row { grid-template-columns: 1fr; gap: var(--s5); }
  .plan.is-best { margin-top: 0; }
}

/* The phone number in the band that ends the page is a link: give it a full tap target. */
.next__call a { display: inline-flex; align-items: center; min-height: 44px; }