* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:#fafafa;
  color:#211729;
  font-family:"Aptos","Manrope","Noto Sans",sans-serif;
  font-size:17px;
  line-height:1.65
}

a {
  color:inherit;
  text-underline-offset:4px
}

a:hover {
  color:#6333a4
}

a:focus-visible,summary:focus-visible {
  outline:3px solid #6333a4;
  outline-offset:5px
}

img {
  max-width:100%;
  height:auto;
  display:block
}

.wrap {
  width:min(1120px,calc(100% - 48px));
  margin:auto
}

.skip {
  position:absolute;
  left:12px;
  top:-70px;
  background:#211729;
  color:white;
  padding:10px 16px;
  z-index:2
}

.skip:focus {
  top:12px
}

.site-header {
  border-bottom:1px solid #dedde1;
  background:#fff
}

.navigation {
  min-height:88px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px
}

.brand {
  font-size:25px;
  letter-spacing:-.8px;
  font-weight:750;
  text-decoration:none;
  white-space:nowrap
}

.nav-links {
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  font-size:15px
}

.nav-links a {
  text-decoration:none
}

.intro {
  padding:76px 0 60px;
  max-width:820px
}

.intro h1 {
  font-size:clamp(38px,5vw,62px);
  line-height:1.13;
  letter-spacing:-2px;
  margin:0 0 24px;
  font-weight:750
}

.intro p {
  font-size:20px;
  max-width:640px;
  color:#5b5662;
  margin:0
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  margin-bottom:26px
}

.section-heading h2 {
  font-size:25px;
  letter-spacing:-.6px;
  margin:0
}

.section-heading p {
  font-size:15px;
  color:#615b69;
  margin:0
}

.apps-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px
}

.app {
  background:#fff;
  border:1px solid #dedde1;
  border-radius:10px;
  padding:30px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0
}

.app img {
  width:76px;
  height:76px;
  object-fit:contain;
  border-radius:15px;
  margin-bottom:27px
}

.app h3 {
  font-size:24px;
  line-height:1.25;
  letter-spacing:-.7px;
  margin:0 0 16px
}

.app p {
  margin:0 0 26px;
  color:#5b5662;
  font-size:16px
}

.app .availability {
  font-size:14px;
  color:#625a6b;
  margin-top:auto;
  margin-bottom:13px
}

.app .store-link {
  display:inline-block;
  font-size:15px;
  font-weight:650;
  text-decoration:none;
  border-bottom:1px solid #211729;
  padding-bottom:3px;
  min-height:36px
}

.app .coming {
  font-size:15px;
  font-weight:600;
  color:#6b6173;
  margin-top:0;
  min-height:36px;
  padding:0
}

.about {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:60px;
  padding:65px 0 70px;
  border-top:1px solid #dedde1;
  margin-top:70px
}

.about h2 {
  font-size:25px;
  letter-spacing:-.6px;
  margin:0
}

.about p {
  margin:0 0 18px;
  color:#5b5662;
  max-width:690px
}

.about .contact {
  color:#211729;
  font-size:16px
}

.site-footer {
  background:#fff;
  border-top:1px solid #dedde1
}

.footer-inner {
  padding:30px 0;
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  font-size:14px;
  color:#615b69
}

.footer-links {
  display:flex;
  gap:24px;
  flex-wrap:wrap
}

.legal-head {
  padding:56px 0 36px
}

.legal-head h1 {
  font-size:clamp(36px,4vw,50px);
  line-height:1.2;
  letter-spacing:-1.5px;
  margin:0 0 14px
}

.legal-head p {
  color:#625a6b;
  margin:0;
  max-width:760px
}

.legal-layout {
  display:grid;
  grid-template-columns:225px minmax(0,740px);
  gap:60px;
  padding-bottom:76px
}

.contents {
  font-size:15px;
  align-self:start;
  position:sticky;
  top:26px
}

.contents p {
  font-weight:650;
  margin-top:0
}

.contents a {
  display:block;
  margin:10px 0;
  color:#625a6b;
  text-decoration:none
}

.legal-copy {
  min-width:0
}

.legal-copy section {
  margin:0 0 38px;
  scroll-margin-top:24px
}

.legal-copy h2 {
  font-size:23px;
  letter-spacing:-.4px;
  line-height:1.35;
  margin:0 0 15px
}

.legal-copy h3 {
  font-size:19px;
  line-height:1.4;
  margin:25px 0 12px
}

.legal-copy p {
  margin:0 0 16px;
  color:#4e4756
}

.legal-copy li {
  margin-bottom:10px;
  color:#4e4756
}

.legal-copy ul {
  padding-left:23px
}

.notice {
  border-left:3px solid #6333a4;
  padding:14px 20px;
  background:#f4f0f8
}

.legal-copy details {
  border-bottom:1px solid #dedde1;
  padding:18px 0
}

.legal-copy summary {
  cursor:pointer;
  font-size:19px;
  font-weight:650
}

.legal-copy details p {
  margin-top:16px
}

.legal-copy code {
  overflow-wrap:anywhere;
  font-size:.9em
}

.back {
  display:inline-block;
  font-size:15px;
  margin-bottom:18px;
  text-decoration:none
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}


}

@media(max-width:800px) {
  .apps-grid {
  grid-template-columns:1fr
}

.app {
  display:grid;
  grid-template-columns:76px 1fr;
  column-gap:24px;
  padding:26px
}

.app img {
  grid-row:1/5;
  margin:0
}

.app h3,.app p,.app .availability,.app .store-link,.app .coming {
  grid-column:2
}

.app h3 {
  margin-bottom:10px
}

.app p {
  margin-bottom:14px
}

.app .availability {
  margin-top:0;
  margin-bottom:8px
}

.app .store-link {
  justify-self:start
}

.about {
  grid-template-columns:1fr;
  gap:18px;
  padding:40px 0;
  margin-top:44px
}

.intro {
  padding:50px 0 42px
}

.legal-layout {
  grid-template-columns:1fr;
  gap:28px
}

.contents {
  position:static;
  border-bottom:1px solid #dedde1;
  padding-bottom:18px
}

.contents a {
  display:inline-block;
  margin-right:18px
}

.legal-head {
  padding-top:40px
}


}

@media(max-width:520px) {
  .wrap {
  width:calc(100% - 36px)
}

.navigation {
  align-items:flex-start;
  flex-direction:column;
  gap:13px;
  padding:20px 0;
  min-height:0
}

.nav-links {
  gap:20px;
  font-size:14px
}

.intro h1 {
  letter-spacing:-1.1px
}

.intro p {
  font-size:18px
}

.section-heading {
  align-items:flex-start;
  flex-direction:column;
  gap:4px;
  margin-bottom:20px
}

.app {
  grid-template-columns:58px 1fr;
  gap:0 18px;
  padding:22px
}

.app img {
  width:58px;
  height:58px;
  border-radius:12px
}

.app h3 {
  font-size:22px
}

.app p {
  font-size:15px
}

.footer-inner {
  padding:25px 0;
  gap:18px
}

.legal-copy {
  font-size:16px
}

.legal-layout {
  padding-bottom:38px
}

.legal-head h1 {
  letter-spacing:-1px
}

.footer-links {
  gap:20px
}


}