/* Splotchy's look, straight from the app: same colors, rounded type and chunky buttons. */
:root {
  color-scheme: light;
  --grape: #8b5cf6;
  --bubblegum: #ff5fa2;
  --sunshine: #ffc800;
  --lime: #58cc02;
  --sky: #1cb0f6;
  --tangerine: #ff9600;
  --cherry: #ff4b4b;
  --ink: #3c3c3c;
  --soft: #777777;
  --cloud: #e5e5e5;
  --cream: #fff9f0;
  --dot: #ffeedb;
  --gold: #e6a700;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background-color: var(--cream);
  background-image: radial-gradient(circle, var(--dot) 9px, transparent 10px);
  background-size: 44px 44px;
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
.wrap { width: 100%; max-width: 1040px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
.r { font-weight: 900; }
.orange { color: var(--tangerine); } .gold { color: var(--gold); }

section { margin-top: 150px; }
@media (max-width: 560px) { section { margin-top: 110px; } }

.section-title { font-size: clamp(30px, 4.6vw, 44px); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 28px; color: var(--ink); }
.section-title.center { text-align: center; }
.lead { color: var(--soft); font-size: 20px; margin: -14px 0 0; }

/* ---------- Top bar, like the app's ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--cream) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.topbar .wrap { display: flex; align-items: center; height: 70px; gap: 12px; }
.wordmark { display: inline-flex; text-decoration: none; font-size: 32px; font-weight: 900; line-height: 1; }
.wordmark span { display: inline-block; }
.wordmark span:nth-child(odd) { transform: rotate(-6deg); }
.wordmark span:nth-child(even) { transform: rotate(6deg); }
.wordmark span:nth-child(1) { color: #ff5fa2; text-shadow: 0 2px 0 #b34272; }
.wordmark span:nth-child(2) { color: #ff9600; text-shadow: 0 2px 0 #b36900; }
.wordmark span:nth-child(3) { color: #ffc800; text-shadow: 0 2px 0 #b38c00; }
.wordmark span:nth-child(4) { color: #58cc02; text-shadow: 0 2px 0 #3e8f01; }
.wordmark span:nth-child(5) { color: #1cb0f6; text-shadow: 0 2px 0 #147bac; }
.wordmark span:nth-child(6) { color: #8b5cf6; text-shadow: 0 2px 0 #6140ac; }
.wordmark span:nth-child(7) { color: #ff5fa2; text-shadow: 0 2px 0 #b34272; }
.wordmark span:nth-child(8) { color: #ff9600; text-shadow: 0 2px 0 #b36900; }
.wordmark.small { font-size: 24px; }
.chips { margin-left: auto; display: flex; gap: 8px; }
.stat { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 2px solid var(--cloud); border-radius: 999px; padding: 6px 12px; font-size: 16px; }
.stat b { font-weight: 900; }

/* ---------- Chunky buttons and cards (ChunkyButtonStyle) ---------- */
.chunky {
  --c: var(--lime);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--c); color: #fff; text-decoration: none; border: 0;
  border-radius: 22px; padding: 16px 24px; font: inherit; font-weight: 900;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 80%, black);
  transition: transform .12s ease, box-shadow .12s ease;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.chunky:hover { transform: translateY(-2px); box-shadow: 0 8px 0 color-mix(in srgb, var(--c) 80%, black); }
.chunky:active { transform: translateY(6px); box-shadow: 0 0 0 color-mix(in srgb, var(--c) 80%, black); }
.chunky.static { cursor: default; }
.chunky.static:hover, .chunky.static:active { transform: none; box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 80%, black); }
.chunky.white { --c: #fff; color: var(--ink); border: 2px solid var(--cloud); box-shadow: 0 6px 0 var(--cloud); }
.chunky.white:hover { box-shadow: 0 8px 0 var(--cloud); }
.chunky.white:active { box-shadow: 0 0 0 var(--cloud); }
.chunky.white.static:hover, .chunky.white.static:active { box-shadow: 0 6px 0 var(--cloud); }
.chunky.lime { --c: var(--lime); } .chunky.tangerine { --c: var(--tangerine); } .chunky.cherry { --c: var(--cherry); }
.chunky.big { font-size: 20px; padding: 18px 28px; letter-spacing: .01em; }
.chunky svg { width: 22px; height: 22px; }
.chunky.pill { border-radius: 999px; padding: 10px 18px; font-size: 17px; }
.card { border-radius: 24px; justify-content: flex-start; text-align: left; }
.grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Today's challenge card */
.challenge { padding: 16px 18px; gap: 14px; border-color: var(--cloud); box-shadow: 0 5px 0 var(--sunshine); }
.challenge:hover { box-shadow: 0 7px 0 var(--sunshine); }
.challenge:active { box-shadow: 0 0 0 var(--sunshine); }
.emoji-circle { width: 58px; height: 58px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--sunshine) 30%, white); display: grid; place-items: center; font-size: 32px; }
.label { font-size: 13px; letter-spacing: .04em; font-weight: 900; }
.challenge b { font-size: 19px; }

