@font-face{font-family:Pretendard;src:url('/assets/fonts/pretendard-black.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:Pretendard;src:url('/assets/fonts/pretendard_regular.otf');font-display:swap}
@font-face{font-family:Pretendard;src:url('/assets/fonts/pretendard_bold.otf');font-weight:700;font-display:swap}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;padding:0;background:#fff;color:#111;font-family:Pretendard,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid #555;outline-offset:5px}
.landing-shell{width:100%;margin:0;background:#fff;overflow:hidden}
.header{height:89px;padding:0 7.5%;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:25px;font-weight:700;letter-spacing:-1.4px;display:flex;align-items:center;gap:4px}
.logo-dot{height:5px;width:5px;background:#171717;border-radius:50%;align-self:flex-end;margin-bottom:5px}
.nav-download{background:transparent;color:#111;padding:12px 21px;font-size:15px}
.nav-download:hover{background:transparent;color:#111;text-decoration:underline;text-underline-offset:4px}
.hero{display:grid;grid-template-columns:1.12fr 1fr;min-height:715px;padding:36px 6% 40px 8.2%;gap:30px;align-items:center}
.copy{position:relative;z-index:1;padding-bottom:10px}
h1{font-size:clamp(52px,5.4vw,76px);font-weight:700;line-height:1.18;letter-spacing:-3.8px;margin:0 0 24px}
h1 span{color:#111}
.description{font-size:16px;line-height:1.85;color:#707070;letter-spacing:-.3px;margin:0 0 31px}
.primary{display:inline-flex;align-items:center;gap:11px;padding:17px 22px;border-radius:32px;background:#111;color:white;font-size:14px;box-shadow:0 12px 21px #0002;transition:background .2s,transform .2s}
.primary svg{width:19px;height:21px}
.primary:hover{background:#333;transform:translateY(-2px)}
.product-visual{height:625px;position:relative;isolation:isolate}
.product-glow{position:absolute;inset:10px -20px -5px;background:radial-gradient(ellipse,#fff 25%,#ffffffa8 48%,transparent 72%);z-index:-1}
.app-artwork{position:absolute;left:50%;top:5px;width:530px;height:790px;transform:translateX(-50%) scale(.81);transform-origin:top center;overflow:hidden;mix-blend-mode:multiply;mask-image:linear-gradient(to right,transparent,#000 35px,#000 calc(100% - 35px),transparent),linear-gradient(to bottom,transparent,#000 10px,#000 730px,transparent 785px);mask-composite:intersect}
.app-artwork img{position:absolute;width:530px;height:auto;max-width:none;left:-4px;top:-190px}
@media(min-width:1450px){.hero{min-height:775px}.product-visual{height:665px}.app-artwork{transform:translateX(-50%) scale(.86)}}
@media(max-width:900px){.hero{padding:35px 5%;gap:15px;grid-template-columns:1fr 1fr}h1{font-size:52px}.description{font-size:14px}.app-artwork{transform:translateX(-50%) scale(.74)}.product-visual{height:565px}}
@media(max-width:650px){.header{height:75px;padding:0 7%}.logo{font-size:23px}.nav-download{font-size:15px;padding:10px 15px}.hero{display:flex;flex-direction:column;gap:28px;padding:48px 20px 12px;min-height:0}.copy{text-align:center;padding:0}h1{font-size:49px;letter-spacing:-2.9px;margin-bottom:20px}.description{font-size:13px;margin-bottom:25px}.primary{font-size:13px;padding:15px 20px}.product-visual{width:100%;height:575px}.app-artwork{transform:translateX(-50%) scale(.74)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.data-card{position:absolute;z-index:2;background:#ffffffed;border:1px solid #ececec;border-radius:16px;padding:17px 18px;box-shadow:0 12px 32px #0000000b;backdrop-filter:blur(10px)}
.card-label{display:flex;align-items:center;gap:7px;font-size:11px;color:#818181;white-space:nowrap}.card-label>span{font-size:15px;color:#444}.card-value{font-size:29px;line-height:1.2;letter-spacing:-1px;font-weight:700;margin-top:13px}.card-value small{font-size:12px;color:#777;letter-spacing:0;font-weight:400;margin-left:3px}.distance-card{left:-13px;top:131px;width:190px}.distance-card svg{display:block;width:100%;height:30px;margin-top:12px}.time-card{right:-27px;top:320px;width:178px}.time-bars{display:flex;gap:4px;margin-top:15px}.time-bars i{height:15px;flex:1;background:#3b3b3b;border-radius:2px}.time-bars i:nth-last-child(-n+3){background:#e6e6e6}.stay-card{left:-5px;bottom:54px;display:flex;align-items:center;gap:11px;width:218px;padding:16px}.pause-icon{width:30px;height:30px;border-radius:50%;background:#f1f1f1;display:grid;place-items:center;font-size:15px;color:#555}.stay-card .card-label{font-size:10px;margin-bottom:6px}.stay-card strong{font-size:14px;font-weight:400}.stay-card strong span{font-weight:700;margin-left:7px}.saved-icon{margin-left:auto;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#222;color:white;font-size:10px}
@media(max-width:900px){.distance-card{left:-8px;width:166px;padding:14px}.time-card{right:-10px;width:162px;padding:14px}.stay-card{left:-5px;width:205px}.card-value{font-size:26px}}
/* Lift the cards away from the phone while keeping the monochrome treatment. */
.data-card{background:#fffffffa;border:1px solid #fff;box-shadow:0 28px 45px -15px #00000030,0 10px 18px -9px #00000018,inset 0 0 0 1px #00000003;backdrop-filter:none;will-change:translate;animation:card-hover 7s ease-in-out infinite}
.distance-card{left:-26px;top:125px;transform:rotate(-7deg);animation-delay:-1s}
.time-card{right:-32px;top:323px;transform:rotate(6deg);animation-duration:8s;animation-delay:-4s}
.stay-card{left:-13px;bottom:49px;transform:rotate(-4deg);animation-duration:9s;animation-delay:-2s}
@keyframes card-hover{0%,100%{translate:0 0}50%{translate:0 -4px}}
@media(prefers-reduced-motion:reduce){.data-card{animation:none;will-change:auto}}
.route-card{right:-22px;top:19px;width:224px;padding:0;overflow:hidden;transform:rotate(5deg);animation-duration:10s;animation-delay:-5s}
.route-card-heading{height:38px;display:flex;align-items:center;gap:7px;padding:0 12px;background:#fff}.route-heading-icon{font-size:20px;color:#6e6e6e}.route-card-heading strong{font-size:11px;font-weight:400;color:#555}.route-demo{margin-left:auto;font-size:9px;color:#a0a0a0}.route-map{display:block;width:100%;height:auto}.route-card-footer{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;background:#fff}.route-card-footer>span{font-size:9px;color:#888;display:flex;gap:5px;align-items:center}.route-card-footer i{width:4px;height:4px;border-radius:50%;background:#668dd1}.route-card-footer strong{font-size:15px;letter-spacing:-.3px}.route-card-footer small{font-size:10px;font-weight:400;color:#999}
/* Tuck the map outside the phone so the calendar stays readable. */
.route-card{width:170px;right:-45px;top:23px;transform:rotate(5deg)}
.route-card-heading{height:32px;padding:0 9px;gap:5px}.route-card-heading strong{font-size:10px}.route-heading-icon{font-size:17px}.route-card-footer{padding:9px}.route-card-footer>span{font-size:8px}.route-card-footer strong{font-size:13px}

.forecast-strip{position:absolute;left:106px;top:478px;width:306px;height:96px;display:grid;grid-template-columns:repeat(7,1fr);padding:8px 3px 5px;background:#fff;border:1px solid #eee;border-radius:12px;transform:rotate(1.4deg) skewX(-1deg);box-shadow:0 2px 3px #0000000b}
.forecast-day{display:flex;align-items:center;flex-direction:column;gap:4px;font-size:10px;color:#393939}.forecast-date{font-size:9px;color:#888}.forecast-day svg{width:24px;height:24px;flex-shrink:0}.forecast-day strong{font-size:11px;font-weight:400}.forecast-rain{font-size:9px;color:#999;white-space:nowrap}.forecast-rain.has-rain{color:#4c93ce}

.forecast-rain{display:flex;align-items:center;gap:2px}.forecast-day .rain-drop{width:7px;height:10px}

/* Neutralize the screenshot background, retaining color only on weather icons. */
.app-artwork>img{filter:grayscale(1)}
.app-artwork>img.calendar-weather-colors{filter:none;clip-path:url(#calendar-weather-colors);pointer-events:none}
.weather-clip-defs{position:absolute;pointer-events:none}
/* Blend the source's white margins into the actual hero surface. */
.product-visual{isolation:auto}.product-glow{display:none}

/* Quiet depth behind the phone, with the copy area left clear. */
.product-glow{display:block;z-index:0;inset:-30px -65px -20px;pointer-events:none;background:radial-gradient(ellipse at 52% 46%,#fff 0%,#ffffffbd 36%,#ffffff45 59%,transparent 75%)}
.product-orbits{position:absolute;width:600px;height:720px;left:50%;top:-40px;transform:translateX(-50%);z-index:0;pointer-events:none}
.app-artwork{z-index:1}
/* Section 02: a clear product view, alternating the hero composition. */
.running-section{position:relative;display:grid;grid-template-columns:1fr 1.08fr;align-items:center;gap:72px;padding:95px 8% 85px 6%;background:#fff;min-height:835px}
.running-visual{position:relative;height:660px;min-width:0}
.running-artwork{position:absolute;top:0;left:50%;transform:translateX(-50%);width:290px;padding:7px;background:linear-gradient(110deg,#969696,#242424 7%,#111 85%,#8c8c8c);border:1px solid #999;border-radius:37px;box-shadow:inset 0 0 0 2px #333,0 22px 35px -17px #0005,8px 7px 0 -4px #aaa}
.running-artwork img{display:block;width:100%;height:auto;border-radius:29px}
.running-image-note{position:absolute;bottom:-2px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:1.1px;color:#aaa}
.running-copy{padding-bottom:6px}
.running-eyebrow{display:flex;align-items:center;gap:12px;color:#777;font-size:12px;letter-spacing:.5px;margin-bottom:25px}.running-eyebrow span{font-size:11px;color:#aaa;padding-right:12px;border-right:1px solid #ddd}
.running-copy h2{font-size:clamp(38px,4.1vw,55px);letter-spacing:-2.6px;line-height:1.22;margin:0 0 22px;font-weight:700}
.running-intro{font-size:15px;line-height:1.9;color:#777;letter-spacing:-.25px;margin:0 0 34px}
.running-features{display:flex;flex-direction:column;gap:26px}.running-feature{display:flex;gap:17px;align-items:flex-start}.running-feature-icon{width:39px;height:39px;border-radius:12px;background:#f5f5f5;display:grid;place-items:center;flex-shrink:0}.running-feature-icon svg{width:20px;height:20px;stroke:#4c4c4c;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.running-feature h3{font-size:16px;font-weight:700;margin:1px 0 8px;letter-spacing:-.3px}.running-feature p{font-size:14px;line-height:1.85;margin:0;color:#838383;letter-spacing:-.2px}
.running-weather-note{border-top:1px solid #eee;margin-top:30px;padding-top:20px;display:flex;align-items:center;gap:10px;color:#8a8a8a;font-size:12px}.running-weather-note svg{width:18px;height:18px;stroke:#777;stroke-width:1.4;stroke-linecap:round;flex-shrink:0}
@media(max-width:1000px){.running-section{gap:25px;padding-left:4%;padding-right:5%}.running-artwork{transform:translateX(-50%) scale(.88);transform-origin:top center}.running-visual{height:590px}.running-copy h2{font-size:42px}.running-intro{font-size:14px}.running-feature p{font-size:13px}}
@media(max-width:650px){.running-section{display:flex;flex-direction:column-reverse;gap:35px;padding:60px 24px 35px;min-height:0}.running-copy{width:100%}.running-copy h2{font-size:39px}.running-intro br,.running-feature p br{display:none}.running-visual{width:100%;height:550px}.running-artwork{transform:translateX(-50%) scale(.82)}.running-weather-note{font-size:11px}}

/* A close view of the actual map gives this section a different rhythm from the hero. */
.running-section{grid-template-columns:1.15fr 1fr;gap:65px;padding:85px 7%;min-height:780px}
.running-visual{height:610px;min-width:0}
.running-map-window{position:relative;width:100%;height:100%;overflow:hidden;border-radius:24px;background:#f5f5f3;border:1px solid #e8e8e5}
.running-map-window img{display:block;width:100%;height:auto;transform:translateY(-5.6%)}
@media(max-width:1000px){.running-section{gap:35px;padding:65px 5%}.running-visual{height:550px}}
@media(max-width:650px){.running-section{padding:55px 24px;gap:30px}.running-visual{height:480px}.running-map-window{border-radius:20px}}

.running-copy h2{font-size:clamp(34px,3.3vw,46px);letter-spacing:-2px}
.running-feature-list{display:flex;flex-direction:column;margin-top:4px}
.running-feature-row{display:flex;align-items:flex-start;gap:15px;padding:16px 0;border-bottom:1px solid #efefed}
.running-feature-row:first-child{padding-top:0}
.running-feature-row:last-child{border-bottom:0;padding-bottom:0}
.running-feature-row .running-feature-icon{width:35px;height:35px;border-radius:10px;background:#f6f6f4}
.running-feature-row .shelter-feature{background:#eef4f0}.running-feature-row .shelter-feature svg{stroke:#207655}
.running-feature-row h3{font-size:15px;font-weight:600;letter-spacing:-.35px;margin:0 0 5px;color:#292c2e}
.running-feature-row p{font-size:12px;line-height:1.75;letter-spacing:-.1px;color:#858585;margin:0}



#hero-title{font-size:clamp(38px,5.3vw,76px);font-weight:900;line-height:1.09;letter-spacing:-2.8px;word-break:keep-all;margin-bottom:15px;color:#080808}
#hero-title .hero-title-line{display:block;white-space:nowrap}

/* Compact, bold editorial copy inspired by the supplied brand image. */
.hero .description{font-size:clamp(14px,1.4vw,18px);font-weight:700;line-height:1.55;letter-spacing:-.55px;color:#171717;margin-bottom:32px}

/* Actual home screenshot inside a device frame; no simulated screen overlays. */
.app-artwork.app-artwork-live{top:15px;width:350px;height:auto;border:9px solid #222;border-radius:38px;background:#222;overflow:hidden;mix-blend-mode:normal;mask-image:none;box-shadow:0 0 0 2px #9c9c9c,3px 2px 0 4px #555,12px 22px 28px #0002}
.app-artwork.app-artwork-live>img{display:block;position:relative;left:auto;top:auto;width:100%;height:auto;max-width:100%;border-radius:27px;filter:none}

/* Keep mobile scrolling available without a visible scrollbar. */
@media (max-width:650px){
  html,body{scrollbar-width:none}
  html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
}

/* Neutral white hero surface shared by desktop and mobile. */
.header,.hero{background:#fff}
.hero .product-glow{display:none}