/* Choopi's palette — the same tokens the apps use. */
:root {
  --ink: #171717;
  --paper: #F7F6F3;
  --card: #FFFFFF;
  --secondary: #8A8A8A;
  --teal: #1F9C8C;
  --marigold: #F2994A;
  --hairline: #E2DFD9;
  --mist: #A8D8D2;
  --sun: #F2C94C;
  --ease: cubic-bezier(.22,.8,.3,1);
}

@font-face {
  font-family: "Nunito";
  src: url("nunito.ttf") format("truetype-variations");
  font-weight: 200 1000;
  font-display: swap;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Nunito, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: var(--teal); text-decoration: none; }
img { max-width: 100%; height: auto; }

/* ---------- The device: a camera roll on both edges ---------- */

.roll {
  position: fixed;
  top: 0;
  bottom: 0;
  width: clamp(120px, 12vw, 200px);
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.roll-l { left: 0; }
.roll-r { right: 0; }
.roll-track { will-change: transform; }
.roll-card {
  position: relative;
  width: 78%;
  margin: 0 auto 28px;
  padding: 7% 7% 22%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(23,23,23,.06);
  opacity: .62;
}
.roll-l .roll-card:nth-child(odd)  { transform: rotate(-7deg) translateX(-8%); }
.roll-l .roll-card:nth-child(even) { transform: rotate(4deg) translateX(6%); }
.roll-r .roll-card:nth-child(odd)  { transform: rotate(6deg) translateX(8%); }
.roll-r .roll-card:nth-child(even) { transform: rotate(-5deg) translateX(-6%); }
.roll-card .ph { aspect-ratio: 1; border-radius: 6px; background: var(--mist); }
.roll-card.t1 .ph { background: #CFE7E3; }
.roll-card.t2 .ph { background: #F6D7B8; }
.roll-card.t3 .ph { background: #F3E4A8; }
.roll-card.t4 .ph { background: #D9D6CF; }
.roll-card.t5 .ph { background: #BFDCD6; }
.roll-card .mark {
  position: absolute;
  right: 10%;
  top: 8%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: clamp(9px, .9vw, 13px);
  font-weight: 800;
  color: #fff;
}
.roll-card.keep .mark { background: var(--teal); }
.roll-card.go .mark { background: #D84B3F; }
@media (max-width: 1100px) { .roll { display: none; } }

/* ---------- Top bar ---------- */

.topbar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem clamp(1.25rem, 5vw, 4rem);
}
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); font-weight: 900; font-size: 1.35rem; letter-spacing: -.01em; justify-self: start; }
.topbar-line { margin: 0; color: var(--secondary); font-size: .95rem; text-align: center; }
.topbar > .pill { justify-self: end; }
@media (max-width: 640px) { .topbar { grid-template-columns: 1fr auto; } .topbar-line { display: none; } }

.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 999px;
  padding: .55rem 1.1rem;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
}
.pill-ink { background: var(--ink); color: #fff; }
.is-soon { opacity: .38; cursor: not-allowed; }

/* ---------- Layout ---------- */

main { position: relative; z-index: 1; }
.section {
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6.5rem) clamp(1.25rem, 5vw, 2.5rem);
}
h1, h2, h3 { margin: 0; letter-spacing: -.02em; line-height: 1.08; font-weight: 900; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); text-align: center; }
.section > h2 { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }

/* Reveal on scroll: nothing jumps, things settle. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Hero ---------- */

.hero {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 3rem) 1.25rem clamp(3rem, 7vw, 5rem);
  text-align: center;
}
.mascot-wrap { position: relative; display: inline-block; margin-bottom: .75rem; }
.mascot {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  display: block;
  border-radius: 24px;
}
.mascot:focus-visible { outline: 3px solid var(--teal); outline-offset: 8px; }
.mascot svg { width: clamp(220px, 34vw, 300px); height: auto; display: block; }
.click-me {
  margin: 0;
  color: var(--secondary);
  font-size: .95rem;
  font-style: italic;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  transform: rotate(-4deg);
  transition: opacity .4s;
}
.click-me svg { transform: rotate(-6deg); }
.mascot-wrap.done .click-me { opacity: 0; }

.hero h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); margin: .5rem 0 1rem; }
.lede { color: var(--secondary); font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 34rem; margin: 0 auto 1.75rem; }

