/* Layout: one column of paper "bands"; the hero and the beta section split into art + words, stacking on phones.
   Look: Harper's crayon world from the app. Pencil outlines, Blocky yellow, sky blue, a paper background. One look, no dark mode. */
:root {
  --paper: #f6efe2;      /* the app's paper */
  --card: #fffdf7;       /* a fresh sheet */
  --ink: #2b2a28;        /* pencil */
  --muted: #6b655d;      /* faded pencil */
  --yellow: #f9d84a;     /* Blocky */
  --sky: #cdeaf8;        /* the neighborhood sky */
  --green: #c4e8b5;
  --pink: #ffd3dc;
  --lilac: #e4d6f7;
  --orange: #ffd9b8;
  --heart: #ef5f6b;
  --display: "Patrick Hand", "Chalkboard SE", "Comic Sans MS", cursive;
  --body: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(42px, 6vw, 70px); }
h2 { font-size: clamp(36px, 4.4vw, 52px); }
h3 { font-size: 26px; }
p { margin: 0; }
.eyebrow { font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.small { font-size: 15px; color: var(--muted); }

/* buttons: a pencil-outlined block that presses down */
.btn {
  display: inline-block;
  font-family: var(--body);
  font-weight: 800;
  font-size: 17px;
  text-decoration: none;
  color: var(--ink);
  background: var(--yellow);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  padding: 12px 22px;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform .08s ease, box-shadow .08s ease;
  cursor: pointer;
}
.btn:hover { transform: translateY(1px); box-shadow: 0 3px 0 var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.btn:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--heart); outline-offset: 3px; }
.btn-plain { background: var(--card); }
.btn-small { padding: 7px 14px; font-size: 15px; box-shadow: 0 3px 0 var(--ink); }
.btn-wide { width: 100%; text-align: center; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* top bar */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 21; background: var(--paper); }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-size: 32px; line-height: 1; }
.brand img { width: 40px; }
.brand b { font-weight: 400; color: var(--ink); }
.brand-small { font-size: 24px; }
.brand-small img { width: 28px; }

