.screen-stage { position: relative; width: 100%; margin: 0px; }
.screen-image-button { display: block; position: relative; border: 0px; margin: 0px; padding: 0px; background: transparent; text-align: left; cursor: zoom-in; }
.screen-image-button img { display: block; width: 100%; height: auto; }
.screen-phone { border: 5px solid rgb(39, 39, 41); border-radius: 37px; background: rgb(39, 39, 41); box-shadow: rgba(27, 23, 20, 0.22) 0px 16px 32px -12px, rgb(167, 166, 163) 0px 0px 0px 1px; overflow: hidden; }
.screen-phone img { border-radius: 31px; }
.screen-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 20px); align-items: start; }
.screen-pair-item { min-width: 0; margin: 0; }
.screen-pair .screen-phone { --pair-radius: clamp(16px, 2.1vw, 28px); width: 100%; border-width: 4px; border-radius: var(--pair-radius); }
.screen-pair .screen-phone img { border-radius: calc(var(--pair-radius) - 4px); }
.screen-pair figcaption { margin-top: 12px; color: var(--text-sub); text-align: center; font-size: 12px; font-weight: 600; line-height: 1.5; }
.screen-expand-hint { margin: 16px 0px 0px; text-align: center; color: rgb(133, 124, 113); font-size: 12px; line-height: 1.5; }
.focus-stage { padding: 8px 0px 0px 8px; }
.focus-stage .screen-phone { width: 336px; max-width: 100%; }
.focus-detail { position: absolute; right: 0px; top: 64%; width: 292px; padding: 14px 12px 12px; border: 1px solid rgb(232, 226, 217); border-radius: 16px; background: rgb(255, 255, 255); box-shadow: rgba(53, 40, 24, 0.28) 0px 14px 32px -14px; }
.detail-heading { display: flex; align-items: center; gap: 7px; margin: 0px 0px 12px; color: rgb(63, 56, 48); font-size: 13px; font-weight: 600; line-height: 1.6; }
.detail-heading::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.screen-crop { position: relative; display: block; width: 100%; overflow: hidden; aspect-ratio: var(--crop-width) / var(--crop-height); border-radius: 8px; background: rgb(233, 239, 240); }
.screen-crop img { position: absolute; width: calc(720 / var(--crop-width) * 100%); max-width: none; left: calc(var(--crop-x) / var(--crop-width) * -100%); top: calc(var(--crop-y) / var(--crop-height) * -100%); height: auto; }
.focus-detail .screen-image-button { width: 100%; }
.image-dialog { position: fixed; padding: 16px; border: 1px solid rgb(232, 226, 216); border-radius: 18px; max-width: min(440px, -28px + 100vw); max-height: calc(100dvh - 28px); background: rgb(255, 253, 249); color: rgb(41, 38, 34); overflow: auto; }
.image-dialog::backdrop { background: rgba(30, 27, 24, 0.66); }
.dialog-top { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 13px; }
.dialog-top p { margin: 0px; font-size: 14px; font-weight: 600; }
.dialog-top button { flex-shrink: 0; border: 1px solid rgb(221, 212, 199); border-radius: 9px; min-height: 40px; padding: 7px 12px; background: white; cursor: pointer; font-size: 13px; }
.image-dialog > img { display: block; width: auto; height: calc(100dvh - 130px); max-width: 100%; object-fit: contain; margin: auto; border-radius: 12px; }
body.image-open { overflow: hidden; }
@media (max-width: 1050px) and (min-width: 901px) {
.focus-stage .screen-phone { width: 300px; }
.focus-detail { width: 267px; }
#marker .focus-detail { top: 60%; }
}
@media (max-width: 640px) {
.focus-stage { padding: 4px 0px 0px; }
.focus-stage .screen-phone { width: 304px; }
.screen-phone { border-width: 4px; border-radius: 33px; }
.screen-phone img { border-radius: 28px; }
.focus-detail { width: min(274px, 94%); padding: 12px 10px 10px; border-radius: 14px; }
#ai-voice .focus-detail { top: 63%; }
#marker .focus-detail { top: 60%; }
.detail-heading { font-size: 12px; margin-bottom: 10px; }
.screen-expand-hint { font-size: 12px; }
}
@media (max-width: 360px) {
.detail-heading { font-size: 11px; }
}

/* The approved screenshot layout, within the existing full landing page. */
.screen-image-button, .image-dialog button { font-family: inherit; }
.image-dialog { margin: auto; }
.screen-image-button:focus-visible, .image-dialog button:focus-visible { outline: 3px solid #b95122; outline-offset: 5px; }
html .experience-step { padding-block: 58px; scroll-margin-top: 96px; }
html .experience-gallery { display: block; width: 100%; max-width: none; }
@media (max-width: 900px) {
  html .experience-step, html .experience-step--reverse { padding: 44px 0 44px 42px; }
  html .experience-gallery { max-width: 510px; }
}
@media (max-width: 640px) {
  html .features { padding-inline: 18px; }
  html .experience-step, html .experience-step--reverse { padding: 35px 0 42px 28px; gap: 29px; }
  html .experience-step::after { top: 47px; }
  html .experience-description .experience-no-break { white-space: normal; }
}
@media (max-width: 360px) {
  html .features { padding-inline: 14px; }
  html .experience-step, html .experience-step--reverse { padding-left: 24px; }
}

.screens-language-note { margin: 12px auto 0; color: var(--text-sub); font-size: 12px; text-align: center; }