/* Moon uses the landing's existing type, palette and gallery interactions. */
.moon-section{border-top:1px solid var(--line);background:var(--surface);padding-top:70px;padding-bottom:80px}
.moon-intro{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px}
.moon-copy h2{font-size:clamp(36px,3.7vw,49px);text-wrap:balance}
.moon-copy>p:not(.eyebrow){max-width:510px;margin-top:24px;line-height:1.85}
.moon-copy .quiet-link{margin-top:23px;white-space:normal}
.moon-product{position:relative;isolation:isolate;text-align:center;min-width:0;padding:20px 0 30px}
.moon-wordmark{position:absolute;inset:0 0 auto;font:400 clamp(90px,12vw,170px)/1 var(--sans);letter-spacing:-9px;color:var(--line);z-index:-1}
.moon-product img{width:100%;height:auto;object-fit:contain;position:relative;margin-top:15px}
.moon-product figcaption{font-family:var(--serif);font-size:21px;line-height:1.5;margin-top:-28px;color:var(--muted)}
.moon-app-heading{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:end;margin-top:76px;margin-bottom:40px;padding-top:45px;border-top:1px solid var(--line)}
.moon-app-heading h2{font-size:36px;text-wrap:balance}
.moon-app-heading>p{font-size:17px;line-height:1.8;max-width:480px}
.moon-gallery.app-preview-gallery{width:min(1160px,calc(100% - 96px))}
.moon-screen-card .app-screen-button{border-radius:4px}
.moon-screen-card .app-screen-button>img{width:100%;border-radius:4px;aspect-ratio:941/1672;object-fit:contain;background:#f8f5ed}
.moon-screen-card h3{font-size:25px}
.moon-screen-card figcaption{padding-top:16px}
.moon-screen-card figcaption p{font-size:17px}
.moon-context{display:flex;gap:14px;align-items:flex-start;font-size:15px;line-height:1.8;max-width:800px;margin:42px auto 0;padding-top:25px;border-top:1px solid var(--line)}
.moon-context svg{margin-top:4px;color:var(--green)}
.moon-gallery .app-preview-note{margin-top:16px}
@media(max-width:1200px){.moon-gallery.app-preview-gallery{width:100%}.moon-context{margin-inline:32px}.moon-gallery .app-preview-track{scroll-padding-inline:32px}.moon-intro{gap:25px}.moon-app-heading{gap:32px}.desktop-nav{gap:25px}}
@media(max-width:767px){
 .moon-section{padding-block:54px}
 .moon-intro{grid-template-columns:1fr;gap:10px}
 .moon-copy h2{font-size:35px;letter-spacing:-1.1px}
 .moon-copy>p:not(.eyebrow){font-size:16px;margin-top:20px}
 .moon-copy .quiet-link{font-size:16px;gap:8px}
 .moon-product{max-width:420px;width:100%;margin:24px auto 0;padding-bottom:16px}
 .moon-wordmark{font-size:115px;letter-spacing:-6px}
 .moon-product figcaption{font-size:20px;margin-top:-20px}
 .moon-app-heading{grid-template-columns:1fr;gap:18px;margin-top:30px;padding-top:32px;margin-bottom:24px}
 .moon-app-heading h2{font-size:31px}
 .moon-app-heading>p{font-size:16px}
 .moon-gallery .app-preview-track{padding-inline:20px;scroll-padding-inline:20px}
 .moon-gallery .app-preview-card{flex-basis:min(350px,calc(100% - 20px))}
 .moon-screen-card figcaption p{font-size:16px}
 .moon-context{margin:30px 20px 0;font-size:14px;gap:10px;padding-top:22px}
}
.moon-design-gallery{margin-top:48px}
.moon-design-heading{margin-bottom:32px}
.moon-design-heading h2{font-size:36px;text-wrap:balance}
.moon-design-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:start}
.moon-views-card{padding-top:72px}
.moon-image-button{display:block;position:relative;width:100%;padding:0;background:transparent;border-radius:3px;overflow:hidden;text-align:left}
.moon-image-button>img{width:100%;height:auto;transition:transform .35s}
.moon-image-button:hover>img{transform:scale(1.025)}
.moon-image-button:active>img{transform:scale(1.01)}
.moon-image-zoom{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:8px;min-height:42px;padding:8px 13px;border-radius:30px;background:#fffdf7ed;color:#2e4436;font-size:14px;font-weight:800}
.moon-image-zoom svg{width:16px;height:16px}
.moon-design-card figcaption{padding-top:22px}
.moon-design-card h3{font-size:26px;line-height:1.4;text-wrap:balance}
.moon-design-card p{font-size:17px;line-height:1.8;max-width:540px;margin-top:10px}
.app-preview-dialog.moon-photo-dialog{width:min(1100px,calc(100% - 24px))}
@media(max-width:767px){
 .moon-design-gallery{margin-top:36px}
 .moon-design-heading{margin-bottom:24px}
 .moon-design-heading h2{font-size:31px}
 .moon-design-grid{grid-template-columns:1fr;gap:36px}
 .moon-views-card{padding-top:0}
 .moon-design-card figcaption{padding-top:16px}
 .moon-design-card h3{font-size:24px}
 .moon-design-card p{font-size:16px}
 .moon-image-zoom{right:10px;bottom:10px;font-size:14px;padding:7px 11px}
}