* {
  box-sizing:border-box
}

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

body {
  margin:0;
  background:#fff;
  color:#20211d;
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased
}

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

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

button {
  font:inherit
}

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

img,svg {
  display:block;
  max-width:100%
}

button,a:focus-visible {
  outline-offset:6px
}

button:focus-visible,a:focus-visible {
  outline:3px solid #7552cf
}

::selection {
  background:#f6dd35;
  color:#20211d
}

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

.skip:not(:focus) {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%)
}

.skip:focus {
  position:fixed;
  z-index:20;
  top:10px;
  left:10px;
  padding:14px;
  background:#f6dd35
}

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

.brand {
  display:inline-flex;
  align-items:center;
  gap:11px;
  white-space:nowrap
}

.brand img {
  border-radius:13px
}

.brand>span {
  font-size:27px;
  font-weight:800;
  letter-spacing:-1.4px
}

.brand-dot {
  color:#899636
}

.nav {
  display:flex;
  gap:34px;
  font-size:14px
}

.nav a {
  padding:12px 0
}

.nav a:hover {
  color:#68722d
}

.header-link {
  font-size:12px;
  font-weight:600;
  padding:13px 17px;
  border:1px solid #ddded6;
  border-radius:30px
}

.header-link span {
  margin-left:12px
}

.hero {
  display:grid;
  grid-template-columns:1.08fr 1fr;
  gap:20px;
  align-items:center;
  padding-top:30px;
  padding-bottom:57px
}

.hero-copy {
  padding:22px 28px 8px 0
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:1.25px
}

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

.hero h1 {
  font-size:clamp(58px,6.2vw,89px);
  line-height:1.025;
  letter-spacing:-5.1px;
  margin:30px 0
}

.word-tap {
  position:relative;
  white-space:nowrap
}

.word-tap svg {
  position:absolute;
  left:-2%;
  bottom:-15px;
  width:104%;
  height:22px;
  stroke:#f0cd21;
  stroke-width:5;
  stroke-linecap:round;
  fill:none;
  z-index:-1
}

.title-dot {
  color:#b6c934
}

.hero-description {
  font-size:17px;
  line-height:1.65;
  color:#6b6d61;
  max-width:390px;
  margin-top:34px
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:30px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  min-height:54px;
  border-radius:34px;
  font-size:13px;
  font-weight:600;
  padding:0 23px;
  transition:transform .25s,background .25s,color .25s
}

.button span {
  font-size:22px;
  line-height:1
}

.button-dark {
  background:#24251f;
  color:#fff
}

.button-dark:hover {
  background:#55602d;
  transform:translateY(-2px)
}

.platform-note {
  font-size:10px;
  line-height:1.6;
  color:#87897d
}

.platform-note b {
  font-weight:500;
  color:#4e5144
}

.hero-foot {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:48px;
  color:#838578;
  font-size:11px
}

.tiny-spark {
  color:#4b5430;
  font-size:22px
}

.hero-visual {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:538px;
  border-radius:30px;
  background:#f5df32
}

.visual-top,.visual-bottom {
  position:absolute;
  z-index:4;
  font-size:8px;
  letter-spacing:1.15px;
  font-weight:700
}

.visual-top {
  top:26px;
  left:27px
}

.visual-plus {
  position:absolute;
  right:24px;
  top:20px;
  font-size:25px;
  font-weight:400
}

.visual-bottom {
  bottom:20px;
  right:25px;
  font-size:7px;
  letter-spacing:.8px
}

.hero-orbit {
  position:absolute;
  width:450px;
  height:450px;
  border:1px solid #85802945;
  border-radius:50%;
  top:72px;
  left:100px;
  transform:rotate(-25deg) scaleX(1.15)
}

.hero-orbit:after {
  content:"";
  position:absolute;
  inset:29px;
  border:1px solid #85802935;
  border-radius:50%
}

