/* Sector pages: the agent at work on every channel (built by .site-build/solution_demo.py).
   The showcase itself is the shared one (case-ui.css .sh, devices .dv, the drawn dock .ld, case-screens.css
   .wa and .ig); this file adds the sector scenes. Units: --u is one 1440th of a desktop screen and one
   417th of a phone screen (case-screens.css), so every scene scales with its device. */
.sd { max-width: 1200px; margin: 0 auto; padding: 0 20px; text-align: left; }
.sd .sh { margin-top: 0; }
.sd .sh-dev::before { display: none; }
.sd .sh-cap h3 { font-family: var(--font-display); }

/* the drawn dock inside a desktop scene: sized from the screen, like the real one beside a page */
.sc-desk .re-ld { font-size: calc(15.5 * var(--u)); border-radius: calc(18 * var(--u)); }
.re-ld .ld-msgs { gap: 0.75em; }
.re-ld .ld-call { font-size: 0.95em; }
.sc .re-ld .ld-pow img, .sc .re-pow img { display: inline-block; }

/* Web: John's face on the left, the conversation on the right */
.re-web { display: grid; grid-template-columns: 42% 58%; grid-template-rows: 100%; background: #090a13; }
.re-web > * { min-height: 0; }
.re-face { position: relative; overflow: hidden; }
.re-face > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.re-face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,10,19,0) 62%, rgba(9,10,19,0.7)); }
.re-who { position: absolute; z-index: 1; left: calc(22 * var(--u)); top: calc(22 * var(--u)); display: inline-flex; align-items: center; gap: calc(8 * var(--u)); height: calc(34 * var(--u)); padding: 0 calc(14 * var(--u)) 0 calc(12 * var(--u)); border-radius: 999px; font-size: calc(14 * var(--u)); font-weight: 600; background: rgba(14,15,24,0.42); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.re-who i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #22c55e; }
.re-call { position: absolute; z-index: 1; left: calc(22 * var(--u)); right: calc(22 * var(--u)); bottom: calc(22 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(9 * var(--u)); height: calc(52 * var(--u)); border-radius: 999px; font-size: calc(15 * var(--u)); font-weight: 600; background: rgba(255,255,255,0.15); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.re-call svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.re-chat { display: flex; flex-direction: column; min-width: 0; padding: calc(26 * var(--u)) calc(38 * var(--u)) calc(14 * var(--u)); }
.re-msgs { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(14 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.5; }
.re-msgs > * { flex-shrink: 0; }
.re-msgs .tx-swap { display: grid; } .re-msgs .tx-swap > * { grid-area: 1 / 1; }
.re-me { align-self: flex-end; max-width: 80%; padding: calc(11 * var(--u)) calc(17 * var(--u)); border-radius: calc(20 * var(--u)) calc(20 * var(--u)) calc(6 * var(--u)) calc(20 * var(--u)); background: #262833; }
.re-ag { max-width: 94%; color: #e9e9f0; }
.re-card { display: grid; grid-template-columns: 40% 1fr; flex: none; overflow: hidden; border-radius: calc(16 * var(--u)); background: #151724; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.re-card > img { width: 100%; height: 100%; object-fit: cover; }
.re-card .tx { padding: calc(15 * var(--u)) calc(18 * var(--u)); }
.re-card small { font-size: calc(11.5 * var(--u)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #a9abff; }
.re-card b { display: block; margin: calc(3 * var(--u)) 0 calc(9 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 600; }
.re-card .ch { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
.re-card .ch span { padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: 999px; font-size: calc(12.5 * var(--u)); color: #d7d8e4; background: rgba(255,255,255,0.08); }
.re-card .pr { margin-top: calc(10 * var(--u)); font-size: calc(14 * var(--u)); color: #b7b8c8; }
.re-card .pr strong { margin-left: calc(4 * var(--u)); font-size: calc(19 * var(--u)); color: #fff; }
.re-card .bt { display: flex; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); }
.re-card .bt span { padding: calc(8 * var(--u)) calc(13 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 600; color: #111; background: #fff; }
.re-card .bt span + span { color: #fff; background: rgba(255,255,255,0.1); }
.re-form { flex: none; }
.re-form .sc-tag { color: #4c4fd7; background: rgba(76,79,215,0.09); }
.re-form .lx-by { color: #4c4fd7; background: rgba(76,79,215,0.08); }
.re-form .lx-send { background: #4c4fd7; box-shadow: none; }
.is-run .re-form .lx-box { animation-name: lxCheck; }
.re-done { flex: none; }
.re-compose { flex: none; display: flex; align-items: center; height: calc(50 * var(--u)); margin-top: calc(16 * var(--u)); padding: 0 calc(6 * var(--u)) 0 calc(18 * var(--u)); border-radius: 999px; font-size: calc(15 * var(--u)); color: #8a8ca0; background: #151724; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
.re-compose span { flex: 1; }
.re-compose i { display: grid; place-items: center; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; color: #cfd0dc; background: rgba(255,255,255,0.08); }
.re-compose svg { width: 45%; height: 45%; }
.re-pow { padding-top: calc(10 * var(--u)); text-align: center; font-size: calc(11.5 * var(--u)); color: #6f7186; }
.re-pow img { display: inline-block; height: calc(12 * var(--u)); width: auto; margin-left: calc(4 * var(--u)); vertical-align: -0.12em; filter: brightness(0) invert(1); opacity: 0.6; }

/* the developer's website: a capture of /demo/solenne/, scrolled in steps; each .re-s1 adds one step */
.re-full { display: block; width: 100%; height: auto; }
.re-s1 { position: absolute; left: 0; top: 0; width: 100%; }
.re-s1 .re-s1, .re-st { position: relative; }
.is-run .re-s1, .is-run .re-st { animation: reScroll 1.3s cubic-bezier(0.65,0,0.35,1) var(--d, 0s) both; }
.is-run .re-st { animation-duration: 0.6s; }
/* a phone thread that scrolls up as new messages arrive, like the app does */
.re-roll-box { justify-content: flex-start !important; overflow: hidden; }
.re-roll { display: flex; flex-direction: column; gap: calc(5 * var(--u)); }
.re-roll > * { flex-shrink: 0; }
.ig .re-roll { gap: calc(6 * var(--u)); }
@keyframes reScroll { from { transform: none; } to { transform: translateY(var(--y)); } }
.re-hl { position: absolute; border: 2px solid #4c4fd7; border-radius: 6px; background: rgba(76,79,215,0.06); }
.re-curw { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.re-cur { position: absolute; left: var(--x0); top: var(--y0); display: flex; align-items: flex-start; }
.re-cur svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); fill: #4c4fd7; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.re-cur b { margin: calc(18 * var(--u)) 0 0 calc(-4 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: 999px; font-size: calc(12.5 * var(--u)); font-weight: 600; color: #fff; background: #4c4fd7; }
.is-run .re-cur { animation: reCur1 1s cubic-bezier(0.45,0,0.2,1) var(--d1) both, reCur2 1s cubic-bezier(0.45,0,0.2,1) var(--d2) forwards; }
@keyframes reCur1 { from { left: var(--x0); top: var(--y0); } to { left: var(--x1); top: var(--y1); } }
@keyframes reCur2 { from { left: var(--x1); top: var(--y1); } to { left: var(--x2); top: var(--y2); } }

/* Side by side: the website on the left two thirds, John beside it */
.re-side { display: grid; grid-template-columns: 66% 34%; background: #0b0c14; }
.re-page { position: relative; overflow: hidden; background: #f6f2eb; }
.re-pg2 { position: absolute; inset: 0; overflow: hidden; background: #f6f2eb; }
.re-dock { min-width: 0; padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)); }

/* Widget: John in the corner of the home page */
.re-wid { background: #f6f2eb; }
.re-corner { position: absolute; z-index: 2; right: 2%; top: 4%; bottom: 3%; width: 28%; filter: drop-shadow(0 calc(24 * var(--u)) calc(40 * var(--u)) rgba(10,14,30,0.4)); }
.re-corner .ld-msgs > * { flex-shrink: 0; }
.re-lead { display: grid; gap: 0.35em; padding: 0.55em 0.7em; border-radius: 0.9em; color: #111; background: #fff; }
.re-lead .lx-field { padding: 0; border: 0; background: none; }
.re-lead .lx-field small { font-size: 0.72em; color: #8a8a93; }
.re-lead .lx-val { color: #111; font-size: 1em; }
.re-sent { display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.9em; font-style: normal; font-weight: 600; color: #1f9a6b; }
.re-sent svg { width: 1.1em; height: 1.1em; }

/* WhatsApp: a photo with a caption, a PDF with its first page, a location */
.wa-b.re-ph { padding: calc(3 * var(--u)); }
.wa-b.re-ph img { width: 100%; border-radius: calc(6 * var(--u)); background: #fff; }
.wa-b.re-ph p { margin: calc(6 * var(--u)) calc(6 * var(--u)) calc(2 * var(--u)); }
.wa-b.re-doc { width: 78%; padding: calc(3 * var(--u)) calc(3 * var(--u)) calc(6 * var(--u)); }
.wa-b.re-doc > img { width: 100%; height: calc(78 * var(--u)); border-radius: calc(6 * var(--u)) calc(6 * var(--u)) 0 0; object-fit: cover; object-position: 50% 35%; }
.re-doc-r { display: flex; align-items: center; gap: calc(9 * var(--u)); padding: calc(8 * var(--u)); border-radius: 0 0 calc(6 * var(--u)) calc(6 * var(--u)); background: #f5f6f6; }
.re-doc-r i { display: grid; place-items: center; flex: none; width: calc(30 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(4 * var(--u)); color: #fff; background: #e5342b; }
.re-doc-r i svg { width: 62%; height: 62%; }
.re-doc-r b { display: block; font-size: calc(12.5 * var(--u)); font-weight: 600; }
.re-doc-r small { display: block; font-size: calc(11 * var(--u)); color: #667781; }
.wa-b.re-loc { width: 78%; padding: calc(3 * var(--u)) calc(3 * var(--u)) calc(7 * var(--u)); }
.wa-b.re-loc .wa-loc { margin-bottom: calc(5 * var(--u)); }
.wa-b.re-loc b, .wa-b.re-loc small { display: block; padding: 0 calc(6 * var(--u)); }
.wa-b.re-loc b { font-size: calc(13 * var(--u)); font-weight: 600; }
.wa-b.re-loc small { font-size: calc(11.5 * var(--u)); color: #667781; }

/* Instagram: the story the visitor replied to */
.re-ig .ig-body > * { flex-shrink: 0; }
.re-story { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: calc(5 * var(--u)); }
.re-story small { font-size: calc(11.5 * var(--u)); color: #737373; }
.re-story img { width: calc(92 * var(--u)); height: calc(150 * var(--u)); border-radius: calc(12 * var(--u)); object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .is-run .re-s1, .is-run .re-st { animation: none; transform: translateY(var(--y)); }
  .is-run .re-cur { animation: none; left: var(--x2); top: var(--y2); }
}

/* WhatsApp voice messages, as WhatsApp on iPhone draws them. Incoming: play, waveform, then the sender's photo with
   a small mic; while it plays the play sign turns to pause and the photo makes way for the 1x speed button; heard
   bars and the playhead are blue, the mic turns from green to blue. Outgoing: the sender's photo first, then play
   and the waveform. Under it the length and the time; the transcript sits under the voice message. */
.wa-b.re-vn { width: 70%; padding: calc(7 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u)); }
.re-vn-row { display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(40 * var(--u)); }
.wa-b.in .re-vn-ava { order: 3; }
.re-vn-ava { position: relative; flex: none; width: calc(38 * var(--u)); height: calc(38 * var(--u)); }
.re-vn-ava img, .re-vn-ava .re-vn-def { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.re-vn-mic { position: absolute; bottom: calc(-1 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: #25d366; }
.wa-b.in .re-vn-mic { left: calc(-5 * var(--u)); }
.wa-b.out .re-vn-mic { right: calc(-5 * var(--u)); color: #34b7f1; }
.re-vn-mic svg { width: 100%; height: 100%; fill: currentColor; stroke: none; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }
.wa-b.out .re-vn-mic svg { filter: drop-shadow(0 0 1px #d9fdd3) drop-shadow(0 0 1px #d9fdd3); }
.re-vn-speed { position: absolute; inset: calc(9 * var(--u)) calc(2 * var(--u)); display: grid; place-items: center; border-radius: 999px; font-size: calc(11.5 * var(--u)); font-weight: 600; color: #fff; background: #8696a0; opacity: 0; }
.re-vn-btn { position: relative; flex: none; width: calc(20 * var(--u)); height: calc(22 * var(--u)); color: #54656f; }
.wa-b.out .re-vn-btn { color: #5d6e66; }
.re-vn-btn svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: currentColor; stroke: none; }
.re-vn-btn .is-pause { opacity: 0; }
.re-vn-wave { position: relative; flex: 1; min-width: 0; height: calc(26 * var(--u)); }
.re-vn-bars { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.re-vn-bars i { display: block; width: calc(2.2 * var(--u)); height: calc(var(--h) * 1%); min-height: calc(2.2 * var(--u)); border-radius: 9px; background: #b0b8bd; }
.wa-b.out .re-vn-bars i { background: #9cbf98; }
.re-vn-on { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); }
.re-vn-on .re-vn-bars i { background: #34b7f1; }
.re-vn-dot { position: absolute; left: 0; top: 50%; width: calc(11 * var(--u)); height: calc(11 * var(--u)); margin: calc(-5.5 * var(--u)) 0 0 calc(-3 * var(--u)); border-radius: 50%; background: #34b7f1; }
.wa-b.out .re-vn-dot { background: #5d6e66; }
.re-vn-meta { display: flex; justify-content: space-between; align-items: center; margin-top: calc(1 * var(--u)); padding-left: calc(1 * var(--u)); }
.wa-b.out .re-vn-meta { padding-left: calc(47 * var(--u)); }
.re-vn-meta small { font-size: calc(11 * var(--u)); color: #667781; font-variant-numeric: tabular-nums; }
.wa-b .re-vn-meta em { float: none; margin: 0; }
.re-vn-tx { display: block; margin: calc(5 * var(--u)) calc(2 * var(--u)) calc(1 * var(--u)); font-size: calc(13.6 * var(--u)); line-height: 1.38; color: #111b21; }
/* playing: the heard part fills, pause and 1x show only while it plays */
/* when it ends WhatsApp puts the playhead back at the start and the bars back to grey; the mic stays blue */
.is-run .re-vn-on { animation: vnPlay var(--t) linear var(--d); }
.is-run .re-vn-dot { animation: vnDot var(--t) linear var(--d); }
.is-run .re-vn.is-play .re-vn-btn .is-pause, .is-run .re-vn.is-play .re-vn-speed { animation: vnOn var(--t) linear var(--d); }
.is-run .re-vn.is-play .re-vn-btn .is-play, .is-run .re-vn.is-play .re-vn-ava img { animation: vnOff var(--t) linear var(--d); }
.is-run .re-vn.is-play .re-vn-mic { animation: vnOff var(--t) linear var(--d), vnHeard 0.01s linear calc(var(--d) + var(--t)) forwards; }
@keyframes vnPlay { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vnDot { from { left: 0; } to { left: 100%; } }
@keyframes vnOn { from, to { opacity: 1; } }
@keyframes vnOff { from, to { opacity: 0; } }
@keyframes vnHeard { to { color: #34b7f1; } }
@media (prefers-reduced-motion: reduce) {
  .is-run .re-vn-on { animation: none; clip-path: none; }
  .is-run .re-vn-dot { animation: none; left: 100%; }
  .is-run .re-vn.is-play * { animation: none !important; }
}

/* Kiosk: our AI kiosk stage (page-kiosk-mall.css .ks) as one visit. Each sheet comes in at --d and leaves at --o,
   in the same box, as the stage's own panels do; the call bar and the dock with Main menu arrive with the call */
.re-ks .re-kss { opacity: 0; }
.is-run .re-ks .re-kss { animation: reKsIn 0.6s cubic-bezier(0.16,1,0.3,1) var(--d, 0s) both, reKsOut 0.28s ease var(--o, 99s) forwards; }
@keyframes reKsIn { from { opacity: 0; transform: translateY(64px); } to { opacity: 1; transform: none; } }
@keyframes reKsOut { to { opacity: 0; transform: translateY(-24px); } }
.is-run .re-ks .ks-tap-b { animation: reKsTap 0.9s ease 3s both; }
.is-run .re-ks .ks-tap-b i { animation: reKsTapI 0.9s ease 3s both; }
@keyframes reKsTap { 30%, 100% { background: var(--kv); color: #fff; transform: scale(0.96); box-shadow: 0 0 0 14px color-mix(in srgb, var(--kv) 32%, transparent); } }
@keyframes reKsTapI { 30%, 100% { background: #fff; color: var(--kv); } }
.re-ks .re-ks-d0 .ks-row { grid-template-columns: minmax(0, 1fr); }
.re-ks .ks-chat-h img, .re-ks .ks-says img { object-fit: cover; }
.re-ks-ph { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 26px; background: #2a2730; }
.re-ks-ph img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.re-ks .ks-rows, .re-ks .re-ks-ask { flex: none; }
.re-ks-plan { flex: 1; min-height: 0; display: grid; place-items: center; padding: 18px; border-radius: 26px; background: #fff; }
.re-ks-plan img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.re-ks-pay { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; }
.re-ks-pay li { display: flex; flex-direction: column; justify-content: center; padding: 18px 22px; border-radius: 22px; background: rgba(255,255,255,0.1); }
.re-ks-pay b { font-family: var(--font-display); font-size: 48px; font-weight: 700; line-height: 1; }
.re-ks-pay small { margin-top: 8px; font-size: 23px; line-height: 1.15; color: rgba(255,255,255,0.74); }
/* the QR code stays small: a corner of the row, not a poster */
.re-ks-pay .ks-qr { gap: 6px; padding: 10px 10px 8px; border-radius: 18px; background: #fff; }
.re-ks-pay .ks-qr img { width: 100px; height: 100px; }
.re-ks-pay .ks-qr small { margin: 0; font-size: 17px; color: #17171c; }
@media (prefers-reduced-motion: reduce) {
  .re-ks .re-kss:last-of-type { opacity: 1; }
}

/* ---------------------------------------------------------------- 3D tour (tour3d in solution_demo.py)
   A dollhouse of the unit in CSS 3D, turning slowly, then a walk through two rooms with the minimap and the tour's
   toolbar. --q is one plan unit (the plan is 520x380 in a viewer 760 units wide); --qu sizes the chrome. */
.t3 { position: relative; overflow: hidden; container-type: inline-size; --q: calc(100cqw / 760); --qu: calc(100cqw / 860); width: 100%; height: 100%;
  background: radial-gradient(120% 90% at 50% 38%, #262a36 0%, #12141b 62%, #0a0b10 100%); color: #fff; font-family: var(--font-main); line-height: 1.2; }
.t3 svg { display: block; flex: none; }
.t3-view { position: absolute; inset: 0; perspective: calc(2200 * var(--q)); perspective-origin: 50% 28%; }
.t3-house { position: absolute; left: 50%; top: 50%; width: calc(520 * var(--q)); height: calc(380 * var(--q)); margin: calc(-200 * var(--q)) 0 0 calc(-260 * var(--q));
  transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-24deg); animation: t3Orbit 16s ease-in-out infinite alternate; }
@keyframes t3Orbit { from { transform: rotateX(56deg) rotateZ(-24deg); } to { transform: rotateX(56deg) rotateZ(20deg); } }
.t3-house i { position: absolute; display: block; }
.t3-shadow { left: calc(4 * var(--q)); top: calc(4 * var(--q)); width: calc(512 * var(--q)); height: calc(372 * var(--q)); background: rgba(0,0,0,0.45);
  box-shadow: 0 0 calc(70 * var(--q)) calc(16 * var(--q)) rgba(0,0,0,0.5); transform: translateZ(-1px); }
.t3-fl { box-shadow: inset 0 0 0 1px rgba(40,30,20,0.12); }
.t3-wood { background: repeating-linear-gradient(90deg, #d9ba90 0 calc(13 * var(--q)), #cfaf85 calc(13 * var(--q)) calc(26 * var(--q))); }
.t3-stone { background: #e8e4dd; }
.t3-tile { background-color: #eef1f3; background-image: linear-gradient(rgba(0,0,0,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.07) 1px, transparent 1px);
  background-size: calc(15 * var(--q)) calc(15 * var(--q)); }
.t3-deck { background: repeating-linear-gradient(0deg, #a17f5c 0 calc(9 * var(--q)), #8f6f4f calc(9 * var(--q)) calc(10 * var(--q))); }
/* a face standing on the floor: along x it turns up about its top edge, along y about its left edge */
.t3-x { transform-origin: 50% 0; transform: rotateX(90deg); }
.t3-y { transform-origin: 0 50%; transform: rotateY(-90deg); }
.t3-wall { --h: 46; background: linear-gradient(0deg, #f7f5f1, #e6e1d9); }
.t3-wall.t3-x { height: calc(var(--h) * var(--q)); box-shadow: inset 0 -2px 0 #fff, inset 0 0 0 1px rgba(60,50,40,0.08); }
.t3-wall.t3-y { width: calc(var(--h) * var(--q)); box-shadow: inset -2px 0 0 #fff, inset 0 0 0 1px rgba(60,50,40,0.08); background: linear-gradient(90deg, #ece8e1, #dcd6cc); }
.t3-wall.t3-g { background: linear-gradient(0deg, rgba(150,195,230,0.32), rgba(205,228,246,0.14)); box-shadow: inset 0 -2px 0 rgba(255,255,255,0.7); }
.t3-wall.t3-r { --h: 16; background: rgba(170,205,232,0.3); box-shadow: inset 0 -2px 0 rgba(255,255,255,0.75); }
.t3-wall.t3-y.t3-r { box-shadow: inset -2px 0 0 rgba(255,255,255,0.75); }

/* walking through: the room photo comes in and moves forward slowly */
.t3-win { opacity: 0; }
.is-run .t3-win { animation: t3In 0.6s ease var(--d) both, t3Out 0.6s ease var(--o) forwards; }
@keyframes t3In { from { opacity: 0; } to { opacity: 1; } }
@keyframes t3Out { to { opacity: 0; } }
.t3-ph { position: absolute; inset: 0; margin: 0; overflow: hidden; background: #111; }
.t3-ph img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.is-run .t3-ph img { animation: t3Walk 7s cubic-bezier(0.25,0.6,0.3,1) var(--d) both; }
@keyframes t3Walk { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.16) translate(-1.5%, 0.5%); } }
.t3-ring { position: absolute; left: 50%; bottom: 17%; width: 8%; aspect-ratio: 2.4; margin-left: -4%; border: 2px solid rgba(255,255,255,0.92); border-radius: 50%;
  box-shadow: 0 0 0 calc(4 * var(--qu)) rgba(255,255,255,0.16), inset 0 0 0 calc(4 * var(--qu)) rgba(255,255,255,0.12); }
.t3-map { position: absolute; right: 3%; top: 5%; width: 21%; padding: 0.6%; border-radius: calc(10 * var(--qu)); background: rgba(10,12,18,0.66);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.t3-map svg { width: 100%; height: auto; }
.t3-map .fl { fill: rgba(255,255,255,0.1); }
.t3-map .bc { fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.4); stroke-width: 3; stroke-dasharray: 8 6; }
.t3-map .wl { fill: none; stroke: rgba(255,255,255,0.88); stroke-width: 7; }
.t3-dot { position: absolute; left: 51%; top: 31.5%; width: 8%; aspect-ratio: 1; border-radius: 50%; background: #6a6cff; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 calc(3 * var(--qu)) rgba(106,108,255,0.35); }
.is-run .t3-dot { animation: t3Move 0.9s ease var(--m) both; }
@keyframes t3Move { to { left: 20.5%; top: 22.5%; } }
/* the tour's chrome */
.t3-badge, .t3-room, .t3-tool { position: absolute; display: flex; align-items: center; background: rgba(10,12,18,0.66); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.t3-badge { left: 3%; top: 5%; gap: calc(7 * var(--qu)); padding: calc(7 * var(--qu)) calc(14 * var(--qu)) calc(7 * var(--qu)) calc(10 * var(--qu)); border-radius: 999px; font-size: calc(13 * var(--qu)); }
.t3-badge svg { width: calc(16 * var(--qu)); height: calc(16 * var(--qu)); color: #a9abff; }
.t3-badge em, .t3-room em { font-style: normal; font-weight: 500; color: rgba(255,255,255,0.7); }
.t3-room { left: 3%; bottom: 5%; gap: calc(8 * var(--qu)); padding: calc(8 * var(--qu)) calc(14 * var(--qu)); border-radius: calc(12 * var(--qu)); font-size: calc(15 * var(--qu)); font-weight: 600; }
.t3-tool { left: 50%; bottom: 5%; gap: calc(4 * var(--qu)); padding: calc(4 * var(--qu)); border-radius: 999px; transform: translateX(-50%); }
.t3-bt { display: inline-flex; align-items: center; gap: calc(6 * var(--qu)); padding: calc(7 * var(--qu)) calc(13 * var(--qu)); border-radius: 999px; white-space: nowrap;
  font-size: calc(12.5 * var(--qu)); font-weight: 600; color: rgba(255,255,255,0.78); }
.t3-bt svg { width: calc(15 * var(--qu)); height: calc(15 * var(--qu)); }
.t3-dh { background: #fff; color: #14161d; }
.is-run .t3-dh { animation: t3Off 0.3s ease var(--d) both, t3On 0.3s ease var(--o) forwards; }
.is-run .t3-wk { animation: t3On 0.3s ease var(--d) both, t3Off 0.3s ease var(--o) forwards; }
@keyframes t3On { to { background: #fff; color: #14161d; } }
@keyframes t3Off { to { background: transparent; color: rgba(255,255,255,0.78); } }
@media (prefers-reduced-motion: reduce) {
  .t3-house { animation: none; }
  .t3-win, .is-run .t3-win { animation: none; opacity: 0; }
}

/* the 3D tour section: right after the channels, on the same black */
.sd-tour { position: relative; z-index: 10; padding: 30px 0 130px; text-align: center; background: #050505; }
.sd-tour h2 { max-width: 800px; margin: 0 auto 20px; font-family: var(--font-display); font-size: clamp(32px, 4vw, 48px); line-height: 1.15; color: #fff; }
.sd-tour > p { max-width: 640px; margin: 0 auto 56px; font-size: 16px; line-height: 1.6; color: var(--text-muted); }
.re-tourd .re-tourv { position: relative; min-width: 0; overflow: hidden; }
.re-tourd .re-tourv .t3 { position: absolute; inset: 0; }
.sd-tour-pts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; max-width: 1200px; margin: 52px auto 0; padding: 0 20px; list-style: none; text-align: left; }
.sd-tour-pts li { display: grid; align-content: start; gap: 8px; }
.sd-tour-pts .ic { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 6px; border-radius: 12px; background: rgba(255,255,255,0.06); color: #a9abff; }
.sd-tour-pts .ic svg { width: 21px; height: 21px; }
.sd-tour-pts b { font-size: 17px; font-weight: 600; color: #fff; }
.sd-tour-pts li > span:last-child { font-size: 15px; line-height: 1.55; color: var(--text-muted); }
@media (max-width: 760px) {
  .sd-tour-pts { grid-template-columns: 1fr; gap: 22px; }
  /* John stays with the tour on a phone too: it is the agent with a 3D tour, not a 3D tour on its own (owner, 2 Nov 2026).
     The framed dock would be too small to read there, so the tour takes the frame and his conversation runs under it */
  .re-tourd { grid-template-columns: minmax(0, 1fr); }
  .re-tourd .re-dock { display: none; }
  .sd-tour-chat { display: grid; gap: 10px; margin-top: 14px; padding: 16px 16px 18px; border-radius: 18px; text-align: left;
    background: #0e0f1c; border: 1px solid rgba(255,255,255,0.08); }
}

/* Kiosk: the 3D tour sheet, the tour filling what the lines leave, its chrome sized for the kiosk */
.re-ks-tour { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 26px; }
.re-ks-tour .t3 { position: absolute; inset: 0; --qu: calc(100cqw / 470); }
.re-ks .ks-says[data-in] { flex: none; }
.re-ks-tour .t3-room { bottom: auto; top: 17%; }
.sd-tour > h2, .sd-tour > p { padding: 0 20px; }
/* the route's QR code stays as small as the floor plan's */
.re-ks .ks-way { grid-template-columns: minmax(0, 1fr) 150px; }
.re-ks .ks-way .ks-qr { gap: 6px; padding: 10px 10px 8px; border-radius: 18px; }
.re-ks .ks-way .ks-qr img { width: 100px; height: 100px; }
.re-ks .ks-way .ks-qr small { font-size: 17px; }

/* Airport kiosk: the flight's four facts, the gate in the kiosk colour */
.re-ks-fl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.re-ks-fl li { padding: 18px 20px; border-radius: 22px; background: rgba(255,255,255,0.1); }
.re-ks-fl small { display: block; font-size: 23px; color: rgba(255,255,255,0.72); }
.re-ks-fl b { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 46px; font-weight: 700; line-height: 1.05; }
.re-ks-fl li.on { background: var(--kv); }
.re-ks-fl li.on small { color: rgba(255,255,255,0.85); }
/* the terminal map (air_map): tilted like the kiosk's 3D maps, the route drawing itself to the gate */
.re-amap { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: #e9ecef; perspective: 1400px; }
.re-amap svg { width: 100%; height: auto; transform: rotateX(26deg); transform-origin: 50% 55%; }
.re-amap .fl { fill: #fff; }
.re-amap .df { fill: #f3ece0; }
.re-amap .blk rect { fill: #dfe3e8; }
.re-amap .g rect { fill: #f7f8fa; stroke: #d3d8de; stroke-width: 2; }
.re-amap .g text, .re-amap .lb { font: 600 22px var(--font-main); fill: #5b6474; text-anchor: middle; }
.re-amap .g.on rect { fill: #6a6cff; stroke: #6a6cff; }
.re-amap .g.on text { fill: #fff; font-weight: 700; }
.re-amap .rt0 { fill: none; stroke: rgba(106,108,255,0.18); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.re-amap .rt { fill: none; stroke: #6a6cff; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.is-run .re-amap .rt { animation: reRoute 2.6s ease-in-out var(--d) forwards; }
@keyframes reRoute { to { stroke-dashoffset: 0; } }
.re-amap .you circle:first-child { fill: #fff; stroke: #1b1d2a; stroke-width: 5; }
.re-amap .you circle:nth-child(2) { fill: #1b1d2a; }
.re-amap .you rect { fill: #1b1d2a; }
.re-amap .you text { font: 600 19px var(--font-main); fill: #fff; text-anchor: middle; }
@media (prefers-reduced-motion: reduce) { .re-amap .rt { stroke-dashoffset: 0; } }

/* the tour's conversation for phones (tour_chat), hidden on wider screens where the dock beside the tour carries it */
@media (min-width: 761px) { .sd-tour-chat { display: none; } }
.sd-tour-chat .who { display: flex; align-items: center; gap: 11px; margin-bottom: 2px; font-size: 15px; font-weight: 600; color: #fff; }
.sd-tour-chat .who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.sd-tour-chat .who span { display: grid; gap: 1px; }
.sd-tour-chat .who small { font-size: 12px; font-weight: 500; color: #a9abff; }
.sd-tour-chat p { margin: 0; font-size: 14px; line-height: 1.5; }
.sd-tour-chat .me { justify-self: end; max-width: 86%; padding: 9px 13px; border-radius: 16px 16px 4px 16px; color: #fff; background: #2a2c3d; }
.sd-tour-chat .ag { max-width: 94%; color: #e6e6ee; }

/* phones: every channel tab in view (two rows) instead of a row that scrolls off the edge, and a 16 px gutter for the
   text around the showcase and in the hero */
@media (max-width: 700px) {
  .sd .sh-tabs { flex-wrap: wrap; justify-content: center; overflow: visible; margin: 0; padding: 0; }
  .sd .sh-tab { height: 40px; padding: 0 14px; }
  #meet-customers-on-every-channel > h2, #meet-customers-on-every-channel > p { padding-left: 16px; padding-right: 16px; }
  .new-hero .nh-actions { flex-wrap: wrap; justify-content: center; gap: 12px; padding: 0 16px; }
  .new-hero .nh-actions .btn-solid-white { padding: 14px 24px; }
}

/* phones: the 3D tour's chrome keeps a readable size (11 to 14 px) instead of shrinking with the frame; the badge's
   subtitle and the Floor plan button make room, and the room label moves up out of the toolbar's way */
@media (max-width: 760px) {
  .sd-tour-stage .t3 { --qu: 0.92px; }
  .sd-tour-stage .t3-badge em, .sd-tour-stage .t3-tool .t3-bt:nth-child(2) { display: none; }
  .sd-tour-stage .t3-room { bottom: auto; top: 18%; }
  .sd-tour-stage .dv-bar { height: 28px; }
  .sd-tour-stage .dv-url { max-width: 72%; height: 20px; padding: 0 10px; font-size: 11px; }
  .sd-tour-stage .dv-url svg { width: 11px; height: 11px; }
}
/* the phone chat card under the tour: a line takes its place only when it arrives, so the card grows with the
   conversation instead of keeping an empty block for the lines still to come (it replays with the section) */
@media (max-width: 760px) {
  .sd-tour-chat { display: flex; flex-direction: column; gap: 0; }
  .sd-tour-chat p { margin-top: 10px; overflow: hidden; }
  .sd-tour-stage:not(.is-run) .sd-tour-chat p[data-in] { display: none; }
  .sd-tour-stage.is-run .sd-tour-chat p[data-in] { animation: tcIn 0.5s cubic-bezier(0.16,1,0.3,1) var(--d) both; }
  .sd-tour-chat .me { align-self: flex-end; }
}
@keyframes tcIn { from { opacity: 0; max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; } to { opacity: 1; max-height: 160px; } }

/* Kiosk: the call timer counts up from when the call starts (4 s); without @property it rests at 0:00 */
@property --kt { syntax: "<integer>"; inherits: false; initial-value: 0; }
.re-ks .re-kt { counter-reset: kt var(--kt); }
.re-ks .re-kt::after { content: "0:" counter(kt, decimal-leading-zero); }
.is-run .re-ks .re-kt { animation: reKt 20s steps(20, end) 4s both; }
@keyframes reKt { from { --kt: 0; } to { --kt: 20; } }
/* the sheets and the call bar keep their text readable over a light shirt behind them */
.re-ks .re-kss:not(.ks-home) { background-color: rgba(16,16,24,0.58); }
.re-ks .ks-bar { background-color: rgba(16,16,24,0.62); }