:root {
  --cream: #FEFAF3;
  --ink: #191F23;
  --teal: #1D858C;
  --orange: #FB552A;
  --ink-soft: #5A6268;
  --hairline: #E7DFCE;
  --card: #FFFFFF;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
}

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
}

header.site {
  padding: 28px 0 8px;
}

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

.brand {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.brand .dot {
  color: var(--orange);
}

nav.crumbs a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9rem;
}

nav.crumbs a:hover { color: var(--teal); }

main { padding: 12px 0 40px; }

h1 {
  font-size: 1.9rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0.4em 0 0.3em;
}

h2 {
  font-size: 1.2rem;
  margin: 1.6em 0 0.5em;
}

p { margin: 0.8em 0; }

.hero-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.hero-mascot {
  flex: 0 0 auto;
  width: 72px;
  height: auto;
  margin-top: 2px;
  transform: rotate(4deg);
}

@media (min-width: 600px) {
  .hero-mascot { width: 120px; }
}

/* Idle bob: transform-only, so it composites for free and never touches
   layout. Matches the app intro's inhale beat in spirit, not literally —
   here it's continuous and gentle rather than a one-shot throw. */
@media (prefers-reduced-motion: no-preference) {
  .hero-mascot {
    animation: mascot-idle 3.6s ease-in-out infinite;
  }
}

@keyframes mascot-idle {
  0%, 100% { transform: rotate(4deg) translateY(0); }
  50% { transform: rotate(6deg) translateY(-4px); }
}