.hero-lemon {
  position:absolute;
  z-index:1;
  left:-92px;
  top:48px;
  width:390px;
  max-width:none;
  transform:rotate(-13deg);
  filter:drop-shadow(0 18px 15px #b0931f12);
  animation:lemon-float 8s ease-in-out infinite
}

.phone {
  border:7px solid #272923;
  border-radius:33px;
  overflow:hidden;
  box-shadow:1px 2px 0 #697058,0 22px 48px #1b2c202b;
  background:#f8f9f2
}

.phone>img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}

.hero-phone {
  display:block;
  width:207px;
  aspect-ratio:1206/2622;
  position:absolute;
  z-index:2;
  top:60px;
  right:72px;
  transform:rotate(9deg);
  transition:transform .5s;
  box-shadow:2px 3px 0 #777e5e,18px 30px 33px #675b2e40
}

.hero-phone:hover {
  transform:rotate(5deg) translateY(-5px)
}

.phone-glint {
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,#fff1,transparent 30%,transparent 80%,#fff1);
  pointer-events:none
}

.play-shape {
  position:absolute;
  z-index:3;
  bottom:130px;
  left:63px;
  width:69px;
  height:69px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:#cab5ed;
  transform:rotate(-15deg);
  box-shadow:4px 6px 0 #aa91d8,8px 14px 12px #9d832a25
}

.play-shape svg {
  width:39px;
  stroke:#f6f0ff;
  stroke-width:12;
  stroke-linecap:round
}

.product-sticker {
  position:absolute;
  z-index:5;
  left:28px;
  bottom:36px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:11px;
  background:#fffefa;
  border-radius:17px;
  box-shadow:0 8px 18px #8c7a2920;
  transform:rotate(-4deg);
  transition:transform .3s
}

.product-sticker:hover {
  transform:rotate(0)
}

.product-sticker img {
  border-radius:11px
}

.product-sticker small {
  display:block;
  color:#848778;
  font-size:7px;
  letter-spacing:.65px;
  margin-bottom:4px
}

.product-sticker b {
  display:block;
  font-size:15px;
  letter-spacing:-.5px
}

.sticker-arrow {
  margin-left:12px;
  font-size:22px
}

.ticker {
  width:100%;
  overflow:hidden;
  border-block:1px solid #e7e8e1;
  padding-block:23px
}

.ticker-track {
  display:flex;
  width:max-content;
  gap:34px;
  align-items:center;
  animation:ticker 45s linear infinite
}

.ticker span {
  font-size:14px;
  letter-spacing:1.3px;
  font-weight:600;
  color:#767a67
}

.ticker i {
  font-size:24px;
  line-height:1;
  color:#c4d548;
  font-style:normal
}

.section {
  margin-top:106px;
  scroll-margin-top:35px
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:35px;
  margin-bottom:36px
}

.section-heading h2 {
  font-size:clamp(36px,3.6vw,51px);
  line-height:1.09;
  letter-spacing:-2.3px;
  margin-top:18px
}

.section-heading h2 span {
  color:#a7b834
}

.section-heading>p {
  font-size:13px;
  color:#838777;
  line-height:1.65;
  margin-bottom:4px
}

.featured {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:638px;
  border-radius:29px;
  overflow:hidden;
  background:#f3f5eb;
  scroll-margin-top:35px
}

.featured-info {
  min-width:0;
  padding:52px 54px 44px
}

.app-identity {
  display:flex;
  align-items:center;
  gap:17px
}

.app-identity img {
  border-radius:19px;
  box-shadow:0 5px 12px #3e51301a
}

.app-identity>span {
  font-size:8px;
  letter-spacing:1.3px;
  color:#697458
}

.product-kicker {
  font-size:8px;
  letter-spacing:1px;
  display:flex;
  gap:7px;
  align-items:center;
  margin-top:34px;
  color:#6b7657
}

.product-kicker .status-dot {
  width:5px;
  height:5px
}

.featured-info h3 {
  font-size:57px;
  line-height:1;
  letter-spacing:-2.9px;
  margin-top:12px;
  font-weight:700
}

