:root{font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#102f46;background:#f5f7fa;color-scheme:light dark;--navy:#06263e;--coral:#ffaa78;--gold:#ffe4a2;--cyan:#7ad8e5}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
a{color:#146b8a}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #ed784c;outline-offset:5px}
main{max-width:540px;margin:5vh auto;padding:32px;background:white;border:1px solid #c3d5df;border-radius:26px}
h1,h2,h3{line-height:1.15;letter-spacing:-.035em}
h1{font-size:2.3rem}
p{color:#536e80}
.brand{color:#146b8a;font-weight:800;letter-spacing:.2em}
.auth-icon{display:block;width:88px;height:auto;border-radius:20px;margin-bottom:20px}
label{display:block;margin:18px 0}
input{width:100%;padding:13px;margin-top:6px;border:1px solid #7793a5;border-radius:12px;font:inherit;background:white;color:#102f46}
button{display:block;width:100%;padding:14px;margin:10px 0;border:0;border-radius:16px;background:var(--coral);color:var(--navy);font:inherit;font-weight:700;cursor:pointer}
button:disabled{opacity:.5}
.consent{display:flex;gap:12px}
.consent input{width:22px;flex-shrink:0}
#message{white-space:pre-wrap}
hr{border:0;border-top:1px solid #c3d5df;margin:28px 0}
.landing{background:var(--navy);color:#f7f9fb;color-scheme:dark;background-image:radial-gradient(ellipse at 88% 22%,#154a6966,transparent 48%)}
.site-header,footer{max-width:1240px;margin:auto;padding:28px 48px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:#fff;font-weight:750;font-size:1.35rem;letter-spacing:-.04em}
.logo img{border-radius:12px;object-fit:contain}
.nav-link,footer a{color:#c3d5df;text-decoration:none;font-size:.9rem}
.nav-link span{color:var(--coral);margin-left:12px}
.site-main{max-width:1240px;margin:0 auto;padding:0 48px;background:none;border:0;border-radius:0}
.hero{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:56px;min-height:680px;padding:55px 0 85px}
.eyebrow{font-size:.69rem;font-weight:750;letter-spacing:.16em;color:var(--cyan);line-height:1.6}
.eyebrow>span{display:inline-block;width:7px;height:7px;background:var(--coral);border-radius:50%;margin-right:8px}
.hero h1{font-size:clamp(2.8rem,4.5vw,4.3rem);line-height:1.09;margin:24px 0}
.hero h1 em{font-style:normal;color:var(--gold)}
.intro{max-width:470px;font-size:1.08rem;color:#b5cbd8;margin:26px 0 32px}
.cta{display:inline-flex;align-items:center;gap:24px;background:linear-gradient(110deg,#ff9a79,#ffe4a2);color:var(--navy);font-weight:750;font-size:.92rem;text-decoration:none;padding:16px 22px;border-radius:16px}
.cta:hover{filter:brightness(1.06)}
.availability{font-size:.74rem;color:#9eb7c6;margin-top:18px}
.hero-art{position:relative;padding:26px 0}
.hero-icon{position:relative;width:100%;height:auto;border-radius:23%;box-shadow:0 28px 90px #0005}
.orbit{position:absolute;inset:-18px;border:1px dashed #7ad8e544;border-radius:48%;transform:rotate(-18deg)}
.art-caption{position:relative;display:flex;gap:14px;align-items:center;padding:20px;margin:24px 12px 0;border:1px solid #304e63;border-radius:20px;background:#10344d}
.art-caption strong,.art-caption span:not(.sun){display:block}
.art-caption strong{font-size:.9rem}
.art-caption span:not(.sun){color:#b5cbd8;font-size:.76rem;margin-top:3px}
.sun{height:27px;width:27px;flex-shrink:0;border-radius:50%;background:linear-gradient(var(--gold),#ff9974);box-shadow:0 0 28px #ff997466}
.features{padding:55px 0 75px;border-top:1px solid #304e63;scroll-margin-top:24px}
.section-heading h2,.app-note h2{font-size:clamp(1.9rem,3vw,2.6rem);margin:12px 0 34px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature-grid article{padding:28px;background:#10344d;border:1px solid #304e63;border-radius:24px}
.step{font-size:.65rem;font-weight:750;letter-spacing:.1em;color:var(--coral)}
h3{font-size:1.35rem;margin:22px 0 12px}
.feature-grid p{color:#b5cbd8;font-size:.94rem;min-height:90px}
.feature-tag{display:inline-block;border-radius:20px;background:#7ad8e514;color:var(--cyan);padding:7px 12px;font-size:.76rem}
.feature-tag.gold{color:var(--gold);background:#ffe4a210}
.route{display:flex;align-items:center;height:36px;max-width:210px}
.route i{width:10px;height:10px;border-radius:50%;background:var(--gold)}
.route i:last-child{background:var(--coral)}
.route span{flex:1;border-top:2px dashed #7ad8e580;margin:0 8px}
.app-note{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;padding:36px;border-radius:26px;background:linear-gradient(110deg,#153f58,#103047);border:1px solid #304e63;margin-bottom:64px}
.app-note h2{font-size:1.85rem;margin-bottom:16px}
.app-note p{color:#b5cbd8}
.app-note .eyebrow{color:var(--gold)}
.release-note{align-self:center;font-size:.88rem;border-left:2px solid var(--coral);padding-left:22px}
footer{border-top:1px solid #304e63;font-size:.8rem}
footer p{color:#9eb7c6}
footer .logo{font-size:1.1rem}
@media(prefers-color-scheme:dark){body:not(.landing){background:#071e31;color:#f5f7fa}
body:not(.landing) main{background:#102f46;border-color:#304e63}
body:not(.landing) p{color:#c3d5df}
input{background:#06263e;color:white}
.brand,a{color:#7ad8e5}
}
@media(max-width:800px){.site-header,footer{padding:22px 24px}
.site-main{padding:0 24px}
.hero{grid-template-columns:1fr;gap:22px;padding:30px 0 55px;min-height:auto}
.hero-copy{max-width:580px}
.hero-art{max-width:380px;justify-self:center;width:90%}
.hero h1{font-size:clamp(2.5rem,8vw,3.8rem)}
.feature-grid{grid-template-columns:1fr}
.feature-grid p{min-height:0}
.app-note{grid-template-columns:1fr;gap:4px;padding:26px}
.features{padding:36px 0}
.nav-link{font-size:.75rem}
footer{flex-wrap:wrap}
body:not(.landing) main{margin:20px 12px;padding:24px}
.cta{gap:12px;font-size:.84rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}

/* Keep grid artwork within narrow screens; preserve the supplied artwork. */
.hero>*{min-width:0}
.hero-icon{display:block;clip-path:inset(0 5.3% 5.3% 0 round 22%)}
.hero-art{min-width:0}
.site-header .logo img,footer .logo img{clip-path:inset(0 5.3% 5.3% 0 round 22%)}


.hero-art{overflow:hidden}

/* Transparent mark: no crop or pre-rounded tile. */
.hero-icon,.site-header .logo img,footer .logo img,.auth-icon{clip-path:none;border-radius:0;object-fit:contain}

.hero-icon{box-shadow:none;filter:drop-shadow(0 24px 32px #0005)}