/* Jigsaw: Piece by Piece — white site, candy accents (matches the app). */
:root {
  --sky-top: #5D66E8;
  --sky-bottom: #3A3DA6;
  --indigo-deep: #2C2E7E;
  --cream: #FFF4DF;
  --ink: #2A2350;
  --ink-soft: #5F5885;
  --line: #E7E6F2;
  --card: #F4F4FA;
  --green: #4CD640;
  --green-dark: #26962A;
  --blue: #2EC6F7;
  --blue-dark: #1677C9;
  --yellow: #FFCF3D;
  --yellow-dark: #E09A00;
  --pink: #FF5E8E;
  --pink-dark: #CC3466;
  --purple: #9B5CF6;
  --purple-dark: #6A35D0;
  --orange: #FF9F2E;
  --orange-dark: #D0700A;
  --display: "Fredoka", "Nunito", system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 32px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 600 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

.wrap {
  width: min(1180px, 100% - 32px);
  margin-inline: auto;
}

/* ---------- Header ---------- */
.site-header {
  padding: 18px 0;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand svg {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 3px 0 var(--yellow-dark));
}

.brand-name {
  font: 700 21px/1.05 var(--display);
  color: var(--ink);
}

.brand-name small {
  display: block;
  font: 700 11px var(--display);
  letter-spacing: 2.5px;
  color: var(--sky-top);
}

.nav {
  display: flex;
  gap: 22px;
  font: 600 16px var(--display);
}

.nav a {
  text-decoration: none;
  color: var(--ink-soft);
}

.nav a:hover {
  color: var(--sky-top);
}

@media (max-width: 640px) {
  .nav {
    display: none;
  }
}

/* ---------- Showcase card (hero) ---------- */
/* Fills the first screen (minus the header), so the next section starts
   below the fold. The big top padding leaves room for the illustration
   that pokes out above the card, so it never touches the menu. */
.showcase {
  min-height: calc(100vh - 80px);
  min-height: calc(100svh - 80px);
  display: flex;
  align-items: center;
  padding: 110px 0 40px;
}

.showcase>.wrap {
  width: min(1180px, 100% - 32px);
}

.showcase-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(16px, 4vw, 56px);
  background: var(--card);
  border-radius: var(--radius);
  padding: 0 clamp(24px, 5vw, 72px) 0 0;
  min-height: 420px;
}

/* The illustration sits on the card's bottom edge and pokes out of the top. */
.showcase-art {
  align-self: end;
  /* A square image is taller than the card, so its top (floating pieces,
     sparkles…) breaks out above the card, like a sticker. */
  margin-top: clamp(-150px, -11vw, -40px);
  position: relative;
}

.showcase-art img {
  width: 100%;
  height: auto;
  border-bottom-left-radius: var(--radius);
}

.showcase-text {
  padding: 48px 0;
}

.showcase-text h1,
.showcase-text h2 {
  margin: 0 0 14px;
  font: 700 clamp(34px, 4vw, 48px)/1.05 var(--display);
  color: var(--ink);
  text-wrap: balance;
}

.showcase-text p {
  margin: 0 0 26px;
  color: var(--ink-soft);
  font-size: clamp(17px, 1.6vw, 20px);
  max-width: 30em;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 34px;
  border-radius: 999px;
  background: var(--sky-top);
  color: #fff;
  font: 600 19px var(--display);
  text-decoration: none;
  box-shadow: 0 5px 0 var(--sky-bottom);
  transition: transform .12s ease, box-shadow .12s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 var(--sky-bottom);
}

.btn:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--sky-bottom);
}

/* Store buttons: styled like the official badges. Swap in the official
   badge images before launch (links in index.html). */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 14px;
  min-width: 172px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  transition: background .15s ease;
}

.store:hover {
  background: #f7f7fc;
}

.store svg {
  width: 28px;
  height: 28px;
  flex: none;
}

.store small {
  display: block;
  font: 700 11px/1.1 var(--body);
  letter-spacing: .3px;
}

.store strong {
  display: block;
  font: 600 22px/1.1 var(--display);
}

.play-web {
  display: inline-block;
  margin-top: 16px;
  font: 600 15px var(--display);
  color: var(--ink-soft);
}

.play-web:hover {
  color: var(--sky-top);
}

@media (max-width: 860px) {
  .showcase-card {
    grid-template-columns: 1fr;
    padding: 0 22px 8px;
    text-align: center;
  }

  .showcase-art {
    order: -1;
    margin: -56px auto 0;
    max-width: 560px;
  }

  .showcase-art img {
    border-radius: 0;
  }

  .showcase-text {
    padding: 8px 0 32px;
  }

  .showcase-text p {
    margin-inline: auto;
  }

  .stores {
    justify-content: center;
  }
}