.featured-info h3>span {
  font-size:13px;
  vertical-align:top;
  display:inline-block;
  margin-left:4px;
  margin-top:7px
}

.featured-tagline {
  font-size:28px;
  letter-spacing:-1.05px;
  line-height:1.23;
  margin-top:18px
}

.featured-description {
  font-size:13px;
  line-height:1.7;
  color:#79816b;
  max-width:330px;
  margin-top:19px
}

.app-tags {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:22px 0
}

.app-tags>span {
  font-size:9px;
  padding:7px 11px;
  border:1px solid #d8ddcb;
  border-radius:20px;
  color:#687057
}

.featured-info .button {
  font-size:11px;
  min-height:49px;
  padding-inline:19px;
  gap:25px
}

.product-domain {
  display:block;
  width:fit-content;
  margin:12px 0 0 17px;
  font-size:10px;
  color:#8b927d
}

.product-domain:hover {
  text-decoration:underline;
  text-underline-offset:4px
}

.featured-visual {
  position:relative;
  overflow:hidden;
  background:#dce6c2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px 20px 79px;
  isolation:isolate
}

.featured-visual:before {
  content:"";
  position:absolute;
  z-index:-1;
  width:460px;
  height:460px;
  top:80px;
  left:70px;
  border-radius:50%;
  background:#e9efd9
}

.feature-watermark {
  position:absolute;
  z-index:-1;
  left:20px;
  top:93px;
  font-size:115px;
  line-height:.9;
  letter-spacing:-10px;
  font-weight:700;
  color:#a8bb7b5c;
  transform:rotate(-90deg) translate(-155px,-75px)
}

.product-phone {
  position:relative;
  width:217px;
  aspect-ratio:1206/2622;
  transform:rotate(-5deg);
  border-width:7px;
  box-shadow:2px 3px 0 #8c937c,10px 25px 45px #30462538;
  transition:transform .5s
}

.featured:hover .product-phone {
  transform:rotate(-2deg)
}

.screen-switcher {
  position:absolute;
  z-index:3;
  bottom:44px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:4px;
  border-radius:30px;
  background:#ffffff7a;
  padding:4px;
  white-space:nowrap
}

.screen-button {
  border:0;
  border-radius:30px;
  padding:11px 17px;
  background:transparent;
  font-size:10px;
  cursor:pointer;
  color:#68714f;
  min-height:36px
}

.screen-button[aria-pressed=true] {
  background:#fff;
  color:#39422c;
  box-shadow:0 2px 5px #5464320d
}

.feature-caption {
  position:absolute;
  bottom:20px;
  font-size:6px;
  letter-spacing:1.2px;
  color:#7b8860
}

.next-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin:52px 0 22px
}

.next-heading h3 {
  font-size:24px;
  letter-spacing:-1px
}

.in-development {
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  color:#929584;
  font-size:8px;
  letter-spacing:1px
}

.in-development .status-dot {
  background:#b1b79e;
  width:5px;
  height:5px
}

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

.upcoming {
  min-width:0;
  border:1px solid #e9eae4;
  border-radius:23px;
  overflow:hidden;
  background:#fff
}

.category-art {
  height:207px;
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center
}

.health-art {
  background:#f7eed8
}

.health-disc {
  display:grid;
  place-items:center;
  width:115px;
  height:115px;
  background:#e3b352;
  border-radius:35px;
  transform:rotate(-12deg);
  box-shadow:5px 7px 0 #b89042,10px 18px 17px #b9914122
}

.health-disc svg {
  width:83px;
  stroke:#fff7de;
  stroke-width:8;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none
}

.small-dot {
  position:absolute;
  width:26px;
  height:26px;
  background:#eaca85;
  border-radius:50%;
  right:70px;
  top:44px;
  box-shadow:2px 3px 0 #bda464
}

.games-art {
  background:#eee6fa
}