/* Give me an idea + target */
.idea { padding: 16px 20px; gap: 12px; }
.idea .em, .spin .em { font-size: 36px; }
.idea b, .spin b { font-size: 19px; }
.idea small, .spin small { font-size: 14px; opacity: .92; font-weight: 800; }
.target { flex-direction: column; gap: 0; padding: 10px 18px; min-width: 76px; }
.target .em { font-size: 30px; }

/* Imagine hero card */
.grape-pink { --c: var(--grape); background: linear-gradient(135deg, var(--grape), var(--bubblegum)); width: 100%; padding: 20px 24px; gap: 18px; border-radius: 28px; box-shadow: 0 7px 0 #6d3fd6; }
.grape-pink:hover { box-shadow: 0 9px 0 #6d3fd6; } .grape-pink:active { box-shadow: 0 0 0 #6d3fd6; }
.imagine-card img { width: 104px; flex: none; }
.imagine-card .ttl { font-size: 34px; line-height: 1; display: flex; align-items: center; gap: 8px; }
.imagine-card em { font-style: normal; font-size: 12px; color: var(--grape); background: var(--sunshine); border-radius: 999px; padding: 4px 8px; }
.imagine-card .sub { font-size: 17px; opacity: .95; margin: 6px 0 8px; }
.imagine-card .eq { align-self: flex-start; background: rgba(255,255,255,.25); border-radius: 999px; padding: 4px 12px; font-size: 17px; }

/* Mode cards, like the app's home grid */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; }
.mode { flex-direction: column; gap: 6px; border-radius: 28px; padding: 20px 12px; min-height: 196px; text-align: center; box-shadow: 0 7px 0 color-mix(in srgb, var(--c) 80%, black); }
.mode:hover { box-shadow: 0 9px 0 color-mix(in srgb, var(--c) 80%, black); }
.mode .e { width: 86px; height: 86px; display: grid; place-items: center; background: rgba(255,255,255,.25); border-radius: 50%; font-size: 50px; }
.mode b { font-size: 20px; line-height: 1.15; }
.mode small { font-size: 14px; opacity: .92; }
.spin { width: 100%; margin-top: 20px; padding: 18px 22px; gap: 14px; }
.spin .chev { font-size: 32px; line-height: 1; }

/* Thought bubbles, like Imagine's */
.thought {
  --c: var(--grape);
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 3px solid var(--c); border-radius: 999px;
  padding: 10px 16px; font-size: 19px; margin-bottom: 12px;
}
.thought::before, .thought::after { content: ""; position: absolute; background: #fff; border: 2px solid color-mix(in srgb, var(--c) 60%, white); border-radius: 50%; }
.thought::before { width: 10px; height: 10px; left: 14px; bottom: -12px; }
.thought::after { width: 6px; height: 6px; left: 8px; bottom: -20px; }
.plus { color: var(--grape); font-size: 26px; font-weight: 900; margin-bottom: 12px; }

/* Badges, like My Prizes */
.badge { text-align: center; }
.badge span { width: 84px; height: 84px; margin: 0 auto 6px; display: grid; place-items: center; border-radius: 50%; font-size: 40px; background: var(--cloud); border: 4px solid #d0d0d0; }
.badge.on span { background: color-mix(in srgb, var(--sunshine) 35%, white); border-color: var(--sunshine); }
.badge b { font-size: 14px; color: var(--soft); }
.badge.on b { color: var(--ink); }

/* Speech bubble with a tail, like the app's */
.speech { position: relative; background: #fff; border-radius: 18px; padding: 13px 16px; font-size: 18px; box-shadow: 0 3px 0 rgba(0,0,0,.12); text-align: left; max-width: 300px; }
.speech.left-tail::before { content: ""; position: absolute; left: -10px; top: 50%; margin-top: -9px; border: 9px solid transparent; border-right: 12px solid #fff; border-left: 0; }

/* Splotchy */
.splotch { cursor: pointer; transition: filter .3s, transform .2s; -webkit-tap-highlight-color: transparent; animation: wobble 2.6s ease-in-out infinite; }
.splotch:active { transform: scale(.9); }
.splotch.dance { animation: dance .7s ease-in-out infinite; }
@keyframes wobble { 0%,100% { transform: scale(1, 1); } 50% { transform: scale(.97, 1.04); } }
@keyframes dance { 0%,100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(8deg) translateY(-10px); } }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-16px) rotate(6deg); } }

/* Phones */
.phone { background: #1b1722; border-radius: 42px; padding: 8px; aspect-ratio: 1320 / 2868; box-shadow: 0 24px 50px -18px rgba(60, 60, 60, .45); }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 34px; }

/* Promises and FAQ */
.promise { flex-direction: column; gap: 2px; text-align: center; padding: 22px 12px; }
.promise .e { font-size: 38px; }
.promise small { color: var(--soft); font-size: 14px; font-weight: 800; }
details.card { display: block; padding: 16px 20px; }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; font-size: 18px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--grape); font-size: 24px; line-height: 1; }
details[open] summary::after { content: "–"; }
details p { margin: 10px 0 2px; color: var(--soft); font-weight: 700; font-size: 16px; }
details a { color: var(--grape); }

