/* A single perspective plane keeps the entire conversation inside the photographed screen. */
.q-section {
  --q-green: #1db954;
  position: relative;
  display: block;
  gap: 0;
  width: 100%;
  height: 800px;
  margin: 0;
  padding: 0;
  overflow: clip;
  isolation: isolate;
  background: #101413;
  border-block: 1px solid var(--line);
}
.q-inner { height: 100%; display: flex; align-items: center; pointer-events: none; }
.q-copy { width: 44%; max-width: 560px; padding-block: 50px; pointer-events: auto; }
.q-copy h2 { font-size: clamp(44px, 4.25vw, 64px); line-height: 1.06; }
.q-copy h2 em { color: #d2e4d8; }
.q-copy > p { color: #aebfb4; }
.q-copy .eyebrow, .q-copy .quiet-link > span { color: var(--q-green); }
.q-copy .eyebrow i { background: var(--q-green); box-shadow: 0 0 12px #1db95455; }
.q-example-label { display: block; margin-top: 30px; color: #76897d; font-size: 7px; letter-spacing: 1.6px; }
.q-visual { position: absolute; inset: 0; overflow: clip; }
.q-scene {
  position: absolute;
  width: 1536px;
  height: 1024px;
  right: max(0px, calc((100vw - 1440px) / 2));
  bottom: -170px;
  transform-origin: top left;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
}
.q-scene-photo { display: block; width: 1536px; height: 1024px; max-width: none; }
.q-device-ui {
  position: absolute;
  left: 0;
  top: 0;
  width: 280px;
  height: 740px;
  transform-origin: 0 0;
  transform: matrix3d(.590962116228,-.174542637575,0,-.000308400132411,-.00354998767283,.914198536964,0,-.00000084559378256,0,0,1,0,1004,111,0,1);
  border-radius: 32px;
  overflow: clip;
  display: flex;
  flex-direction: column;
  color: #f3f5f4;
  background: linear-gradient(115deg, #171d1c, #080b0b 48%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  box-shadow: inset 0 0 0 1px #ffffff0a;
}
.q-status { height: 41px; flex: 0 0 41px; display: flex; align-items: center; justify-content: space-between; padding: 5px 18px 0; position: relative; }
.q-status > time { font-size: 11px; font-weight: 600; }
.q-island { width: 78px; height: 20px; border-radius: 20px; background: #000; position: absolute; top: 11px; left: calc(50% - 39px); }
.q-status-icons { display: flex; gap: 4px; align-items: center; }
.q-status-icons svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.q-status-icons svg:last-child { width: 19px; }
.q-device-contact { position: relative; min-height: 75px; padding: 4px 0 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-bottom: 1px solid #ffffff13; background: #101615b8; }
.q-back { position: absolute; left: 13px; top: 26px; width: 9px; height: 16px; fill: none; stroke: var(--q-green); stroke-width: 2.1; }
.q-device-avatar { width: 31px; height: 31px; border-radius: 50%; background: #1db95414; display: grid; place-items: center; }
.q-device-avatar img { width: 17px; height: 22px; object-fit: contain; }
.q-device-contact strong { font-size: 11px; font-weight: 500; }
.q-device-contact strong span { margin-left: 3px; color: #8c9b92; }
.q-conversation { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 10px 11px 8px; }
.q-message-time { align-self: center; font-size: 8.5px; color: #8d9a92; margin-bottom: 2px; }
.q-bubble { margin: 0; padding: 10px 11px; font-size: 14px; line-height: 1.38; letter-spacing: 0; border-radius: 14px; max-width: 92%; overflow-wrap: break-word; }
.q-bubble-out { align-self: flex-end; background: var(--q-green); color: #041b0c; border-bottom-right-radius: 4px; font-weight: 450; }
.q-bubble-in { background: #242b28; color: #eef2ef; border-bottom-left-radius: 4px; }
.q-report { display: block; width: 91%; border-radius: 13px; border-bottom-left-radius: 4px; overflow: hidden; background: #242b28; color: #f0f4f0; border: 1px solid #ffffff12; flex-shrink: 0; transition: border-color .2s, background .2s; }
.q-report:hover { border-color: var(--q-green); background: #2c3630; }
.q-report:focus-visible { outline: 2px solid var(--q-green); outline-offset: 2px; }
.q-report-map { width: 100%; height: 85px; object-fit: cover; object-position: center 48%; }
.q-report-meta { display: flex; align-items: flex-start; gap: 7px; padding: 9px; }
.q-pdf-badge { flex: 0 0 27px; width: 27px; height: 33px; display: grid; place-items: center; background: #1db95415; border: 1px solid #1db95458; border-radius: 4px; color: #7fe7a3; font-size: 7px; font-weight: 650; letter-spacing: .3px; }
.q-report-meta strong { display: block; font-size: 11px; line-height: 1.3; font-weight: 550; }
.q-report-meta small { display: block; margin-top: 4px; color: #a0b5a8; font-size: 9.5px; }
.q-compose { flex: 0 0 42px; padding: 3px 11px 6px; display: flex; align-items: center; gap: 7px; }
.q-compose-plus { display: grid; place-items: center; flex: 0 0 25px; height: 25px; border-radius: 50%; background: #252d28; color: #b7c4bd; font-size: 23px; font-weight: 300; line-height: 1; }
.q-compose-field { flex: 1; height: 29px; padding: 0 10px; border: 1px solid #47534c; border-radius: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: #a2afa7; }
.q-compose-field svg { width: 11px; height: 15px; fill: none; stroke: #95a69a; stroke-width: 1.6; }
.q-home-bar { flex: 0 0 15px; position: relative; }
.q-home-bar::after { content: ''; position: absolute; height: 4px; border-radius: 8px; width: 92px; left: calc(50% - 46px); top: 3px; background: #e4e9e6; }

@media (max-width: 1000px) {
  .q-section { display: flex; flex-direction: column; height: auto; }
  .q-inner { order: -1; height: auto; }
  .q-copy { width: 100%; max-width: 640px; padding: 54px 0 30px; }
  .q-copy h2 { font-size: clamp(43px, 6.6vw, 60px); }
  .q-copy h2 br:last-child { display: none; }
  .q-visual { position: relative; inset: auto; width: 100%; height: 800px; }
  .q-scene { left: calc(50% - 1154px); right: auto; top: -54px; bottom: auto; }
}
@media (max-width: 600px) {
  .q-copy { padding: 43px 0 28px; }
  .q-copy h2 { font-size: 43px; }
  .q-copy > p { font-size: 15px; margin-top: 22px; }
  .q-copy > .quiet-link { font-size: 11px; margin-top: 22px; }
  .q-example-label { margin-top: 20px; font-size: 6px; }
  .q-visual { height: 725px; }
  .q-scene { left: calc(50% - 1038.6px); top: -40px; transform: scale(.9); }
}
@media (max-width: 360px) {
  .q-visual { height: 690px; }
  .q-scene { left: calc(50% - 980.9px); top: -37px; transform: scale(.85); }
}