.game-piece {
  position:absolute;
  width:67px;
  height:67px;
  border-radius:17px;
  box-shadow:4px 7px 0 #9f7fc1,9px 16px 15px #84619d22;
  background:#bc9bdd;
  transform:rotate(-14deg)
}

.game-piece.one {
  top:65px;
  left:calc(50% - 70px)
}

.game-piece.two {
  top:75px;
  left:calc(50% - 5px);
  background:#ddc9f1
}

.game-piece.three {
  top:20px;
  left:calc(50% - 17px);
  background:#c8ace4
}

.game-spark {
  position:absolute;
  font-size:45px;
  color:#a17cc8;
  right:59px;
  bottom:31px
}

.work-art {
  background:#e7edf5
}

.work-sheet {
  position:absolute;
  width:92px;
  height:115px;
  top:43px;
  border-radius:13px;
  box-shadow:3px 6px 0 #7c99bf,8px 16px 15px #5d729f18
}

.work-sheet.back {
  background:#a9bddb;
  transform:rotate(-17deg);
  left:calc(50% - 61px)
}

.work-sheet.front {
  background:#f5f8ff;
  transform:rotate(11deg);
  left:calc(50% - 33px);
  padding:28px 16px;
  display:grid;
  gap:9px;
  align-content:start
}

.work-sheet i {
  height:5px;
  background:#c5d2e5;
  border-radius:4px
}

.work-sheet i:last-child {
  width:65%
}

.work-check {
  position:absolute;
  right:calc(50% - 81px);
  bottom:38px;
  width:37px;
  height:37px;
  background:#6c8fbf;
  border-radius:50%;
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:2px 3px 0 #4e719f;
  font-size:20px;
  transform:rotate(-9deg)
}

.upcoming-copy {
  padding:23px 25px 27px
}

.card-number {
  font-size:8px;
  letter-spacing:1px;
  color:#969b89
}

.upcoming h4 {
  font-size:21px;
  letter-spacing:-.8px;
  margin-top:10px
}

.upcoming p {
  font-size:12px;
  line-height:1.65;
  color:#8b907f;
  margin-top:10px
}

.development-note {
  margin-top:20px;
  font-size:11px;
  color:#959987
}

.studio {
  background:#f6df3b;
  border-radius:29px;
  padding:43px 50px 28px
}

.studio-top {
  display:flex;
  justify-content:space-between;
  align-items:center
}

.studio-star {
  font-size:45px;
  font-weight:400;
  line-height:1
}

.studio-body {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:60px;
  margin-top:34px;
  margin-bottom:41px;
  align-items:center
}

.studio h2 {
  font-size:clamp(39px,4.4vw,62px);
  line-height:1.07;
  letter-spacing:-2.8px;
  font-weight:600
}

.studio h2 em {
  font-family:Georgia,serif;
  font-weight:400
}

.studio-description p {
  font-size:13px;
  line-height:1.75;
  color:#5c572c;
  max-width:365px
}

.studio-description p+p {
  margin-top:16px
}

.studio-values {
  display:flex;
  justify-content:space-between;
  gap:18px;
  border-top:1px solid #7f74222c;
  padding-top:21px;
  font-size:10px;
  color:#6f632e
}

.studio-values span:before {
  content:"↗";
  margin-right:10px;
  font-size:14px
}

.closing {
  padding-block:94px 88px;
  text-align:center
}

.closing>p {
  font-size:12px;
  color:#9a9d8f
}

.closing>a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin-top:18px;
  font-size:45px;
  line-height:1.2;
  letter-spacing:-1.8px
}

.closing>a>span {
  font-size:38px;
  color:#9aa652;
  transition:transform .3s
}

.closing>a:hover>span {
  transform:translate(4px,-4px)
}

.footer {
  background:#f5f5ef;
  padding-top:36px;
  overflow:hidden
}

.footer-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:28px;
  border-bottom:1px solid #dddfd3
}