/* hero */
.hero { padding-block: 48px 64px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; }
.hero-copy { display: grid; gap: 20px; min-width: 0; }
.mark { background: linear-gradient(transparent 55%, var(--yellow) 55%, var(--yellow) 90%, transparent 90%); padding: 0 4px; }
.lead { font-size: 20px; max-width: 34em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.byline { font-family: var(--display); font-size: 24px; color: var(--muted); }
.hero-art { position: relative; margin: 0; min-width: 0; }
.hero-art > img:first-child {
  border: 2.5px solid var(--ink);
  border-radius: 28px;
  box-shadow: 8px 10px 0 var(--ink);
  background: var(--sky);
}
.blocky-peek {
  position: absolute; width: 22%; left: -6%; bottom: -8%;
  transform: rotate(-8deg);
  animation: bob 3.2s ease-in-out infinite;
  filter: drop-shadow(2px 4px 0 rgba(43, 42, 40, .25));
}
@keyframes bob { 50% { transform: rotate(-4deg) translateY(-8px); } }

.when { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px;
  background: var(--card); border: 2px solid var(--ink); border-radius: 999px; padding: 6px 14px; justify-self: start; }
.when-beta { font-size: 15px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #5fbf5a; border: 1.5px solid var(--ink); flex: none;
  animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* mission */
.mission { background: var(--sky); border-block: 2px solid var(--ink); padding-block: 56px; }
.mission-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; }
.mission-copy { display: grid; gap: 16px; font-size: 20px; max-width: 36em; min-width: 0; }

/* what makes it different */
.different { padding-block: 72px; }
.section-lead { font-size: 20px; max-width: 36em; margin-top: 12px; }
.rules { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rule {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 20px;
  display: grid; gap: 8px; align-content: start;
}
.rule h3 { font-size: 25px; }
.rule p { font-size: 16px; color: #3f3c38; }
.chip { width: 46px; height: 46px; border-radius: 12px; border: 2px solid var(--ink); display: grid; place-items: center; }
.chip svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.c-yellow { background: var(--yellow); } .c-sky { background: var(--sky); } .c-green { background: var(--green); }
.c-pink { background: var(--pink); } .c-lilac { background: var(--lilac); } .c-orange { background: var(--orange); }

/* a peek inside */
.inside { padding-block: 64px 72px; background: var(--card); border-block: 2px solid var(--ink); }
.peek { margin-top: 32px; display: grid; grid-template-columns: 1fr 2fr; gap: 28px; align-items: center; }
.peek-copy { display: grid; gap: 12px; min-width: 0; }
.party-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.party-strip img, .games img { border: 2px solid var(--ink); border-radius: 16px; }
.party-strip img:nth-child(2) { transform: translateY(14px) rotate(1.5deg); }
.party-strip img:nth-child(1) { transform: rotate(-1.5deg); }
.games { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.peek-games { margin-top: 56px; }

/* beta */
.beta { padding-block: 72px; }
.beta-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; }
.beta-copy { display: grid; gap: 16px; min-width: 0; }
.beta-copy > p { font-size: 19px; max-width: 34em; }
.beta-copy h3 { margin-top: 12px; }
.ticks, .steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 34px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px;
  border: 2px solid var(--ink); border-radius: 6px; background: var(--green);
}
.ticks li::after {
  content: ""; position: absolute; left: 7px; top: 7px; width: 6px; height: 11px;
  border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: rotate(40deg);
}
.steps { counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding-left: 46px; min-height: 34px; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -2px; width: 32px; height: 32px;
  display: grid; place-items: center; font-family: var(--display); font-size: 22px;
  background: var(--yellow); border: 2px solid var(--ink); border-radius: 9px;
}

.signup {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + 84px);
  background: var(--card);
  border: 2.5px solid var(--ink);
  border-radius: 24px;
  box-shadow: 8px 10px 0 var(--ink);
  padding: 26px;
  min-width: 0;
}
form { display: grid; gap: 10px; }
form h3 { font-size: 32px; }
label { font-weight: 800; font-size: 15px; margin-top: 6px; }
input[type="text"], input[type="email"] {
  font: inherit; font-size: 17px;
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
}
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; margin-top: 10px; }
.check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--ink); flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.error { background: var(--pink); border: 2px solid var(--ink); border-radius: 10px; padding: 8px 12px; font-weight: 700; font-size: 15px; }
.fine { font-size: 13px; color: var(--muted); }
.thanks { display: grid; justify-items: center; text-align: center; gap: 10px; padding-block: 20px; }
.thanks img { width: 90px; animation: bob 3.2s ease-in-out infinite; }
.thanks h3 { font-size: 36px; }

/* footer */
.foot { border-top: 2px solid var(--ink); padding-block: 28px; background: var(--paper); }
.foot-row { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; font-size: 15px; color: var(--muted); }
.addr { font-weight: 800; color: var(--ink); user-select: all; }

