/* Get the App page only (.app-landing). Loaded by Pages/GetTheApp.cshtml; no shared layout or site styles are changed.
   Phone screens are real frames from Kyle's screen recording, cropped and scaled only (see wwwroot/img/app-real/README.md);
   the device shell below is plain CSS. */
.app-landing { --app-navy:#13203f; --app-blue:#1f5be0; --app-blue-dark:#1747b8; --app-border:#e3ddd0; --app-muted:#566574; color:var(--app-navy); }
.app-landing h1,.app-landing h2 { font-family:var(--font-display); text-wrap:balance; }
.app-landing a:focus-visible { outline:3px solid var(--app-blue); outline-offset:4px; border-radius:8px; }

.app-landing .app-hero { --hero-pad:clamp(22px,4vw,56px); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); align-items:center; gap:clamp(8px,1.5vw,16px); margin-top:clamp(8px,2vw,20px); padding:var(--hero-pad) var(--hero-pad) 0; border-radius:28px; overflow:hidden; background:linear-gradient(135deg,#f1f5fe 0%,#dde7fb 100%); box-shadow:inset 0 0 0 1px #d3def6; }
.app-landing .app-hero-copy { max-width:520px; padding-bottom:var(--hero-pad); }
.app-landing h1 { font-size:clamp(36px,4.6vw,60px); line-height:1.05; letter-spacing:-.04em; margin:0; }
.app-landing .app-hero-tagline { font-family:var(--font-display); font-size:clamp(20px,2.2vw,28px); line-height:1.25; letter-spacing:-.02em; margin:12px 0 0; }
.app-landing .app-intro { font-size:clamp(16px,1.5vw,19px); line-height:1.55; color:#34444f; margin:16px 0 22px; max-width:480px; }
.app-landing .app-badges { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; }
.app-landing .app-badges a { display:inline-flex; align-items:center; min-height:48px; border-radius:9px; }
.app-landing .app-badges img { display:block; width:156px; height:78px; object-fit:contain; }
.app-landing .app-free { color:var(--app-muted); font-size:14px; margin:6px 0 0; }

/* Device shell: CSS only. The screen inside is an untouched crop of the recording. */
.app-landing .app-phone { position:relative; flex:none; width:var(--phone-w,300px); padding:9px; border-radius:46px; background:#15171c; box-shadow:0 0 0 1px #2c3038, 0 30px 60px -20px rgba(19,32,63,.45), 0 12px 24px -12px rgba(19,32,63,.35); }
.app-landing .app-phone img { display:block; width:100%; height:auto; border-radius:37px; background:#fff; }
.app-landing .app-hero-stage { display:flex; justify-content:center; align-items:flex-start; height:clamp(440px,38vw,520px); overflow:hidden; padding:6px 24px 0 8px; margin-right:calc(-1 * var(--hero-pad)); }
.app-landing .app-hero-stage .app-phone { flex:none; transform-origin:50% 100%; }
.app-landing .app-phone--front { --phone-w:min(290px,100%); position:relative; z-index:2; transform:rotate(-2deg); }
.app-landing .app-phone--back { --phone-w:min(240px,100%); margin:50px 0 0 -46px; z-index:1; transform:rotate(5deg); }
.app-landing .app-phone--crop img { aspect-ratio:660/1180; object-fit:cover; object-position:top; }

.app-landing .app-hero + .app-feature { border-top:0; }
.app-landing .app-feature { display:grid; grid-template-columns:auto minmax(0,480px); justify-content:center; align-items:center; gap:clamp(28px,6vw,72px); padding:clamp(32px,4.5vw,56px) 0; border-top:1px solid var(--app-border); }
.app-landing .app-feature--flip { grid-template-columns:minmax(0,480px) auto; }
.app-landing .app-feature--flip .app-feature-media { order:2; }
.app-landing .app-feature-media { display:flex; justify-content:center; align-items:flex-start; --phone-w:260px; }
.app-landing .app-feature-copy { max-width:480px; }
.app-landing .app-feature h2 { font-size:clamp(26px,3vw,38px); line-height:1.12; letter-spacing:-.03em; margin:0 0 12px; }
.app-landing .app-feature-copy p { color:#34444f; line-height:1.6; font-size:17px; margin:0 0 10px; }
.app-landing .app-feature-copy .app-note { color:var(--app-muted); font-size:14px; line-height:1.5; }

.app-landing .app-bottom { text-align:center; border-top:1px solid var(--app-border); padding:clamp(40px,6vw,72px) 0 clamp(28px,4vw,44px); }
.app-landing .app-bottom h2 { font-size:clamp(28px,3.4vw,42px); letter-spacing:-.03em; margin:0 0 20px; }
.app-landing .app-bottom .app-badges { justify-content:center; }
.app-landing .app-secondary { display:inline-block; margin-top:14px; padding:12px 6px; min-height:44px; color:var(--app-blue-dark); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.app-landing .app-secondary:hover { color:var(--app-blue); }

@media (max-width:860px) {
    .app-landing .app-hero { grid-template-columns:1fr; gap:6px; padding-top:26px; border-radius:22px; }
    .app-landing .app-hero-copy { max-width:none; padding-bottom:0; }
    .app-landing .app-hero-stage { height:clamp(360px,62vw,440px); margin-inline:calc(-1 * var(--hero-pad)); padding-inline:0; }
    .app-landing .app-phone--front { --phone-w:min(240px,48vw); }
    .app-landing .app-phone--back { --phone-w:min(200px,40vw); margin-top:44px; margin-left:-40px; }
    .app-landing .app-feature,.app-landing .app-feature--flip { grid-template-columns:1fr; justify-content:stretch; gap:24px; padding:32px 0; }
    .app-landing .app-feature--flip .app-feature-media { order:0; }
    .app-landing .app-feature-media { --phone-w:min(220px,44vw); }
    .app-landing .app-feature-copy { max-width:none; }
}
@media (max-width:420px) {
    .app-landing .app-intro { margin:12px 0 14px; }
    .app-landing .app-badges img { width:140px; height:70px; }
    .app-landing .app-hero-stage { height:340px; }
    .app-landing .app-phone--front { --phone-w:min(200px,46vw); }
    .app-landing .app-phone--back { --phone-w:min(168px,38vw); margin-top:36px; margin-left:-34px; }
}
@media (prefers-reduced-motion:no-preference) {
    .app-landing .app-secondary { transition:color .15s; }
}