/* Mascot motion. Legs stay planted; everything else rides the bob, and the shadow breathes. */
.m-float { animation: bob 2.4s ease-in-out infinite; }
.m-shadow { transform-box: view-box; transform-origin: 350px 470px; animation: breathe 2.4s ease-in-out infinite; }
.m-tail { transform-box: view-box; transform-origin: 420px 390px; animation: sway 2.6s ease-in-out infinite; }
.m-lid { transform-box: view-box; animation: blink 4.1s ease-in-out infinite; }
.m-lid + .m-lid { animation-delay: .02s; }
.m-pupil { transform-box: fill-box; transform-origin: center; transition: transform .28s var(--ease); }
.m-wing { transform-box: view-box; transition: transform .32s var(--ease); }
.m-wing-l { transform-origin: 250px 330px; }
.m-wing-r { transform-origin: 450px 330px; }
.m-mouth { opacity: 0; transition: opacity .15s; }
.m-sparkles path { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.4) rotate(-20deg); transition: opacity .25s, transform .45s var(--ease); }

.mascot.delight .m-pupil { transform: scale(1.4); }
.mascot.delight .m-wing-l { transform: rotate(-22deg); }
.mascot.delight .m-wing-r { transform: rotate(22deg); }
.mascot.delight .m-mouth { opacity: 1; }
.mascot.delight .m-sparkles path { opacity: 1; transform: scale(1) rotate(0); }
.mascot.delight .m-sparkles path:nth-child(2) { transition-delay: .06s; }
.mascot.delight .m-sparkles path:nth-child(3) { transition-delay: .12s; }
.mascot.delight .m-lid { animation: none; }

@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes breathe { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.92); } }
@keyframes sway { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes blink { 0%,91%,100% { transform: translateY(0); } 94%,97% { transform: translateY(88px); } }

/* ---------- Store buttons, disabled for now ---------- */

.stores { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  border-radius: 999px;
  padding: .75rem 1.35rem .75rem 1.15rem;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  line-height: 1;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-label { display: flex; flex-direction: column; align-items: flex-start; font-size: 1.05rem; }
.btn-label small { font-size: .62rem; font-weight: 600; opacity: .8; letter-spacing: .02em; margin-bottom: .1rem; }
.btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; pointer-events: none; }
.soon-note { margin: 1rem 0 0; color: var(--secondary); font-size: .9rem; }

/* ---------- Tiles: ink squircles, the app's own feature-tile language ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 44rem;
  margin: 0 auto;
}
@media (max-width: 640px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 28px;
  background: var(--ink);
  overflow: hidden;
  transition: transform .35s var(--ease);
}
.tile:hover { transform: translateY(-4px); }
.tile-label {
  position: absolute;
  top: 1rem;
  left: 1.1rem;
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  z-index: 1;
}
.tile svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile .face { transition: transform .5s var(--ease); }
.tile:hover .face { transform: translate(52px, 96px) translateY(-6px); }

/* ---------- Pose cards ---------- */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 800px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--card);
  border-radius: 28px;
  padding: 2rem 1.5rem 1.75rem;
  text-align: center;
  transition: transform .35s var(--ease);
}
.card:hover { transform: translateY(-4px); }
.card img { width: 200px; height: auto; margin: 0 auto 1rem; display: block; }
.card h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.card p { margin: 0; color: var(--secondary); font-size: .98rem; }

/* ---------- Phone demo ---------- */

.demo { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 860px) { .demo { grid-template-columns: 1fr; text-align: center; } .demo .stores { justify-content: center; } }
.demo h2 { text-align: inherit; margin-bottom: .75rem; }
.demo p { color: var(--secondary); margin: 0 0 1.5rem; }
@media (min-width: 861px) { .demo h2 { text-align: left; } .demo .stores { justify-content: flex-start; } }

