@font-face {
  font-family: "Secular One";
  src: url("/assets/SecularOne-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Varela Round";
  src: url("/assets/VarelaRound-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --paper: #fffaff;
  --ink: #3e2259;
  --purple: #793dd6;
  --muted: #645271;
  --lavender: #f3e6ff;
  --line: #e8d8f6;
  --gold: #f6d24a;
  --green: #1ed760;
  --heading: "Secular One", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Varela Round", Arial, sans-serif;
  line-height: 1.6;
}
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--purple); outline-offset: 5px; }
p, h1, h2, h3 { margin: 0; }
.wrap { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.header, .footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 20px;
}
.brand, nav { display: flex; align-items: center; gap: 16px; }
.brand { gap: 10px; font: 1.3rem var(--heading); text-decoration: none; }
.brand img { border-radius: 12px; }
.header a, .footer a { text-decoration: none; }
nav a:hover, .back-to-stores:hover { text-decoration: underline; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(24px, 5vw, 70px);
  padding-block: 26px 48px;
}
.eyebrow {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--lavender);
  color: #5c279e;
  font-size: .92rem;
}
h1, h2, h3 { font-family: var(--heading); font-weight: 400; line-height: 1.06; }
h1 { margin-block: 15px; font-size: clamp(3.2rem, 6.3vw, 5.5rem); }
h1 em { display: block; color: var(--purple); font-style: normal; }
.lead { max-width: 34ch; color: var(--muted); font-size: clamp(1rem, 2vw, 1.22rem); }
.download-label { margin-block: 23px 8px; font: 1rem var(--heading); }
.stores { display: flex; flex-wrap: wrap; gap: 10px; }
.store {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid transparent;
  border-radius: 15px;
  text-decoration: none;
  line-height: 1.2;
}
.apple { background: var(--purple); color: white; }
.play { background: #281436; color: white; }
.apple:hover { background: #6028b4; }
.play:hover { background: #47235e; }
.store svg { width: 27px; height: 27px; flex: none; }
.store small, .store b { display: block; }
.store small { margin-bottom: 3px; font-size: .76rem; }
.store b { font: bold 1.1rem Arial, sans-serif; }

.showcase {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 460px;
  padding: 48px 6% 56px;
  isolation: isolate;
  border: 1px solid var(--line);
  border-radius: 38px;
  background:
    radial-gradient(circle at 12% 22%, #fff5c9, transparent 32%),
    linear-gradient(145deg, #f8edff, #e2cbff);
}
.phone {
  width: min(46%, 196px);
  flex: none;
  overflow: hidden;
  border: clamp(3px, .55vw, 6px) solid #342043;
  border-radius: 26px;
  background: #121212;
  color: white;
  box-shadow: 0 18px 34px #38205239;
}
.phone-journey { transform: rotate(6deg); }
.phone-puzzle { margin-left: 14px; transform: rotate(-6deg); }
.note { position: absolute; z-index: -1; line-height: 1; }
.note-top { inset: 6% auto auto 7%; font-size: 2.4rem; color: #6b35bc; transform: rotate(-15deg); }
.note-bottom { inset: auto 8% 8% auto; font-size: 2.2rem; color: #9061cf; }

.journey-art {
  position: relative;
  aspect-ratio: 3 / 3.4;
}
.journey-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.journey-copy {
  position: absolute;
  inset: auto 8% 10% 8%;
  text-align: center;
}
.journey-copy small { display: block; color: #d9b8ff; font-size: clamp(.55rem, 1.5vw, .72rem); letter-spacing: .04em; }
.journey-copy strong { display: block; margin-top: 2px; font: clamp(1.15rem, 3vw, 1.7rem) var(--heading); }
.journey-copy span { display: block; margin-top: 2px; color: #eee; font-size: clamp(.55rem, 1.4vw, .72rem); }
.journey-body { padding: 8% 8% 7%; }
.progress-row, .tabs {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #b3b3b3;
  font-size: clamp(.55rem, 1.45vw, .72rem);
}
.bar { height: 4px; margin: 7px 0 10px; border-radius: 99px; background: #2a2a2a; }
.bar i { display: block; width: 8%; height: 100%; border-radius: inherit; background: var(--green); }
.go {
  display: block;
  padding: 8px 6px;
  border-radius: 999px;
  background: var(--green);
  color: #111;
  font: clamp(.62rem, 1.6vw, .82rem) var(--heading);
  text-align: center;
}
.tabs { margin-top: 12px; }
.tabs b { color: var(--green); font-weight: 400; }

.puzzle-top, .question, .field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.puzzle-top, .question, .slots, .field { padding-inline: 8%; }
.puzzle-top { padding-top: 9%; color: #b3b3b3; font-size: .58rem; white-space: nowrap; }
.coins {
  padding: 2px 7px;
  border-radius: 999px;
  background: #1e1e1e;
  color: white;
  white-space: nowrap;
}
.puzzle-art {
  width: calc(100% - 16%);
  height: auto;
  aspect-ratio: 1.05;
  margin: 8% auto 0;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 14px;
  display: block;
}
.question { margin-top: 8%; font: .92rem var(--heading); }
.hint {
  padding: 3px 7px;
  border: 1px solid #3a3a3a;
  border-radius: 999px;
  color: #b3b3b3;
  font-size: clamp(.5rem, 1.3vw, .64rem);
  white-space: nowrap;
}
.slots { display: flex; gap: 3px; margin-top: 8%; }
.slots i {
  flex: 1;
  height: 18px;
  border-radius: 4px;
  background: #2a2a2a;
}
.slots i.gap { width: 6px; background: transparent; }
.field {
  margin: 8% 7% 8%;
  padding: 6px;
  border-top: 1px solid #3a3a3a;
}
.field span {
  flex: 1;
  color: #8d8d8d;
  font-size: clamp(.55rem, 1.45vw, .72rem);
}
.send {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: var(--green);
  color: #111;
  font: 1rem var(--heading);
  text-align: center;
  line-height: 26px;
}

.how { padding-block: 42px; border-block: 1px solid var(--line); background: #f9f0ff; }
h2 { font-size: clamp(2.1rem, 4vw, 3rem); }
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 18px 0;
}
.steps li { border: 1px solid var(--line); border-radius: 20px; padding: 19px; background: var(--paper); }
.steps span {
  display: inline-block;
  border-radius: 99px;
  padding: 2px 10px;
  margin-bottom: 10px;
  background: var(--gold);
  font: .88rem var(--heading);
}
.steps h3 { margin-bottom: 6px; font-size: 1.35rem; }
.steps p, .footer { color: var(--muted); }
.back-to-stores { color: #5c279e; font-weight: bold; text-underline-offset: 4px; }
.footer { font-size: .9rem; }

.page { max-width: 760px; padding: 28px 0 80px; }
.page h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.page .lead { max-width: 46ch; margin-bottom: 18px; }
.page h2 { margin-top: 36px; margin-bottom: 10px; font-size: 1.7rem; }
.page h3 { margin-top: 18px; margin-bottom: 6px; font-size: 1.2rem; }
.page p, .page li { color: var(--muted); }
.page p { margin-bottom: 14px; }
.page li { margin-bottom: 8px; }
.page a { color: #5c279e; }
.notice {
  margin: 8px 0 22px;
  padding: 16px 18px;
  border-inline-start: 4px solid var(--purple);
  border-radius: 12px;
  background: var(--lavender);
}

@media (max-width: 740px) {
  .wrap { width: min(520px, calc(100% - 32px)); }
  .hero { grid-template-columns: 1fr; padding-block: 18px 32px; }
  .lead { max-width: none; }
  .steps { grid-template-columns: 1fr; }
  .showcase { min-height: 0; padding: 36px 4% 42px; }
  .phone { width: min(47%, 168px); }
  .phone-puzzle { margin-left: 8px; }
}

@media (max-width: 380px) {
  .header { gap: 8px; }
  .header nav { gap: 9px; font-size: .82rem; }
  .brand { font-size: 1rem; }
  .brand img { width: 34px; height: 34px; }
  .stores { gap: 7px; }
  .store { padding-inline: 9px; }
  .store svg { width: 22px; height: 22px; }
  .store b { font-size: 1rem; }
}