/* Zeny marketing landing page.
   Native CSS; existing Zeny typography and logo. Pills for controls, 28px for imagery.
   Layers: content 0, navigation 10, skip link 20. */
@font-face {
  font-family: Jost;
  src: url("assets/fonts/Jost-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Jost;
  src: url("assets/fonts/Jost-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("assets/fonts/Manrope-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: light;
  --page: #f7f0fc;
  --page-rgb: 247, 240, 252;
  /* Same sampled gradient and falloff as app/src/design-system/home-tab-app-bar.tsx. */
  --app-glow: linear-gradient(
    90deg,
    rgb(245, 235, 252) 0%,
    rgb(245, 234, 253) 7.692%,
    rgb(244, 231, 252) 15.385%,
    rgb(243, 228, 251) 23.077%,
    rgb(243, 226, 251) 30.769%,
    rgb(243, 224, 250) 38.462%,
    rgb(244, 224, 250) 46.154%,
    rgb(244, 223, 249) 53.846%,
    rgb(245, 224, 248) 61.538%,
    rgb(246, 225, 248) 69.231%,
    rgb(246, 228, 249) 76.923%,
    rgb(247, 230, 250) 84.615%,
    rgb(246, 232, 250) 92.308%,
    rgb(247, 235, 251) 100%
  );
  --ink: #252129;
  --muted: #69616c;
  --line: #e3dce3;
  --accent: #a33266;
  --accent-soft: #f1e3ec;
  --panel: #f2edf2;
  --button: #2b242e;
  --button-text: #fcf9fc;
  --surface: #fffafd;
  --radius: 28px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Clip only the pale artwork canvas; keep all three original portraits intact. */
  --portrait-stranger: polygon(
    4% 10.1%,
    32.9% 6.8%,
    34.2% 7.1%,
    35% 8.5%,
    36.3% 91.8%,
    8.1% 95.4%,
    6.7% 94.9%,
    5.9% 93.2%,
    2.2% 13.1%,
    2.4% 11.6%
  );
  --portrait-friend: polygon(
    38.1% 2.3%,
    66.2% 2.3%,
    67.4% 2.8%,
    67.8% 4.1%,
    67.8% 95%,
    67.3% 96.1%,
    66.5% 96.7%,
    38.5% 96.7%,
    37.4% 95.9%,
    36.7% 94.4%,
    36.7% 4.6%,
    37.1% 3.1%
  );
  --portrait-prince: polygon(
    69.4% 8.5%,
    97% 12.2%,
    98.3% 13%,
    98.4% 15%,
    93% 92.8%,
    92% 94.5%,
    91.1% 95%,
    68.1% 91.3%,
    68.1% 13%,
    68.7% 9.6%
  );
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d14;
  --page-rgb: 13, 13, 20;
  --app-glow: linear-gradient(
    90deg,
    rgb(47, 35, 60) 0%,
    rgb(56, 38, 69) 7.692%,
    rgb(61, 37, 72) 15.385%,
    rgb(64, 35, 72) 23.077%,
    rgb(65, 30, 69) 30.769%,
    rgb(64, 24, 64) 38.462%,
    rgb(62, 19, 59) 46.154%,
    rgb(59, 14, 53) 53.846%,
    rgb(55, 12, 48) 61.538%,
    rgb(51, 10, 45) 69.231%,
    rgb(45, 10, 41) 76.923%,
    rgb(39, 10, 38) 84.615%,
    rgb(33, 11, 34) 92.308%,
    rgb(26, 12, 30) 100%
  );
  --ink: #f4edf4;
  --muted: #b9afbd;
  --line: #39323c;
  --accent: #eea0c4;
  --accent-soft: #362532;
  --panel: #28222d;
  --button: #eedde7;
  --button-text: #28212b;
  --surface: #211d25;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 30px;
}
body {
  margin: 0;
  background: var(--page);
  isolation: isolate;
  color: var(--ink);
  font-family: Manrope, system-ui, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 33.175svh;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(var(--page-rgb), 0.1505) 0%,
      rgba(var(--page-rgb), 0.0487) 7.143%,
      rgba(var(--page-rgb), 0.0029) 14.286%,
      rgba(var(--page-rgb), 0.0069) 21.429%,
      rgba(var(--page-rgb), 0.0649) 28.571%,
      rgba(var(--page-rgb), 0.1761) 35.714%,
      rgba(var(--page-rgb), 0.3115) 42.857%,
      rgba(var(--page-rgb), 0.4392) 50%,
      rgba(var(--page-rgb), 0.5648) 57.143%,
      rgba(var(--page-rgb), 0.6782) 64.286%,
      rgba(var(--page-rgb), 0.7856) 71.429%,
      rgba(var(--page-rgb), 0.8677) 78.571%,
      rgba(var(--page-rgb), 0.9286) 85.714%,
      rgba(var(--page-rgb), 0.9702) 92.857%,
      rgba(var(--page-rgb), 1) 100%
    ),
    var(--app-glow);
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
img {
  display: block;
  max-width: 100%;
}
figure,
p,
h1,
h2,
h3 {
  margin: 0;
}
button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
}
a,
button,
summary {
  touch-action: manipulation;
}
button {
  border: 0;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 6px;
}
.wrap {
  width: min(1280px, calc(100% - 104px));
  margin-inline: auto;
}
.header {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: Jost, sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -1.2px;
}
.brand img {
  width: 39px;
  height: 34px;
  object-fit: contain;
}
.navigation {
  display: flex;
  gap: 32px;
  font-size: 13px;
  color: var(--muted);
}
.navigation a {
  padding-block: 12px;
}
.navigation a:hover,
.footer-links a:hover {
  color: var(--accent);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 31px;
  padding: 19px 27px;
  background: var(--button);
  color: var(--button-text);
  border-radius: 100px;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  transition:
    transform 0.25s var(--ease),
    background 0.25s var(--ease);
}
.button > span {
  font-size: 23px;
  line-height: 16px;
}
.button-small {
  padding: 15px 22px;
  font-size: 13px;
  gap: 22px;
}
.button:hover {
  transform: translateY(-3px);
  background: var(--accent);
}
.button:active {
  transform: translateY(0) scale(0.98);
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: 13px;
  min-height: 44px;
}
.text-link span {
  font-size: 22px;
  transition: transform 0.25s var(--ease);
}
.text-link:hover span {
  transform: translate(3px, -3px);
}
.menu-button {
  display: none;
}
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 20;
  padding: 12px 20px;
  background: var(--button);
  color: var(--button-text);
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
}
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 46% 54%;
  align-items: center;
  min-height: 610px;
  padding-block: 38px 72px;
}
.hero-copy {
  position: relative;
  z-index: 1;
}
.eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2.1px;
  color: var(--accent);
  margin-bottom: 27px;
  font-weight: 700;
}
h1,
h2,
h3 {
  font-family: Jost, system-ui, sans-serif;
  font-weight: 400;
}
h1 {
  font-size: clamp(65px, 6.3vw, 92px);
  font-weight: 700;
  letter-spacing: -5px;
  line-height: 1.01;
}
h1 span {
  color: var(--accent);
}
.hero-description {
  font-size: 15px;
  line-height: 1.9;
  color: var(--muted);
  margin-top: 27px;
  max-width: 390px;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 32px;
}
.hero-art {
  width: 100%;
  margin-left: 0;
  align-self: center;
  display: grid;
}
.hero-art img {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  transform: rotate(-2deg);
}
.portrait-stranger {
  clip-path: var(--portrait-stranger);
}
.portrait-friend {
  clip-path: var(--portrait-friend);
}
.portrait-prince {
  clip-path: var(--portrait-prince);
}
.intro-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 23px;
  font-size: 13px;
}
.intro-line p {
  color: var(--ink);
}
.intro-line > span {
  color: var(--muted);
}
.section-heading {
  padding-top: 90px;
}
h2 {
  font-size: clamp(40px, 4.4vw, 60px);
  line-height: 1.1;
  letter-spacing: -2.3px;
}
.section-heading p {
  margin-top: 23px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
}
.mood-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 42px;
  border-bottom: 1px solid var(--line);
}
.mood-tabs button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 19px 24px 19px 0;
  margin-bottom: -1px;
  background: transparent;
  text-align: left;
  border-bottom: 2px solid transparent;
  font-family: Jost, sans-serif;
  font-size: 19px;
  color: var(--muted);
  transition: color 0.25s;
}
.mood-tabs button + button {
  padding-left: 24px;
}
.mood-tabs button > span {
  font-size: 22px;
}
.mood-tabs button[aria-selected="true"] {
  color: var(--accent);
  border-color: var(--accent);
}
.mood-tabs button:hover {
  color: var(--ink);
}
.mood-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 470px;
  margin-top: 30px;
  background: var(--panel);
  border-radius: var(--radius);
  overflow: hidden;
}
.mood-image {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  background: var(--panel);
}
.mood-image img {
  position: absolute;
  max-width: none;
  width: 300%;
  height: auto;
  left: -4%;
  top: -15%;
  clip-path: var(--portrait-stranger);
}
.mood-panel[data-mood="friendship"] .mood-image img {
  left: -104%;
  top: -15%;
  clip-path: var(--portrait-friend);
}
.mood-panel[data-mood="fantasy"] .mood-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  left: 0;
  top: 0;
  clip-path: none;
}
.mood-copy {
  padding: 61px 65px 42px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.mood-caption {
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 21px;
}
.mood-copy h3 {
  font-size: 43px;
  line-height: 1.1;
  letter-spacing: -1.5px;
}
.mood-copy > p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
  max-width: 315px;
  margin-top: 22px;
}
.mood-copy .text-link {
  margin-top: 18px;
  border-bottom: 1px solid var(--line);
}
.mood-note {
  font-size: 10px;
  color: var(--muted);
  margin-top: auto;
  padding-top: 27px;
}
.how {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  padding-block: 125px 115px;
}
.how h2 {
  font-size: 49px;
}
.how h2 span {
  color: var(--accent);
}
.how-intro > p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
  margin-top: 23px;
}
.how-mark {
  width: 69px;
  height: auto;
  margin-top: 34px;
}
.steps {
  padding-top: 6px;
}
.steps details {
  border-bottom: 1px solid var(--line);
  padding: 25px 0;
}
.steps details:first-child {
  padding-top: 0;
}
.steps summary {
  display: flex;
  align-items: center;
  gap: 23px;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-family: Jost, sans-serif;
  font-size: 23px;
  line-height: 1.3;
}
.steps summary::-webkit-details-marker {
  display: none;
}
.step-number {
  font-family: Manrope, sans-serif;
  font-size: 11px;
  color: var(--accent);
}
.disclosure {
  margin-left: auto;
  flex: none;
  width: 12px;
  height: 12px;
  position: relative;
}
.disclosure:before,
.disclosure:after {
  position: absolute;
  content: "";
  background: var(--muted);
  left: 0;
  top: 5px;
  width: 12px;
  height: 1px;
}
.disclosure:after {
  transform: rotate(90deg);
}
details[open] .disclosure:after {
  transform: rotate(0);
}
.steps details p {
  padding: 12px 25px 0 39px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--muted);
  max-width: 440px;
}
.world {
  display: grid;
  grid-template-columns: 43% 57%;
  align-items: center;
  min-height: 465px;
  gap: 0;
  padding: 48px 60px;
  background: var(--accent-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.world h2 {
  font-size: 46px;
  letter-spacing: -1.7px;
}
.world-heading > p {
  font-size: 13px;
  line-height: 1.9;
  color: var(--muted);
  margin-top: 23px;
}
.world-composition {
  height: 365px;
  position: relative;
}
.landscape {
  width: 90%;
  height: 295px;
  position: absolute;
  top: 38px;
  right: 0;
  border-radius: 18px;
  overflow: hidden;
  transform: rotate(4deg);
}
.landscape img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: saturate(0.7);
}
.prince {
  position: absolute;
  height: 360px;
  width: auto;
  left: 25%;
  bottom: 0;
  transform: rotate(-8deg);
  filter: drop-shadow(0 16px 20px #35223b30);
}
.download {
  text-align: center;
  padding-block: 117px 105px;
}
.download-mark {
  width: 65px;
  height: auto;
  margin: 0 auto 26px;
}
.download h2 {
  font-size: 76px;
  line-height: 1.04;
  letter-spacing: -3.3px;
  font-weight: 700;
}
.download h2 span {
  color: var(--accent);
}
.download > p {
  margin-top: 22px;
  font-size: 14px;
  color: var(--muted);
}
.store-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 11px;
  margin-top: 26px;
}
.store-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  transition: transform 0.25s var(--ease);
}
.store-links a:hover {
  transform: translateY(-3px);
}
.store-links img {
  width: 150px;
  height: auto;
}
.store-links .google-badge {
  width: 167px;
}
.download > p.download-note {
  font-size: 11px;
  margin-top: 20px;
}
.footer {
  border-top: 1px solid var(--line);
  padding-block: 35px 24px;
}
.footer-top {
  display: flex;
  align-items: center;
  gap: 28px;
}
.footer-top > p {
  font-size: 12px;
  color: var(--muted);
}
.theme-toggle {
  margin-left: auto;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 100px;
  font-size: 11px;
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 44px;
}
.theme-toggle span {
  font-size: 18px;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 30px;
  font-size: 10px;
  color: var(--muted);
}
.footer-links {
  display: flex;
  gap: 24px;
}
.footer-links a {
  padding-block: 14px;
}
.concept-note {
  font-size: 9px;
  line-height: 1.8;
  color: var(--muted);
  margin-top: 18px;
  max-width: 850px;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy {
    animation: enter 0.8s var(--ease) both;
  }
  .hero-art {
    animation: enter 1s 0.12s var(--ease) both;
  }
  .js-reveals .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity 0.7s var(--ease),
      transform 0.7s var(--ease);
  }
  .js-reveals .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  @keyframes enter {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
@media (min-width: 1600px) {
  .hero {
    min-height: 690px;
  }
  .hero-art {
    width: calc(100% + 94px);
  }
}
@media (max-width: 1100px) {
  .wrap {
    width: calc(100% - 64px);
  }
  .header {
    height: 90px;
  }
  .navigation {
    gap: 22px;
  }
  .hero {
    min-height: 550px;
    grid-template-columns: 47% 53%;
    padding-block: 35px 60px;
  }
  h1 {
    font-size: 72px;
    letter-spacing: -3.8px;
  }
  .hero-art {
    width: 100%;
  }
  .eyebrow {
    font-size: 9px;
    letter-spacing: 1.4px;
  }
  .hero-actions {
    gap: 17px;
    flex-wrap: wrap;
  }
  .hero-description {
    font-size: 13px;
  }
  .mood-copy {
    padding: 43px 35px;
  }
  .mood-copy h3 {
    font-size: 37px;
  }
  .mood-image,
  .mood-panel {
    min-height: 440px;
  }
  .mood-image img {
    width: 330%;
  }
  .mood-panel[data-mood="friendship"] .mood-image img {
    left: -115%;
  }
  .how {
    gap: 35px;
    padding-block: 100px;
  }
  .how h2 {
    font-size: 42px;
  }
  .steps summary {
    font-size: 20px;
  }
  .world {
    padding: 35px;
    min-height: 425px;
  }
  .world h2 {
    font-size: 39px;
  }
  .world-composition {
    height: 340px;
  }
  .prince {
    height: 330px;
  }
  .landscape {
    height: 270px;
  }
  .download h2 {
    font-size: 68px;
  }
}
@media (min-width: 768px) and (max-width: 1000px) {
  h1 {
    font-size: 54px;
    letter-spacing: -2.7px;
  }
}
@media (max-width: 767px) {
  html {
    scroll-padding-top: 20px;
  }
  .wrap {
    width: calc(100% - 40px);
  }
  .header {
    height: 83px;
    gap: 20px;
    position: relative;
    z-index: 10;
  }
  .brand {
    font-size: 29px;
    gap: 6px;
  }
  .brand img {
    width: 34px;
    height: 29px;
  }
  .button-small {
    padding: 13px 17px;
    font-size: 12px;
    gap: 17px;
  }
  .header-actions {
    gap: 10px;
  }
  .menu-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 44px;
    background: none;
    padding: 10px;
  }
  .menu-button span {
    height: 1px;
    width: 20px;
    background: var(--ink);
    transition: transform 0.2s;
  }
  .menu-button[aria-expanded="true"] span:first-child {
    transform: translateY(3px) rotate(45deg);
  }
  .menu-button[aria-expanded="true"] span:last-child {
    transform: translateY(-3px) rotate(-45deg);
  }
  .navigation {
    display: none;
    position: absolute;
    top: 75px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 14px 22px;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 20px;
    box-shadow: 0 15px 35px #32253812;
  }
  .navigation.is-open {
    display: flex;
  }
  .navigation a {
    padding: 14px 0;
  }
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 27px 0 34px;
  }
  .eyebrow {
    font-size: 9px;
    letter-spacing: 1.65px;
    margin-bottom: 22px;
  }
  h1 {
    font-size: clamp(57px, 12.9vw, 88px);
    letter-spacing: -3px;
    line-height: 1.02;
  }
  .hero-description {
    font-size: 13px;
    line-height: 1.85;
    max-width: 355px;
    margin-top: 23px;
  }
  .hero-actions {
    margin-top: 25px;
    gap: 19px;
    flex-wrap: nowrap;
  }
  .hero-actions .button {
    padding: 17px 23px;
    gap: 24px;
    font-size: 13px;
  }
  .hero-actions .text-link {
    font-size: 11px;
    gap: 7px;
  }
  .hero-actions .text-link span {
    font-size: 19px;
  }
  .hero-art {
    width: calc(100% + 22px);
    margin: 36px -11px 0;
  }
  .hero-art img {
    transform: rotate(-1deg);
  }
  .intro-line {
    padding-block: 19px;
    font-size: 11px;
    gap: 16px;
  }
  .intro-line > span {
    display: none;
  }
  .section-heading {
    padding-top: 60px;
  }
  h2 {
    font-size: 43px;
    letter-spacing: -1.8px;
  }
  .section-heading p {
    font-size: 12px;
    margin-top: 20px;
    line-height: 1.9;
  }
  .mood-tabs {
    margin-top: 28px;
    gap: 0;
  }
  .mood-tabs button,
  .mood-tabs button + button {
    padding: 14px 7px 14px 0;
    font-size: 13px;
    line-height: 1.4;
    gap: 5px;
  }
  .mood-tabs button + button {
    padding-left: 10px;
  }
  .mood-tabs button > span {
    display: none;
  }
  .mood-panel {
    grid-template-columns: 1fr;
    min-height: 0;
    margin-top: 23px;
    border-radius: 23px;
  }
  .mood-image {
    min-height: 320px;
  }
  .mood-image img {
    width: 300%;
    top: -27%;
    left: -3%;
  }
  .mood-panel[data-mood="friendship"] .mood-image img {
    left: -104%;
    top: -24%;
  }
  .mood-panel[data-mood="fantasy"] .mood-image img {
    top: 0;
  }
  .mood-copy {
    padding: 31px 27px 29px;
  }
  .mood-caption {
    font-size: 10px;
    margin-bottom: 17px;
  }
  .mood-copy h3 {
    font-size: 36px;
    letter-spacing: -1.3px;
  }
  .mood-copy > p {
    font-size: 12px;
    margin-top: 19px;
    line-height: 1.9;
  }
  .mood-copy .text-link {
    margin-top: 15px;
    font-size: 12px;
  }
  .mood-note {
    font-size: 9px;
    padding-top: 25px;
  }
  .how {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-block: 75px;
  }
  .how h2 {
    font-size: 40px;
  }
  .how-intro > p {
    font-size: 12px;
    margin-top: 19px;
  }
  .how-mark {
    display: none;
  }
  .steps summary {
    font-size: 19px;
    gap: 17px;
  }
  .steps details {
    padding: 20px 0;
  }
  .steps details p {
    padding-left: 31px;
    font-size: 12px;
  }
  .world {
    grid-template-columns: 1fr;
    padding: 33px 27px 13px;
    border-radius: 23px;
    min-height: 0;
    gap: 17px;
  }
  .world h2 {
    font-size: 38px;
  }
  .world-heading > p {
    font-size: 11px;
    margin-top: 19px;
  }
  .world-composition {
    height: 315px;
  }
  .landscape {
    height: 220px;
    top: 47px;
    width: 95%;
    right: 0;
  }
  .prince {
    height: 300px;
    left: 27%;
    bottom: 0;
  }
  .download {
    padding-block: 80px 68px;
  }
  .download-mark {
    width: 55px;
    margin-bottom: 25px;
  }
  .download h2 {
    font-size: 52px;
    letter-spacing: -2.2px;
  }
  .download > p {
    font-size: 12px;
    margin-top: 20px;
  }
  .store-links {
    gap: 8px;
    margin-top: 23px;
  }
  .store-links img {
    width: 133px;
  }
  .store-links .google-badge {
    width: 149px;
  }
  .download > p.download-note {
    font-size: 10px;
    margin-top: 14px;
  }
  .footer {
    padding-top: 25px;
  }
  .footer-top {
    gap: 10px;
    flex-wrap: wrap;
  }
  .footer-top > p {
    display: none;
  }
  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    margin-top: 20px;
    font-size: 10px;
  }
  .footer-bottom > span {
    display: none;
  }
  .footer-links {
    gap: 24px;
  }
  .footer-links a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }
  .concept-note {
    font-size: 8px;
    margin-top: 10px;
  }
}
@media (max-width: 360px) {
  h1 {
    font-size: 49px;
    letter-spacing: -2.6px;
  }
  .wrap {
    width: calc(100% - 32px);
  }
  .hero-actions {
    gap: 13px;
  }
  .hero-actions .button {
    padding-inline: 20px;
    gap: 18px;
  }
  .hero-actions .text-link {
    font-size: 10px;
    gap: 4px;
  }
  .eyebrow {
    font-size: 8px;
  }
  .mood-tabs button,
  .mood-tabs button + button {
    font-size: 12px;
  }
  .download h2 {
    font-size: 46px;
  }
  .world {
    padding-inline: 22px;
  }
  .world h2 {
    font-size: 35px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}