.footer-tagline {
  font-size:8px;
  letter-spacing:1.4px;
  color:#979c85
}

.back-top {
  font-size:11px;
  color:#7b8266
}

.footer-legal {
  display:flex;
  justify-content:space-between;
  gap:30px;
  padding-block:25px 35px;
  font-size:9px;
  line-height:1.8;
  color:#8b917e
}

.footer-legal strong {
  font-weight:500;
  color:#676e58
}

.footer-legal p+p {
  margin-top:8px
}

.copyright {
  text-align:right;
  align-self:end
}

.footer-wordmark {
  font-weight:800;
  font-size:clamp(80px,15vw,220px);
  line-height:.77;
  letter-spacing:-.075em;
  white-space:nowrap;
  padding-top:20px;
  color:#dfe3d2
}

.footer-wordmark span {
  color:#becb81
}

@keyframes ticker {
  to {
    transform:translateX(-50%)
  }

}

@keyframes lemon-float {
  0%,100% {
    transform:rotate(-13deg) translateY(0)
  }

  50% {
    transform:rotate(-9deg) translateY(-10px)
  }

}

@media(min-width:1600px) {
  .hero-visual {
    min-height:570px
  }

  .hero-phone {
    right:85px;
    top:65px;
    width:220px
  }

  .hero-lemon {
    width:415px;
    left:-70px
  }

}

@media(max-width:1100px) {
  .container {
    width:calc(100% - 56px)
  }

  .header {
    height:87px
  }

  .header-link {
    font-size:10px
  }

  .hero {
    gap:20px
  }

  .hero h1 {
    font-size:65px;
    letter-spacing:-3.7px
  }

  .hero-copy {
    padding-right:0
  }

  .hero-visual {
    min-height:500px
  }

  .hero-phone {
    width:183px;
    right:42px;
    top:61px
  }

  .hero-lemon {
    width:330px;
    left:-95px;
    top:64px
  }

  .play-shape {
    left:45px;
    bottom:145px;
    width:55px;
    height:55px
  }

  .hero-foot {
    margin-top:32px
  }

  .hero-description {
    font-size:15px
  }

  .featured-info {
    padding:39px 35px
  }

  .featured-info h3 {
    font-size:46px
  }

  .featured-tagline {
    font-size:25px
  }

  .featured {
    min-height:610px
  }

  .section {
    margin-top:80px
  }

  .studio {
    padding:34px
  }

  .studio-body {
    gap:34px
  }

  .studio h2 {
    font-size:48px
  }

  .upcoming-copy {
    padding:20px
  }

  .upcoming h4 {
    font-size:18px
  }

}

