/* Hero animation styles: the 7:8 player world, the product UI it shows (chat panel, TouchPoint phone, citations) and its titles.
   Positions are world pixels in a 700x800 frame. */
.screen-phone svg { width: 20px; height: 20px; flex: 0 0 auto; }
.screen-question { position: relative; max-width: 94%; margin-left: auto; padding: 12px 18px; background: rgb(231, 245, 255); border-radius: 12px; }
.screen-answer { margin-top: 16px; }
.screen-records { list-style: disc; margin: 12px 0px 0px; padding: 0px 0px 0px 1.1em; }
.screen-records li { margin: 0px; padding: 0px; }
.screen-records li + li { margin-top: 8px; }
.demo-inline-citations .chat-citations { margin: 0px; }
.composer-mic, .composer-send { display: grid; place-items: center; flex: 0 0 auto; width: 20px; height: 1.4em; }
.composer-send { position: relative; }
.composer-send svg { position: relative; transform: scale(calc(1 - var(--send-press, 0) * 0.2)); }
.composer-send::before { content: ""; position: absolute; width: 28px; height: 28px; border: 2px solid rgb(255, 196, 0); border-radius: 50%; background: rgba(255, 196, 0, 0.4); transform: scale(calc(0.6 + var(--send-pulse, 0) * 0.8)); opacity: 0; }
.screen-phone { background: rgb(255, 255, 255); border: 1px solid rgb(217, 221, 226); border-radius: 25px; color: rgb(33, 37, 41); font: 18px / 1.4 "Google Sans", sans-serif; overflow: hidden; box-shadow: rgba(41, 36, 30, 0.04) 0px 5px 18px; }
.screen-phone { width: min(350px, 100%); height: 610px; display: flex; flex-direction: column; }
.phone-brand { display: flex; align-items: center; gap: 7px; min-height: 54px; padding: 12px 14px; border-bottom: 1px solid rgb(237, 240, 243); flex: 0 0 auto; font-size: 18px; font-weight: 600; }
.phone-brand > span { flex: 1 1 0%; min-width: 0px; }
.phone-product-name { font-weight: 400; }
.phone-brand > svg { color: rgb(83, 97, 108); width: 17px; }
.phone-brand img { width: 24px; height: 24px; flex: 0 0 auto; }
.phone-context { flex: 0 0 auto; padding: 12px 15px; background: rgb(231, 245, 255); color: rgb(20, 85, 132); display: flex; flex-direction: column; gap: 3px; }
.phone-context strong { font-weight: 600; font-size: 18px; }
.phone-context span { font-size: 18px; }
.phone-chat-thread { flex: 1 1 0%; min-height: 0px; padding: 14px 15px 8px; font-size: 16px; line-height: 1.4; }
.phone-chat-thread h3 { font: 600 18px / 1.4 "Google Sans", sans-serif; margin-bottom: 12px; }
.phone-chat-thread p { color: inherit; }
.phone-chat-thread .screen-question { max-width: 100%; padding: 10px 12px; }
.phone-chat-answer { margin-top: 16px; }
.phone-chat-answer > p + p { margin-top: 12px; }
.phone-chat-answer .chat-citations { margin-top: 14px; }
.phone-chat-answer .chat-citation { padding: 8px; }
.phone-chat-composer { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 10px; margin: 0px 15px 12px; padding: 10px 12px; border: 1px solid rgb(222, 226, 230); border-radius: 12px; color: rgb(83, 97, 108); font-size: 16px; }
@media (max-width: 1100px) {
  .screen-question { max-width: 100%; }
}
@media (max-width: 600px) {
  .screen-question { padding: 12px; }
  .screen-phone { max-width: 320px; height: 620px; }
}
@media (max-width: 360px) {
  .screen-phone { height: 690px; }
  .phone-brand { padding-inline: 10px; }
  .phone-context { padding-inline: 12px; }
}
.hp-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgb(220, 226, 230); border-radius: 12px; background: var(--paper); }
.hp-canvas { position: absolute; left: 0px; top: 0px; width: 1280px; height: 720px; transform-origin: 0px 0px; }
.hp-scene { position: absolute; inset: 0px; overflow: hidden; background: var(--paper); font-family: var(--sans); }
.hp-scene [data-el] { will-change: opacity, transform; }
.hp-world { position: absolute; left: 0px; top: 0px; width: 1280px; height: 720px; transform-origin: 0px 0px; }
.hp-phone { position: relative; box-shadow: rgba(20, 35, 51, 0.12) 0px 18px 40px; }
.hp-phone { height: 650px; }
.hp-phone-body { position: relative; flex: 1 1 0%; min-height: 0px; }
.hp-phone .phone-chat-thread { font-size: 15px; overflow: hidden; }
.hp-phone .phone-chat-answer > p + p { margin-top: 8px; }
.hp-phone .phone-chat-answer .chat-citations { margin-top: 10px; }
.hp-phone-chat { position: absolute; inset: 0px; display: flex; flex-direction: column; background: rgb(255, 255, 255); }
.hp-phone-tap { position: absolute; inset: 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; background: rgb(255, 255, 255); text-align: center; }
.hp-phone-tap > svg { color: rgb(18, 102, 158); width: 72px !important; height: 50px !important; }
.hp-phone-tap > div { display: grid; }
.hp-phone-tap p { grid-area: 1 / 1; margin: 0px; font-size: 20px; font-weight: 700; color: var(--ink); }
.hp-phone-tap .hp-detected { color: rgb(18, 102, 158); }
.hp-composer { display: flex; align-items: flex-end; gap: 10px; }
.hp-composer .hp-placeholder, .hp-composer .hp-typed { flex: 1 1 0%; min-width: 0px; }
.hp-composer .hp-typed:empty { display: none; }
.hp-composer .hp-typed { color: rgb(33, 37, 41); }
.hp-hub-card { display: flex; align-items: center; gap: 16px; width: max-content; padding: 18px 24px 18px 16px; border: 1.5px solid rgb(25, 124, 191); border-radius: 16px; background: var(--mist); }
.hp-hub-card .datafront-hub-icon { width: 64px; height: 44px; }
.hp-hub-card .datafront-hub-icon img { max-height: 44px; width: auto; }
.hp-hub-card strong { display: block; font: 500 26px/1.2 var(--serif); letter-spacing: -0.02em; color: var(--ink); }
.hp-hub-card p { margin-top: 2px; font-size: 15px; line-height: 1.4; color: var(--muted); }
.hp-rings { position: absolute; width: 80px; height: 80px; visibility: hidden; opacity: clamp(0, calc((1 - var(--wave, 0)) * 2.5), 1); }
.hp-rings span { position: absolute; inset: 0px; border: 2px solid rgb(255, 196, 0); border-radius: 50%; transform: scale(calc(.3 + var(--wave, 0) * 1.7)); }
.hp-rings span:nth-child(2) { inset: 12px; }
.hp-rings span:nth-child(3) { inset: 24px; }
.cx-word { display: inline-block; visibility: hidden; }
.cx-hub { position: absolute; left: 640px; top: 410px; width: 0px; height: 0px; }
.cx-hub .hp-hub-card { position: absolute; left: 0px; top: 0px; z-index: 1; transform: translate(-50%, -50%); padding: 22px 30px 22px 20px; box-shadow: 0 0 0 calc(var(--pulse, 0) * 16px) #35a5f42e, 0 16px 40px #1423331f; }
.cx-hub .hp-hub-card strong { font-size: 32px; }
.cx-hub .hp-hub-card p { font-size: 17px; }
.cx-tile { position: absolute; left: -41px; top: -41px; display: grid; place-items: center; width: 82px; height: 82px; border-radius: 18px; background: rgb(255, 255, 255); border: 1px solid rgb(227, 231, 235); box-shadow: rgba(20, 35, 51, 0.1) 0px 8px 22px; }
.cx-tile img { max-width: none; }
.cx-device { position: absolute; z-index: 2; width: 400px; height: 690px; padding: 10px; border-radius: 48px; background: rgb(27, 37, 48); box-shadow: rgba(20, 35, 51, 0.25) 0px 24px 60px; transform-origin: 0px 0px; }
.cx-device .hp-phone { width: 100%; height: 100%; border: 0px; border-radius: 38px; box-shadow: none; }
.cx-device .phone-chat-thread { font-size: 16px; }
.th-title { position: absolute; left: 0px; width: 1280px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.th-title p { margin: 0px; font: 500 84px/1.1 var(--serif); letter-spacing: -0.035em; color: var(--ink); }
.th-title .cx-accent { color: var(--link); }
.th-bubble { width: fit-content; max-width: 900px; min-width: 60px; margin: 0px; padding: 20px 30px; border-radius: 20px; font: 30px / 1.45 "Google Sans", sans-serif; color: rgb(33, 37, 41); transform-origin: center center; box-shadow: rgba(20, 35, 51, 0.1) 0px 10px 30px; }
.th-bubble p { min-height: 1.45em; margin: 0px; }
.th-status { display: flex; align-items: center; gap: 10px; margin: 18px 0px 0px; font: 22px / 1.3 "Google Sans", sans-serif; color: rgb(83, 97, 108); }
.th-dots { display: inline-grid; grid-template-columns: repeat(3, 0.32em); margin-left: 1px; }
.th-out-tile { z-index: 0; visibility: hidden; }
.th-lines { position: absolute; left: 0px; top: 0px; z-index: 3; overflow: visible; pointer-events: none; }
.th-lines path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.th-thread { stroke: rgb(53, 165, 244); }
.th-room { position: absolute; left: 0px; overflow: visible; }
.th-rings { z-index: 5; transform: scale(0.55); }
.hp-frame-portrait { aspect-ratio: 7 / 8; }
.hp-canvas-portrait { width: 700px; height: 800px; }
.pt [data-el], .pt .cx-word, .pt .cx-tile { will-change: auto; }
.pt-world { width: 700px; height: 800px; z-index: 1; }
.pt-act { position: absolute; left: 0px; top: 0px; width: 700px; height: 0px; }
.pt .th-title { width: 700px; }
.pt .th-title p { font-size: 56px; line-height: 1.1; }
.pt .th-title .cx-word { line-height: inherit; }
.pt-act[data-el="office"] .th-title { top: 330px; }
.pt-act[data-el="field"] .th-title { top: 2050px; }
.pt-act[data-el="ending"] .th-title { top: 4660px; }
.pt .cx-hub { left: 350px; top: 1000px; z-index: 5; }
.pt .pt-field-hub { top: 3580px; }
.pt .cx-hub .hp-hub-card { padding: 16px 22px 16px 14px; gap: 12px; }
.pt .cx-hub .hp-hub-card strong { font: 600 26px / 1.2 "Google Sans", sans-serif; letter-spacing: 0px; }
.pt .hub-product-name { font-weight: 400; }
.pt .cx-hub .hp-hub-card p { font-size: 14px; }
.pt .cx-tile { left: -36px; top: -36px; width: 72px; height: 72px; border-radius: 16px; }
.pt-panel { position: absolute; left: 50px; top: 1130px; width: 600px; padding: 24px; border: 1px solid rgb(223, 227, 232); border-radius: 18px; background: rgb(255, 255, 255); box-shadow: rgba(20, 35, 51, 0.12) 0px 24px 60px; font: 18px / 1.45 "Google Sans", sans-serif; color: rgb(33, 37, 41); }
.pt-panel p { color: inherit; }
.pt .th-bubble p { margin: 0px; }
.pt-panel-brand { margin: -24px -24px 18px; padding: 16px 24px; border-bottom: 1px solid rgb(237, 240, 243); }
.pt-panel-brand img { height: 32px; width: auto; }
.pt-panel .th-bubble { margin-left: auto; max-width: 90%; padding: 10px 16px; border-radius: 14px; font-size: 20px; box-shadow: none; }
.pt-panel .th-status { justify-content: flex-start; margin: 10px 0px calc(-1.3em - 10px); font-size: 16px; }
.pt-device .phone-chat-answer > p:first-child { margin-top: 0px; }
.pt-panel .screen-answer { margin-top: 14px; }
.pt-panel .chat-citations { margin-top: 14px; gap: 6px; }
.pt-panel .chat-citation { font-size: 15px; padding: 7px 10px; }
.pt .chat-citation { transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; }
/* Added at runtime while a citation lands. */
.pt .chat-citation.is-hit { background: rgb(255, 243, 191); border-color: rgb(224, 168, 0); box-shadow: rgba(255, 196, 0, 0.25) 0px 0px 0px 3px; }
.pt-device { left: 150px; top: 3680px; height: 600px; z-index: 4; }
.pt-device .th-bubble { max-width: 100%; margin-left: auto; padding: 8px 14px; border-radius: 12px; font-size: 16px; box-shadow: none; }
.pt-device .th-status { margin: 10px 0px calc(-1.3em - 10px); font-size: 14px; }
.pt-device .phone-chat-answer { margin-top: 12px; }
.pt-device .hp-phone-tap { justify-content: flex-start; gap: 14px; padding-top: 34px; }
.pt .chat-citation img { width: 18px; height: 18px; object-fit: contain; flex: 0 0 auto; }
.pt .th-lines path { stroke-width: var(--thread, 3); }
#portrait .pt .cx-hub .hp-hub-card strong { font-size: 30px; }
#portrait .pt .cx-hub .hp-hub-card p { font-size: 17px; }
#portrait .pt-panel { font-size: 21px; }
#portrait .pt-panel .th-bubble { font-size: 22px; }
#portrait .pt-panel .th-status { font-size: 19px; }
#portrait .pt-panel .chat-citation { font-size: 18px; padding: 8px 12px; }
#portrait .pt-panel .chat-citation img { width: 22px; height: 22px; }
#portrait .pt-device .phone-chat-thread { font-size: 17px; }
#portrait .pt-device .phone-chat-thread h3 { font-size: 20px; }
#portrait .pt-device .th-bubble { font-size: 17px; }
#portrait .pt-device .th-status { font-size: 16px; }
#portrait .pt-device .chat-citation { font-size: 15px; }
#portrait .pt-panel p, #portrait .pt-device .phone-chat-thread p, #portrait .pt .th-bubble p { font-size: inherit; line-height: inherit; }
.hp-phone-tap .pt-presence { display: flex; align-items: center; gap: 8px; margin: 0px; visibility: hidden; color: rgb(18, 129, 58); font: 700 18px / 1.4 "Google Sans", sans-serif; }
.pt-presence svg { width: 22px !important; height: 22px !important; color: inherit !important; }
.pt .pt-close { gap: 0px; }
.pt .pt-close .pt-close-logo { margin-top: 85px; }
.pt .pt-close-logo { width: 220px; height: auto; visibility: hidden; }