/* Veteraro theme: the app icon's sky, deep blue settling into pale cyan. */
:root { --sky1: #2052ab; --sky2: #6acbd4; --pale: #eaf5fa; --blue: #2052ab; --accent: #1d1d1f; }

/* Hero */
.hero { position: relative; overflow: hidden; color: #fff; text-align: center; background: linear-gradient(var(--sky1), #3f86c4 58%, var(--sky2)); min-height: calc(100svh - var(--nav-h) - var(--sub-h)); padding-top: clamp(48px, 10vh, 104px); display: flex; flex-direction: column; --h: 0; }
.hero-copy { position: relative; z-index: 2; opacity: calc(1 - var(--h) * 1.5); transform: translateY(calc(var(--h) * -36px)); }
.hero .eyebrow { margin-bottom: 12px; opacity: .85; }
.hero h1 { font-size: clamp(3rem, min(13vw, 14vh), 7.5rem); line-height: 1.12; }
.hero .sub { margin-top: 18px; font-size: clamp(1.0625rem, 2.2vw, 1.3125rem); opacity: .9; }
.sun { position: absolute; z-index: 0; top: 54%; left: 50%; width: min(46vw, 34vh, 320px); aspect-ratio: 1; border-radius: 50%; margin-left: 4%; background: radial-gradient(circle at 42% 40%, #ffe9a8, #ffc94d 72%); transform: translateY(calc(var(--h) * -70px)); }
.cloud { position: absolute; z-index: 1; bottom: -6%; left: 50%; width: min(120vw, 70vh, 820px); aspect-ratio: 2.1; margin-left: calc(min(120vw, 70vh, 820px) / -2); transform: translateY(calc(var(--h) * 50px)); }
.cloud i { position: absolute; display: block; border-radius: 50%; background: #fff; }
.cloud i:nth-child(1) { left: 6%; bottom: 0; width: 38%; aspect-ratio: 1; }
.cloud i:nth-child(2) { left: 28%; bottom: 8%; width: 48%; aspect-ratio: 1; }
.cloud i:nth-child(3) { right: 6%; bottom: 0; width: 34%; aspect-ratio: 1; }
.cloud i:nth-child(4) { left: 16%; right: 16%; bottom: 0; height: 30%; border-radius: 0; }
.drift { position: absolute; z-index: 0; height: 14px; border-radius: 99px; background: rgba(255, 255, 255, .28); animation: drift 14s ease-in-out infinite alternate; }
.drift.a { top: 40%; left: 8%; width: 22vw; }
.drift.b { top: 50%; right: 7%; width: 16vw; animation-delay: -6s; }
@keyframes drift { to { transform: translateX(5vw); } }
.rise { animation: rise 1.4s var(--ease) var(--d, 0s) both; }

/* Swipe stage: scrolling the page swipes the phone between sources */
.stage { height: 340vh; background: linear-gradient(#fff, var(--pale) 30%, var(--pale) 70%, #fff); --p: 0; }
.stage-in { position: sticky; top: var(--sub-h); height: calc(100svh - var(--sub-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(16px, 3vh, 28px); overflow: hidden; }
.stage-title { position: relative; width: 100%; min-height: 2.6em; text-align: center; font-size: clamp(1.5rem, 5vw, 2.75rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.stage-title li { position: absolute; inset: 0; padding-inline: 16px; opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .7s var(--ease); }
.stage-title li.on { opacity: 1; transform: none; }
.phone { container-type: inline-size; position: relative; width: min(62vw, 38vh, 300px); aspect-ratio: 9 / 19.3; flex: none; }
.screen { overflow: hidden; background: #3f86c4; }
.pages { display: flex; width: 300%; height: 100%; transform: translateX(calc(var(--p) * -33.3333%)); }
.pg { flex: 1; color: #fff; text-align: center; padding: 15cqw 6cqw 0; }
.pg.jma { background: linear-gradient(#2f66b4, #7fb4d8); }
.pg.om { background: linear-gradient(#4d7fb8, #a3c7dc); }
.pg.ap { background: linear-gradient(#3a7fc6, #6acbd4); }
.pg .src { font-size: 4.6cqw; font-weight: 600; opacity: .85; }
.pg .place { margin-top: 2cqw; font-size: 6.4cqw; font-weight: 500; }
.pg .temp { font-size: 27cqw; font-weight: 200; line-height: 1.15; letter-spacing: -.02em; }
.pg .cond { font-size: 5.4cqw; font-weight: 500; }
.pg .hl { font-size: 5cqw; opacity: .9; }
.hours { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1cqw; margin-top: 7cqw; padding: 4cqw 2cqw; border-radius: 5cqw; background: rgba(255, 255, 255, .16); font-size: 3.8cqw; line-height: 1.5; }
.hours b { display: block; font-size: 4.6cqw; font-weight: 600; }
.hours small { display: block; font-size: 3.4cqw; color: #d8f4ff; }
.dots { position: absolute; left: 0; right: 0; bottom: 6cqw; display: flex; justify-content: center; gap: 2.4cqw; }
.dots i { width: 2.4cqw; aspect-ratio: 1; border-radius: 50%; background: #fff; opacity: .4; transition: opacity .3s; }
.dots i.on { opacity: 1; }
.note { font-size: .75rem; color: var(--muted); }

/* Feature sections */
.feature { text-align: center; }
.feature .lead { max-width: 34em; margin: 18px auto 0; }
.feature .art { margin: clamp(36px, 6vw, 64px) auto 0; }
.pale { background: var(--pale); }

.cmp { max-width: 620px; padding: 8px 24px; border-radius: 24px; background: #fff; text-align: left; }
.pale .cmp { box-shadow: 0 10px 40px rgba(32, 82, 171, .08); }
.cmp li { display: grid; grid-template-columns: 7.2em 1fr 3.4em; gap: 12px; align-items: center; min-height: 64px; border-top: 1px solid var(--line); font-size: .9375rem; }
.cmp li:first-child { border-top: 0; }
.cmp b { font-weight: 600; }
.cmp .bar { display: block; height: 6px; border-radius: 9px; background: var(--soft); position: relative; overflow: hidden; }
.cmp .bar i { position: absolute; left: var(--a); right: var(--b); top: 0; bottom: 0; border-radius: 9px; background: linear-gradient(90deg, var(--sky2), #ffc94d, #f5894a); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) var(--d, 0s); }
.in .cmp .bar i, .cmp.in .bar i { transform: none; }
.cmp em { font-style: normal; text-align: right; color: var(--blue); font-weight: 600; }

.radar { position: relative; overflow: hidden; width: min(100%, 720px); aspect-ratio: 16 / 10; border-radius: 24px; background: #dfe9ee; }
.radar svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.echo { position: absolute; border-radius: 50%; filter: blur(14px); background: radial-gradient(circle, #2f58d6 0 26%, #4f9be8 48%, rgba(120, 200, 240, .75) 68%, transparent 74%); transform: translateX(-34%); }
.echo.one { left: 18%; top: 14%; width: 46%; aspect-ratio: 1.3; }
.echo.two { left: 44%; top: 42%; width: 30%; aspect-ratio: 1.2; }
.radar.in .echo { animation: pass 7s ease-in-out infinite alternate; }
@keyframes pass { to { transform: translateX(26%); } }
.time { position: absolute; left: 5%; right: 5%; bottom: 7%; height: 5px; border-radius: 9px; background: rgba(0, 0, 0, .14); }
.time i { position: absolute; top: 50%; left: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .3); }
.radar.in .time i { animation: knob 7s ease-in-out infinite alternate; }
@keyframes knob { to { left: 100%; } }

.watch { container-type: inline-size; width: min(62vw, 270px); aspect-ratio: .84; }
.dial { background: linear-gradient(#274a7c, #16263f); color: #fff; display: grid; place-items: center; }
.ring { position: absolute; width: 80cqw; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#ffc94d 0 30%, #f5894a 30% 52%, #6acbd4 52% 78%, #4f9be8 78%); -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 73%); mask: radial-gradient(closest-side, transparent 72%, #000 73%); clip-path: circle(0 at 50% 50%); transition: clip-path 1.6s var(--ease); }
.watch.in .ring { clip-path: circle(75% at 50% 50%); }
.dial span { position: relative; text-align: center; font-size: 6cqw; line-height: 1.3; }
.dial b { display: block; font-size: 22cqw; font-weight: 300; line-height: 1.1; }

.notes { display: grid; gap: 12px; max-width: 480px; }
.notes li { padding: 16px 20px; border-radius: 22px; background: #fff; text-align: left; box-shadow: 0 8px 30px rgba(32, 82, 171, .08); transition: opacity .9s ease var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s); }
.js .notes li { opacity: 0; transform: translateY(24px); }
.js .notes.in li { opacity: 1; transform: none; }
.notes b { display: block; font-size: .9375rem; font-weight: 600; }
.notes span { display: block; color: var(--muted); font-size: .9375rem; line-height: 1.55; }

.more h2, .price h2, .faq h2 { margin-bottom: clamp(28px, 5vw, 44px); }
.fold ul { list-style: disc; padding-left: 1.2em; }
.tbd { color: var(--muted); }
.steps-note { margin-top: 18px; color: var(--muted); font-size: .9375rem; }
.outro { text-align: center; color: #fff; padding-block: clamp(96px, 18vw, 200px); background: linear-gradient(var(--sky1), var(--sky2)); }
.fold > div a { color: var(--blue); }

@media (prefers-reduced-motion: reduce) {
  .drift, .radar.in .echo, .radar.in .time i { animation: none; }
  .js .notes li { opacity: 1; transform: none; transition: none; }
  .ring { clip-path: none; transition: none; }
  .cmp .bar i { transform: none; transition: none; }
}