@media(max-width:800px) {
  .container {
    width:calc(100% - 40px)
  }

  .header {
    height:76px
  }

  .brand>span {
    font-size:24px
  }

  .brand img {
    width:34px;
    height:34px;
    border-radius:10px
  }

  .header-link {
    display:none
  }

  .nav {
    gap:21px;
    font-size:12px
  }

  .hero {
    grid-template-columns:1fr;
    padding-top:9px;
    gap:28px;
    padding-bottom:38px
  }

  .hero-copy {
    padding:13px 0 0
  }

  .hero .eyebrow {
    font-size:8px;
    letter-spacing:1px
  }

  .hero h1 {
    font-size:clamp(53px,8.8vw,74px);
    letter-spacing:-3.2px;
    margin:25px 0 22px
  }

  .hero-description {
    max-width:430px;
    margin-top:29px;
    font-size:15px
  }

  .hero-actions {
    margin-top:24px
  }

  .hero-foot {
    display:none
  }

  .hero-visual {
    min-height:0;
    height:474px;
    max-width:600px;
    width:100%;
    margin-inline:auto;
    border-radius:24px
  }

  .hero-phone {
    width:188px;
    right:22%;
    top:39px
  }

  .hero-lemon {
    width:350px;
    left:0;
    top:5px
  }

  .hero-orbit {
    left:16%;
    top:10px
  }

  .play-shape {
    left:12%;
    bottom:130px
  }

  .product-sticker {
    bottom:30px;
    left:24px
  }

  .visual-bottom {
    font-size:6px
  }

  .ticker {
    padding-block:18px
  }

  .ticker-track {
    gap:27px
  }

  .ticker span {
    font-size:11px
  }

  .ticker i {
    font-size:20px
  }

  .section {
    margin-top:65px
  }

  .section-heading {
    display:block;
    margin-bottom:25px
  }

  .section-heading h2 {
    font-size:39px;
    letter-spacing:-1.9px
  }

  .section-heading>p {
    margin-top:15px;
    font-size:12px
  }

  .section-heading>p br {
    display:none
  }

  .featured {
    grid-template-columns:1fr;
    min-height:0;
    border-radius:24px
  }

  .featured-info {
    padding:33px
  }

  .featured-info h3 {
    font-size:50px
  }

  .featured-tagline {
    font-size:28px
  }

  .featured-description {
    max-width:390px
  }

  .featured-visual {
    min-height:566px;
    padding-top:26px
  }

  .feature-watermark {
    top:66px;
    left:75px
  }

  .featured-visual:before {
    left:30%;
    top:40px
  }

  .product-phone {
    width:209px
  }

  .next-heading {
    margin-top:36px;
    align-items:start;
    gap:14px;
    flex-direction:column
  }

  .next-heading h3 {
    font-size:23px
  }

  .upcoming-grid {
    gap:13px
  }

  .category-art {
    height:160px
  }

  .health-disc {
    width:88px;
    height:88px;
    border-radius:26px
  }

  .health-disc svg {
    width:65px
  }

  .small-dot {
    right:25px;
    top:24px;
    width:18px;
    height:18px
  }

  .game-piece {
    width:49px;
    height:49px;
    border-radius:12px;
    box-shadow:3px 5px 0 #9f7fc1
  }

  .game-piece.one {
    top:61px;
    left:calc(50% - 53px)
  }

  .game-piece.two {
    top:68px;
    left:calc(50% - 4px)
  }

  .game-piece.three {
    top:25px;
    left:calc(50% - 15px)
  }

  .game-spark {
    right:15px;
    bottom:20px;
    font-size:31px
  }

  .work-sheet {
    top:28px;
    width:73px;
    height:92px;
    border-radius:10px
  }

  .work-sheet.back {
    left:calc(50% - 49px)
  }

  .work-sheet.front {
    left:calc(50% - 24px);
    padding:22px 12px;
    gap:7px
  }

  .work-check {
    right:calc(50% - 63px);
    bottom:25px;
    width:29px;
    height:29px;
    font-size:16px
  }

  .upcoming-copy {
    padding:18px 15px
  }

  .upcoming h4 {
    font-size:16px;
    line-height:1.25;
    letter-spacing:-.5px
  }

  .card-number {
    font-size:6px
  }

  .upcoming p {
    font-size:10px
  }

  .upcoming p br {
    display:none
  }

  .studio {
    padding:28px;
    border-radius:24px
  }

  .studio-body {
    grid-template-columns:1fr;
    gap:25px;
    margin-top:24px;
    margin-bottom:28px
  }

  .studio h2 {
    font-size:46px;
    letter-spacing:-2px
  }

  .studio-description p {
    max-width:510px;
    font-size:13px
  }

  .studio-values {
    flex-wrap:wrap;
    gap:13px;
    font-size:9px;
    justify-content:flex-start
  }

  .closing {
    padding-block:65px
  }

  .closing>a {
    font-size:38px
  }

  .footer-legal {
    font-size:8px
  }

  .footer-tagline {
    display:none
  }

  .footer-wordmark {
    font-size:15vw
  }

  .copyright {
    max-width:150px
  }

}

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

  .header {
    gap:10px
  }

  .brand {
    gap:8px
  }

  .brand>span {
    font-size:22px
  }

  .brand img {
    width:31px;
    height:31px
  }

  .nav {
    gap:15px;
    font-size:11px
  }

  .hero h1 {
    font-size:clamp(45px,12vw,58px);
    line-height:1.04;
    letter-spacing:-2.8px
  }

  .hero-description {
    font-size:13px;
    line-height:1.65;
    max-width:320px
  }

  .hero .eyebrow {
    font-size:7px;
    letter-spacing:.8px
  }

  .hero-actions {
    gap:18px
  }

  .button {
    min-height:49px;
    font-size:12px;
    padding-inline:19px;
    gap:23px
  }

  .platform-note {
    font-size:8px
  }

  .hero-visual {
    height:414px;
    border-radius:22px
  }

  .hero-phone {
    width:164px;
    right:35px;
    top:36px;
    border-width:5px;
    border-radius:27px
  }

  .hero-lemon {
    width:290px;
    left:-70px;
    top:9px
  }

  .hero-orbit {
    width:350px;
    height:350px;
    left:35px;
    top:35px
  }

  .visual-top {
    font-size:6px;
    left:20px;
    top:19px
  }

  .visual-plus {
    right:18px;
    top:13px;
    font-size:22px
  }

  .play-shape {
    left:35px;
    bottom:114px;
    width:47px;
    height:47px;
    border-radius:16px
  }

  .play-shape svg {
    width:28px
  }

  .product-sticker {
    left:17px;
    bottom:26px;
    padding:10px;
    gap:8px;
    border-radius:14px
  }

  .product-sticker img {
    width:34px;
    height:34px;
    border-radius:9px
  }

  .product-sticker small {
    font-size:6px
  }

  .product-sticker b {
    font-size:12px
  }

  .sticker-arrow {
    font-size:19px;
    margin-left:7px
  }

  .visual-bottom {
    font-size:5px;
    bottom:12px;
    right:14px;
    letter-spacing:.4px
  }

  .section-heading h2 {
    font-size:32px;
    letter-spacing:-1.45px
  }

  .eyebrow {
    font-size:8px
  }

  .featured-info {
    padding:28px
  }

  .app-identity img {
    width:56px;
    height:56px;
    border-radius:16px
  }

  .app-identity>span {
    font-size:7px
  }

  .product-kicker {
    margin-top:25px;
    font-size:7px
  }

  .featured-info h3 {
    font-size:clamp(36px,11.5vw,45px);
    letter-spacing:-2.2px
  }

  .featured-tagline {
    font-size:25px
  }

  .featured-description {
    font-size:12px
  }

  .app-tags>span {
    font-size:8px
  }

  .featured-visual {
    min-height:517px;
    padding-bottom:76px
  }

  .product-phone {
    width:190px;
    border-radius:31px;
    border-width:6px
  }

  .feature-watermark {
    left:8px;
    top:65px;
    font-size:95px
  }

  .screen-switcher {
    bottom:35px
  }

  .screen-button {
    font-size:9px;
    padding:10px 15px
  }

  .feature-caption {
    font-size:5px;
    bottom:15px
  }

  .next-heading h3 {
    font-size:21px;
    letter-spacing:-.7px
  }

  .upcoming-grid {
    grid-template-columns:1fr;
    gap:14px
  }

  .upcoming {
    display:grid;
    grid-template-columns:118px 1fr;
    border-radius:18px;
    min-height:155px
  }

  .category-art {
    height:100%;
    min-height:155px
  }

  .upcoming-copy {
    align-self:center;
    padding:20px
  }

  .upcoming h4 {
    font-size:18px
  }

  .upcoming p {
    font-size:11px
  }

  .card-number {
    font-size:7px
  }

  .health-disc {
    width:72px;
    height:72px;
    border-radius:23px;
    box-shadow:3px 5px 0 #b89042,6px 12px 13px #b9914122
  }

  .health-disc svg {
    width:57px
  }

  .small-dot {
    width:14px;
    height:14px;
    right:12px;
    top:22px
  }

  .game-piece {
    width:39px;
    height:39px;
    border-radius:9px
  }

  .game-piece.one {
    top:64px;
    left:14px
  }

  .game-piece.two {
    top:71px;
    left:52px
  }

  .game-piece.three {
    top:35px;
    left:46px
  }

  .game-spark {
    font-size:26px;
    right:12px;
    bottom:19px
  }

  .work-sheet {
    width:54px;
    height:75px;
    top:39px;
    border-radius:8px
  }

  .work-sheet.back {
    left:20px
  }

  .work-sheet.front {
    left:41px;
    padding:18px 10px;
    gap:7px
  }

  .work-sheet i {
    height:3px
  }

  .work-check {
    width:25px;
    height:25px;
    right:15px;
    bottom:28px;
    font-size:15px
  }

  .development-note {
    font-size:10px;
    line-height:1.6
  }

  .studio {
    padding:25px
  }

  .studio-star {
    font-size:33px
  }

  .studio h2 {
    font-size:36px;
    letter-spacing:-1.7px
  }

  .studio-description p {
    font-size:12px
  }

  .studio-values {
    font-size:8px
  }

  .studio-values span:before {
    margin-right:6px
  }

  .closing>p {
    font-size:10px
  }

  .closing>a {
    font-size:31px;
    gap:15px;
    letter-spacing:-1px
  }

  .closing>a>span {
    font-size:29px
  }

  .footer-top {
    padding-bottom:23px
  }

  .footer-legal {
    display:block;
    font-size:8px;
    padding-block:22px 30px
  }

  .copyright {
    text-align:left;
    max-width:none;
    margin-top:17px
  }

  .footer-wordmark {
    padding-top:7px;
    font-size:15.5vw;
    letter-spacing:-.08em
  }

  .back-top {
    font-size:10px
  }

  .word-tap svg {
    bottom:-10px;
    height:17px
  }

}

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

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

}