/* ---------- Features ---------- */
.section {
  padding: 64px 0;
}

.section-title {
  margin: 0 0 8px;
  text-align: center;
  font: 700 clamp(30px, 3.6vw, 42px)/1.1 var(--display);
}

.section-sub {
  margin: 0 auto 36px;
  text-align: center;
  color: var(--ink-soft);
  max-width: 36em;
}

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

@media (max-width: 900px) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .features {
    grid-template-columns: 1fr;
  }
}

.feature {
  background: var(--card);
  border-radius: 26px;
  padding: 26px 24px 24px;
}

.feature h3 {
  margin: 14px 0 6px;
  font: 700 21px/1.2 var(--display);
}

.feature p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
}

.icon {
  width: 54px;
  height: 54px;
  border-radius: 17px;
  display: grid;
  place-items: center;
}

.icon svg {
  width: 28px;
  height: 28px;
}

.c-blue {
  background: var(--blue);
  box-shadow: 0 4px 0 var(--blue-dark);
}

.c-pink {
  background: var(--pink);
  box-shadow: 0 4px 0 var(--pink-dark);
}

.c-yellow {
  background: var(--yellow);
  box-shadow: 0 4px 0 var(--yellow-dark);
}

.c-green {
  background: var(--green);
  box-shadow: 0 4px 0 var(--green-dark);
}

.c-purple {
  background: var(--purple);
  box-shadow: 0 4px 0 var(--purple-dark);
}

.c-orange {
  background: var(--orange);
  box-shadow: 0 4px 0 var(--orange-dark);
}

/* ---------- Closing call to action ---------- */
#download {
  padding-top: 8px;
}

.cta {
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom));
  border-radius: var(--radius);
  color: #fff;
  text-align: center;
  padding: clamp(36px, 6vw, 60px) 22px;
}

.cta h2 {
  margin: 0 0 8px;
  font: 700 clamp(28px, 3.6vw, 40px)/1.1 var(--display);
}

.cta p {
  margin: 0 auto;
  max-width: 32em;
  opacity: .9;
}

.cta .stores {
  justify-content: center;
}

.cta .store {
  border-color: #fff;
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 34px 0 40px;
  border-top: 1px solid var(--line);
  margin-top: 40px;
  font-size: 15px;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  justify-content: space-between;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.site-footer a {
  text-decoration: none;
  color: var(--ink-soft);
  font-family: var(--display);
}

.site-footer a:hover {
  color: var(--sky-top);
}

.fine {
  color: var(--ink-soft);
}

/* ---------- Legal pages ---------- */
.legal {
  padding: 10px 0 40px;
}

.legal .paper {
  max-width: 820px;
  margin: 0 auto;
  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(22px, 5vw, 48px);
  font-weight: 500;
  font-size: 16px;
}

.legal h1 {
  font: 700 clamp(32px, 5vw, 44px)/1.1 var(--display);
  margin: 0 0 6px;
}

.legal h2 {
  font: 700 22px/1.2 var(--display);
  margin: 30px 0 8px;
}

.legal p,
.legal li {
  color: #3d3666;
}

.legal a {
  color: var(--purple-dark);
}

.legal .updated {
  color: var(--ink-soft);
  margin: 0 0 22px;
}

.legal .note {
  background: #FFE9DE;
  border-radius: 14px;
  padding: 12px 16px;
  margin: 0 0 22px;
  font-size: 14px;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 4px;
  font-size: 15px;
}

.legal th,
.legal td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.legal th {
  font-family: var(--display);
}

@media (max-width: 600px) {

  .legal table,
  .legal thead,
  .legal tbody,
  .legal tr,
  .legal th,
  .legal td {
    display: block;
  }

  .legal thead {
    display: none;
  }

  .legal td {
    border: 0;
    padding: 2px 0;
  }

  .legal tr {
    border-bottom: 1px solid var(--line);
    padding: 8px 0;
  }

  .legal td:first-child {
    font-weight: 800;
  }
}

.brand-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 3px 0 var(--indigo-deep), 0 6px 14px rgba(44, 46, 126, 0.25);
}

.back-link {
  display: inline-block;
  margin-bottom: 16px;
  font: 600 15px var(--display);
  text-decoration: none;
  color: var(--ink-soft);
}

.back-link:hover {
  color: var(--sky-top);
}

:focus-visible {
  outline: 3px solid var(--sky-top);
  outline-offset: 3px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}