/* Actual prototype screens, kept uncropped; one screen per swipe on phones. */
.app-preview{border-top:1px solid var(--line);padding-top:88px;padding-bottom:88px}
.app-preview-heading{max-width:760px;margin:0 auto 44px;text-align:center}
.app-preview-heading h2{text-wrap:balance}
.app-preview-heading>p:not(.eyebrow){font-size:18px;line-height:1.8;max-width:620px;margin:22px auto 0}
.app-preview-gallery.section-wrap{width:min(1240px,calc(100% - 96px))}
.app-preview-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;align-items:start}
.app-preview-card{min-width:0;margin:0}
/* Thin handset bezels preserve screenshot width; hardware never covers app content. */
.app-screen-button{display:block;width:100%;padding:0;background:transparent;border:0;border-radius:44px;overflow:visible;text-align:left;touch-action:pan-x pan-y pinch-zoom}
.app-phone-frame{display:block;position:relative;padding:8px;background:#253129;border:1px solid #546257;border-radius:44px;box-shadow:0 14px 32px #20362420,inset 0 0 0 1px #ffffff24}
.app-phone-frame::before,.app-phone-frame::after{content:"";position:absolute;width:3px;background:#546257;border-radius:3px}
.app-phone-frame::before{left:-3px;top:110px;height:34px;box-shadow:0 46px 0 #546257}
.app-phone-frame::after{right:-3px;top:164px;height:58px}
.app-phone-screen{display:block;overflow:hidden;background:#f8f9f6;border-radius:35px}
.app-phone-top{display:flex;height:34px;align-items:center;justify-content:center}
.app-phone-top::before{content:"";width:66px;height:18px;background:#253129;border-radius:12px;box-shadow:inset -8px 0 0 #313d34}
.app-phone-screen img{display:block;width:100%;height:auto;aspect-ratio:364/780;object-fit:contain;object-position:top;background:#f8f9f6}
.app-phone-home{display:flex;height:22px;align-items:center;justify-content:center}
.app-phone-home::after{content:"";width:32%;height:4px;background:#253129;border-radius:4px}
.app-screen-zoom{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:14px 12px 6px;font-size:14px;font-weight:800;color:var(--green)}
.app-screen-zoom svg{width:18px;height:18px}
.app-screen-button:hover .app-screen-zoom{text-decoration:underline;text-underline-offset:4px}
.app-preview-card figcaption{padding-top:24px}
.app-preview-card h3{font-size:25px;line-height:1.4;margin-bottom:10px;letter-spacing:-.4px}
.app-preview-card figcaption p{font-size:18px;line-height:1.8}
.app-preview-controls{display:none}
.app-preview-note{font-size:14px;line-height:1.7;text-align:center;margin:30px 0 0}
.app-preview-dialog{width:min(590px,calc(100% - 24px));max-height:92dvh;padding:0;border:1px solid var(--line);border-radius:12px;overflow:auto;background:var(--surface);color:var(--ink)}
.app-preview-dialog::backdrop{background:#14251dcc;backdrop-filter:blur(5px)}
.app-preview-dialog-header{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.app-preview-dialog-header h3{font-family:var(--sans);font-size:20px;font-weight:800;line-height:1.4}
.app-preview-dialog-close{flex-shrink:0}
.app-preview-dialog-image{display:block;width:100%;height:auto;object-fit:contain;background:#f8f5ed}
body.app-preview-open{overflow:hidden}
@media(max-width:1150px){.app-preview-track{gap:22px}.app-preview-card h3{font-size:23px}}
@media(max-width:1200px){
  .app-preview{padding-block:70px}
  .app-preview-heading{margin-bottom:32px}
  .app-preview-heading>p:not(.eyebrow){font-size:16px}
  .app-preview-gallery.section-wrap{width:100%;margin:0}
  .app-preview-track{display:flex;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:32px;padding:8px 32px 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .app-preview-track::-webkit-scrollbar{display:none}
  .app-preview-card{flex:0 0 min(390px,calc(100% - 24px));scroll-snap-align:center;scroll-snap-stop:always}
  .app-preview-card figcaption{padding-top:22px}
  .app-preview-card figcaption p{font-size:16px}
  .app-preview-card h3{font-size:25px}
  .app-preview-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 32px 0}
  .app-preview-navigation{display:flex;align-items:center;gap:16px}
  .app-preview-navigation button{border:1px solid var(--line);width:46px;height:46px;background:var(--surface)}
  .app-preview-navigation button:disabled{opacity:.4;cursor:default}
  .app-preview-count{min-width:42px;text-align:center;font-size:16px;font-weight:800;color:var(--green)}
  .app-preview-swipe{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
  .app-preview-swipe svg{width:18px;height:18px}
  .app-preview-note{margin:24px 32px 0}
}
@media(max-width:767px){
  .app-preview{padding-block:58px 60px}
  .app-preview-heading{text-align:left}
  .app-preview-heading h2{font-size:32px}
  .app-preview-track{gap:12px;padding-inline:12px;scroll-padding-inline:12px}
  .app-preview-card{flex:0 0 calc(100% - 8px)}
  .app-preview-card h3{font-size:24px}
  .app-preview-controls{margin-inline:20px}
  .app-preview-navigation{gap:10px}
  .app-preview-note{margin-inline:20px;text-align:left}
  .app-preview-dialog-header{padding:12px 14px;gap:10px}
  .app-preview-dialog-header h3{font-size:18px}
}
@media(max-width:380px){.app-preview-swipe{max-width:110px;line-height:1.5}.app-preview-navigation{gap:7px}}
@media(prefers-reduced-motion:reduce){.app-preview-track{scroll-behavior:auto}}