/* Final readability adjustments. */
.featured-description {
  font-size:15px
}

.upcoming p {
  font-size:14px
}

.card-number {
  font-size:9px
}

.development-note {
  font-size:12px
}

.studio-description p {
  font-size:15px
}

.footer-legal {
  font-size:12px
}

.copyright {
  font-size:11px
}

.feature-caption {
  font-size:8px
}

.product-domain {
  font-size:12px
}

.product-kicker {
  font-size:9px
}

.app-tags>span {
  font-size:10px
}

.footer-tagline {
  font-size:10px
}

@media(max-width:800px) {
  .featured-description,.studio-description p {
    font-size:14px
  }

  .upcoming p {
    font-size:12px
  }

  .footer-legal {
    font-size:11px
  }

  .copyright {
    max-width:none
  }

}

@media(max-width:480px) {
  .featured-description,.studio-description p {
    font-size:13px
  }

  .upcoming p {
    font-size:12px
  }

  .card-number {
    font-size:8px
  }

  .footer-legal {
    font-size:11px;
    line-height:1.7
  }

  .copyright {
    font-size:10px
  }

  .product-kicker {
    font-size:8px
  }

  .feature-caption {
    font-size:7px
  }

  .development-note {
    font-size:11px
  }

}

/* Accessible supporting text and finite decorative motion. */
.hero-description,.platform-note,.hero-foot,.section-heading>p,.app-identity>span,.product-kicker,.featured-description,.product-domain,.in-development,.card-number,.upcoming p,.development-note,.closing>p,.footer-tagline,.back-top,.footer-legal {
  color:#626958
}

.feature-caption {
  color:#4d5939
}

.footer-legal {
  color:#656c59
}

.app-tags>span {
  color:#596448
}

.screen-button {
  color:#53613d
}

.hero-lemon {
  animation:lemon-float 4s ease-in-out 1
}

.ticker-track {
  animation:none
}

.ticker {
  mask-image:linear-gradient(90deg,transparent,#000 4% 96%,transparent)
}