/* Footer */
.foot { margin-top: 110px; padding: 30px 0 48px; }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; color: var(--soft); font-size: 15px; }
.foot a { text-decoration: none; }
.foot a:not(.wordmark):hover { color: var(--grape); }

/* Pop in on scroll */
.pop { opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .6s ease, transform .6s cubic-bezier(.2,1.4,.4,1); }
.pop.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .splotch, .sticker, .track { animation: none !important; }
  .pop { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  body { font-size: 17px; }
  .wordmark { font-size: 28px; }
  .stat { padding: 5px 10px; font-size: 14px; }
  .speech { font-size: 16px; padding: 11px 13px; }
  .chunky.big { font-size: 18px; padding: 16px 22px; }
  .modes { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .mode { min-height: 172px; padding: 16px 8px; }
  .mode .e { width: 66px; height: 66px; font-size: 38px; }
  .mode b { font-size: 17px; }
  .mode small { font-size: 13px; }
  .imagine-card { padding: 16px; gap: 12px; }
  .imagine-card img { width: 76px; }
  .imagine-card .ttl { font-size: 28px; }
  .imagine-card .sub { font-size: 15px; }
  .challenge b, .idea b, .spin b { font-size: 17px; }
  .thought { font-size: 16px; padding: 8px 12px; }
  .badge span { width: 70px; height: 70px; font-size: 32px; }
  .lead { font-size: 18px; }
}