/* Bloopsie landing page. The look is the app's "chunky stickers"
 * (DesignSystem/ in ios/): flat brights, thick ink outlines and hard ink
 * shadows. A web box-shadow with no blur is the same offset copy of the shape
 * the app draws by hand. */

@font-face {
  /* Only used where SF Rounded isn't (ui-rounded is Safari's). */
  font-family: "Nunito";
  src: url("fonts/nunito.woff2") format("woff2");
  font-weight: 600 1000;
  font-display: swap;
}

/* Tokens from BloopColor.swift, light palette only. The site stays light even
 * when the device is in dark mode, because the dark one was hard to see
 * (owner ask, 2026-10-28). */
:root {
  color-scheme: light;
  --paper: #FFF4E6;
  --card: #FFFFFF;
  --card-alt: #FFF0DC;
  --ink: #1B1530;
  --text: #1B1530;
  --text-soft: #6B6385;
  --on-bright: #1B1530;

  --purple: #8B5CF6;
  --coral: #FF6B6B;
  --teal: #2DD4BF;
  --yellow: #FFD43B;
  --pink: #FF8FC7;
  --green: #7BE495;
  --blue: #60A5FA;
  --orange: #FFA94D;
  --lavender: #C4B5FD;
  --peach: #FFC6A5;
  --heart: #FF4D6D;

  /* Action category highlighters (ActionCategory.color). */
  --c-gassy: #7BE495;
  --c-food: #FFA94D;
  --c-sleepy: #C4B5FD;
  --c-gaming: #8B5CF6;
  --c-school: #2DD4BF;
  --c-music: #FF6B6B;
  --c-moves: #FF8FC7;
  --c-sporty: #7CC8FF;
  --c-awkward: #FDA4AF;
  --c-pets: #FFC6A5;
  --c-feelings: #F0ABFC;
  --c-cravings: #FCD34D;

  /* The app icon's background (make-app-icon.swift). */
  --brand: linear-gradient(135deg, #8B5CF6 0%, #C86BD8 55%, #FF6B6B 100%);
  /* The besties celebration (BestiesCelebration.swift). */
  --bestie: linear-gradient(135deg, #FF8FC7, #8B5CF6);

  --font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --gutter: 16px;
}

@media (min-width: 700px) {
  :root { --gutter: 28px; }
}

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

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

html[data-motion="full"] {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  font-weight: 600;
  line-height: 1.45;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.01em;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 4px;
  border-radius: 12px;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.wrap {
  width: min(1140px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* The action on a highlighter swipe of its category color (SentenceText). */
mark {
  padding: 0 .14em;
  border-radius: .2em;
  background: var(--tint, var(--yellow));
  color: var(--on-bright);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- Stickers, chips, buttons (Sticker.swift) ---- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .42em .9em;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform .25s var(--spring), box-shadow .25s var(--spring), background-color .2s;
}

.chip.is-on {
  background: var(--tint, var(--yellow));
  color: var(--on-bright);
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink);
}

.chunky {
  display: block;
  padding: .75em 1em;
  border: 3px solid var(--ink);
  border-radius: 20px;
  background: var(--purple);
  color: #fff;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 6px 0 var(--ink);
  transition: transform .16s var(--spring), box-shadow .16s var(--spring);
}

.soon {
  display: inline-block;
  padding: 6px 12px;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  background: var(--yellow);
  color: var(--on-bright);
  font-weight: 900;
  box-shadow: 2px 3px 0 var(--ink);
  transform: rotate(-6deg);
}

[data-motion="full"] .soon {
  animation: wiggle 3.2s ease-in-out infinite;
}

/* ---- Blobs (blob.js draws them) ---- */

.av {
  display: inline-block;
}

.av .blob {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.blob .i { fill: var(--ink); }
.blob .s { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.blob .k { stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }

/* Every emoji is the app's hand-drawn art (emoji.js), as big as the glyph it
 * replaces: a little over 1em, dipping below the baseline like Apple's. */
img.emoji {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin: 0 .02em;
  vertical-align: -.22em;
}

.blob .blink,
.blob.is-blinking .eyes {
  display: none;
}

.blob.is-blinking .blink {
  display: inline;
}

.blob .fig {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.blob .fx {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* Idle bounce and effect float (BlobAvatarView), for big single blobs. */
[data-motion="full"] .blob.is-alive .fig {
  animation: idle 2.2s ease-in-out infinite;
}

[data-motion="full"] .blob.is-alive .fx {
  animation: float 1.8s ease-in-out infinite;
}

/* ---- Header ---- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
}

.wordmark {
  color: var(--text);
  font-size: 1.85rem;
  font-weight: 900;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark.small {
  font-size: 1.35rem;
}

/* Googly eyes for the two o's (Wordmark.swift). */
/* Sizes are the app's: a 25pt eye on 34pt type, an ink rim of 0.12 of the
 * eye, a pupil of 0.42, and a glance of up to 0.38 of the eye. */
.eye {
  display: inline-block;
  position: relative;
  width: .72em;
  height: .72em;
  margin: 0 .01em;
  border: .086em solid var(--ink);
  border-radius: 50%;
  background: #fff;
}

.eye i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: .3em;
  height: .3em;
  margin: -.15em 0 0 -.15em;
  border-radius: 50%;
  background: var(--ink);
  transform: translate(calc(var(--lx, .25) * .27em), calc(var(--ly, .3) * .27em));
  transition: transform .25s var(--spring);
}

.badge {
  display: inline-block;
  border-radius: 10px;
  flex: none;
}

.badge img {
  display: block;
  width: auto;
  height: 52px;
}

.badge-top img {
  height: 40px;
}

/* The header's badge and sticker: the page's first App Store link, since the hero has none (owner
   ask, 2026-10-30). On a phone the sticker doesn't fit beside the wordmark, so the badge goes alone,
   and a tap on it still shows the coming-soon toast. */
.top .get {
  gap: 12px;
  margin-top: 0;
}

.top .soon {
  font-size: .9rem;
}

@media (max-width: 699px) {
  .top .soon { display: none; }
}

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

.hero {
  display: grid;
  grid-template-areas: "copy" "stage" "steps";
  gap: 28px;
  padding-block: 12px 72px;
}

@media (min-width: 940px) {
  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    grid-template-areas: "copy stage" "steps stage";
    grid-template-rows: auto 1fr;
    column-gap: 56px;
    row-gap: 32px;
    padding-block: 32px 104px;
  }
}

.hero-copy {
  grid-area: copy;
  align-self: end;
}

.hero h1 {
  font-size: clamp(2.5rem, 6.6vw, 4.5rem);
}

/* Desktop keeps the first sentence on two lines, "Tell your squad / what you’re up to.", never a
   third with "to." alone (owner ask, 2026-10-30). The size is the copy column (.525 of the wrap less
   the 56px gap, so change it with the grid) over 9.25em. "what you’re up to." is about 8.7em in
   Nunito and SF Rounded alike, which leaves about 6% to spare at every two-column width. Pretty
   wrapping breaks the mark as "No typing. / Just chaos." rather than leaving "chaos." alone. */
@media (min-width: 940px) {
  .hero h1 {
    font-size: calc((min(1140px, 100vw - 56px) - 56px) * .525 / 9.25);
    text-wrap: pretty;
  }
}

.hero h1 mark {
  display: inline-block;
  margin-top: .12em;
  padding: 0 .16em .04em;
  transform: rotate(-1.5deg);
}

.lede {
  max-width: 34ch;
  margin-top: 20px;
  color: var(--text-soft);
  font-size: clamp(1.08rem, 2.1vw, 1.28rem);
  font-weight: 700;
}

.lede q {
  color: var(--text);
  font-weight: 900;
}

.get {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 26px;
}

.steps {
  grid-area: steps;
  display: grid;
  gap: 10px;
  align-content: start;
  max-width: 31rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 12px;
  padding: 10px 14px;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  background: color-mix(in srgb, var(--step) 18%, var(--card));
  box-shadow: 3px 4px 0 var(--ink);
  counter-increment: step;
  transition: transform .35s var(--spring), background-color .25s;
}

.steps li::before {
  content: counter(step);
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--step);
  color: var(--on-bright);
  font-weight: 900;
  box-shadow: 2px 3px 0 var(--ink);
  transform: rotate(-8deg);
}

/* A color for each step, the way the safety tiles have one each (owner ask, 2026-10-30). */
.steps li:nth-child(1) { --step: var(--teal); }
.steps li:nth-child(2) { --step: var(--pink); }
.steps li:nth-child(3) { --step: var(--lavender); }

.step-heart {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.12em;
  fill: var(--heart);
}

.steps b {
  font-size: 1.06rem;
  font-weight: 900;
}

.steps li > span {
  color: var(--text-soft);
  font-size: .95rem;
}

.steps li.is-on {
  background: var(--yellow);
  color: var(--on-bright);
  transform: translateX(8px) rotate(-1deg);
}

.steps li.is-on::before {
  color: var(--on-bright);
}

.steps li.is-on > span {
  color: var(--on-bright);
}

/* The composer's own chips, as the app draws them, on one line (owner ask, 2026-10-30). The row is
   one chip tall and clips the rest, so a chip that doesn't fit wraps out of sight instead of
   starting a second line: a phone shows the first two, a wider screen all three. The picked chip
   comes first so it always shows. While a step is lit, the picked chip turns white, so it doesn't
   vanish into the yellow. */
.step-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3em 8px;
  height: calc(2.6em + 6px);
  margin-top: 6px;
  overflow: hidden;
  font-size: .9rem;
}

/* Each chip gets a set height and the row that plus room for the shadow, so the clip only ever
   hides whole chips, in any font. Left to flex, the chips stretched to fill the row whenever all
   three fit on one line, and the clip cut off their shadows and the picked chip's bottom edge.
   2.6em is about the height the padding gave them, and the chip's align-items centers the words
   and the emoji art. */
.step-chips .chip {
  height: 2.6em;
  padding-block: 0;
}

.steps li.is-on .chip.is-on {
  background: var(--card);
}

/* Sized to the phone, so the card hugs it whatever the column height. */
.stage {
  grid-area: stage;
  position: relative;
  justify-self: center;
  align-self: center;
  padding: 36px clamp(24px, 6vw, 52px) 44px;
}

.stage-card {
  position: absolute;
  inset: 0;
  border: 3px solid var(--ink);
  border-radius: 40px;
  background: var(--brand);
  box-shadow: 6px 8px 0 var(--ink);
  transform: rotate(-3deg);
}

.spark {
  position: absolute;
  width: 34px;
  height: 34px;
}

.spark-1 { top: 7%; left: 9%; fill: var(--yellow); width: 44px; height: 44px; }
.spark-2 { top: 46%; left: 5%; fill: #fff; opacity: .85; width: 22px; height: 22px; }
.spark-3 { top: 58%; right: 7%; fill: #5EEAD4; }
.spark-4 { bottom: 8%; right: 16%; fill: #fff; opacity: .85; width: 20px; height: 20px; }

[data-motion="full"] .spark {
  animation: twinkle 2.6s ease-in-out infinite;
}

[data-motion="full"] .spark-2 { animation-delay: -.7s; }
[data-motion="full"] .spark-3 { animation-delay: -1.4s; }
[data-motion="full"] .spark-4 { animation-delay: -2s; }

/* ---- The phone ---- */

.phone {
  position: relative;
  width: min(318px, 80vw);
  aspect-ratio: 318 / 660;
  padding: 8px;
  border: 3px solid var(--ink);
  border-radius: 50px;
  background: #1B1530;
  box-shadow: 6px 8px 0 var(--ink);
  transform: rotate(2deg);
  container-type: inline-size;
}

.screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 41px;
  background: var(--paper);
  color: var(--text);
  font-size: 4cqw;
  line-height: 1.3;
}

.island {
  position: absolute;
  top: .75em;
  left: 50%;
  z-index: 6;
  width: 7.2em;
  height: 2.05em;
  border-radius: 99px;
  background: #000;
  transform: translateX(-50%);
}

.status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3.6em;
  padding: 0 2.2em;
  font-size: .95em;
  font-weight: 900;
}

.battery {
  position: relative;
  width: 1.9em;
  height: .95em;
  border: .14em solid var(--text);
  border-radius: .3em;
}

.battery::after {
  content: "";
  position: absolute;
  inset: .12em .5em .12em .12em;
  border-radius: .12em;
  background: var(--text);
}

.feed {
  padding: 0 .85em;
  transition: transform .5s cubic-bezier(.32, .72, 0, 1), opacity .5s;
}

.screen:has(.sheet.is-up) .feed {
  opacity: .45;
  transform: scale(.94);
}

.feed-head {
  margin: .1em 0 .8em;
  font-size: 1.5em;
  font-weight: 900;
  text-align: center;
}

.screen .card {
  margin-bottom: .95em;
  font-size: .86em;
}

.slot {
  max-height: 0;
  opacity: 0;
  transition: max-height .5s cubic-bezier(.32, .72, 0, 1), opacity .3s;
}

.slot.is-open {
  max-height: 14em;
  opacity: 1;
}

.slot .card {
  transform: translateY(-.8em) scale(.92);
  transition: transform .5s var(--spring);
}

.slot.is-open .card {
  transform: none;
}

/* The composer sheet (ComposerView.swift). */
.sheet {
  position: absolute;
  inset: 3.1em 0 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: .62em;
  padding: .55em 1em 1.1em;
  border-top: .16em solid var(--ink);
  border-radius: 1.7em 1.7em 0 0;
  background: var(--paper);
  transform: translateY(104%);
  transition: transform .55s cubic-bezier(.32, .72, 0, 1);
}

.sheet.is-up {
  transform: none;
}

.grabber {
  width: 2.8em;
  height: .32em;
  margin: 0 auto;
  border-radius: 99px;
  background: var(--text-soft);
  opacity: .5;
}

.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.05em;
}

.sheet-head b {
  font-weight: 900;
}

.me {
  display: grid;
  place-items: center;
}

.me .av {
  width: 7.6em;
  height: 7.6em;
  margin-top: .3em;
}

.draft {
  min-height: 2.7em;
  font-size: 1.42em;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
}

.draft-lead {
  color: var(--text-soft);
}

.draft-phrase.is-set {
  display: inline-block;
  padding: 0 .14em;
  border-radius: .2em;
  background: var(--tint);
  color: var(--on-bright);
}

.draft-lead.is-new,
.draft-phrase.is-new {
  display: inline-block;
  animation: pop .45s var(--spring);
}

/* The spice stays inline so it wraps like the rest of the sentence. */
.draft-spice.is-new {
  animation: fade .4s ease-out;
}

/* Two lines held open, so the chips don't jump when it wraps. */
.sees {
  min-height: 2.6em;
  color: var(--text-soft);
  font-size: .84em;
  font-weight: 800;
  text-align: center;
}

.sees.is-hidden {
  visibility: hidden;
}

.sheet .chips {
  display: flex;
  flex-wrap: wrap;
  gap: .55em .4em;
  font-size: .92em;
}

.sheet .chip {
  padding: .4em .75em;
  border-width: .15em;
  box-shadow: 0 .2em 0 var(--ink);
}

.sheet .chip.is-on {
  box-shadow: 0 .06em 0 var(--ink);
}

.chip.is-tapped {
  animation: tap .34s var(--spring);
}

.label {
  margin-bottom: -.2em;
  color: var(--text-soft);
  font-size: .8em;
  font-weight: 900;
}

.label b {
  color: var(--text);
}

.post {
  margin-top: auto;
  padding: .7em;
  border-width: .16em;
  border-radius: .9em;
  font-size: 1.3em;
  box-shadow: 0 .3em 0 var(--ink);
}

.post.is-pressed {
  transform: translateY(.26em);
  box-shadow: 0 .04em 0 var(--ink);
}

.ptoast {
  position: absolute;
  top: 3.5em;
  left: .8em;
  right: .8em;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .6em;
  padding: .5em .8em;
  border: .15em solid var(--ink);
  border-radius: 1.3em;
  background: var(--card);
  font-size: .9em;
  font-weight: 800;
  box-shadow: 0 .25em 0 var(--ink);
  opacity: 0;
  transform: translateY(-170%) scale(.8);
  transition: transform .45s var(--spring), opacity .3s;
}

.ptoast.is-in {
  opacity: 1;
  transform: none;
}

.ptoast .av {
  flex: none;
  width: 2.3em;
  height: 2.3em;
}

.ptoast-text {
  flex: 1;
}

.confetti {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.confetti span,
.burst {
  position: absolute;
  pointer-events: none;
}

.burst {
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  font-size: 1.4rem;
  line-height: 1;
}

/* The heart burst comes off the heart, not the middle of the capsule. */
.hearts .burst {
  left: 1.1em;
  font-size: .75em;
}

.confetti span {
  bottom: -1.5em;
  font-size: 1.7em;
}

/* ---- Feed cards (BloopCard.swift) ---- */

.card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .75em;
  padding: .9em;
  border: .16em solid var(--ink);
  border-radius: 1.4em;
  background: var(--card);
  box-shadow: .19em .31em 0 var(--ink);
  text-align: left;
}

.card .av {
  flex: none;
  width: 3.3em;
  height: 3.3em;
}

.card-body {
  flex: 1;
  display: grid;
  gap: .7em;
  min-width: 0;
}

.sentence {
  padding-right: 1.3em;
  font-size: 1.12em;
  font-weight: 900;
  line-height: 1.3;
}

.sentence .lead {
  color: var(--text-soft);
}

.sentence.is-revealed {
  animation: reveal .5s var(--spring) both;
  transform-origin: left center;
}

.typing {
  display: inline-flex;
  gap: .25em;
  margin-left: .2em;
  vertical-align: middle;
}

.typing i {
  width: .42em;
  height: .42em;
  border-radius: 50%;
  background: var(--text-soft);
  animation: dots .32s ease-in-out infinite alternate;
}

.typing i:nth-child(2) { animation-delay: .1s; }
.typing i:nth-child(3) { animation-delay: .2s; }

.card-foot {
  display: flex;
  align-items: center;
  gap: .5em;
}

.card .chip {
  padding: .28em .7em;
  border-width: .13em;
  font-size: .88em;
  box-shadow: 0 .19em 0 var(--ink);
}

.hearts {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .28em .75em .28em .6em;
  border: .13em solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  font-size: .9em;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 .19em 0 var(--ink);
}

.hearts svg {
  width: 1.05em;
  height: 1.05em;
  fill: var(--heart);
}

.ago {
  margin-left: auto;
  color: var(--text-soft);
  font-size: .78em;
  font-weight: 800;
  white-space: nowrap;
}

/* The action's emoji on a round sticker, slapped on the corner. */
.corner {
  position: absolute;
  top: -.62em;
  right: -.35em;
  display: grid;
  place-items: center;
  width: 1.95em;
  height: 1.95em;
  border: .12em solid var(--ink);
  border-radius: 50%;
  background: var(--tint);
  font-size: 1.28em;
  line-height: 1;
  box-shadow: .1em .15em 0 var(--ink);
  transform: rotate(10deg);
}

/* ---- Sections ---- */

.section-head {
  display: grid;
  gap: 10px;
  margin-bottom: 30px;
}

.section-head h2 {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
}

.section-head p {
  max-width: 46ch;
  color: var(--text-soft);
  font-size: 1.12rem;
  font-weight: 700;
}

.squad,
.besties,
.safe {
  padding-bottom: 96px;
}

.ticker {
  display: grid;
  gap: 8px;
  padding: 20px 0 30px;
  overflow: hidden;
}

[data-motion="full"] .ticker {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.ticker-row {
  display: flex;
  align-items: flex-start;
  width: max-content;
  padding-block: 14px;
}

/* Without motion the rows just scroll sideways. */
html:not([data-motion="full"]) .ticker-row {
  width: auto;
  overflow-x: auto;
  padding-inline: var(--gutter);
}

/* Margins, not gap, so a row is exactly two copies wide and -50% loops. */
.ticker .card {
  flex: none;
  width: 330px;
  margin-right: 24px;
  font-size: 15px;
}

.ticker .card:nth-child(odd) { transform: rotate(-1.2deg); }
.ticker .card:nth-child(even) { transform: rotate(1deg); }

[data-motion="full"] .ticker-row {
  animation: drift 70s linear infinite;
}

[data-motion="full"] .ticker-row.reverse {
  animation-direction: reverse;
  animation-duration: 80s;
}

.panels {
  display: grid;
  gap: 24px;
}

@media (min-width: 820px) {
  .panels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.panel {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px 18px 24px;
  border: 2.5px solid var(--ink);
  border-radius: 26px;
  background: var(--card);
  box-shadow: 4px 6px 0 var(--ink);
}

.panel:nth-child(1) { transform: rotate(-1deg); }
.panel:nth-child(2) { transform: rotate(.6deg); }
.panel:nth-child(3) { transform: rotate(-.5deg); }

.panel h3 {
  margin-top: 6px;
  font-size: 1.45rem;
}

.panel > p:last-child {
  color: var(--text-soft);
  font-weight: 700;
}

.scene {
  position: relative;
  display: grid;
  place-items: center;
  height: 176px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: var(--card-alt);
}

.poke {
  grid-template-columns: auto 1fr auto;
  gap: 4px;
  padding: 0 18px;
}

.poke .av {
  width: 78px;
  height: 78px;
}

.finger {
  justify-self: center;
  font-size: 36px;
  line-height: 1;
}

.war {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  padding: 6px 12px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--lavender);
  color: var(--on-bright);
  font-weight: 900;
  box-shadow: 0 3px 0 var(--ink);
}

.war.is-yours {
  background: var(--yellow);
}

.flame {
  display: inline-block;
}

[data-motion="full"] .war.is-yours .flame {
  animation: flame .5s ease-in-out infinite alternate;
}

.notes {
  perspective: 600px;
}

.note {
  position: relative;
  width: min(84%, 260px);
  padding: 12px 14px 10px 32px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background-color: #FFFDF6;
  background-image: repeating-linear-gradient(transparent 0 23px, #C9DCFF 23px 24px);
  background-position: 0 9px;
  color: #1B1530;
  box-shadow: 3px 4px 0 var(--ink);
  transform: rotate(-2deg);
  transform-origin: 50% 0;
}

.note::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 22px;
  width: 2px;
  background: #FF9AA2;
}

.note-text {
  min-height: 48px;
  /* Room for the emoji sticker over the top-right corner, so a first line
     that runs to the edge wraps instead of going under it. */
  padding-right: 18px;
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 24px;
}

.note-from {
  margin-top: 4px;
  color: #6B6385;
  font-size: .8rem;
  font-weight: 800;
}

.note-emoji {
  position: absolute;
  top: -16px;
  right: -12px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  font-size: 22px;
  line-height: 1;
  box-shadow: 1px 2px 0 var(--ink);
  transform: rotate(12deg);
}

.slots {
  display: flex;
  gap: 14px;
}

.pick {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border: 2.5px dashed var(--text-soft);
  border-radius: 22px;
}

.pick.is-filled {
  border-color: transparent;
}

.slots .av {
  width: 66px;
  height: 66px;
}

.mutual {
  position: absolute;
  inset: 12px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background: var(--bestie);
  color: #fff;
  text-align: center;
  opacity: 0;
  transform: scale(.4);
  transition: transform .6s var(--spring), opacity .25s;
}

.mutual.is-in {
  opacity: 1;
  transform: none;
}

.mutual b {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: .01em;
  text-shadow: 2px 3px 0 var(--ink);
}

.mutual span {
  padding: 3px 10px;
  border: 2px solid var(--ink);
  border-radius: 99px;
  background: #fff;
  color: #1B1530;
  font-size: .85rem;
  font-weight: 800;
}

.tiles {
  display: grid;
  gap: 18px;
}

@media (min-width: 640px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.tile {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px;
  border: 2.5px solid var(--ink);
  border-radius: 22px;
  background: var(--card);
  box-shadow: 3px 5px 0 var(--ink);
}

.tile h3 {
  font-size: 1.2rem;
}

.tile p {
  color: var(--text-soft);
  font-weight: 700;
}

.tile-emoji {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  box-shadow: 2px 3px 0 var(--ink);
  transform: rotate(-8deg);
}

.tile:nth-child(1) .tile-emoji { background: var(--yellow); }
.tile:nth-child(2) .tile-emoji { background: var(--teal); }
.tile:nth-child(3) .tile-emoji { background: var(--lavender); }
.tile:nth-child(4) .tile-emoji { background: var(--pink); }

.cta {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding-block: 24px 88px;
  text-align: center;
  scroll-margin-top: 24px;
}

.cta h2 {
  font-size: clamp(2.3rem, 5.4vw, 3.6rem);
}

.cta > p {
  color: var(--text-soft);
  font-size: 1.12rem;
  font-weight: 700;
}

.cta .get {
  justify-content: center;
  margin-top: 10px;
}

.mascot {
  position: relative;
  width: 210px;
  height: 210px;
  margin-top: 28px;
}

.mascot .av {
  width: 100%;
  height: 100%;
}

/* The "…" bubble from the app icon, tail toward the blob. */
.thinking {
  position: absolute;
  top: 26px;
  right: -44px;
  display: flex;
  gap: 7px;
  padding: 14px 18px;
  border: 3px solid var(--ink);
  border-radius: 24px;
  background: #fff;
  box-shadow: 3px 4px 0 var(--ink);
}

.thinking::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 18px;
  width: 16px;
  height: 16px;
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  background: #fff;
  transform: rotate(45deg) skew(12deg, 12deg);
}

.thinking i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1B1530;
}

[data-motion="full"] .thinking i {
  animation: dots .32s ease-in-out infinite alternate;
}

[data-motion="full"] .thinking i:nth-child(2) { animation-delay: .1s; }
[data-motion="full"] .thinking i:nth-child(3) { animation-delay: .2s; }

.foot {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding-block: 28px 44px;
  color: var(--text-soft);
  font-size: .95rem;
  font-weight: 700;
  text-align: center;
}

/* ---- Privacy and terms (privacy/, terms/): one readable column under the header ---- */

.legal {
  padding-block: 12px 56px;
}

.legal > * {
  max-width: 46rem;
}

.legal h1 {
  font-size: clamp(2.2rem, 6vw, 3.1rem);
}

.legal .updated {
  margin-top: 10px;
  color: var(--text-soft);
  font-weight: 700;
}

.legal .short {
  margin-block: 24px 8px;
  padding: 16px 18px;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  background: var(--yellow);
  color: var(--on-bright);
  font-weight: 800;
  box-shadow: 3px 4px 0 var(--ink);
}

.legal h2 {
  margin-top: 36px;
  font-size: 1.4rem;
}

.legal p,
.legal li {
  margin-top: 10px;
  line-height: 1.55;
}

.legal ul {
  margin: 0;
  padding-left: 1.3em;
}

/* The app's sticker toast, for the App Store badge until there's a listing. */
.toast {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 10;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border: 2.5px solid var(--ink);
  border-radius: 20px;
  background: var(--card);
  color: var(--text);
  font-weight: 800;
  box-shadow: 3px 4px 0 var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -140%) scale(.8);
  transition: transform .4s var(--spring), opacity .25s, visibility 0s .4s;
}

.toast.is-in {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: transform .4s var(--spring), opacity .25s;
}

/* Sections off screen hold their loops. */
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after {
  animation-play-state: paused !important;
}

/* ---- Keyframes ---- */

@keyframes idle {
  0%, 100% { transform: scale(.99, 1.02); }
  50% { transform: scale(1.03, .97); }
}

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

@keyframes dots {
  from { opacity: .35; transform: translateY(0); }
  to { opacity: 1; transform: translateY(-4px); }
}

@keyframes tap {
  40% { scale: .9; }
}

@keyframes pop {
  from { opacity: 0; transform: scale(.6); }
}

@keyframes fade {
  from { opacity: 0; }
}

@keyframes reveal {
  from { opacity: 0; transform: scale(.8); }
}

@keyframes drift {
  to { transform: translateX(-50%); }
}

@keyframes wiggle {
  0%, 84%, 100% { transform: rotate(-6deg); }
  88% { transform: rotate(4deg) scale(1.06); }
  92% { transform: rotate(-9deg); }
  96% { transform: rotate(-3deg); }
}

@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
  50% { transform: scale(.6) rotate(25deg); opacity: .6; }
}

@keyframes flame {
  to { transform: scale(1.18); }
}