/* block posts: phone screens drawn like the app */
.posts { padding-block: 72px; background: #e4f3da; border-block: 2px solid var(--ink); }
.phones { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 28px; }
.shot { margin: 0; display: grid; gap: 14px; justify-items: center; width: 280px; max-width: 100%; }
.shot figcaption { font-size: 16px; text-align: center; max-width: 26em; }
.phone {
  width: 268px; max-width: 100%; height: 556px;
  background: var(--ink); border: 2.5px solid var(--ink); border-radius: 40px; padding: 9px;
  box-shadow: 7px 9px 0 rgba(43, 42, 40, .9);
}
.shot:nth-child(1) .phone { transform: rotate(-1.5deg); }
.shot:nth-child(3) .phone { transform: rotate(1.5deg); }
.screen {
  height: 100%; border-radius: 31px; background: var(--paper); overflow: hidden;
  font-family: "Fredoka", var(--body); font-size: 13px; line-height: 1.35;
  display: flex; flex-direction: column; gap: 10px; padding: 0 12px 12px;
}
.screen p { margin: 0; }
.screen-center { align-items: center; text-align: center; }
.status { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 12px; padding: 10px 10px 0; align-self: stretch; }
.bars { width: 34px; height: 10px; border-radius: 3px; border: 1.5px solid var(--ink); background: linear-gradient(90deg, var(--ink) 70%, transparent 70%); }
.app-head { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 24px; line-height: 1; }
.app-head b { font-weight: 400; }
.app-head img { width: 26px; }
.post { background: var(--card); border: 2px solid var(--ink); border-radius: 16px; padding: 9px; display: grid; gap: 7px; }
.post-peek { opacity: .9; }
.who { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.sq { width: 22px; height: 22px; border-radius: 6px; background: var(--c); border: 1.5px solid var(--ink); display: grid; place-items: center; font-size: 12px; }
.nm { flex: 1; min-width: 0; }
.fade { font-size: 11px; color: var(--muted); font-weight: 500; }
.pic { width: 100%; height: auto; border-radius: 10px; border: 1.5px solid var(--ink); display: block; }
.cap { font-size: 14px; font-weight: 500; }
.acts { display: flex; gap: 14px; font-weight: 600; font-size: 12.5px; }
.acts .liked { color: var(--heart); }
.acts .flag { margin-left: auto; color: var(--muted); }
.replies { display: grid; gap: 5px; }
.rp { background: var(--paper); border: 1.5px solid var(--ink); border-radius: 10px; padding: 4px 8px; font-size: 12px; }
.rp b { font-weight: 600; margin-right: 4px; }
.tile { height: 74px; border-radius: 10px; border: 1.5px solid var(--ink); background: var(--c); display: grid; place-items: center; }
.tile svg { width: 40px; height: 40px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tile-sm { width: 52px; height: 52px; flex: none; }
.tile-sm svg { width: 28px; height: 28px; }
.blocky-big { width: 104px; margin-top: 18px; animation: bob 3.2s ease-in-out infinite; }
.hand { font-family: var(--display); font-size: 25px; line-height: 1.1; }
.ring { position: relative; width: 116px; height: 116px; }
.ring svg { width: 100%; height: 100%; }
.ring span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; font-size: 24px; }
.mini { display: flex; gap: 10px; align-items: center; text-align: left; background: var(--card); border: 2px solid var(--ink); border-radius: 14px; padding: 8px; align-self: stretch; }
.mini p { font-weight: 500; }
.note { color: var(--muted); font-size: 12.5px; padding-inline: 6px; }
.sheet-title { font-family: var(--display); font-size: 24px; line-height: 1.1; margin-top: 8px !important; }
.sheet-sub { color: var(--muted); font-size: 12px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs span { border: 1.5px solid var(--ink); border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 600; background: var(--card); }
.tabs .on { background: var(--yellow); }
.pick { display: grid; gap: 7px; }
.pick span { background: var(--card); border: 2px solid var(--ink); border-radius: 12px; padding: 8px 10px; font-weight: 500; box-shadow: 0 3px 0 var(--ink); }
.pick span:nth-child(3) { background: var(--green); }
.stickers { display: flex; gap: 8px; }
.stickers span { width: 44px; height: 44px; display: grid; place-items: center; font-size: 22px; border: 2px solid var(--ink); border-radius: 12px; background: var(--card); }
.points { margin-top: auto; text-align: center; font-weight: 600; font-size: 12.5px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 12px; padding: 7px; }

/* grown-up controls */
.grownup {
  margin-top: 56px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: center;
  background: var(--card); border: 2.5px solid var(--ink); border-radius: 28px; padding: 32px; box-shadow: 8px 10px 0 var(--ink);
}
.phone-gu { height: 586px; }
.gu-title { font-weight: 600; font-size: 17px; margin-top: 6px !important; }
.text-in { background: #e9e5dc; border-radius: 18px 18px 18px 6px; padding: 10px; display: grid; gap: 7px; }
.thumb { width: 100%; height: auto; border-radius: 8px; border: 1.5px solid var(--ink); display: block; }
.cap2 { font-size: 12px; color: var(--muted); }
.yn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.yn span { text-align: center; font-weight: 700; border: 2px solid var(--ink); border-radius: 10px; padding: 5px; box-shadow: 0 3px 0 var(--ink); }
.yes { background: var(--green); } .no { background: var(--card); }
.rows { background: var(--card); border: 2px solid var(--ink); border-radius: 14px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; font-weight: 500; font-size: 12.5px; }
.row + .row { border-top: 1.5px dashed #d8cfbf; }
.val { color: var(--muted); font-weight: 600; font-size: 12px; }
.step { font-weight: 600; border: 1.5px solid var(--ink); border-radius: 999px; padding: 1px 9px; }
.tog { width: 34px; height: 20px; border-radius: 999px; border: 1.5px solid var(--ink); background: #e3dccd; position: relative; flex: none; }
.tog::after { content: ""; position: absolute; top: 1.5px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 1.5px solid var(--ink); }
.tog.on { background: #6cc47a; }
.tog.on::after { left: auto; right: 2px; }
.locked { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: auto !important; }
.gu-copy { display: grid; gap: 16px; min-width: 0; }
.gu-copy h3 { font-size: clamp(30px, 3.4vw, 40px); }
.gu-copy > p { font-size: 18px; max-width: 34em; }

@media (max-width: 900px) {
  .grownup { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 24px; }
  .gu-copy { justify-self: stretch; }
}
@media (max-width: 560px) {
  .shot:nth-child(n) .phone { transform: none; }
  .grownup { padding: 18px; box-shadow: 5px 6px 0 var(--ink); }
}

/* kid's age question in the sign-up form */
.ages { border: 0; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.ages legend { font-weight: 800; font-size: 15px; padding: 0; margin-bottom: 8px; }
.age-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.age { position: relative; margin: 0; }
.age input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.age span { display: block; text-align: center; font-weight: 700; padding: 11px 8px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; box-shadow: 0 3px 0 var(--ink); }
.age input:checked + span { background: var(--yellow); }
.age input:focus-visible + span { outline: 3px solid var(--heart); outline-offset: 3px; }
.u13 { background: var(--sky); border: 2px solid var(--ink); border-radius: 14px; padding: 14px 16px; display: grid; gap: 8px; font-size: 15px; }
.u13-title { font-family: var(--display); font-size: 22px; line-height: 1.1; }
.u13 ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }

/* the gap: age line + stats */
.gap { padding-block: 72px; background: var(--card); }
.timeline { margin-top: 40px; display: grid; gap: 10px; }
.tl-labels { position: relative; height: 54px; }
.tl-tag {
  position: absolute; left: var(--at); transform: translateX(-50%); width: max-content; max-width: 30vw;
  font-size: 15px; line-height: 1.3; text-align: center; background: var(--paper);
  border: 2px solid var(--ink); border-radius: 12px; padding: 5px 10px;
}
.tl-top .tl-tag { bottom: 0; }
.tl-bottom .tl-tag { top: 0; }
.tl-tag b { font-family: var(--display); font-weight: 400; font-size: 20px; margin-right: 4px; }
.tl-track { position: relative; height: 46px; background: #e9e2d3; border: 2.5px solid var(--ink); border-radius: 999px; }
.tl-band {
  position: absolute; left: 0; width: 80%; top: 0; bottom: 0; border-radius: 999px 0 0 999px;
  background: repeating-linear-gradient(-55deg, var(--yellow) 0 12px, #f6cf3a 12px 16px); border-right: 2.5px dashed var(--ink);
  display: flex; align-items: center; padding-left: 16px; min-width: 0;
}
.tl-band span { position: relative; z-index: 2; background: var(--yellow); border-radius: 8px; padding: 3px 6px; font-family: var(--display); font-size: 21px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-pin { z-index: 1; position: absolute; left: var(--at); top: -12px; bottom: -12px; width: 3px; margin-left: -1.5px; background: var(--ink); border-radius: 2px; }
.tl-ages { display: flex; justify-content: space-between; font-weight: 800; font-size: 14px; color: var(--muted); padding-inline: 2px; }
.stats { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.stat { background: var(--paper); border: 2px solid var(--ink); border-radius: 18px; padding: 20px; display: grid; gap: 8px; align-content: start; }
.stat:nth-child(3n+1) { box-shadow: 0 6px 0 var(--yellow), 0 6px 0 2px var(--ink); }
.stat:nth-child(3n+2) { box-shadow: 0 6px 0 var(--pink), 0 6px 0 2px var(--ink); }
.stat:nth-child(3n) { box-shadow: 0 6px 0 var(--sky), 0 6px 0 2px var(--ink); }
.num { font-family: var(--display); font-size: 56px; line-height: 1; }
.stat p:not(.num) { font-size: 16.5px; }
.src { font-size: 13px; color: var(--muted); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gap-close { margin-top: 40px; display: grid; gap: 14px; max-width: 46em; }
.gap-close p { font-size: 18px; }
.gap-big { font-family: var(--display); font-size: clamp(26px, 3vw, 34px) !important; line-height: 1.2; }

@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .tl-labels { height: 62px; }
  .tl-tag { font-size: 12.5px; max-width: 38vw; padding: 4px 7px; }
  .tl-tag b { font-size: 17px; }
  .tl-band span { font-size: 16px; }
  .tl-long { display: none; }
  .tl-band { padding-left: 10px; }
  .tl-ages { font-size: 11px; }
  .num { font-size: 48px; }
}

/* ---------- motion + live demos */
.top-nav { display: flex; align-items: center; gap: 18px; }
.nav-link { font-weight: 800; font-size: 16px; text-decoration: none; padding: 6px 2px; border-bottom: 2.5px solid transparent; }
.nav-link:hover, .nav-link[aria-current="page"] { border-bottom-color: var(--yellow); }

/* scroll reveal (only when the script runs and motion is OK) */
.anim .rv { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0ms); }
.anim .rv.in { opacity: 1; transform: none; }
.anim .shot.rv.in:nth-child(1) .phone { animation: settleL .8s cubic-bezier(.2,.8,.2,1) both; }
.anim .shot.rv.in:nth-child(3) .phone { animation: settleR .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes settleL { from { transform: rotate(-6deg); } to { transform: rotate(-1.5deg); } }
@keyframes settleR { from { transform: rotate(6deg); } to { transform: rotate(1.5deg); } }

/* the age line fills in */
.anim .timeline .tl-band { width: 0; transition: width 1.5s cubic-bezier(.3,.7,.2,1) .2s; }
.anim .timeline.in .tl-band { width: 80%; }
.anim .timeline .tl-pin, .anim .timeline .tl-tag { opacity: 0; transition: opacity .4s ease; }
.anim .timeline.in .tl-pin, .anim .timeline.in .tl-tag { opacity: 1; }
.anim .timeline.in .tl-pin:nth-of-type(1), .anim .timeline.in .tl-top .tl-tag:nth-child(1) { transition-delay: .7s; }
.anim .timeline.in .tl-pin:nth-of-type(2), .anim .timeline.in .tl-bottom .tl-tag { transition-delay: 1.05s; }
.anim .timeline.in .tl-pin:nth-of-type(3), .anim .timeline.in .tl-top .tl-tag:nth-child(2) { transition-delay: 1.45s; }

/* hover life */
.rule, .stat { transition: translate .18s ease, rotate .18s ease, box-shadow .18s ease, opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.rule:hover { translate: 0 -4px; rotate: -.4deg; box-shadow: 0 6px 0 var(--ink); }
.rule:hover .chip { animation: wiggle .5s ease; }
.stat:hover { translate: 0 -4px; }
@keyframes wiggle { 25% { transform: rotate(-10deg); } 50% { transform: rotate(8deg) scale(1.08); } 75% { transform: rotate(-4deg); } }
.party-strip img, .games img { transition: transform .25s ease; }
.party-strip img:hover, .games img:hover { transform: scale(1.04) rotate(0deg) !important; }

/* Blocky in the hero says hi */
.blocky-peek { background: none; border: 0; padding: 0; cursor: pointer; z-index: 2; }
.blocky-peek img { width: 100%; height: auto; display: block; }
.blocky-peek.hop { animation: hop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes hop { 0% { transform: rotate(-8deg); } 40% { transform: rotate(4deg) translateY(-26px) scale(1.06); } 100% { transform: rotate(-8deg); } }
.say:empty { display: none; }
.say {
  position: absolute; left: 70%; bottom: 96%; width: max-content; max-width: 180px;
  font-family: var(--display); font-size: 20px; line-height: 1.1; color: var(--ink);
  background: var(--card); border: 2px solid var(--ink); border-radius: 14px 14px 14px 4px; padding: 6px 12px;
  animation: popIn .25s ease both;
}
@keyframes popIn { from { opacity: 0; transform: scale(.7) translateY(6px); } to { opacity: 1; transform: none; } }

/* "try it" pill */
.try { margin: 28px auto 0; width: max-content; max-width: 100%; display: flex; gap: 10px; align-items: center; font-weight: 800; font-size: 15px;
  background: var(--card); border: 2px solid var(--ink); border-radius: 999px; padding: 7px 16px; }
.try-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--heart); border: 1.5px solid var(--ink); flex: none; animation: blink 1.2s ease-in-out infinite; }
.phones { margin-top: 28px; }

/* buttons inside the phone demos */
.screen button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.like { position: relative; background: none; border: 0; padding: 0; font-weight: 600; color: var(--heart) !important; display: inline-flex; gap: 3px; align-items: center; }
.like .hrt { font-size: 15px; line-height: 1; }
.pop { animation: pop .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { 50% { transform: scale(1.35); } }
.float-heart { position: absolute; left: 2px; top: -2px; pointer-events: none; color: var(--heart); font-size: 14px; animation: floatUp 1.2s ease-out both; }
@keyframes floatUp { from { opacity: 1; transform: translate(0, 0) scale(.8); } to { opacity: 0; transform: translate(var(--x), -70px) scale(1.4); } }
.pick button { text-align: left; background: var(--card); border: 2px solid var(--ink); border-radius: 12px; padding: 8px 10px; font-weight: 500; box-shadow: 0 3px 0 var(--ink); transition: transform .08s ease, box-shadow .08s ease, background .15s ease; }
.pick button:hover { background: #fff7d1; }
.pick button:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.pick button.on { background: var(--green); }
.pick span:nth-child(3) { background: var(--card); }
.stickers button { width: 44px; height: 44px; display: grid; place-items: center; font-size: 22px; border: 2px solid var(--ink); border-radius: 12px; background: var(--card); padding: 0; }
.stickers button:hover { background: #fff7d1; }
.points.bump { animation: bump .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes bump { 40% { transform: scale(1.06) rotate(-1deg); } }
.ring-fill { transition: stroke-dashoffset .9s linear; }
.yn button { font-weight: 700; border: 2px solid var(--ink); border-radius: 10px; padding: 5px; box-shadow: 0 3px 0 var(--ink); transition: transform .08s ease, box-shadow .08s ease; }
.yn button:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.yn-done { background: var(--card); border: 2px solid var(--ink); border-radius: 10px; padding: 7px 9px; font-size: 12.5px; font-weight: 500; }
.yn-done b { font-weight: 700; }
.again { display: block; margin-top: 5px; background: none; border: 0; padding: 0; font-size: 12px !important; font-weight: 700 !important; text-decoration: underline; color: var(--muted) !important; }
.step { display: inline-flex; align-items: center; gap: 6px; padding: 1px 4px !important; }
.step button { background: none; border: 0; padding: 0 5px; font-weight: 700; font-size: 14px; line-height: 1.2; }
.step b { display: inline-block; min-width: 10px; text-align: center; }
.tog { padding: 0; cursor: pointer; transition: background .2s ease; }
.tog::after { transition: left .2s ease, right .2s ease; }
.screen button:focus-visible { outline: 3px solid var(--heart); outline-offset: 2px; }
.more-link { justify-self: start; margin-top: 6px; }

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

/* ---------- resources page */
.res-hero { padding-block: 56px 32px; display: grid; gap: 16px; }
.res-hero h1 { font-size: clamp(44px, 6vw, 64px); }
.res-hero p { font-size: 19px; max-width: 40em; }
.res-group { padding-block: 24px 40px; display: grid; gap: 20px; }
.res-group h2 { display: flex; align-items: center; gap: 12px; }
.res-group > p { font-size: 17px; max-width: 42em; color: #3f3c38; }
.res-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.res {
  background: var(--card); border: 2px solid var(--ink); border-radius: 18px; padding: 20px; display: grid; gap: 8px; align-content: start;
  text-decoration: none; color: var(--ink); box-shadow: 0 5px 0 var(--ink); transition: transform .15s ease, box-shadow .15s ease;
}
.res:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--ink); }
.res:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.res .who { font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.res h3 { font-size: 25px; }
.res p { font-size: 16px; color: #3f3c38; }
.res .go { font-weight: 800; font-size: 15px; margin-top: 4px; }
.res .go::after { content: " ↗"; }
.res-note { background: var(--sky); border: 2px solid var(--ink); border-radius: 18px; padding: 20px 22px; font-size: 16px; display: grid; gap: 8px; margin-block: 8px 64px; }
.res-tag { display: inline-block; font-family: var(--body); font-size: 13px; font-weight: 800; background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 999px; padding: 2px 10px; vertical-align: middle; }
@media (max-width: 760px) { .res-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Blocky's closet: costumes change the page, like the app */
body, .mission, .inside, .gap, .foot, .top, body::before, .rule, .stat, .res, .signup { transition: background-color .5s ease; }
.head-blocky { cursor: pointer; transition: transform .15s ease; }
.head-blocky:hover { transform: rotate(-6deg) scale(1.06); }
.brand img.is-dressed { width: 50px; height: auto; margin: -8px -7px -6px -9px; }
.blocky-peek.is-dressed { width: 31%; left: -10%; bottom: -10%; }

.closet {
  position: fixed; z-index: 40;
  top: calc(env(safe-area-inset-top, 0px) + 72px);
  left: max(16px, env(safe-area-inset-left, 0px));
  width: min(420px, calc(100vw - 32px)); max-height: min(72vh, 640px); overflow: auto;
  background: var(--card); border: 2.5px solid var(--ink); border-radius: 22px;
  box-shadow: 6px 8px 0 var(--ink); padding: 14px 16px 16px;
}
.closet.pop { animation: popIn .22s ease both; }
.closet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.closet-title { font-family: var(--display); font-size: 28px; line-height: 1; }
.closet-x { font: inherit; font-weight: 800; width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--ink);
  background: var(--paper); color: var(--ink); cursor: pointer; }
.closet-sub, .closet-more { font-size: 14px; color: var(--muted); margin-top: 4px; }
.closet-more { margin-top: 10px; }
.closet-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.cos {
  font: inherit; color: var(--ink); cursor: pointer; display: grid; justify-items: center; gap: 2px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; padding: 6px 4px 7px;
  transition: transform .12s ease, box-shadow .12s ease, background-color .2s ease;
}
.cos:hover { transform: translateY(-2px); box-shadow: 0 3px 0 var(--ink); }
.cos[aria-pressed="true"] { background: var(--yellow); box-shadow: 0 3px 0 var(--ink); }
.cos-pic img { display: block; width: 64px; height: 64px; }
.cos-name { font-weight: 800; font-size: 12.5px; line-height: 1.15; text-align: center; }
.cos:focus-visible, .closet-x:focus-visible { outline: 3px solid var(--heart); outline-offset: 2px; }

/* the "Dress up Blocky" section */
.dressup { padding-block: 72px; background: var(--sky); border-block: 2px solid var(--ink); }
.dress-grid-wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; align-items: start; margin-top: 32px; }
.dress-copy { display: grid; gap: 14px; min-width: 0; }
.dress-copy > p { font-size: 18px; max-width: 34em; }
.dress-stage {
  position: relative; display: grid; justify-items: center; gap: 6px; padding: 18px 16px 20px;
  background: var(--card); border: 2.5px solid var(--ink); border-radius: 24px; box-shadow: 8px 10px 0 var(--ink);
}
.dress-stage img { width: min(230px, 60vw); height: auto; }
.dress-stage.hop { animation: hopStage .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes hopStage { 40% { transform: translateY(-10px) rotate(-1deg); } }
.dress-name { font-family: var(--display); font-size: 30px; line-height: 1; }
.dress-tag { font-weight: 700; color: var(--muted); }
.dress-right { display: grid; gap: 14px; min-width: 0; }
.dress-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.dress-grid .cos-pic img { width: 76px; height: 76px; }
.dress-grid .cos-name { font-size: 13px; }

.dress-right .try { margin: 0; width: auto; justify-self: start; }
@media (max-width: 900px) {
  .dress-grid-wrap { grid-template-columns: minmax(0, 1fr); }
  .blocky-peek.is-dressed { width: 26%; left: -4%; }
}
@media (max-width: 560px) {
  .closet { top: auto; bottom: max(12px, env(safe-area-inset-bottom, 0px)); left: 12px; right: 12px; width: auto; max-height: 64vh; }
  .dress-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .dress-grid .cos-pic img { width: 64px; height: 64px; }
}

/* ---------- costume worlds behind the page (scene.js) */
#scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.scene-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.scene-layer.on { opacity: 1; }
.scene-layer.now { transition: none; }
.scene-layer .fixed { position: absolute; }
.scene-layer .absolute { position: absolute; }
.scene-layer .inset-0 { inset: 0; }
.scene-layer .w-full { width: 100%; }
.scene-layer .h-full { height: 100%; }
.scene-layer .h-auto { height: auto; }
.scene-layer .bottom-0 { bottom: 0; }
.scene-layer .left-0 { left: 0; }
.scene-layer .rounded-full { border-radius: 9999px; }
.scene-layer .overflow-hidden { overflow: hidden; }
.scene-layer .flex { display: flex; }
.scene-layer .items-center { align-items: center; }
.scene-layer .justify-center { justify-content: center; }
.scene-layer .whitespace-nowrap { white-space: nowrap; }
.scene-layer .font-serif { font-family: var(--display); }
.scene-layer .font-bold { font-weight: 700; }
.scene-layer .left-1\/2 { left: 50%; }
.scene-layer .-translate-x-1\/2 { transform: translateX(-50%); }
.scene-layer svg { display: block; overflow: visible; }

/* ---------- dressed up: the page works like the app. The costume's world is behind everything,
   and each part of the page sits on a card in front of it. */
main, .foot { position: relative; z-index: 1; }
html.dressed { background: var(--paper); }
.dressed body { background: transparent; }
.dressed .top, .dressed body::before { background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dressed main > section, .dressed .foot { background: transparent; border-block: 0; padding-block: clamp(18px, 4vw, 44px); }
.dressed main > section:first-child { padding-top: clamp(40px, 9vw, 110px); }
.dressed .foot { padding-bottom: 32px; }
.dressed main > section > .wrap, .dressed .foot > .wrap {
  width: min(1080px, calc(100% - clamp(32px, 10vw, 140px)));
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  border: 2.5px solid var(--ink); border-radius: 28px;
  box-shadow: 6px 8px 0 rgba(43, 42, 40, .85);
  padding-block: 40px;
  padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px));
}
.dressed .foot > .wrap { padding-block: 20px; }
.dressed .hero > .wrap { padding-block: 36px 48px; }
.dressed .dress-stage, .dressed .signup, .dressed .grownup { background: var(--card); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@media (max-width: 560px) {
  .dressed main > section > .wrap, .dressed .foot > .wrap {
    width: calc(100% - 20px); border-radius: 22px; box-shadow: 4px 5px 0 rgba(43, 42, 40, .85);
    padding-block: 28px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .dressed main > section, .dressed .foot { padding-block: 16px; }
  .dressed main > section:first-child { padding-top: 48px; }
}

/* ---------- phones, dressed up: more of the costume's world showing, and a few things drifting in front */
#scene-front { position: fixed; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; }
#scene-front:empty { display: none; }
@media (max-width: 700px) {
  .dressed main > section, .dressed .foot { padding-block: 22px; }
  .dressed main > section:first-child { padding-top: 132px; }
  .dressed main > section > .wrap, .dressed .foot > .wrap {
    width: calc(100% - 36px);
    /* frosted glass: the costume's world glows through, the words stay easy to read */
    background: color-mix(in srgb, var(--paper) 74%, transparent);
    -webkit-backdrop-filter: blur(7px) saturate(1.2); backdrop-filter: blur(7px) saturate(1.2);
  }
  .dressed #scene { top: 58px; }
  .dressed .foot { padding-bottom: 150px; }
}

/* tablets and phones */
@media (max-width: 900px) {
  .hero-grid, .beta-grid, .mission-grid, .peek { grid-template-columns: minmax(0, 1fr); }
  .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signup { position: static; }
  .blocky-peek { width: 18%; left: -2%; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .rules { grid-template-columns: minmax(0, 1fr); }
  .games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .party-strip img:nth-child(2) { transform: none; }
  .party-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hero { padding-block: 28px 48px; }
  .lead, .mission-copy, .section-lead { font-size: 18px; }
  .brand { font-size: 28px; }
  .signup { padding: 20px; box-shadow: 5px 6px 0 var(--ink); }
}