.subtitle {
  color: var(--teal);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.lede {
  font-size: 1.05rem;
  color: var(--ink-soft);
}

.card-fan {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 34px 0 4px;
  padding: 18px 0 56px;
}

.card-fan img {
  width: 19.5%;
  min-width: 0;
  max-width: 126px;
  margin: 0 -2.3%;
  border-radius: 8px;
  box-shadow:
    0 1px 0 1px var(--cream),
    0 0 0 2px var(--hairline),
    0 12px 22px rgba(25, 31, 35, 0.16);
  /* --fan-delay/--fan-dur are only set pre-deal (below); once `.dealt` lands
     they fall back to 0ms/0.22s, so hover keeps its original snappy feel
     and only the initial deal-in carries the stagger and the slower,
     springy settle. */
  transition:
    transform var(--fan-dur, 0.22s) cubic-bezier(0.34, 1.56, 0.64, 1) var(--fan-delay, 0ms),
    opacity 0.35s ease var(--fan-delay, 0ms),
    box-shadow 0.22s ease;
}

/* Hero moment: the fan deals in once, cards flying up from a loose stack
   into their resting hand, staggered ~80ms apart, ~700ms end to end.
   Scoped to `html.js` (see assets/motion.js) so a no-JS visitor just gets
   the resting fan, and to no-preference so reduced-motion visitors get the
   same start/end frame with nothing in between. */
@media (prefers-reduced-motion: no-preference) {
  html.js .card-fan:not(.dealt) img {
    opacity: 0;
    transform: translateY(28px) scale(0.72);
  }
  html.js .card-fan:not(.dealt) img:nth-child(1) { --fan-delay: 0ms; --fan-dur: 0.32s; }
  html.js .card-fan:not(.dealt) img:nth-child(2) { --fan-delay: 80ms; --fan-dur: 0.32s; }
  html.js .card-fan:not(.dealt) img:nth-child(3) { --fan-delay: 160ms; --fan-dur: 0.32s; }
  html.js .card-fan:not(.dealt) img:nth-child(4) { --fan-delay: 240ms; --fan-dur: 0.32s; }
  html.js .card-fan:not(.dealt) img:nth-child(5) { --fan-delay: 320ms; --fan-dur: 0.32s; }
  html.js .card-fan:not(.dealt) img:nth-child(6) { --fan-delay: 400ms; --fan-dur: 0.32s; }
}

/* Six members, symmetric about the centre gap: the QR back (last) takes the
   right end of the hand, overlapped by yodel the way every edge card here is
   overlapped by its inner neighbour — unscannable by construction, not by a
   special case. */
.card-fan img:nth-child(1) { transform: rotate(-22deg) translateY(32px); z-index: 1; }
.card-fan img:nth-child(2) { transform: rotate(-13deg) translateY(13px); z-index: 2; }
.card-fan img:nth-child(3) { transform: rotate(-4deg) translateY(-3px); z-index: 3; }
.card-fan img:nth-child(4) { transform: rotate(5deg) translateY(-3px); z-index: 3; }
.card-fan img:nth-child(5) { transform: rotate(14deg) translateY(13px); z-index: 2; margin-left: -0.5%; }
.card-fan img:nth-child(6) { transform: rotate(23deg) translateY(32px); z-index: 1; margin-left: -10.5%; }

@media (hover: hover) and (pointer: fine) {
  .card-fan img:nth-child(1):hover { transform: rotate(-22deg) translateY(10px); z-index: 10; box-shadow: 0 1px 0 1px var(--cream), 0 0 0 2px var(--hairline), 0 18px 30px rgba(25, 31, 35, 0.24); }
  .card-fan img:nth-child(2):hover { transform: rotate(-13deg) translateY(-8px); z-index: 10; box-shadow: 0 1px 0 1px var(--cream), 0 0 0 2px var(--hairline), 0 18px 30px rgba(25, 31, 35, 0.24); }
  .card-fan img:nth-child(3):hover { transform: rotate(-4deg) translateY(-24px); z-index: 10; box-shadow: 0 1px 0 1px var(--cream), 0 0 0 2px var(--hairline), 0 18px 30px rgba(25, 31, 35, 0.24); }
  .card-fan img:nth-child(4):hover { transform: rotate(5deg) translateY(-24px); z-index: 10; box-shadow: 0 1px 0 1px var(--cream), 0 0 0 2px var(--hairline), 0 18px 30px rgba(25, 31, 35, 0.24); }
  .card-fan img:nth-child(5):hover { transform: rotate(14deg) translateY(-8px); z-index: 10; box-shadow: 0 1px 0 1px var(--cream), 0 0 0 2px var(--hairline), 0 18px 30px rgba(25, 31, 35, 0.24); }
  /* nth-child(6), the QR card, keeps no hover lift: lifting it would let its
     right edge clear yodel's overlap and expose the full code. */
}

/* Below ~600px the six-card hand at 19.5% a card reads as illegible slivers
   — dog and yodel drop out, and the remaining four (still including the QR
   back) get wider faces and gentler rotation so every visible name and fact
   is readable. Selectors stay keyed to the original six-card DOM order:
   flex ignores the two display:none items, so 2/3/4/6 simply abut. */
@media (max-width: 600px) {
  .card-fan img {
    width: 36%;
    max-width: none;
    margin: 0 -10.5%;
  }
  .card-fan img:nth-child(1),
  .card-fan img:nth-child(5) {
    display: none;
  }
  .card-fan img:nth-child(2) { transform: rotate(-11deg) translateY(9px); z-index: 1; }
  .card-fan img:nth-child(3) { transform: rotate(-3deg) translateY(-5px); z-index: 2; }
  .card-fan img:nth-child(4) { transform: rotate(4deg) translateY(-5px); z-index: 2; }
  .card-fan img:nth-child(6) { transform: rotate(13deg) translateY(9px); z-index: 1; margin-left: -15.5%; }
}

.fan-caption {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin: 0 0 6px;
}

.shots {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 18px 0 6px;
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
  -webkit-overflow-scrolling: touch;
}

.shots img {
  height: 380px;
  width: auto;
  border-radius: 22px;
  border: 6px solid var(--ink);
  flex: 0 0 auto;
  box-shadow: 0 8px 20px rgba(25, 31, 35, 0.15);
}

.cta {
  display: inline-block;
  background: var(--orange);
  color: var(--cream);
  font-weight: 700;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 1rem;
}

.coming-soon {
  margin-top: 28px;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.platforms {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 10px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--cream);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.chip em {
  font-style: normal;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}

@media (max-width: 520px) {
  .coming-soon { flex-direction: column; align-items: flex-start; }
  .platforms { flex-direction: row; flex-wrap: wrap; }
}

.coming-soon p {
  margin: 0;
  font-weight: 600;
}

.faq-item {
  border-top: 1px solid var(--hairline);
  padding: 18px 0;
}

.faq-item:last-child { border-bottom: 1px solid var(--hairline); }

.faq-item h2 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.faq-item p {
  color: var(--ink-soft);
  margin: 0;
}

.contact-box {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 18px 20px;
  margin: 20px 0 8px;
}

.contact-box a {
  color: var(--teal);
  font-weight: 700;
  text-decoration: none;
}

.contact-box a:hover { text-decoration: underline; }

footer.site {
  border-top: 1px solid var(--hairline);
  padding: 24px 0 40px;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

footer.site a {
  color: var(--teal);
  text-decoration: none;
}

footer.site a:hover { text-decoration: underline; }

footer.site .links {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.updated {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

ul.plain {
  padding-left: 1.2em;
  margin: 0.8em 0;
}

ul.plain li {
  margin: 0.4em 0;
}

strong { color: var(--ink); }