/* /ai-kiosk/shopping-mall/ : AI kiosks for shopping malls. Classes prefixed pgm-.
   Builds on page-kiosks.css (type, tabs, form). The page opens on the form, because
   visitors arrive from a film: on a phone the sticky button keeps it one tap away.
   Mobile first. */

/* hero: the kiosk at work on the left, title and form on the right, both columns the same height */
.pgm-hero { padding-top: 104px; padding-bottom: 32px; }
.pgm-hero-grid { display: grid; gap: 28px; align-items: start; }
.pgm-hero h1 { max-width: none; margin-top: 0; font-size: clamp(34px, 4vw, 58px); line-height: 1.08; text-wrap: balance; }
.pgm .pgk-head { max-width: 920px; }
.pgm .cs-h2 { font-size: clamp(30px, 3.5vw, 46px); line-height: 1.12; }
.pgm-jobs .cs-h2 { font-size: clamp(30px, 3.2vw, 44px); }
.pgm-hero-img { position: relative; order: -1; justify-self: center; width: min(100%, calc(70svh * 0.5625)); margin: 0; overflow: hidden; border-radius: 22px; aspect-ratio: 9 / 16; background: #15141c; }
.pgm-hero-img video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pgm-hero-sound { position: absolute; right: 12px; bottom: 12px; }
.pgm-hero-form { scroll-margin-top: 92px; min-width: 0; }

.pgm-checks { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 16px 0 0; padding: 0; }
.pgm-checks li { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 16px; font-weight: 600; white-space: nowrap; }
.pgm-checks svg { flex: none; width: 18px; height: 18px; color: #35d39a; }

/* the form: drawn like the store card. White, one hairline, indigo icons, soft buttons; 16px and up, so iOS never zooms in */
.pgm-form { --row: 60px; display: grid; gap: 16px; align-content: start; padding: 20px; border-radius: 24px; border: 0; background: #fff; color: #14162e; box-shadow: none; }
/* the fields: soft rows with an icon tile, like the store card's logo. The tile turns indigo in focus and shows a tick when the field is right;
   the name sits in the row and moves up when it has focus or a value */
.pgm-form .pgk-fields { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pgm-form .pgk-f { --tile: 40px; position: relative; display: block; gap: 0; border: 1.5px solid transparent; border-radius: 16px; background: #f5f6fb; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; }
.pgm-form .pgk-f::before { content: ""; position: absolute; left: 11px; top: calc((var(--row) - var(--tile)) / 2); width: var(--tile); height: var(--tile); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(20,22,46,0.07); pointer-events: none; transition: background 0.2s; }
.pgm-form .pgk-f > svg { position: absolute; left: calc(11px + var(--tile) / 2 - 10px); top: calc(var(--row) / 2 - 10px); width: 20px; height: 20px; color: #4c4fd7; pointer-events: none; transition: color 0.2s, opacity 0.2s; }
.pgm-form .pgk-f > span { position: absolute; left: calc(var(--tile) + 25px); top: calc(var(--row) / 2); color: #4d4f63; font-size: 17px; font-weight: 400; line-height: 1; pointer-events: none; transform: translateY(-50%); transform-origin: left center; transition: transform 0.22s cubic-bezier(0.16,1,0.3,1), color 0.2s; }
.pgm-form .pgk-f input, .pgm-form .pgk-f textarea { display: block; width: 100%; height: var(--row); padding: calc(var(--row) / 2 - 8px) 18px 6px calc(var(--tile) + 25px); border: 0; border-radius: 0; background: transparent; font-size: 17px; color: #14162e; scroll-margin: 110px 0 170px; }
.pgm-form .pgk-f textarea { overflow: hidden; min-height: var(--row); max-height: 168px; padding-top: calc(var(--row) / 2 - 5px); resize: none; line-height: 1.3; }
.pgm-form .pgk-f input:focus, .pgm-form .pgk-f textarea:focus { border: 0; background: transparent; box-shadow: none; outline: none; }
.pgm-form .pgk-f input:-webkit-autofill { -webkit-text-fill-color: #14162e; transition: background-color 99999s ease-out; }
.pgm-form .pgk-f:hover { background: #eff0f8; }
.pgm-form .pgk-f:focus-within { border-color: #4c4fd7; background: #fff; box-shadow: 0 0 0 4px rgba(76,79,215,0.1); }
.pgm-form .pgk-f:focus-within::before { background: #4c4fd7; }
.pgm-form .pgk-f:focus-within > svg { color: #fff; }
.pgm-form .pgk-f:has(.is-bad) { border-color: #d9535c; background: #fff7f7; box-shadow: 0 0 0 4px rgba(217,83,92,0.1); }
.pgm-form .pgk-f:has(.is-bad)::before { background: #fde8e9; }
.pgm-form .pgk-f:has(.is-bad) > svg { color: #c0303a; }
.pgm-form .pgk-f input.is-bad { border: 0; background: transparent; box-shadow: none; }
.pgm-form .pgk-f input:focus + span, .pgm-form .pgk-f input:not(:placeholder-shown) + span, .pgm-form .pgk-f input:-webkit-autofill + span, .pgm-form .pgk-f textarea:focus + span, .pgm-form .pgk-f textarea:not(:placeholder-shown) + span { color: #4c4fd7; transform: translateY(-19px) scale(0.74); }
.pgm-form .pgk-f:has(.is-bad) input + span { color: #c0303a; }
.pgm-form .pgk-f.is-ok::before { background: #e3f6ec; box-shadow: none; }
.pgm-form .pgk-f.is-ok > svg { opacity: 0; }
.pgm-form .pgk-f.is-ok::after { content: ""; position: absolute; left: calc(11px + var(--tile) / 2 - 10px); top: calc(var(--row) / 2 - 10px); width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%231f9a6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; animation: pgmTick 0.32s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes pgmTick { from { opacity: 0; transform: scale(0.5); } }
.pgm-err { margin: -2px 16px 12px 65px; font-size: 14.5px; line-height: 1.35; color: #c0303a; }
.pgm-form .pgk-consent + .pgm-err { margin: -8px 2px 0; }
.pgm-form .pgk-consent { align-items: center; gap: 12px; min-height: 30px; margin: 0; padding: 0; font-size: 15.5px; line-height: 1.3; color: #5f6072; cursor: pointer; }
.pgm-form .pgk-consent input { flex: none; appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; border: 1.5px solid #c9cad8; border-radius: 7px; background: #fff center / 15px no-repeat; cursor: pointer; scroll-margin: 110px 0 170px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.pgm-form .pgk-consent input:hover { border-color: #4c4fd7; }
.pgm-form .pgk-consent input:active { transform: scale(0.92); }
.pgm-form .pgk-consent input:focus-visible { box-shadow: 0 0 0 4px rgba(76,79,215,0.16); outline: none; }
.pgm-form .pgk-consent input.is-bad { border-color: #d9535c; }
.pgm-form .pgk-consent input:checked { border-color: #4c4fd7; background-color: #4c4fd7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pgm-form .pgk-consent a { color: #14162e; text-underline-offset: 3px; }
.pgm-form .pgk-send-row { display: block; margin: 0; }
.pgm-send { position: relative; width: 100%; min-height: 62px; justify-content: center; gap: 10px; padding: 0 60px; border-radius: 16px; background: #4c4fd7; color: #fff; font-size: 17px; font-weight: 600; text-transform: none; letter-spacing: 0; box-shadow: none; transition: background 0.2s, transform 0.2s; }
.pgm-send svg { position: absolute; right: 11px; top: 50%; box-sizing: border-box; width: 40px; height: 40px; margin-top: -20px; padding: 11px; border-radius: 12px; background: rgba(255,255,255,0.16); transition: background 0.2s, color 0.2s, transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.pgm-send:hover { background: #3d40c4; color: #fff; transform: translateY(-1px); box-shadow: none; }
.pgm-send:hover svg { background: #fff; color: #4c4fd7; transform: translateX(2px); }
.pgm-send:active { transform: scale(0.98); }
.pgm-send:disabled { cursor: default; }
.pgm-form.is-sending .pgm-send { opacity: 1; }
.pgm-form.is-sending .pgm-send svg { display: none; }
.pgm-form.is-sending .pgm-send::before { content: ""; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: pgmSpin 0.7s linear infinite; }
@keyframes pgmSpin { to { transform: rotate(360deg); } }
.pgm-form .pgk-status { margin-top: 10px; font-size: 15px; }
.pgm-form .pgk-status:empty { margin: 0; }
.pgm-form.is-sent { align-content: center; }
.pgm-form.is-sent :is(.pgk-fields, .pgk-consent, .pgm-err, .pgm-send) { display: none; }
.pgm-form.is-sent .pgk-status { margin: 0; font-size: 17px; line-height: 1.45; color: #5f6072; }
.pgm-done { display: block; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 13px; background: #4c4fd7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 26px no-repeat; animation: pgmTick 0.4s cubic-bezier(0.16,1,0.3,1) both; }
.pgm-form.is-sent .pgk-status b { display: block; margin-bottom: 2px; font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1.15; color: #14162e; }
.pgm-form .pgm-book { display: flex; width: 100%; min-height: 54px; justify-content: center; margin-top: 18px; border-radius: 12px; background: #4c4fd7; color: #fff; font-size: 16.5px; font-weight: 600; text-transform: none; letter-spacing: 0; transition: background 0.2s, transform 0.2s; }
.pgm-form .pgm-book:hover { background: #3d40c4; color: #fff; transform: translateY(-1px); box-shadow: none; }

/* six results */

/* lists of four, shared by the sync section */

/* kiosk options */

/* what the shopping mall gets: a plain list with hairlines, one line under each title */
.pgm-cards { display: grid; column-gap: clamp(28px, 4vw, 56px); margin-top: 28px; }
.pgm-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 3px 14px; align-content: start; padding: 18px 0; border-top: 1px solid var(--pk-line); }
.pgm-card .ic { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #b9bbff; background: rgba(169,171,255,0.12); }
.pgm-card .ic svg { width: 21px; height: 21px; }
.pgm-card h3 { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.25; color: #fff; }
.pgm-card p { margin: 0; font-size: 15.5px; line-height: 1.45; color: #b4b4c0; }

/* features under the wall: cards of different sizes, each one showing the thing itself */
.pgm-bento { display: grid; gap: 14px; margin-top: 28px; }
.pgm-b { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-width: 0; padding: 18px; border-radius: 20px; border: 1px solid var(--pk-line); background: rgba(255,255,255,0.03); }
.pgm-b-t h3 { margin: 0; font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.25; color: #fff; }
.pgm-b-t p { margin: 4px 0 0; font-size: 15.5px; color: #b4b4c0; }
.pgm-lip-v { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 14px; background: #15141c; }
.pgm-lip-v img, .pgm-lip-v video, .pgm-store-m img, .pgm-store-m video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.pgm-lip-v img, .pgm-lip-v video { object-position: 50% 12%; }
.pgm-lip-v video, .pgm-store-m video { opacity: 0; transition: opacity 0.3s; }
.pgm-lip-v video.on, .pgm-store-m video.on { opacity: 1; }
.pgm-speak { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; background: rgba(10,10,18,0.66); color: #fff; font-size: 14px; font-weight: 600; }
.pgm-speak i { width: 8px; height: 8px; border-radius: 50%; background: #35d39a; animation: ksPulse 1.4s ease-in-out infinite; }
.pgm-store-l { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-width: 0; }
.pgm-store { gap: 14px; }
.pgm-store-c { display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: #fff; color: #14162e; }
.pgm-store-h { display: flex; align-items: center; gap: 12px; }
.pgm-logo { flex: none; display: block; width: 52px; height: 52px; }
.pgm-store-h b { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.2; }
.pgm-store-h small { display: block; margin-top: 2px; font-size: 14px; color: #5f6072; }
.pgm-store-i { list-style: none; display: grid; gap: 7px; margin: 0; padding: 12px 0 0; border-top: 1px solid #e6e7f0; }
.pgm-store-i li { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 500; }
.pgm-store-i svg { flex: none; width: 17px; height: 17px; color: #4c4fd7; }
.pgm-store-a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.pgm-store-a span { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 14px; border-radius: 11px; background: #eef0f8; color: #14162e; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.pgm-store-a span:first-child { background: #4c4fd7; color: #fff; }
.pgm-store-a svg { width: 15px; height: 15px; }
.pgm-store-m { position: relative; overflow: hidden; min-height: 220px; border-radius: 14px; background: #e9e8e4; }
.pgm-faces { display: flex; align-items: center; }
.pgm-faces img, .pgm-faces span { flex: none; width: 54px; height: 54px; margin-right: -10px; border: 2px solid #15162a; border-radius: 50%; object-fit: cover; object-position: 50% 14%; }
.pgm-faces span { display: grid; place-items: center; margin-left: 2px; border: 2px dashed #8f92ff; color: #b9bbff; font-size: 24px; line-height: 1; }
.pgm-voices { display: grid; gap: 6px; }
.pgm-voice { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 14px; border: 1px solid var(--pk-line); border-radius: 12px; color: #d7d7df; font-size: 14.5px; }
.pgm-voice i { display: inline-flex; align-items: center; gap: 2px; height: 22px; }
.pgm-voice u { display: block; width: 2px; border-radius: 1px; background: #a9abff; }
.pgm-set { display: grid; gap: 14px; }
.pgm-set-t { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #fff; font-size: 15px; font-weight: 600; }
.pgm-set-t div { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(255,255,255,0.08); }
.pgm-set-t b, .pgm-set-t i { padding: 7px 11px; border-radius: 8px; font-size: 13.5px; font-style: normal; font-weight: 600; color: #b4b4c0; }
.pgm-set-t b { background: #fff; color: #14162e; }
.pgm-set ul { list-style: none; display: grid; gap: 0; margin: 0; padding: 0; }
.pgm-set li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--pk-line); color: #d7d7df; font-size: 15px; }
.pgm-set li i { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: #4c4fd7; }
.pgm-set li i::after { content: ""; position: absolute; right: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }

/* the agent: the wall of faces from the film, two rows that never stop, one crop for everyone */
.pgm .pgm-agent { overflow: hidden; padding-top: 96px; }
.pgm-fw { display: grid; gap: 14px; margin-top: 28px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.pgm-fw-r { display: flex; gap: 14px; width: max-content; animation: pgmFaces var(--t, 90s) linear infinite; }
.pgm-fw-r img { flex: none; display: block; width: clamp(214px, 20vw, 300px); height: auto; aspect-ratio: 4 / 5; border-radius: 18px; object-fit: cover; }
@keyframes pgmFaces { to { transform: translateX(calc(-25% - 3.5px)); } }

/* languages: a low band of the flag wall from the film, one even tone so the title reads */
.pgm-langs-sec .cs-wrap { position: relative; z-index: 1; }
.pgm .pgm-langs-sec { position: relative; display: grid; place-items: center; overflow: hidden; min-height: 314px; padding-block: 0; background: none; text-align: center; }
.pgm-wall { position: absolute; inset: 0; display: grid; align-content: center; gap: 10px; opacity: 0.3; }
.pgm-langs-sec .cs-h2 { font-size: clamp(40px, 6vw, 88px); line-height: 1.06; color: #fff; text-shadow: 0 2px 26px rgba(0,0,0,0.6); }
.pgm-langs-sec .cs-accent { color: #c9caff; }
.pgm-wall-r { display: flex; width: max-content; animation: pgmWall var(--t, 110s) linear infinite; }
.pgm-wall-r.rev { animation-direction: reverse; }
.pgm-wall-r img { flex: none; display: block; width: auto; height: 66px; }
@keyframes pgmWall { to { transform: translateX(-25%); } }

/* the countertop on its desk, first in the row */
.pgm-ghost { display: grid; place-items: center; border: 2px dashed #9b9dff; border-radius: 12px; }
.pgm-ghost em { color: #b9bbff; font: 600 15px/1.2 var(--font-main); font-style: normal; }
.pgm-desk { border-radius: 2cqw 2cqw 0 0; background: #1d1e25; box-shadow: inset 0 3px 0 #41424d; }

/* the kiosks to scale: the /ai-kiosk/ drawing with one more item, so the row is 631 cm wide (463 + six 28 cm gaps) */
.pgm-lineup .pgk-line-box { --cap: 84px; max-width: none; }
.pgm-lineup .pgk-li { width: calc(var(--w) / 631 * 100%); }
.pgm-lineup .pgk-tick { bottom: calc(var(--cap) + var(--cm) * 100cqw / 631); }
.pgm-lineup .pgk-li figcaption { padding-top: 22px; }

/* going live */
/* the steps: an arrow carries each one to the next, down on a phone, across from 1000px; the arrows light up in turn */
.pgm-steps { list-style: none; display: grid; gap: 30px; margin: 36px 0 0; padding: 0; }
.pgm-steps li { position: relative; min-height: 34px; padding-left: 52px; }
.pgm-steps li i { position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-style: normal; font-size: 14px; font-weight: 600; color: #0d0d0d; background: #fff; }
.pgm-steps li:last-child i { color: #fff; background: #4c4fd7; }
.pgm-steps li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 42px; bottom: -20px; width: 2px; border-radius: 2px; background: currentColor; }
.pgm-steps li:not(:last-child)::before { content: ""; position: absolute; left: 12px; bottom: -21px; width: 10px; height: 10px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pgm-steps li:not(:last-child) { color: rgba(169,171,255,0.38); animation: pgmStep 3.6s ease-in-out infinite; }
.pgm-steps li:nth-child(2) { animation-delay: 0.9s; }
.pgm-steps li:nth-child(3) { animation-delay: 1.8s; }
@keyframes pgmStep { 0%, 50%, 100% { color: rgba(169,171,255,0.38); } 22% { color: #a9abff; } }
.pgm-steps h3 { margin: 5px 0 0; font-size: 20px; font-weight: 600; color: #fff; }
.pgm-steps p { margin: 6px 0 0; font-size: 16px; line-height: 1.55; color: #a9a9b3; }

/* questions */
.pgm-faq-grid { display: grid; gap: 26px; }
.pgm-q { border-top: 1px solid var(--pk-line); }
.pgm-q:last-child { border-bottom: 1px solid var(--pk-line); }
.pgm-q summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 0; cursor: pointer; list-style: none; font-size: 16.5px; font-weight: 500; color: #fff; transition: color 0.25s; }
.pgm-q summary::-webkit-details-marker { display: none; }
.pgm-q summary:hover { color: var(--pk-acc); }
.pgm-q summary i { position: relative; flex: none; width: 14px; height: 14px; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); }
.pgm-q summary i::before, .pgm-q summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: currentColor; }
.pgm-q summary i::after { transform: rotate(90deg); }
.pgm-q[open] summary i { transform: rotate(45deg); }
.pgm-q p { margin: 0; padding: 0 32px 20px 0; font-size: 15px; line-height: 1.65; color: #a9a9b3; }

/* close */
.pgm-close-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pgm-close .cs-btns { justify-content: center; margin-top: 28px; }
.pgm-chan { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; max-width: 900px; margin-top: 56px; padding: 26px 22px; border-radius: 20px; border: 1px solid var(--pk-line); background: rgba(255,255,255,0.03); }
.pgm-chan h3 { margin: 0; font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 27px); font-weight: 600; line-height: 1.25; color: #fff; }
.pgm-chan ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 0; padding: 0; }
.pgm-chan li { display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 500; color: #fff; }
.pgm-chan li svg { flex: none; width: 22px; height: 22px; color: #fff; }
.pgm-chan .cs-btn { justify-content: center; }

/* phones: the form stays one tap away */
.pgm-sticky { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px; justify-content: center; box-shadow: 0 14px 34px rgba(0,0,0,0.42); transition: opacity 0.25s, transform 0.35s cubic-bezier(0.16,1,0.3,1); }
.pgm-sticky.is-hidden { opacity: 0; transform: translateY(16px); pointer-events: none; }
html.leo-peek .pgm-sticky { bottom: 84px; }   /* above Leo's peek bar */

@media (min-width: 640px) {
  .pgm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgm-form { --row: 62px; padding: 28px; }
}
@media (min-width: 880px) {
  .pgm-sticky { display: none; }
}
@media (min-width: 1000px) {
  /* the kiosk film at its own 9:16, one view high; the title and form run its full height */
  .pgm-hero { padding: 104px 0 56px; }
  .pgm-hero h1 { font-size: clamp(42px, 4.6vw, 68px); }
  .pgm-hero-grid { --v: clamp(560px, calc(100svh - 150px), 820px); --f: clamp(54px, calc(var(--v) * 0.09), 74px); grid-template-columns: calc(var(--v) * 0.5625) minmax(0, 1fr); grid-template-areas: "img ." "img copy" "img form" "img ."; grid-template-rows: 1fr auto auto 1fr; column-gap: clamp(40px, 5vw, 80px); row-gap: 0; align-items: stretch; }
  .pgm-hero-copy { grid-area: copy; }
  .pgm-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pgm-card { padding: 22px 0 24px; }
  .pgm-card h3 { font-size: 20px; }
  .pgm-checks { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 18px; }
  .pgm-checks li { font-size: 17px; }
  .pgm-bento { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "talk store store" "talk make beh"; }
  .pgm-talk { grid-area: talk; }
  .pgm-store { grid-area: store; flex-direction: row; align-items: stretch; }
  .pgm-store-l { flex: 0 0 300px; }
  .pgm-store-m { flex: 1; }
  .pgm-make { grid-area: make; }
  .pgm-beh { grid-area: beh; }
  .pgm-lip-v { flex: 1; aspect-ratio: auto; min-height: 480px; }
  .pgm-hero-form { grid-area: form; display: flex; margin-top: 22px; }
  .pgm-hero-img { grid-area: img; align-self: center; justify-self: stretch; width: 100%; height: var(--v); }
  .pgm-form { flex: 1; padding: 28px; }
  .pgm-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .pgm-steps li { padding: 48px 0 0; }
  .pgm-steps li:not(:last-child)::after { left: 46px; right: -20px; top: 16px; bottom: auto; width: auto; height: 2px; }
  .pgm-steps li:not(:last-child)::before { left: auto; right: -21px; top: 12px; bottom: auto; border-width: 2px 2px 0 0; }
  .pgm-steps h3 { margin-top: 0; }
  body.pgm .dvc { left: auto; right: 20px; }
  .pgm-chan { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t b" "c b"; align-items: center; column-gap: 32px; row-gap: 12px; padding: 28px 32px; text-align: left; }
  .pgm-chan h3 { grid-area: t; }
  .pgm-chan ul { grid-area: c; justify-content: flex-start; }
  .pgm-chan .cs-btn { grid-area: b; }
  .pgm-faq-grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(40px, 6vw, 96px); }
}
/* laptop screens: one line of title and lower fields, so the button stays above the fold */
@media (min-width: 1000px) and (max-height: 860px) {
  .pgm-hero h1 { font-size: clamp(38px, 3.6vw, 48px); }
  .pgm-form { --row: 54px; gap: 12px; padding: 22px; }
  .pgm-form .pgk-f { --tile: 36px; }
  .pgm-form .pgk-fields { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pgm-fw-r, .pgm-wall-r, .pgm-speak i, .pgm-steps li, .pgm-form .pgk-f.is-ok::after, .pgm-done { animation: none; }
  .pgm-card, .pgm-sticky, .pgm-q summary i { transition: none; }
}

/* ================================================================ the kiosk
   A 1080x1920 stage scaled to its box (page-kiosk-mall.js), laid out like our live kiosks:
   the avatar never moves or zooms, the call bar sits under the chin, panels open below it. */
.pgm-jobs.pgk-does { align-items: center; }
.pgm-stage { display: flex; flex-direction: column; align-items: center; min-width: 0; }
/* the screen inside a floor kiosk: slim body running down into a floor plate. --h is the whole unit, so it fits one view */
.pgm-stage { --h: clamp(520px, calc(100svh - 170px), 840px); }
.pgm-totem { width: min(100%, calc((var(--h) - 58px) * 0.5625 + 20px)); }
.pgm-totem .pgm-device { position: relative; width: 100%; padding: 10px 10px 34px; border-radius: 18px 18px 6px 6px; background: #0b0b10; box-shadow: inset 0 0 0 2px #c4c7cf, 0 30px 60px -30px rgba(0,0,0,0.5); }
.pgm-totem .ks-fit { border-radius: 8px; }
.pgm-foot { position: relative; display: block; width: 74%; height: 14px; margin: 0 auto; border-radius: 3px 3px 5px 5px; background: #15161c; }
.pgm-foot::after { content: ""; position: absolute; left: -12%; right: -12%; top: 100%; height: 14px; border-radius: 50%; background: rgba(0,0,0,0.12); filter: blur(7px); }
.pgm-device { width: min(100%, 440px); padding: 10px; border-radius: 26px; background: #0b0b10; box-shadow: 0 44px 80px -34px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.08); }
.ks-fit { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 17px; background: #15141c; }
.ks { --kv: #6a6cff; --kv2: color-mix(in srgb, var(--kv) 52%, #fff); --bar: 730px; --sheet: 842px; position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; overflow: hidden; transform: scale(var(--s, 0.4)); transform-origin: 0 0; background: #15141c; color: #fff; font-family: var(--font-main); font-size: 30px; line-height: 1.3; }
.ks p, .ks ul, .ks ol, .ks figure { margin: 0; padding: 0; list-style: none; }
.ks-amb { position: absolute; inset: 0; }
.ks-amb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ks-av { position: absolute; inset: 0 0 auto 0; height: 1000px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 690px, transparent 1000px); mask-image: linear-gradient(to bottom, #000 690px, transparent 1000px); }
.ks-still, .ks-talk { position: absolute; inset: 0 0 auto 0; display: block; width: 100%; height: 1440px; max-width: none; object-fit: cover; }
.ks-talk { opacity: 0; transition: opacity 0.25s ease; }
.ks-talk.on { opacity: 1; }
.ks-logo { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
.ks-logo i { flex: none; width: 1.15em; height: 1.15em; border-radius: 0.32em; background: var(--kv, #6a6cff); box-shadow: inset 0 0 0 0.26em rgba(255,255,255,0.85); transition: background 0.3s; }
.ks-top { position: absolute; left: 40px; top: 36px; z-index: 2; padding: 14px 24px 14px 18px; border-radius: 22px; background: rgba(12,12,20,0.62); font-size: 30px; }

.ks-bar { position: absolute; z-index: 3; left: 40px; right: 40px; top: var(--bar); height: 96px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 0 14px 0 34px; border-radius: 999px; background: rgba(255,255,255,0.17); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); font-size: 29px; font-weight: 600; }
.ks-time { display: inline-flex; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.85); }
.ks-time i { width: 13px; height: 13px; border-radius: 50%; background: #ef4f47; animation: ksPulse 1.6s ease-in-out infinite; }
.ks-st { display: inline-flex; align-items: center; justify-content: center; gap: 16px; }
.ks-st b { font-weight: 600; }
.ks-wv { display: inline-flex; align-items: center; gap: 5px; height: 46px; }
.ks-wv i { width: 5px; height: 12px; border-radius: 3px; background: rgba(255,255,255,0.7); transition: height 0.3s; }
.ks.is-talk .ks-wv i { background: #fff; animation: ksWave 0.9s ease-in-out infinite; }
.ks.is-talk .ks-wv i:nth-child(2) { animation-delay: -0.2s; }
.ks.is-talk .ks-wv i:nth-child(3) { animation-delay: -0.45s; }
.ks.is-talk .ks-wv i:nth-child(4) { animation-delay: -0.1s; }
.ks.is-talk .ks-wv i:nth-child(5) { animation-delay: -0.6s; }
.ks.is-talk .ks-wv i:nth-child(6) { animation-delay: -0.3s; }
.ks.is-talk .ks-wv i:nth-child(7) { animation-delay: -0.75s; }
.ks-end { display: inline-flex; align-items: center; height: 70px; padding: 0 28px; border-radius: 999px; background: #e0473f; font-size: 24px; }
@keyframes ksWave { 0%, 100% { height: 12px; } 50% { height: 42px; } }
@keyframes ksPulse { 50% { opacity: 0.35; } }

/* panels: same box every time, so nothing above them moves */
.ks-sheet { position: absolute; z-index: 2; left: 40px; right: 40px; top: var(--sheet); bottom: 174px; display: flex; flex-direction: column; gap: 22px; padding: 32px 36px; border-radius: 36px; background: rgba(255,255,255,0.1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16); }
.ks .cx-pane { display: flex; align-items: stretch; justify-content: flex-start; opacity: 0; visibility: hidden; transform: translateY(64px); transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.28s; }
.ks .cx-pane.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s ease 0.06s, transform 0.6s cubic-bezier(0.16,1,0.3,1) 0.06s, visibility 0s; }
.ks-h span { display: block; font-size: 27px; font-weight: 600; color: var(--kv2); }
.ks-h p { margin-top: 4px; font-family: var(--font-display); font-size: 64px; font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; }
.ks-says { display: flex; align-items: center; gap: 18px; }
.ks-says img { flex: none; width: 62px; height: 62px; border-radius: 50%; box-shadow: 0 0 0 3px var(--kv2); }
.ks-says p { font-size: 31px; line-height: 1.3; color: rgba(255,255,255,0.92); }
.ks-ic { display: grid; place-items: center; flex: none; width: 66px; height: 66px; border-radius: 20px; background: rgba(255,255,255,0.12); color: var(--kv2); }
.ks-ic svg { width: 34px; height: 34px; }

.ks-map { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 26px; background: #e7e4dd; }
.ks-map video { position: absolute; left: -10px; top: -10px; display: block; width: calc(100% + 20px); height: calc(100% + 20px); max-width: none; object-fit: cover; }
.ks-way { display: grid; grid-template-columns: minmax(0, 1fr) 216px; gap: 18px; }
.ks-way ol { display: grid; gap: 8px; align-content: center; counter-reset: s; }
.ks-way li { counter-increment: s; display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 18px; background: rgba(255,255,255,0.09); font-size: 27px; line-height: 1.2; color: rgba(255,255,255,0.8); }
.ks-way li::before { content: counter(s); flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.14); font-size: 23px; font-weight: 700; }
.ks-way li.on { background: var(--kv); color: #fff; font-weight: 600; }
.ks-way li.on::before { background: #fff; color: var(--kv); }
.ks-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 12px 12px; border-radius: 22px; background: #fff; color: #17171c; text-align: center; }
.ks-qr img { display: block; width: 150px; height: 150px; }
.ks-qr small { font-size: 20px; line-height: 1.15; }

.ks-rows { display: grid; flex: 1; gap: 14px; align-content: start; }
.ks-rows li { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 30px; border-radius: 26px; background: rgba(255,255,255,0.1); }
.ks-rows b { display: block; font-size: 40px; font-weight: 600; line-height: 1.15; }
.ks-rows small { display: block; margin-top: 6px; font-size: 27px; color: rgba(255,255,255,0.72); }
.ks-rows i { flex: none; padding: 12px 22px; border-radius: 999px; background: #fff; color: #17171c; font-size: 28px; font-style: normal; font-weight: 700; }

.ks-brands { gap: 12px; }
.ks-brands li { gap: 24px; padding: 22px 26px; }
.ks-brands li > span:nth-child(2) { flex: 1; min-width: 0; }
.ks-brands b { font-size: 36px; }
.ks-brands small { margin-top: 4px; font-size: 25px; }
.ks-brands em { display: block; margin-top: 8px; font-size: 27px; font-style: normal; line-height: 1.25; color: #fff; }
.ks-mark { flex: none; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 22px; background: #fff; color: #17171c; font-size: 32px; font-weight: 700; letter-spacing: 0.02em; }

.ks-evs { display: grid; flex: 1; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1.25fr 1fr; gap: 14px; }
.ks-evs figure { position: relative; overflow: hidden; min-height: 0; border-radius: 26px; background: #2a2730; }
.ks-evs figure.big { grid-column: 1 / -1; }
.ks-evs img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ks-evs figcaption { position: absolute; inset: auto 0 0 0; padding: 60px 22px 18px; background: linear-gradient(to top, rgba(8,8,12,0.86), transparent); }
.ks-evs small { display: block; font-size: 25px; color: rgba(255,255,255,0.86); }
.ks-evs b { display: block; font-size: 32px; font-weight: 600; line-height: 1.12; }
.ks-evs span { display: none; }
.ks-evs .big small { font-size: 28px; }
.ks-evs .big b { font-family: var(--font-display); font-size: 50px; font-weight: 700; }
.ks-evs .big span { display: block; margin-top: 2px; font-size: 27px; color: rgba(255,255,255,0.8); }

.ks-svcs { display: grid; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.ks-svcs li { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 12px 16px; border-radius: 22px; background: rgba(255,255,255,0.09); }
.ks-svcs b { display: block; font-size: 30px; font-weight: 600; line-height: 1.15; }
.ks-svcs small { display: block; margin-top: 3px; font-size: 24px; line-height: 1.15; color: rgba(255,255,255,0.74); }

.ks-lead { display: flex; flex: 1; flex-direction: column; gap: 16px; }
.ks-f { padding: 20px 28px; border-radius: 22px; background: rgba(255,255,255,0.1); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.1); }
.ks-f small { display: block; font-size: 25px; color: rgba(255,255,255,0.7); }
.ks-f b { display: block; margin-top: 2px; font-size: 40px; font-weight: 600; }
.ks-ok { display: flex; align-items: center; gap: 16px; padding: 8px 4px; font-size: 28px; color: rgba(255,255,255,0.85); }
.ks-ok i { position: relative; flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--kv); }
.ks-ok i::after { content: ""; position: absolute; left: 13px; top: 8px; width: 16px; height: 25px; border: solid #fff; border-width: 0 5px 5px 0; transform: rotate(42deg); }
.ks-go { display: grid; place-items: center; height: 104px; margin-top: auto; border-radius: 999px; background: #fff; color: #17171c; font-size: 34px; font-weight: 700; }

.ks-dock { position: absolute; z-index: 2; left: 40px; right: 40px; bottom: 16px; }
.ks-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; }
.ks-menu { display: inline-flex; align-items: center; gap: 14px; height: 96px; padding: 0 30px 0 26px; border-radius: 26px; background: rgba(255,255,255,0.13); font-size: 28px; font-weight: 600; }
.ks-menu svg { width: 32px; height: 32px; color: var(--kv2); }
.ks-input { display: flex; align-items: center; justify-content: space-between; height: 96px; padding: 0 12px 0 30px; border-radius: 26px; background: rgba(255,255,255,0.13); font-size: 28px; color: rgba(255,255,255,0.7); }
.ks-input i { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; background: var(--kv); color: #fff; }
.ks-input svg { width: 30px; height: 30px; }
.ks-pow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; font-size: 19px; color: rgba(255,255,255,0.7); }
.ks-pow img { display: block; height: 19px; width: auto; filter: brightness(0) invert(1); opacity: 0.85; }
@media (prefers-reduced-motion: reduce) {
  .ks *, .ks .cx-pane, .ks .cx-pane.is-on { animation: none !important; transition: none !important; }
}

.pgm-sound { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 16px 0 13px; border: 0; border-radius: 999px; background: #0d0d0d; color: #fff; font: 600 13.5px/1 var(--font-main); cursor: pointer; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), background 0.25s; }
.pgm-sound:hover { transform: translateY(-1px); background: #26262c; }
.pgm-sound:active { transform: scale(0.97); }
.pgm-sound svg { width: 18px; height: 18px; }
.pgm-sound .w { display: none; }
.pgm-sound[aria-pressed="true"] .w { display: block; }
.pgm-sound[aria-pressed="true"] .x { display: none; }
.pgm-sound.on-dark { background: rgba(10,10,18,0.66); }
.pgm-sound.on-dark:hover { background: rgba(10,10,18,0.84); }

/* ================================================================ languages */

/* ================================================================ the agent */

/* ================================================================ the console: HTML and SVG, sample data */
.pgm-console .cs-wrap + .pgm-wide { margin-top: 36px; }
.pgm-wide { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: 16px; }
.pc { --pc-ink: #14162e; --pc-mute: #6b6e86; --pc-line: #e6e7f0; --pc-a: #4c4fd7; --pc-b: #16b5a3; display: grid; overflow: hidden; border-radius: 22px; border: 1px solid rgba(0,0,0,0.07); background: #f4f5fa; color: var(--pc-ink); font-size: 14px; box-shadow: 0 44px 90px -46px rgba(12,14,40,0.5); }
.pc-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px 16px 12px; background: #0c0e22; color: #fff; }
.pc-brand .ks-logo { font-size: 15.5px; }
.pc-navs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; }
.pc-navs::-webkit-scrollbar { display: none; }
.pc-nav { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 13px; border: 0; border-radius: 11px; background: transparent; color: rgba(255,255,255,0.72); font: 500 14px/1 var(--font-main); text-align: left; white-space: nowrap; }
button.pc-nav { cursor: pointer; transition: background 0.25s, color 0.25s, transform 0.25s cubic-bezier(0.16,1,0.3,1); }
button.pc-nav:hover { background: rgba(255,255,255,0.08); color: #fff; }
button.pc-nav:active { transform: scale(0.98); }
.pc-nav.is-on { background: rgba(255,255,255,0.13); color: #fff; }
.pc-nav.is-off { opacity: 0.6; }
.pc-nav svg { flex: none; width: 17px; height: 17px; }
.pc-main { min-width: 0; padding: 14px; }
.pc-view { display: none; flex-direction: column; gap: 12px; }
.pc-view.is-on { display: flex; }
.pc-per { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: #e6e7f0; }
.pc-per button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--pc-mute); font: 600 12.5px/1 var(--font-main); cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.2s; }
.pc-per button:hover { color: var(--pc-ink); }
.pc-per button:active { transform: scale(0.97); }
.pc-per button.is-on { background: #fff; color: var(--pc-ink); box-shadow: 0 1px 3px rgba(12,14,40,0.1); }
.pc-side .pc-per { display: flex; background: rgba(255,255,255,0.09); }
.pc-side .pc-per button { flex: 1; padding: 0 4px; color: #b7b9d0; white-space: nowrap; }
.pc-side .pc-per button:hover { color: #fff; }
.pc-side .pc-per button.is-on { color: var(--pc-ink); }
.pc[data-on="talks"] .pc-side .pc-per { display: none; }
.pc-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pc-kpi { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 10px; }
.pc-kpi small { grid-column: 1 / -1; }
.pc-kpi, .pc-card { min-width: 0; border: 1px solid var(--pc-line); border-radius: 14px; background: #fff; }
.pc-kpi { padding: 13px 14px; }
.pc-kpi small { display: block; font-size: 12.5px; color: var(--pc-mute); }
.pc-kpi b { display: block; margin-top: 5px; font-family: var(--font-display); font-size: clamp(22px, 2.3vw, 30px); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pc-kpi span { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; color: #0f9a68; }
.pc-card { padding: 14px; }
.pc-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--pc-line); }
.pc-h h4 { margin: 0; font-size: 15px; font-weight: 700; color: var(--pc-ink); }
.pc-ags { display: grid; gap: 10px; }
.pc-ag { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid var(--pc-line); border-radius: 12px; background: #fafbfe; }
.pc-ag > img { display: block; align-self: start; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 10px; object-fit: cover; object-position: 50% 12%; }
.pc-ag-n { margin: 0; font-family: var(--font-display); font-size: 21px; font-weight: 700; }
.pc-ag-l { margin: 1px 0 0; font-size: 12.5px; color: var(--pc-mute); }
.pc-share { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 9px; }
.pc-share b { font-family: var(--font-display); font-size: 20px; color: var(--pc-a); }
.pc-share i { display: block; height: 8px; overflow: hidden; border-radius: 4px; background: #e6e7f0; }
.pc-share u { display: block; height: 100%; border-radius: 4px; background: var(--pc-a); transition: width 0.7s cubic-bezier(0.16,1,0.3,1); }
.pc-ag-d { display: grid; gap: 10px; margin-top: 10px; }
.pc-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pc-mini div { padding: 7px 9px; border: 1px solid var(--pc-line); border-radius: 9px; background: #fff; }
.pc-mini b { display: block; font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-mini small { display: block; white-space: nowrap; font-size: 10.5px; letter-spacing: 0.02em; color: var(--pc-mute); }
.pc-hours { display: flex; align-items: flex-end; gap: 2px; height: 66px; }
.pc-hours i { flex: 1; min-width: 0; border-radius: 2px 2px 0 0; background: #b9bbe9; transition: height 0.6s cubic-bezier(0.16,1,0.3,1); }
.pc-hours i.pk { background: var(--pc-a); }
.pc-note { margin: 5px 0 0; font-size: 12px; color: var(--pc-mute); }
.pc-two, .pc-three { display: grid; gap: 12px; }
.pc-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--pc-mute); }
.pc-key i { width: 14px; height: 3px; border-radius: 2px; background: var(--pc-a); }
.pc-key i.b { margin-left: 8px; background: var(--pc-b); }
.pc-chart { display: flex; flex-direction: column; }
.pc-plot { position: relative; flex: 1; min-height: 124px; touch-action: pan-y; }
.pc-plot svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.pc-plot .gl { stroke: var(--pc-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pc-plot .ln { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.pc-plot .ar { fill: rgba(76,79,215,0.09); stroke: none; }
.pc-plot .cur { opacity: 0; stroke: var(--pc-ink); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.pc-ys { position: absolute; left: 0; font-size: 10.5px; color: var(--pc-mute); background: rgba(255,255,255,0.86); padding-right: 3px; transform: translateY(-50%); }
.pc-tip { position: absolute; top: 0; z-index: 2; padding: 7px 10px; border-radius: 9px; background: #0c0e22; color: #fff; font-size: 12px; line-height: 1.4; white-space: nowrap; pointer-events: none; }
.pc-xs { display: flex; justify-content: space-between; margin-top: 7px; font-size: 11.5px; color: var(--pc-mute); }
.pc-fun { list-style: none; display: grid; gap: 7px; margin: 0; padding: 0; }
.pc-fun div { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 600; }
.pc-fun b { font-variant-numeric: tabular-nums; color: var(--pc-a); }
.pc-fun i { display: block; height: 7px; margin-top: 3px; overflow: hidden; border-radius: 5px; background: #e6e7f0; }
.pc-fun u { display: block; height: 100%; border-radius: 5px; background: var(--pc-a); transition: width 0.7s cubic-bezier(0.16,1,0.3,1); }
.pc-bars { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.pc-bars div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.pc-bars b { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-bars i { display: block; height: 6px; margin-top: 4px; overflow: hidden; border-radius: 3px; background: #eceef6; }
.pc-bars u { display: block; height: 100%; border-radius: 3px; background: var(--pc-a); transition: width 0.7s cubic-bezier(0.16,1,0.3,1); }
.pc-bars.alt u { background: var(--pc-b); }
.pc-donut { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: center; }
.pc-donut svg { display: block; width: 100%; height: auto; transform: rotate(-90deg); }
.pc-donut circle { fill: none; stroke-width: 15; }
.pc-donut ul { list-style: none; display: grid; gap: 5px; margin: 0; padding: 0; }
.pc-donut li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 7px; font-size: 13px; }
.pc-donut li i { width: 10px; height: 10px; border-radius: 3px; }
.pc-donut li b { font-variant-numeric: tabular-nums; }

[data-sy-time] { border-radius: 6px; transition: background 0.4s, box-shadow 0.4s; }
[data-sy-time].is-flash { background: rgba(106,108,255,0.32); box-shadow: 0 0 0 2px rgba(106,108,255,0.32); }

@media (min-width: 640px) {
  .pc-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pc-ag { grid-template-columns: 130px minmax(0, 1fr); }
}
/* conversations: rows on the left, one conversation on the right, the same height as insights */
.pc-talks { display: grid; gap: 12px; }
.pc-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; }
.pc-list li { display: flex; }
.pc-tk { display: grid; grid-template-columns: 32px minmax(0, 1fr) 9px; gap: 12px; align-items: center; width: 100%; min-height: 66px; padding: 10px 14px; border: 1px solid var(--pc-line); border-radius: 14px; background: #fff; color: var(--pc-ink); text-align: left; font: inherit; cursor: pointer; transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.pc-tk:hover { border-color: #c9cbe2; transform: translateX(2px); }
.pc-tk:active { transform: scale(0.99); }
.pc-tk.is-on { border-color: var(--pc-ink); background: var(--pc-ink); color: #fff; }
.pc-tk img { display: block; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.pc-tk b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.pc-tk small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--pc-mute); }
.pc-tk.is-on small { color: #b7b9d0; }
.pc-tk i { width: 9px; height: 9px; border-radius: 50%; background: #1fae7a; }
.pc-tk i.bad { background: #e98a2c; }
.pc-reads { min-width: 0; min-height: 0; display: flex; }
.pc-rd { display: none; flex: 1; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; padding: 20px; border: 1px solid var(--pc-line); border-radius: 16px; background: #fff; }
.pc-rd.is-on { display: flex; }
.pc-rd-h { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.pc-rd-h img { display: block; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 14%; }
.pc-rd-h h4 { margin: 0; text-align: left; font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.2; color: var(--pc-ink); }
.pc-rd-h p { margin: 3px 0 0; font-size: 13.5px; color: var(--pc-mute); }
.pc-out { padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pc-out.ok { background: #e4f6ef; color: #0c7e56; }
.pc-out.bad { background: #fdeee2; color: #b45a10; }
.pc-sum { margin: 0; padding: 14px 16px; border-radius: 12px; background: #f3f4fb; font-size: 15px; line-height: 1.5; color: var(--pc-ink); }
.pc-rd-m { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.pc-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; }
.pc-steps li { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--pc-ink); }
.pc-steps svg { width: 16px; height: 16px; color: #1fae7a; }
.pc-chat { list-style: none; flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--pc-line); }
.pc-chat li { display: flex; }
.pc-chat li.v { justify-content: flex-end; }
.pc-chat p { max-width: 80%; margin: 0; padding: 12px 15px; font-size: 15px; line-height: 1.5; }
.pc-chat .v p { border-radius: 16px 16px 5px 16px; background: var(--pc-a); color: #fff; }
.pc-chat .a p { border-radius: 16px 16px 16px 5px; background: #eef0f8; color: var(--pc-ink); }
.pc-rd[data-read="e"] .pc-chat .o, .pc-rd[data-read="o"] .pc-chat .e { display: none; }
.pc-chat .o[dir="rtl"] { display: block; text-align: right; }

@media (min-width: 880px) {
  .pc { grid-template-columns: 216px minmax(0, 1fr); }
  .pc-view[data-pc-pane="talks"] { height: var(--pc-h, auto); }
  .pc-talks { flex: 1; min-height: 0; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
  .pc-list li { flex: 1 1 0; min-height: 0; max-height: 112px; }
  .pc-side { padding: 22px 16px 14px; }
  .pc-navs { flex-direction: column; margin: 8px 0 0; padding: 0; overflow: visible; }
  .pc-main { padding: 18px; }
  .pc-card { padding: 16px; }
  .pc-two { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .pc-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .pgm .pgk-does-sec { padding-block: 104px 56px; }
  .pgm-jobs.pgk-does { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: clamp(32px, 4vw, 72px); }
  .pgm-stage { --h: clamp(480px, calc(100svh - 230px), 700px); }
  .pgm-jobs .pgk-does-l .pgk-tabs { margin-top: 36px; gap: 6px; }
  .pgm-jobs .pgk-tab { grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: center; padding: 15px 18px; border-radius: 16px; }
  .pgm-jobs .pgk-tab .ic { width: 48px; height: 48px; border-radius: 13px; }
  .pgm-jobs .pgk-tab .ic svg { width: 21px; height: 21px; }
  .pgm-jobs .pgk-tab-t b { padding-top: 0; font-size: 21px; }
  .pc-ags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-ag-d { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; }
  .pc-ag { grid-template-columns: 112px minmax(0, 1fr); }
  .pc-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .pc-ag { grid-template-columns: 150px minmax(0, 1fr); }
}