@font-face {
  font-family: Nunito;
  src: url("fonts/nunito.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}
:root{color-scheme:light;--ink:#202320;--accent:#becabd;--paper:#f7f6f2;--muted:#50564f;--surface:#fcfbf8;--line:#dedfd7;--font:ui-rounded,"SF Pro Rounded",Nunito,sans-serif;font-family:var(--font);background:var(--paper);color:var(--ink)}
*{box-sizing:border-box}
body,p,h1,h2,h3{margin:0}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid #637860;outline-offset:5px}
.skip{position:absolute;left:1rem;top:-6rem;background:var(--accent);padding:12px;z-index:5}
.skip:focus{top:1rem}
.wrap{width:min(1160px,calc(100% - 80px));margin-inline:auto}
.header{background:var(--surface)}
.hero{background:linear-gradient(120deg,var(--surface),#edf0e9)}
.header{border-bottom:1px solid var(--line)}
.bar,.footer{display:flex;align-items:center;justify-content:space-between;gap:20px}
.bar{height:74px}
.brand{display:inline-flex;align-items:center;gap:8px;font-size:25px;font-weight:850;letter-spacing:-.045em}
.header .brand{font-size:36px}
nav{display:flex;gap:32px;font-size:14px;font-weight:650}
nav a:hover,.text-link:hover,.footer>a:last-child:hover{text-decoration:underline;text-underline-offset:5px}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:52px;padding-block:72px 82px}
.eyebrow,.meta,.atlas-top,.atlas-bottom{font:650 11px/1.5 var(--font);letter-spacing:.11em;text-transform:uppercase}
.eyebrow{display:flex;align-items:center;gap:9px}
.signal{width:8px;height:8px;background:#5e792e;border-radius:50%;display:inline-block}
.hero .eyebrow{color:var(--muted)}
h1{font-size:clamp(48px,calc(7.3vw - 10px),102px);line-height:.94;letter-spacing:-.055em;margin:25px 0 23px;font-weight:850}
h1 em{color:#4d664d;font-style:normal}
.lede{font-size:19px;line-height:1.55;color:var(--muted);max-width:365px}
.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;color:var(--ink);background:var(--accent);padding:14px 18px;border-radius:7px;margin-top:29px;font-weight:750;font-size:14px}
.cta:hover{background:#d5ddd2}
.atlas{position:relative;isolation:isolate;aspect-ratio:1.11;min-width:0;border-radius:18px;border:1px solid #d3dcd0;background:radial-gradient(circle,#7b92794d 1px,transparent 1.4px) 0 0/22px 22px,#e4ebe0;overflow:hidden}
.atlas-top,.atlas-bottom{position:absolute;left:20px;right:20px;display:flex;justify-content:space-between;color:var(--muted)}
.atlas-top{top:18px}.atlas-bottom{bottom:18px}
.orbit{position:absolute;border:1px solid #768b754a;width:80%;height:44%;border-radius:50%;left:10%;top:28%;transform:rotate(-32deg);z-index:-1}
.orbit-b{transform:rotate(28deg)}
.tile{position:absolute;width:22%;border-radius:24%;left:var(--x);top:var(--y);transform:translate(-50%,-50%) rotate(var(--r));box-shadow:0 15px 25px #34443438;transition:transform .2s;outline-offset:6px}
.tile img{border-radius:inherit;width:100%;height:auto}
.tile:hover,.tile:focus-visible{transform:translate(-50%,-50%) rotate(0) scale(1.09);z-index:2}
.t1{--x:22%;--y:32%;--r:-9deg}
.t2{--x:50%;--y:32%;--r:6deg}
.t3{--x:78%;--y:32%;--r:10deg}
.t4{--x:22%;--y:69%;--r:8deg}
.t5{--x:50%;--y:69%;--r:-6deg}
.t6{--x:78%;--y:69%;--r:9deg}
.catalog{padding-block:83px 96px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:31px}
h2{font-size:clamp(26px,calc(6vw - 16px),60px);line-height:.99;letter-spacing:-.045em;margin-top:12px}
.section-head>p{max-width:285px;color:var(--muted);font-size:16px;line-height:1.55}
article,section{scroll-margin-top:20px}
article:target{outline:2px solid #637860;outline-offset:4px}
.card{padding:32px}
.meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:5px 14px;color:#414d50;margin-bottom:27px}
.app-heading{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.app-icon{flex:none;border-radius:22%;object-fit:cover;box-shadow:0 6px 13px #1b261c24}
.tagline{font-size:18px;font-weight:720;line-height:1.35;margin-bottom:9px}
article p:not(.tagline){font-size:15px;line-height:1.65;color:#37443d;max-width:48ch}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.card{border:1px solid var(--line);border-radius:17px;background:var(--surface)}
.app-heading h3{font-size:clamp(19px,calc(3.5vw - 10px),33px);line-height:1.1;letter-spacing:-.035em}
.about{background:#eeeee8;border-block:1px solid var(--line)}
.about-inner{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:48px;padding-block:68px 76px}
.about h2{font-size:clamp(24px,calc(5vw - 16px),49px)}
.about-inner>div>p:not(.eyebrow){color:#3d4c40;line-height:1.65;max-width:49ch}
.about-links{display:flex;flex-wrap:wrap;gap:0 24px}
.text-link{display:inline-block;font-weight:750;font-size:14px;margin-top:17px}
.footer{padding-block:25px;color:#465244;font-size:13px}
.footer .brand{color:var(--ink)}
@media(max-width:820px){.wrap{width:calc(100% - 48px)}.hero-inner{gap:25px;padding-block:52px 62px}h1{font-size:clamp(42px,calc(8.5vw - 10px),62px)}.atlas-top,.atlas-bottom{font-size:9px;left:12px;right:12px}.card{padding:23px}}
@media(max-width:610px){.wrap{width:calc(100% - 36px)}.bar{height:62px}nav{gap:20px}.hero-inner,.grid,.about-inner{grid-template-columns:1fr}.hero-inner{padding-block:45px 34px;gap:32px}h1{font-size:clamp(44px,calc(12vw - 10px),68px)}.atlas{aspect-ratio:1.16}.catalog{padding-block:57px 63px}.section-head{display:block;margin-bottom:22px}.section-head>p{margin-top:13px}.about-inner{gap:18px;padding-block:48px}.footer>span{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}

.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.download {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 20px;
}
.download img {
  flex: 0 0 100px;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.store-link {
  display: inline-block;
  padding: 9px 12px;
  border-radius: 7px;
  background: #e4ebe0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}
.store-link:hover {
  background: #d5ddd2;
}
article .download p.download-note {
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted);
}