/* DropLine Blue: supplied DESIGN_SYSTEM.md hex token; replace here if the final brand token differs */
:root{--blue:#2686b8;--ink:#14242d;--muted:#52646d;--paper:#fff;--snow:#f2f5f6;--rule:#dce4e8;--content:600px;--gutter:clamp(24px,6vw,40px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.9;overflow-wrap:anywhere}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid var(--blue);outline-offset:6px}
figure,p,h1,h2,h3{margin:0}
button,a{-webkit-tap-highlight-color:transparent}
.wrap{width:min(100%,var(--content));padding-inline:var(--gutter);margin-inline:auto}
.site-header{position:absolute;inset:0 0 auto;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:24px var(--gutter);color:white}
.wordmark{display:block;width:min(50vw,180px);min-width:0;flex-shrink:1}
.header-link{font-size:12px;letter-spacing:.03em;white-space:nowrap}
.header-link span{margin-left:4px}
.skip-link{position:absolute;top:8px;left:8px;z-index:20;padding:10px;background:white;color:var(--ink);transform:translateY(-160%)}
.skip-link:focus{transform:none}
.hero{position:relative;isolation:isolate;background:#233d4d;color:#fff;text-align:center}
.hero-landscape,.hero-shade,.stage-landscape,.final-landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-landscape{object-position:50% 30%}
.hero-shade{z-index:-1;background:linear-gradient(180deg,rgba(6,24,37,.3),rgba(6,24,37,.18) 30%,rgba(6,24,37,.8) 76%,#10232e)}
.hero-content{padding-top:125px;padding-bottom:38px}
.eyebrow{color:var(--blue);font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;margin-bottom:24px}
.eyebrow.light{color:#cae5f2}
.hero .eyebrow{text-transform:none;letter-spacing:.13em;margin-bottom:20px}
h1{font-size:clamp(34px,8.6vw,52px);line-height:1.55;font-weight:600;letter-spacing:.02em}
h2{font-size:clamp(27px,6.9vw,40px);line-height:1.6;letter-spacing:.01em;font-weight:600}
h3{font-size:21px;line-height:1.7;font-weight:600}
.hero-copy{margin-top:20px;font-size:clamp(14px,3.6vw,16px);line-height:2.1;color:#f1f7fa}
.phone{width:min(100%,280px);margin-inline:auto;border:6px solid #162129;border-radius:36px;background:#111c23;box-shadow:0 20px 50px #172c3a20;overflow:hidden}
.phone img{width:100%;border-radius:29px}
.hero-phone{width:min(82%,250px);margin-top:40px;margin-bottom:36px;box-shadow:0 22px 60px #0005;transform:rotate(-3deg)}
.store-link{display:flex;justify-content:center;align-items:center;gap:26px;min-height:54px;width:min(100%,260px);padding:13px 20px;margin-inline:auto;border:1px solid #ffffff80;border-radius:9px;background:#fff;color:#172731;font-size:16px;font-weight:600;transition:background .15s,transform .15s}
.store-link:hover{background:#eaf5fa;transform:translateY(-2px)}
.store-note{font-size:12px;margin-top:13px;color:#d6e1e7}
.scroll-cue{display:inline-flex;gap:20px;margin-top:36px;color:#d6e1e7;font-size:12px;letter-spacing:.08em}
.chapter{padding-block:88px}
.intro{margin-bottom:44px}
.chapter .intro>p:last-child,.chapter>.wrap>p:not(.eyebrow):not(.caption):not(.quiet-note){margin-top:22px;color:var(--muted);font-size:16px}
.scene{width:min(100%,960px);margin-inline:auto}
.scene img{width:100%;aspect-ratio:4/3;object-fit:cover}
.device-stage{margin-top:-44px;position:relative}
.caption{text-align:center;font-size:13px;letter-spacing:.06em;color:var(--ink);margin-top:26px}
.caption span{display:block;font-size:12px;color:var(--muted);letter-spacing:.02em;margin-top:4px}
.mountain{padding-top:40px}
.mountain-stage{position:relative;isolation:isolate;padding:56px var(--gutter);width:min(100%,960px);margin-inline:auto;background:#dbe6ed}
.stage-landscape{object-position:50% 65%;filter:brightness(.93)}
.mountain-stage .phone{box-shadow:0 20px 50px #10222c45}
.support{background:var(--snow)}
.support-list{margin-top:48px}
.support-item{border-top:1px solid var(--rule);padding-block:30px 36px}
.mini-label{display:block;color:var(--blue);font-size:12px;letter-spacing:.1em;margin-bottom:12px}
.support-item h3{font-size:23px}
.support-item p{font-size:14px;color:var(--muted);margin-top:14px}
.notification{display:flex;align-items:center;gap:13px;border:1px solid #d9e3e8;border-radius:14px;background:white;padding:18px 14px;margin-top:24px;font-size:12px;line-height:1.7}
.notification small{display:block;color:var(--muted);font-size:12px}
.signal{width:12px;height:12px;border:3px solid var(--blue);border-radius:50%;flex-shrink:0}
.download-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;background:#fff;border:1px solid #d9e3e8;border-radius:12px;padding:18px 14px;font-size:12px;margin-top:24px}
.saved{color:#236487}
.quiet-note{font-size:14px;color:var(--muted);border-top:1px solid var(--rule);padding-top:30px}
.line{background:#fff}
.line-gallery{display:flex;flex-direction:column;align-items:center;gap:32px}
.screen-figure{width:100%}
.connecting-line{height:64px;width:1px;background:linear-gradient(var(--blue),#dce8ee)}
.replay{background:#101e28;color:white;padding-bottom:64px}
.replay .intro>p:last-child{color:#b7cbd7}
.replay-figure img{width:100%;height:auto;border-radius:0}
.replay-figure figcaption{color:#9bb6c6;font-size:14px;letter-spacing:.12em;text-align:center;margin-top:30px}
.protect{text-align:center}
.save-interval{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:35px;color:var(--blue)}
.save-interval strong{font-size:80px;font-weight:300;line-height:1.2;letter-spacing:-.05em}
.save-interval span{font-size:13px;text-align:left;line-height:1.8}
.chapter.protect>.wrap>.protect-sub{font-size:13px;color:var(--muted);margin-top:20px}
.pro{background:var(--snow)}
.pro-features{margin-top:44px}
.pro-features article{margin-top:28px;background:#fff}
.pro-features article>img{width:100%;aspect-ratio:8/5;object-fit:cover}
.pro-features article>div,.media-feature{padding:26px 24px}
.pro-features h3{font-size:19px}
.pro-features p{font-size:14px;color:var(--muted);margin-top:8px}
.pro-price{padding:44px 0 34px;text-align:center}
.price-name{font-size:15px;letter-spacing:.07em}
.price{font-size:48px;font-weight:400;letter-spacing:-.04em;line-height:1.6}
.price span{font-size:16px;color:var(--muted);letter-spacing:0}
.price-terms{font-size:12px;color:var(--muted)}
.free-note{border-top:1px solid var(--rule);padding-top:30px}
.free-note h3{font-size:18px}
.free-note p{font-size:14px;color:var(--muted);margin-top:12px}
.final-cta{position:relative;isolation:isolate;text-align:center;background:#193444;color:white;min-height:660px;display:grid;align-items:center}
.final-cta:after{content:"";position:absolute;inset:0;background:linear-gradient(#10253270,#10253244 45%,#102532dc);z-index:-1}
.final-landscape{object-position:58% 60%}
.final-content{padding-block:86px 60px}
.final-logo{width:min(100%,300px);margin:40px auto 34px}
.tagline{font-size:13px;letter-spacing:.13em;margin-top:8px;margin-bottom:34px}
.site-footer{background:#0c1922;color:#c9d8e0;padding-block:44px}
.footer-brand{font-size:18px}
.footer-brand span{display:block;color:#b6c4cd;font-size:12px;margin-top:3px;letter-spacing:.07em}
.site-footer nav{display:flex;gap:24px;flex-wrap:wrap;font-size:12px;margin-top:28px}
.site-footer a{min-height:44px;display:inline-flex;align-items:center}
.footer-status{font-size:12px;color:#a6bac7;margin-top:6px}
.copyright{font-size:12px;color:#a6bac7;margin-top:24px}
@media(min-width:600px){.site-header{padding-inline:40px}
.hero-content{padding-top:140px}
.hero-phone{width:270px}
.hero-landscape{object-position:50% 40%}
.chapter{padding-block:112px}
.scene img{aspect-ratio:16/9}
.device-stage{margin-top:-65px}
.mountain-stage{padding-block:70px}
.phone{width:300px}
.small-only{display:none}
.final-cta{min-height:760px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Provided app screenshots: preserve the original aspect ratio inside a dark iPhone-style bezel */
.phone--device{border-color:#141619;background:#000;box-shadow:0 0 0 1px #707780,0 0 0 3px #25292e,0 22px 48px #172c3a26}
.phone--device img{height:auto;object-fit:contain}

/* Show only the original Replay map: x=0, y=321, width=1125, height=1000
   Keep attribution and map controls; exclude header and playback panel */
.pro-replay-crop{position:relative;width:100%;aspect-ratio:1125/1000;overflow:hidden;background:#000}
.pro-replay-crop img{position:absolute;left:0;top:-32.1%;width:100%;height:auto;max-width:none}

.offline-screen{margin-top:32px}

/* Route alert with map context: crop x=0, y=105, width=852, height=520 */
.route-alert-crop{position:relative;width:100%;aspect-ratio:852/520;margin-top:24px;overflow:hidden;border-radius:14px}
.route-alert-crop img{position:absolute;width:100%;max-width:none;height:auto;left:0;top:-20.1923076923%}