/* Manual app-screen exploration with a sliding selection and a stable stage. */
.app-showcase { padding: 22px; }
.app-showcase::before { display: none; }
.app-showcase .preview-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 5px; background: #edf0e6; isolation: isolate; }
.app-showcase .preview-tabs::before { display: none; }
.app-showcase .preview-tabs button { width: auto; min-height: 44px; font-size: 13px; padding-inline: 7px; z-index: 1; border-radius: 30px; transition: color .2s; }
.app-showcase .preview-tabs button[aria-selected="true"] { background: #426653; color: #faf7f2; }
.app-showcase .preview-tabs button:not([aria-selected="true"]):hover { background: #dce7d9; color: #303d35; }
.app-showcase.is-enhanced .preview-tabs::before { content: ""; display: block; position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 22px) / 3); height: auto; border-radius: 30px; background: #426653; box-shadow: 0 2px 7px #303d351a; transform: translateX(calc(var(--preview-index, 0) * (100% + 6px))); }
.motion-enabled[data-motion="playing"] .app-showcase.is-enhanced .preview-tabs::before { transition: transform .41s cubic-bezier(.22,.75,.2,1); }
.app-showcase.is-enhanced .preview-tabs button[aria-selected="true"] { background: transparent; }
.app-showcase .preview-tabs button:focus-visible { outline-offset: 2px; }
.app-showcase .preview-panel { min-height: 0; padding-top: 24px; animation: none !important; }
.app-showcase.is-enhanced .preview-stage { display: grid; grid-template-columns: minmax(0, 1fr); isolation: isolate; }
.app-showcase.is-enhanced .preview-stage > .preview-panel { grid-area: 1 / 1; min-width: 0; }
/* Retain each caption's height without exposing inactive screens to interaction. */
.app-showcase.is-enhanced .preview-stage > .preview-panel[hidden] { display: block !important; visibility: hidden; pointer-events: none; }
.app-showcase .preview-panel.is-entering { z-index: 2; }
.app-showcase .preview-panel.is-leaving { z-index: 1; pointer-events: none; }
.app-screen-link { display: flex; align-items: center; justify-content: center; width: min(100%, var(--device-width)); aspect-ratio: var(--device-ratio); margin-inline: auto; border-radius: 32px; overflow: hidden; border: 5px solid #465749; background: #15191f; box-shadow: 0 10px 24px #303d3524; position: relative; }
.app-screen-link::before { content: ""; position: absolute; top: 12px; left: 50%; width: 34px; height: 4px; transform: translateX(-50%); border-radius: 4px; background: #454d54; pointer-events: none; }
.app-screen-link::after { content: ""; position: absolute; bottom: 10px; left: 50%; width: 28%; height: 3px; transform: translateX(-50%); border-radius: 3px; background: #9ba2aa80; pointer-events: none; }
.app-screen-link img { display: block; width: 100%; height: auto; aspect-ratio: 1080 / 1731; object-fit: contain; }
.app-screen-link:hover { border-color: #8f4d34; }
.screen-zoom-label { position: absolute; left: 50%; bottom: 27px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid #faf7f2; border-radius: 30px; background: #faf7f2; color: #303d35; font-size: 11px; line-height: 1.4; white-space: nowrap; box-shadow: 0 3px 12px #0003; }
.screen-zoom-label .icon { width: 15px; height: 15px; }
.screen-caption { max-width: 350px; min-height: 62px; margin: 17px auto 0; text-align: center; font-size: 13px; line-height: 1.65; color: var(--muted); }
.screen-caption strong { display: block; font-size: 15px; font-weight: 500; color: var(--text); margin-bottom: 3px; }
.screen-gallery-note { color: var(--quiet); font-size: 10px; line-height: 1.7; text-align: center; border-top: 1px solid var(--line); padding-top: 15px; margin-top: 18px; }
.screen-tour-link { margin-top: 22px; color: var(--sage); font-size: 13px; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.screen-dialog { max-width: min(94vw, 680px); width: fit-content; max-height: 94dvh; padding: 15px; border: 1px solid #bacbb3; border-radius: 22px; background: #faf7f2; color: #303d35; box-shadow: 0 24px 80px #15241b55; }
.screen-dialog::backdrop { background: #19281fd9; }
.screen-dialog:not([open]) { display: none; }
.screen-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 12px; }
.screen-dialog-title { font-size: 14px; font-weight: 500; }
.screen-dialog form { margin: 0; }
.screen-dialog-close { min-height: 44px; padding: 8px 15px; border: 1px solid #71876c; border-radius: 24px; color: #426653; background: #fffdfa; font-size: 13px; }
.screen-dialog-image { width: auto; max-width: 100%; max-height: calc(94dvh - 94px); margin: auto; border-radius: 12px; object-fit: contain; }
.motion-enabled[data-motion="paused"] .app-showcase *,
.motion-enabled[data-motion="paused"] .app-showcase *::before,
.motion-enabled[data-motion="paused"] .app-showcase *::after { transition: none !important; }
@media (max-width: 700px) {
  /* Tighten the existing story so new guidance does not become a wall of sections. */
  main > .section { padding-block: 52px; }
  .section-heading { margin-bottom: 25px; gap: 14px; }
  .hero { padding-bottom: 45px; }
  .features-layout { gap: 24px; }
  .feature-list { margin-top: 14px; }
  .feature-row { padding-block: 13px; }
  .feature-row h3 { font-size: 17px; }
  .feature-row p { font-size: 14px; }
  .app-showcase { padding: 18px; }
  .app-screen-link { width: min(100%, var(--device-mobile-width)); }
  .app-showcase .preview-panel { padding-top: 17px; }
  .app-showcase .preview-tabs button { font-size: 12px; min-height: 44px; }
  .screen-caption { min-height: 66px; font-size: 12px; margin-top: 14px; }
  .screen-gallery-note { font-size: 10px; padding-top: 13px; margin-top: 14px; }
  .screen-tour-link { margin-top: 12px; }
  .privacy-highlight.section { padding-block: 38px; gap: 5px; }
  .privacy-art { height: 125px; transform: scale(.65); margin-block: -12px; }
  .plus-heading { margin-bottom: 24px; }
  .plus-panel { padding-top: 16px; }
  .plus-panel-art { padding-bottom: 12px; }
  .night-check-card { margin-block: 27px 32px; gap: 20px; }
  .faq-section { gap: 22px; }
  .faq-list summary { padding-block: 16px; font-size: 15px; }
  .faq-answer { font-size: 14px; padding-bottom: 18px; }
  .final-cta { padding-block: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-showcase .preview-tabs::before, .app-showcase .preview-tabs button { transition: none !important; }
}