.phone {
  position: relative;
  width: min(300px, 80vw);
  aspect-ratio: 9 / 18.5;
  margin: 0 auto;
  background: var(--paper);
  border: 10px solid var(--ink);
  border-radius: 44px;
  padding: 1.1rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  overflow: hidden;
}
.phone-top { display: flex; justify-content: space-between; align-items: center; color: var(--secondary); font-size: .8rem; font-weight: 700; }
.phone-top .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hairline); }
.chip {
  align-self: center;
  border: 1px solid rgba(31,156,140,.25);
  background: rgba(31,156,140,.1);
  color: var(--teal);
  border-radius: 999px;
  padding: .35rem .7rem;
  font-size: .68rem;
  font-weight: 800;
}
.deck { position: relative; flex: 1; }
.deck-card {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(160deg, #CFE7E3, #7FBDB4);
}
.deck-card.c2 { transform: scale(.95) translateY(12px); background: linear-gradient(160deg, #F6D7B8, #E8A672); }
.deck-card.c3 { transform: scale(.9) translateY(24px); background: linear-gradient(160deg, #F3E4A8, #D9C46A); }
.deck-card.c1 { animation: swipe 4.2s var(--ease) infinite; }
.deck-card .pick {
  position: absolute;
  top: .6rem;
  left: .6rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  border-radius: 999px;
  padding: .3rem .6rem;
  font-size: .62rem;
  font-weight: 800;
}
.deck-card .pick i { width: 10px; height: 12px; border-radius: 2px; background: var(--sun); transform: rotate(-6deg); }
.glyph-keep {
  position: absolute;
  top: 36%;
  left: 50%;
  width: 72px;
  height: 72px;
  margin-left: -36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  box-shadow: 0 10px 28px rgba(31,156,140,.35);
  opacity: 0;
  transform: rotate(-12deg) scale(.5);
  animation: glyph 4.2s var(--ease) infinite;
}
.deck-buttons { display: flex; justify-content: center; gap: 1rem; align-items: center; padding-bottom: .25rem; }
.b { border-radius: 50%; border: 2px solid; width: 40px; height: 40px; }
.b-no { border-color: #D84B3F; background: rgba(216,75,63,.08); }
.b-star { border-color: var(--marigold); background: rgba(242,153,74,.08); width: 30px; height: 30px; }
.b-yes { border-color: var(--teal); background: rgba(31,156,140,.08); }
@keyframes swipe {
  0%, 38% { transform: translate(0) rotate(0); }
  55% { transform: translate(140%, -6%) rotate(14deg); opacity: 1; }
  56% { opacity: 0; transform: translate(0) rotate(0); }
  70%, 100% { opacity: 1; transform: translate(0) rotate(0); }
}
@keyframes glyph { 0%, 30% { opacity: 0; transform: rotate(-12deg) scale(.5); } 37% { opacity: 1; transform: rotate(-6deg) scale(1.1); } 41%, 50% { opacity: 1; transform: rotate(-6deg) scale(1); } 56%, 100% { opacity: 0; transform: rotate(-12deg) scale(.5); } }

/* ---------- Privacy line ---------- */

.privacy { text-align: center; max-width: 36rem; }
.privacy img { display: block; margin: 0 auto 1rem; }
.privacy h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.privacy p { margin: 0; color: var(--secondary); }

/* ---------- Footer ---------- */

.foot {
  position: relative;
  z-index: 1;
  max-width: 68rem;
  margin: 0 auto;
  padding: 2.5rem clamp(1.25rem, 5vw, 2.5rem) 3.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  color: var(--secondary);
  font-size: .9rem;
}
.foot-brand { display: flex; flex-direction: column; }
.foot-brand strong { color: var(--ink); }
.foot nav { display: flex; gap: 1.25rem; font-weight: 700; }
.foot nav a { color: var(--secondary); }
.foot-copy { justify-self: end; }
@media (max-width: 640px) { .foot { grid-template-columns: 1fr; text-align: center; } .foot nav { justify-content: center; } .foot-copy { justify-self: center; } }

/* ---------- Legal pages ---------- */

.wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem; position: relative; z-index: 1; }
header.site { display: flex; align-items: center; gap: .75rem; padding: 1.5rem 0; }
header.site .name { font-weight: 900; font-size: 1.35rem; letter-spacing: -.01em; }
header.site nav { margin-left: auto; display: flex; gap: 1.25rem; font-weight: 700; font-size: .95rem; }
article.legal { padding: 1rem 0 4rem; max-width: 34rem; }
article.legal h1 { font-size: 2rem; margin: 0 0 .25rem; }
article.legal .updated { color: var(--secondary); font-size: .95rem; margin: 0 0 2rem; }
article.legal h2 { font-size: 1.15rem; text-align: left; margin: 2.25rem 0 .5rem; }
article.legal p, article.legal li { color: #2b2b2b; }
article.legal ul { padding-left: 1.15rem; }
article.legal li { margin: .35rem 0; }
.callout { background: var(--card); border-left: 4px solid var(--teal); border-radius: 0 16px 16px 0; padding: 1rem 1.25rem; margin: 1.5rem 0; }
.callout strong { font-weight: 800; }
footer.site { border-top: 1px solid var(--hairline); padding: 2rem 0 3rem; color: var(--secondary); font-size: .9rem; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
footer.site nav { display: flex; gap: 1.25rem; margin-left: auto; }

/* ---------- Motion off ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .m-float, .m-shadow, .m-tail, .m-lid, .deck-card.c1, .glyph-keep { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .roll-track { transform: none !important; }
  .tile, .card, .btn { transition: none; }
}