/* ---------- The demo line: /phone, /fr/telephone, and the home's band ----------
   The number to call (a tel: link, and a code to scan on a computer), three example calls (the home's threads), and
   what a company receives from a call, drawn: the platform in the MacBook, an iPhone's lock screen, the diary. The
   drawn screens reuse the desk's and the devices' own classes (channels.css, site.css). */

.pt-hero { padding-bottom: clamp(56px, 7vw, 96px); }
.pt-hero .lead { max-width: 640px; }
.pt-hero .reveal--d3 { margin-top: clamp(32px, 4vw, 48px); }
.pt-note { max-width: 640px; margin: 28px auto 0; text-align: center; font-size: 15px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

/* the number */
.pcall { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(28px, 4vw, 56px); }
.pcall__main { display: flex; flex-direction: column; align-items: center; max-width: 440px; }
.pcall__num {
  display: block; font-family: var(--font-display); font-size: clamp(40px, 7vw, 72px); font-weight: 700; line-height: 1.05;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: inherit; text-decoration: none; white-space: nowrap;
}
.pcall__num:hover { text-decoration: none; }
.pcall__num:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: 12px; }
.pcall__num--s { font-size: 22px; letter-spacing: -.02em; margin-bottom: 4px; }
.pcall .cta-row { margin-top: 28px; }
.pcall .btn { display: inline-flex; align-items: center; gap: 8px; }
.pcall .btn svg { flex: none; width: 18px; height: 18px; stroke-width: 2; }
.pcall__fine { margin-top: 24px; font-size: 13px; line-height: 1.5; color: var(--on-night-2); text-wrap: balance; }
.pcall__qr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 220px; text-align: center; }
.pcall__code { padding: 16px; border-radius: 18px; background: #fff; color: #1d1d1f; box-shadow: 0 0 0 1px var(--night-line), 0 18px 48px rgba(0, 0, 0, .35); }
.pcall__code svg { display: block; width: 156px; height: 156px; }
.pcall__cap { margin: 0; font-size: 13px; line-height: 1.4; color: var(--on-night-2); text-wrap: balance; }
/* a phone dials from the button: the code is for a screen with a mouse */
@media (hover: none), (max-width: 734px) { .pcall__qr:not(.pcta__qr) { display: none; } }

/* the three example calls, in the home's threads */
.eademo--call { max-width: 560px; }
.eademo--call .thr__bubble { font-size: 17px; }
.eademo--call .eademo__tab { font-size: 15px; }

/* what a call brings */
.pres .tile { --pad: clamp(28px, 3vw, 40px); padding: var(--pad); overflow: hidden; }
.pres__mac { margin: 28px calc(-1 * var(--pad)) calc(-1 * var(--pad)); padding: 0 calc(.1 * var(--pad)); }
.pres__mac .macbook { --w: 100%; max-width: 100%; margin: 0 auto; }
.pres__tile--night { background: var(--night); color: var(--on-night); --link: var(--link-night); }
.section:not(.bg-mist) .pres .tile.pres__tile--night { background: var(--night); }
.pres__tile--night .tile__text { color: var(--on-night-2); }
.pres__tile--night { display: flex; flex-direction: column; }
.pres__phone { display: flex; flex: 1; justify-content: center; align-items: flex-start; min-height: 380px; margin-top: 24px; margin-bottom: calc(-1 * var(--pad)); overflow: hidden; }
.pres__phone .device { --w: 250px; flex: none; }
.pres__tile--cal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 4vw, 56px); }
.pres__ill { max-width: 600px; margin: 28px auto 0; text-align: center; font-size: 15px; line-height: 1.5; color: var(--ink-2); text-wrap: balance; }
@media (max-width: 734px) {
  .pres__tile--cal { grid-template-columns: minmax(0, 1fr); }
  .pres__phone { min-height: 340px; }
}

