:root {
  color-scheme:light;
  --paper:#f7f8f5;
  --ink:#17191b;
  --muted:#626662;
  --line:#d9ddd5;
  --lime:#d5fa39;
  --blue:#2449f2;
  --radius:24px;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:80px;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--type-body);
  line-height:var(--leading-body);
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font:inherit;
}

a, button {
  -webkit-tap-highlight-color:transparent;
}

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

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

h1, h2, h3, p {
  margin:0;
}

h1, h2, h3 {
  font-family:var(--display);
  line-height:var(--leading-heading);
  letter-spacing:-.05em;
}

h1 {
  font-size:var(--type-project);
  font-weight:700;
}

h2 {
  font-size:var(--type-section);
}

h3 {
  font-size:var(--type-title);
}

p {
  max-width:58ch;
}

.wrap {
  width:min(1280px,calc(100% - 96px));
  margin-inline:auto;
}

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

.wordmark {
  font-family:var(--display);
  font-size:var(--type-brand);
  font-weight:800;
  letter-spacing:-.08em;
  line-height:1;
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
}

.dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:currentColor;
  display:inline-block;
  flex-shrink:0;
}

.pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border:1px solid currentColor;
  border-radius:30px;
  font-size:var(--type-small);
  line-height:1.3;
}

.skip {
  position:absolute;
  top:-100px;
  left:15px;
  z-index:20;
  padding:12px;
  background:white;
  color:black;
}

.skip:focus {
  top:10px;
}

.site-footer {
  border-top:1px solid var(--line);
  padding:35px 0;
  display:flex;
  justify-content:space-between;
  gap:25px;
  font-size:var(--type-small);
}

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

.site-footer a:hover {
  text-decoration:underline;
}

.site-footer .copyright {
  color:var(--muted);
}

@media(max-width:1000px) {
  .wrap {
    width:calc(100% - 56px);
  }
}

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

  .site-header {
    min-height:88px;
  }

  .site-footer {
    flex-direction:column;
  }

  .footer-links {
    gap:17px;
  }
}

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

  *, *:before, *:after {
    animation:none!important;
    transition:none!important;
  }
}

.product-page {
  --paper:#f7f8f5;
}

.product-nav {
  font-size:var(--type-control);
  line-height:var(--leading-label);
  display:flex;
  gap:24px;
  flex-wrap:wrap;
}

.product-hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:80px;
  padding:55px 0 70px;
  align-items:center;
}

.product-hero h1 {
  margin:25px 0;
}

.product-hero .lead {
  color:var(--muted);
  font-size:var(--type-lead);
  margin-bottom:25px;
}

.product-hero .product-icon {
  width:75px;
  border-radius:18px;
  margin-bottom:30px;
}

.product-hero .product-art {
  height:630px;
  position:relative;
  overflow:hidden;
  background:#e2eccd;
  border-radius:24px;
}

.product-art .phone {
  width:58%;
  margin:40px auto 0;
  border:7px solid #162a22;
  border-radius:27px;
  transform:rotate(6deg);
  box-shadow:10px 20px 30px #0003;
}

.product-facts {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px;
  padding:45px 0 75px;
  border-top:1px solid var(--line);
}

.product-facts h2 {
  font-size:var(--type-card);
  font-weight:500;
  line-height:1.25;
  letter-spacing:-.035em;
  margin-bottom:16px;
}

.product-facts p {
  color:var(--muted);
}

.launch-note {
  padding:25px 28px;
  background:#e8ece4;
  border-radius:12px;
  max-width:52ch;
}

.launch-note strong {
  display:block;
  margin-bottom:7px;
}

.launch-note p {
  font-size:var(--type-body);
  color:var(--muted);
}

.cosmic-page {
  --paper:#0d1522;
  --ink:#eef3fc;
  --muted:#a9b8cf;
  --line:#344058;
  --lime:#bbed76;
  color-scheme:dark;
}

.cosmic-page .product-art {
  background:#16253a;
  display:flex;
  align-items:center;
}

.cosmic-page .product-art img {
  width:100%;
  mix-blend-mode:screen;
  transform:rotate(22deg);
}

.cosmic-page .launch-note {
  background:#1b2a40;
}

.legal-page {
  --paper:#fff;
  --ink:#182536;
  --muted:#5a6572;
  --line:#dbe0e5;
}

.legal-layout {
  display:grid;
  grid-template-columns:240px minmax(0,720px);
  gap:65px;
  padding:50px 0 80px;
  justify-content:center;
}

.legal-toc {
  position:sticky;
  top:25px;
  align-self:start;
}

.legal-toc strong {
  display:block;
  font-size:var(--type-small);
  margin-bottom:20px;
}

.legal-toc a {
  display:block;
  font-size:var(--type-small);
  margin-bottom:13px;
  color:var(--muted);
  line-height:1.45;
}

.legal-copy h1 {
  font-size:var(--type-page);
  font-weight:500;
  margin:15px 0 30px;
}

.legal-copy .legal-intro {
  font-size:var(--type-lead);
  line-height:1.65;
  margin-bottom:24px;
}

.legal-copy .last-updated {
  font-size:var(--type-small);
  color:var(--muted);
  padding-bottom:25px;
  border-bottom:1px solid var(--line);
}

.legal-contact {
  font-style:normal;
  line-height:1.9;
  color:#44505e;
}

.legal-copy {
  overflow-wrap:anywhere;
}

.legal-copy h2 {
  font-size:var(--type-card);
  font-weight:500;
  letter-spacing:-.025em;
  line-height:1.3;
  margin:35px 0 13px;
}

.legal-copy p:not(.section-label):not(.legal-intro):not(.last-updated), .legal-copy li {
  color:#44505e;
  margin-bottom:15px;
  font-size:var(--type-body);
  line-height:1.75;
}

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

.legal-copy a {
  color:#2354a0;
  text-decoration:underline;
  text-underline-offset:3px;
}

.legal-copy .meta {
  color:var(--muted);
}

@media(max-width:1100px) {
  .product-hero {
    gap:40px;
  }

  .legal-layout {
    gap:35px;
    grid-template-columns:190px minmax(0,700px);
  }
}

@media(max-width:800px) {
  .product-hero {
    grid-template-columns:1fr;
    padding-top:30px;
    gap:40px;
  }

  .product-hero .product-art {
    height:540px;
  }

  .product-art .phone {
    width:47%;
  }

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

  .legal-toc {
    position:static;
    display:none;
  }
}

@media(max-width:600px) {
  .product-hero .product-art {
    height:480px;
  }

  .product-art .phone {
    width:65%;
  }

  .product-facts {
    grid-template-columns:1fr;
    gap:30px;
  }

  .legal-layout {
    padding-top:25px;
  }

  .product-nav {
    font-size:var(--type-small);
    gap:15px;
  }
}

.worlds-detail.product-page {
  --paper:#0b141b;
  --ink:#edf3f6;
  --muted:#b0c0ca;
  --line:#ffffff35;
  background:#0b141b;
}

.worlds-detail.product-page h1 {
  font-family:var(--editorial);
  font-weight:400;
  letter-spacing:-.065em;
}

.worlds-detail .product-art {
  border-radius:50% 50% 0 0;
  background:#1e3934;
}

.worlds-detail .launch-note {
  background:#1d2c37;
}

.legal-page .site-header {
  border-bottom:1px solid var(--line);
}