/* the desk's grey on grey, a little darker so it reads on a phone in daylight */
.dsk--enquiry .dsk-search, .dsk--enquiry .dsk-field { color: #5a5a5f; }
.dsk--enquiry .dsk-search kbd { color: #5a5a5f; }

/* the list of calls, in the desk's own list */
.dsk--enquiry .dsk-people li { flex-wrap: nowrap; }
.dsk--enquiry .dsk-people li > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.3; }
.dsk--enquiry .dsk-people li > span:nth-child(2) > span { font-size: calc(12 * var(--p)); color: #6e6e73; white-space: normal; }
.pq-st { flex: none; margin-left: auto; padding: calc(1 * var(--p)) calc(8 * var(--p)); border-radius: 999px; font-style: normal; font-size: calc(11 * var(--p)); font-weight: 600; white-space: nowrap; }
.pq-st--ok { background: rgba(32, 125, 50, .13); color: #1a6b2a; }
.pq-st--hot { background: rgba(179, 38, 30, .12); color: #b3261e; }
.pq-chip { background: rgba(0, 102, 204, .12); color: #0058b0; }

/* an iPhone's lock screen, drawn in points of a 393 pt screen (1pt = 1/393 of the screen's width), so the notification is the size,
   the font and the proportions the phone gives it. The notification is the app's real one (apns.ts, urgentRequestPushAlert): no title and
   no body, only the app's name and the localized line "Treated as urgent: new request"; the request's title stays off the lock screen. */
.plock__s { --pt: calc(100cqw / 393); container-type: inline-size; position: relative; height: 100%; text-align: center; color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Inter", sans-serif;
  background: radial-gradient(120% 70% at 50% 0, #3b3f6b 0%, #14152b 55%, #08080f 100%); }
.plock__date { padding-top: calc(100 * var(--pt)); font-size: calc(20 * var(--pt)); font-weight: 600; letter-spacing: -.01em; color: rgba(255, 255, 255, .85); }
.plock__time { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Inter", sans-serif; font-size: calc(96 * var(--pt)); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
.plock__note {
  position: absolute; left: calc(16 * var(--pt)); right: calc(16 * var(--pt)); bottom: calc(150 * var(--pt));
  display: flex; align-items: flex-start; gap: calc(11 * var(--pt)); padding: calc(13 * var(--pt)) calc(15 * var(--pt));
  border-radius: calc(24 * var(--pt)); corner-shape: squircle; text-align: left;
  background: rgba(58, 58, 62, .66); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
}
.plock__icon { flex: none; display: block; width: calc(38 * var(--pt)); height: calc(38 * var(--pt)); overflow: hidden; border-radius: 22.37%; corner-shape: squircle; }
.plock__icon img { display: block; width: 100%; height: 100%; }
.plock__txt { flex: 1; min-width: 0; }
.plock__head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(8 * var(--pt)); margin: 0; }
.plock__head b { font-size: calc(15 * var(--pt)); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.plock__head time { flex: none; font-size: calc(13 * var(--pt)); color: rgba(235, 235, 245, .6); }
.plock__body { margin: calc(1 * var(--pt)) 0 0; font-size: calc(15 * var(--pt)); line-height: 1.27; letter-spacing: -.01em; color: rgba(255, 255, 255, .96); }

/* the diary: the hours sit in their own column, the lines start after them and run through the middle of each hour's label, never under its
   text; the event is a continuous-cornered block (a squircle where the browser draws one) with its colour bar inset from the corners */
.pcal { width: 100%; }
.pcal__s { padding: 20px; border-radius: 20px; corner-shape: squircle; background: var(--mist); box-shadow: 0 0 0 1px var(--hair); }
.pcal__day { margin-bottom: 12px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: #b3261e; }
.pcal__grid { position: relative; }
.pcal__hours { display: grid; grid-template-rows: repeat(3, 96px); margin: 0; padding: 0; list-style: none; }
.pcal__hours li { position: relative; box-sizing: border-box; width: 100%; padding-right: calc(100% - 40px); font-size: 12px; line-height: 16px; text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pcal__hours li::after { content: ""; position: absolute; top: 8px; left: 52px; right: 0; border-top: 1px solid var(--line); }
.pcal__ev {
  position: absolute; top: 104px; left: 52px; right: 0; height: 48px; margin: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 0 14px 0 18px; border-radius: 10px; corner-shape: squircle; background: rgba(0, 113, 227, .13); font-size: 13px; line-height: 1.3; color: #0a3d78;
}
.pcal__ev::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--blue); }
.pcal__ev b { font-size: 15px; font-weight: 600; }
.pcal__by { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; line-height: 1.35; color: #1a6b2a; font-weight: 500; }
.pcal__by svg { flex: none; width: 14px; height: 14px; stroke-width: 2.4; }

/* the band on the home */
}

/* the company's early access */
.pearly { max-width: 760px; margin: 0 auto; text-align: center; }
.pearly .lead { max-width: 620px; margin: 20px auto 0; color: var(--on-night-2); }
.pearly .cta-row { margin-top: 32px; }
.pearly .more { color: var(--link-night); }

@media (prefers-reduced-motion: reduce) {
  .pcall__num, .pcall .btn { transition: none; }
}

/* a phone shows the open request, not the whole desk: the MacBook is wider than the tile and cropped to the detail */
@media (max-width: 734px) {
  .pres__mac { overflow: hidden; }
  .pres__mac .macbook { width: 190%; max-width: none; margin-left: -84%; }
}
.dsk--enquiry .dsk-av, .dsk--enquiry .dsk-av--s { background: #6e6e73; }
.dsk--enquiry .dsk-people .is-on > span:nth-child(2) > span { color: #48484c; }
.dsk--enquiry .dsk-people .is-on .pq-st--ok { background: #fff; color: #17601f; }