:root {
  --cream: #fff8ec;
  --ink: #2b2140;
  --muted: #5e5672;
  --red: #ff5a5f;
  --yellow: #ffb627;
  --green: #3bb273;
  --purple: #7b61ff;
  --cyan: #00b8d9;
  --pink: #ffe3ec;
  --radius: 22px;
  --shadow: 6px 6px 0 var(--ink);
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --hand: "Caveat", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
  /* dotted paper */
  background-image: radial-gradient(rgba(43, 33, 64, 0.08) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}

a { color: inherit; }

/* ---- buttons -------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 14px 26px;
  font: 800 18px/1 var(--display);
  color: var(--ink);
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
  transform: translate(-2px, -2px) rotate(-1.5deg);
  box-shadow: 6px 6px 0 var(--ink);
}
.btn:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--ink);
}
.btn-small { padding: 10px 18px; font-size: 15px; }

/* ---- nav ------------------------------------------------------------ */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 24px;
  text-decoration: none;
}
.logo-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--red);
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-8deg);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.logo-mark img { width: 32px; height: 32px; }
.logo:hover .logo-mark { transform: rotate(10deg) scale(1.1); }
.nav nav { display: flex; align-items: center; gap: 24px; }
.nav nav a:not(.btn) {
  font-weight: 600;
  text-decoration: none;
  position: relative;
}
.nav nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 3px;
  background: var(--red);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.nav nav a:not(.btn):hover::after { transform: scaleX(1); }

/* ---- hero ----------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

h1 {
  margin: 0;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 40px;
  text-align: center;
}

.hl {
  background: linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 92%, transparent 92%);
  padding: 0 4px;
}

.squiggle {
  position: relative;
  display: inline-block;
  color: var(--purple);
}
.squiggle::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -10px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14'%3E%3Cpath d='M0 7 Q5 0 10 7 T20 7 T30 7 T40 7' fill='none' stroke='%23ff5a5f' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
  background-size: 40px 14px;
  animation: squiggle 1.2s linear infinite;
}
@keyframes squiggle { to { background-position-x: 40px; } }

.lede {
  max-width: 34em;
  margin: 24px 0 0;
  font-size: 20px;
  color: var(--muted);
}

/* ---- flipper -------------------------------------------------------- */

.flip-line {
  margin: 32px 0 0;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  color: var(--muted);
}
.flipper {
  display: block;
  margin-top: 10px;
  perspective: 600px;
  min-height: 1.8em;
}
.flip-word {
  display: inline-block;
  padding: 4px 16px 6px;
  color: var(--ink);
  font-weight: 800;
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--ink);
  transform-origin: 50% 50% -20px;
  transition: background-color 0.3s;
}
.flip-word.out { animation: flip-out 0.35s cubic-bezier(0.55, 0, 1, 0.45) forwards; }
.flip-word.in  { animation: flip-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes flip-out {
  to { transform: rotateX(90deg); opacity: 0; }
}
@keyframes flip-in {
  from { transform: rotateX(-90deg); opacity: 0; }
  to   { transform: rotateX(0) rotate(-1deg); opacity: 1; }
}
.flip-word[data-scene="0"] { background: var(--yellow); --marker: #ff8fab; }
.flip-word[data-scene="1"] { background: #b9adff; --marker: var(--yellow); }
.flip-word[data-scene="2"] { background: #ffa6a8; --marker: #ffe066; }
.flip-word[data-scene="3"] { background: #8fe3c0; --marker: #fff; }

/* Marker swipe across the verb phrase, drawn in after the flip lands. */
.verb {
  color: inherit;
  padding: 0 4px;
  margin: 0 -2px;
  border-radius: 6px 10px 8px 4px;
  background: linear-gradient(100deg, transparent 0 2%, var(--marker) 2% 97%, transparent 97%) left center / 0% 78% no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: swipe 0.5s 0.4s cubic-bezier(0.65, 0, 0.35, 1) both;
}
@keyframes swipe { to { background-size: 100% 78%; } }

.hero-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 40px;
}
.link-doodle {
  font: 700 26px var(--hand);
  text-decoration: none;
  transition: transform 0.2s;
}
.link-doodle:hover { transform: translateX(6px) rotate(-2deg); }

/* ---- stage ---------------------------------------------------------- */

.stage-wrap { position: relative; }

.stage {
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 10px 10px 0 var(--ink);
  overflow: hidden;
  transform: rotate(1.5deg);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stage:hover { transform: rotate(-0.5deg) scale(1.015); }

.stage-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 4px solid var(--ink);
  background: var(--pink);
}
.stage-bar span {
  width: 14px; height: 14px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--red);
}
.stage-bar span:nth-child(2) { background: var(--yellow); }
.stage-bar span:nth-child(3) { background: var(--green); }
.rec {
  margin-left: auto;
  font: 700 14px var(--display);
  font-style: normal;
  color: var(--red);
  animation: blink-rec 1.2s steps(2) infinite;
}
@keyframes blink-rec { 50% { opacity: 0.2; } }

.stage-svg {
  display: block;
  width: 100%;
  height: auto;
  background: #fffdf7;
}

.sticker {
  position: absolute;
  padding: 8px 14px;
  font: 700 22px/1.1 var(--hand);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink);
  white-space: nowrap;
}
.sticker.s1 { top: -22px; right: 18px; background: #8fe3c0; transform: rotate(5deg); animation: bob 3.2s ease-in-out infinite; }
.sticker.s2 { bottom: -26px; left: -12px; background: var(--yellow); transform: rotate(-6deg); animation: bob 3.6s ease-in-out infinite reverse; }
@keyframes bob {
  50% { translate: 0 -8px; }
}

/* ---- svg scene animations ------------------------------------------ */

.stage-svg * { transform-box: fill-box; }
.hand { font: 700 30px var(--hand); fill: var(--ink); }
.hand.small { font-size: 24px; fill: var(--muted); }
.bubble-text { font: 800 20px var(--display); fill: #fff; }

.scene { opacity: 0; transition: opacity 0.35s; }
.scene.is-on { opacity: 1; }
/* pause offscreen scenes, restart on show */
.scene:not(.is-on) * { animation-play-state: paused !important; }

.speaker { transform-origin: 50% 100%; animation: sway 4s ease-in-out infinite; }
@keyframes sway { 50% { transform: rotate(1.5deg); } }
.mouth { transform-origin: center; animation: talk 0.42s ease-in-out infinite alternate; }
@keyframes talk { to { transform: scaleY(0.4); } }
.blink { transform-origin: center; animation: blink 4s infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }

/* gravity */
.apple { animation: fall 2.2s cubic-bezier(0.5, 0, 0.9, 0.6) infinite; transform-origin: 50% 100%; }
@keyframes fall {
  0%   { transform: translateY(0) rotate(0); }
  55%  { transform: translateY(150px) rotate(25deg) scale(1, 1); }
  62%  { transform: translateY(160px) rotate(25deg) scale(1.25, 0.75); }
  72%  { transform: translateY(125px) rotate(10deg) scale(0.95, 1.05); }
  82%  { transform: translateY(160px) rotate(0) scale(1.1, 0.9); }
  92%, 100% { transform: translateY(160px) scale(1); opacity: 0; }
}
.speed-lines line { animation: lines 2.2s infinite; }
@keyframes lines { 0%, 20%, 60%, 100% { opacity: 0; } 35%, 50% { opacity: 1; } }
.wobble { transform-origin: center; animation: wob 1.6s ease-in-out infinite; }
@keyframes wob { 50% { transform: translateY(10px) rotate(-3deg); } }

/* devrel */
.float { animation: bob 3s ease-in-out infinite; }
.type { transform-origin: left center; animation: type 3s ease-out infinite; }
.type.t2 { animation-delay: 0.3s; }
.type.t3 { animation-delay: 0.6s; }
.type.t4 { animation-delay: 0.9s; }
@keyframes type { 0% { transform: scaleX(0); } 30%, 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.dash { stroke-dasharray: 10 10; animation: dash 0.8s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -20; } }
.pulse { transform-origin: center; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.25); } }

/* thermo */
.mercury { transform-origin: 50% 100%; animation: heat 3s ease-in-out infinite; }
@keyframes heat { 0%, 100% { transform: scaleY(0.25); } 60% { transform: scaleY(1); } }
.jiggle { animation: jiggle 0.5s ease-in-out infinite alternate; }
@keyframes jiggle {
  0%   { transform: translate(-6px, 4px); }
  50%  { transform: translate(5px, -6px); }
  100% { transform: translate(-3px, -2px); }
}
.flame { animation: flicker 0.3s ease-in-out infinite alternate; }
.flame path:first-child { transform-origin: 50% 100%; animation: flame 0.4s ease-in-out infinite alternate; }
@keyframes flame { to { transform: scale(0.9, 1.12) skewX(4deg); } }

/* influencer */
.heart { transform-origin: center; animation: heart 2.4s ease-out infinite; }
.heart.h2 { animation-delay: 0.6s; }
.heart.h3 { animation-delay: 1.2s; }
@keyframes heart {
  0%   { transform: translateY(20px) scale(0.3); opacity: 0; }
  20%  { opacity: 1; transform: translateY(0) scale(1.1); }
  100% { transform: translateY(-90px) scale(0.8) rotate(-15deg); opacity: 0; }
}
.pop { transform-origin: center; animation: pop 2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
@keyframes pop { 0%, 100% { transform: scale(0.9); } 20%, 70% { transform: scale(1.08) rotate(-3deg); } }
.sparkle { transform-origin: center; animation: twinkle 1.4s ease-in-out infinite; }
@keyframes twinkle { 50% { transform: scale(0.5) rotate(45deg); opacity: 0.5; } }

.d1 { animation-delay: 0.2s !important; }
.d2 { animation-delay: 0.4s !important; }
.d3 { animation-delay: 0.6s !important; }

/* ---- sections ------------------------------------------------------- */

.features, .example, .who, .faq, .waitlist {
  max-width: 1200px;
  margin: 0 auto;
  padding: 110px 24px 0;
}

/* ---- features ------------------------------------------------------- */

.features h2 { max-width: 820px; margin-left: auto; margin-right: auto; }

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  margin-top: 96px;
}
/* Each row's side is set in the HTML, so adding or removing a feature never
   flips the others. */
.feature.art-left .feature-art { order: -1; }

.feature-tag {
  display: inline-block;
  padding: 2px 14px;
  font: 700 26px/1.2 var(--hand);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-4deg);
}
.feature-copy h3 {
  margin: 18px 0 12px;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.feature-copy p { margin: 0; max-width: 30em; font-size: 20px; color: var(--muted); }

.feature-art {
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 10px 10px 0 var(--ink);
  overflow: hidden;
  transform: rotate(1.5deg);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.feature.art-left .feature-art { transform: rotate(-1.5deg); }
.feature-art:hover { transform: rotate(0) scale(1.02) !important; }
.feature-art svg { display: block; width: 100%; height: auto; }
.feature-art svg * { transform-box: fill-box; transform-origin: center; }
/* Static transform="" attributes keep SVG's own origin. */
.feature-art svg [transform] { transform-box: view-box; transform-origin: 0 0; }
/* Only animate the illustrations that are on screen (see script.js). */
.feature-art:not(.playing) * { animation-play-state: paused !important; }

.art-1 { background: #ffd8a8; }
.art-2 { background: #d6ceff; }
.art-3 { background: #b8f0d8; }
.art-4 { background: #fff; }
.art-5 { background: #ffe3ec; }
.art-6 { background: #fff3b0; }

.fx-word { font: 800 28px var(--display); }
.fx-type { font: 700 21px var(--display); fill: var(--ink); }
.fx-hand { font: 700 28px var(--hand); fill: var(--ink); }
.fx-label { font: 700 26px var(--hand); }

/* 01: voice in, illustrated scene out */
.f1-bar { animation: f1-bar 0.7s ease-in-out infinite alternate; }
.f1-bar.b2 { animation-delay: -0.2s; }
.f1-bar.b3 { animation-delay: -0.45s; }
.f1-bar.b4 { animation-delay: -0.1s; }
@keyframes f1-bar { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }
.f1-flow { stroke-dasharray: 8 8; animation: f1-flow 0.6s linear infinite; }
@keyframes f1-flow { to { stroke-dashoffset: -16; } }
.f1-hill { stroke-dasharray: 1; animation: f1-draw 4.5s ease-in-out infinite; }
@keyframes f1-draw { 0%, 12% { stroke-dashoffset: 1; } 40%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.f1-sun { animation: f1-pop 4.5s infinite; }
@keyframes f1-pop {
  0%, 38% { transform: scale(0); }
  46% { transform: scale(1.2); }
  52%, 90% { transform: scale(1); }
  98%, 100% { transform: scale(0); }
}
.f1-cloud { animation: f1-cloud 4.5s ease-in-out infinite; }
@keyframes f1-cloud {
  0%, 22% { opacity: 0; transform: translateX(-20px); }
  34% { opacity: 1; transform: translateX(0); }
  88% { opacity: 1; transform: translateX(14px); }
  98%, 100% { opacity: 0; transform: translateX(14px); }
}
.f1-4k { animation: f1-4k 4.5s infinite; }
@keyframes f1-4k {
  0%, 56% { transform: scale(0) rotate(-20deg); }
  64% { transform: scale(1.2) rotate(8deg); }
  70%, 90% { transform: scale(1) rotate(6deg); }
  98%, 100% { transform: scale(0) rotate(6deg); }
}

/* 02: karaoke captions, clock lands on "eight" */
.f2-w { fill: #8a80a0; }
.f2-w.w1 { animation: f2-w1 5s infinite; }
.f2-w.w2 { animation: f2-w2 5s infinite; }
.f2-w.w3 { animation: f2-w3 5s infinite; }
.f2-w.w4 { animation: f2-w4 5s infinite; }
@keyframes f2-w1 { 0%, 9% { fill: #8a80a0; } 10%, 90% { fill: #fff; } 100% { fill: #8a80a0; } }
@keyframes f2-w2 { 0%, 21% { fill: #8a80a0; } 22%, 90% { fill: #fff; } 100% { fill: #8a80a0; } }
@keyframes f2-w3 { 0%, 35% { fill: #8a80a0; } 36%, 90% { fill: #ffb627; } 100% { fill: #8a80a0; } }
@keyframes f2-w4 { 0%, 49% { fill: #8a80a0; } 50%, 90% { fill: #fff; } 100% { fill: #8a80a0; } }
.f2-clock { animation: f2-clock 5s infinite; }
@keyframes f2-clock {
  0%, 35% { transform: scale(0) rotate(-30deg); }
  42% { transform: scale(1.15) rotate(6deg); }
  48%, 90% { transform: scale(1) rotate(0); }
  97%, 100% { transform: scale(0); }
}
.f2-ding { animation: f2-ding 5s infinite; }
@keyframes f2-ding { 0%, 38% { opacity: 0; } 42%, 54% { opacity: 1; } 60%, 100% { opacity: 0; } }

/* 03: type an edit, see before/after, undo */
/* Typed one keystroke at a time: hidden characters have zero width, so the caret follows. */
.f3-caret { font-weight: 400; animation: f3-blink 0.8s steps(1, end) infinite; }
@keyframes f3-blink { 50% { opacity: 0; } }
.k { font-size: 0; }
.k1 { animation: f3-k1 5.5s infinite; }
@keyframes f3-k1 { 0%, 5.99% { font-size: 0; } 6.0%, 94.0% { font-size: 21px; } 94.01%, 100% { font-size: 0; } }
.k2 { animation: f3-k2 5.5s infinite; }
@keyframes f3-k2 { 0%, 7.64% { font-size: 0; } 7.65%, 94.0% { font-size: 21px; } 94.01%, 100% { font-size: 0; } }
.k3 { animation: f3-k3 5.5s infinite; }
@keyframes f3-k3 { 0%, 9.28% { font-size: 0; } 9.29%, 94.0% { font-size: 21px; } 94.01%, 100% { font-size: 0; } }
.k4 { animation: f3-k4 5.5s infinite; }
@keyframes f3-k4 { 0%, 10.93% { font-size: 0; } 10.94%, 94.0% { font-size: 21px; } 94.01%, 100% { font-size: 0; } }
.k5 { animation: f3-k5 5.5s infinite; }
@keyframes f3-k5 { 0%, 12.58% { font-size: 0; } 12.59%, 94.0% { font-size: 21px; } 94.01%, 100% { font-size: 0; } }
.k6 { animation: f3-k6 5.5s infinite; }
@keyframes f3-k6 { 0%, 14.23% { font-size: 0; } 14.24%, 94.0% { font-size: 21px; } 94.01%, 100% { font-size: 0; } }
.k7 { animation: f3-k7 5.5s infinite; }
@keyframes f3-k7 { 0%, 15.87% { font-size: 0; } 15.88%, 94.0% { font-size: 21px; } 94.01%, 100% { font-size: 0; } }
.k8 { animation: f3-k8 5.5s infinite; }
@keyframes f3-k8 { 0%, 17.52% { font-size: 0; } 17.53%, 94.0% { font-size: 21px; } 94.01%, 100% { font-size: 0; } }
.k9 { animation: f3-k9 5.5s infinite; }
@keyframes f3-k9 { 0%, 19.17% { font-size: 0; } 19.18%, 94.0% { font-size: 21px; } 94.01%, 100% { font-size: 0; } }
.k10 { animation: f3-k10 5.5s infinite; }
@keyframes f3-k10 { 0%, 20.81% { font-size: 0; } 20.82%, 94.0% { font-size: 21px; } 94.01%, 100% { font-size: 0; } }
.k11 { animation: f3-k11 5.5s infinite; }
@keyframes f3-k11 { 0%, 22.46% { font-size: 0; } 22.47%, 94.0% { font-size: 21px; } 94.01%, 100% { font-size: 0; } }
.k12 { animation: f3-k12 5.5s infinite; }
@keyframes f3-k12 { 0%, 24.11% { font-size: 0; } 24.12%, 94.0% { font-size: 21px; } 94.01%, 100% { font-size: 0; } }
.k13 { animation: f3-k13 5.5s infinite; }
@keyframes f3-k13 { 0%, 25.75% { font-size: 0; } 25.76%, 94.0% { font-size: 21px; } 94.01%, 100% { font-size: 0; } }
.k14 { animation: f3-k14 5.5s infinite; }
@keyframes f3-k14 { 0%, 27.40% { font-size: 0; } 27.41%, 94.0% { font-size: 21px; } 94.01%, 100% { font-size: 0; } }
.k15 { animation: f3-k15 5.5s infinite; }
@keyframes f3-k15 { 0%, 29.05% { font-size: 0; } 29.06%, 94.0% { font-size: 21px; } 94.01%, 100% { font-size: 0; } }
.k16 { animation: f3-k16 5.5s infinite; }
@keyframes f3-k16 { 0%, 30.70% { font-size: 0; } 30.71%, 94.0% { font-size: 21px; } 94.01%, 100% { font-size: 0; } }
.k17 { animation: f3-k17 5.5s infinite; }
@keyframes f3-k17 { 0%, 32.34% { font-size: 0; } 32.35%, 94.0% { font-size: 21px; } 94.01%, 100% { font-size: 0; } }
.k18 { animation: f3-k18 5.5s infinite; }
@keyframes f3-k18 { 0%, 33.99% { font-size: 0; } 34.0%, 94.0% { font-size: 21px; } 94.01%, 100% { font-size: 0; } }
.f3-arrow { stroke: #2b2140; animation: f3-arrow 5.5s infinite; }
@keyframes f3-arrow { 0%, 40% { stroke: #2b2140; } 44%, 92% { stroke: #ff5a5f; } 96%, 100% { stroke: #2b2140; } }
.f3-before { animation: f3-before 5.5s infinite; }
.f3-after { opacity: 0; fill: #3bb273; animation: f3-after 5.5s infinite; }
@keyframes f3-before { 0%, 40% { opacity: 1; } 42%, 94% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes f3-after { 0%, 40% { opacity: 0; } 42%, 94% { opacity: 1; } 96%, 100% { opacity: 0; } }
.f3-laptop { animation: f3-laptop 5.5s infinite; }
@keyframes f3-laptop {
  0%, 46% { transform: scale(0); }
  52% { transform: scale(1.15) rotate(-4deg); }
  58%, 92% { transform: scale(1); }
  97%, 100% { transform: scale(0); }
}
.f3-undo { animation: f3-undo 5.5s infinite; }
@keyframes f3-undo {
  0%, 80% { transform: rotate(0) scale(1); }
  84% { transform: rotate(-40deg) scale(1.15); }
  88% { transform: rotate(-360deg) scale(1); }
  100% { transform: rotate(-360deg); }
}

/* 04: captions, labels and language badge switch together */
.fx-cap { font: 800 24px var(--display); fill: #fff; }
.fx-chip { font: 800 18px var(--display); fill: #fff; }
.f5-mouth { animation: talk 0.42s ease-in-out infinite alternate; }
.f5-lang { opacity: 0; animation: f5-lang 9s infinite; }
.f5-lang.w1 { animation-delay: -9s; }
.f5-lang.w2 { animation-delay: -7.5s; }
.f5-lang.w3 { animation-delay: -6s; }
.f5-lang.w4 { animation-delay: -4.5s; }
.f5-lang.w5 { animation-delay: -3s; }
.f5-lang.w6 { animation-delay: -1.5s; }
@keyframes f5-lang { 0% { opacity: 0; } 2%, 15% { opacity: 1; } 16.6%, 100% { opacity: 0; } }
.f5-apple { animation: f5-bob 1.5s ease-in-out infinite; }
@keyframes f5-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

/* 05: the mystery box */
.feature-art .f6-lid { transform-origin: 50% 100%; animation: f6-lid 3.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
@keyframes f6-lid {
  0%, 30% { transform: translateY(0) rotate(0); }
  40% { transform: translateY(-34px) rotate(-12deg); }
  70% { transform: translateY(-30px) rotate(-10deg); }
  80%, 100% { transform: translateY(0) rotate(0); }
}
.f6-q { font: 800 76px var(--display); animation: f6-q 3.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
@keyframes f6-q {
  0%, 34% { opacity: 0; transform: translateY(40px) scale(0.4); }
  46%, 66% { opacity: 1; transform: translateY(-64px) scale(1) rotate(8deg); }
  76%, 100% { opacity: 0; transform: translateY(40px) scale(0.4); }
}
.f6-spark { animation: f6-spark 1.6s ease-in-out infinite; }
.f6-spark.s2 { animation-delay: -0.5s; }
.f6-spark.s3 { animation-delay: -1s; }
@keyframes f6-spark { 50% { transform: scale(0.5) rotate(45deg); opacity: 0.5; } }

.nowrap { white-space: nowrap; }

/* Winking face after "You'll have to try it." */
.wink {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.4em;
  margin-left: 2px;
  transform-origin: 50% 70%;
  animation: wink-tilt 3s ease-in-out infinite;
}
.wink * { transform-box: fill-box; transform-origin: center; }
.wink-eye { animation: wink-eye 3s infinite; }
.wink-lid { opacity: 0; animation: wink-lid 3s infinite; }
@keyframes wink-tilt { 0%, 55%, 100% { transform: rotate(0); } 65%, 85% { transform: rotate(-12deg) scale(1.1); } }
@keyframes wink-eye { 0%, 60%, 90%, 100% { transform: scaleY(1); } 64%, 86% { transform: scaleY(0); } }
@keyframes wink-lid { 0%, 61%, 89%, 100% { opacity: 0; } 64%, 86% { opacity: 1; } }

/* ---- example ------------------------------------------------------ */

.tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}
.tab {
  padding: 12px 22px;
  font: 700 19px var(--display);
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s;
}
.tab:hover { transform: rotate(-2deg) scale(1.04); }
.tab[aria-selected="true"] { background: var(--yellow); transform: rotate(-2deg); }
.tab:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }

.tab-panel {
  display: grid;
  grid-template-columns: 1fr auto 1.5fr;
  gap: 24px;
  align-items: center;
}
.tab-panel[hidden] { display: none; }

.ex-label { margin: 0 0 10px; font: 700 28px var(--hand); color: var(--muted); }
.ex-credit { margin: 18px 0 0; font-size: 14px; color: var(--muted); text-align: center; }
.ex-credit a { color: inherit; text-decoration: underline; }

.file-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--ink);
  transform: rotate(-2deg);
}

.dropzone {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: 16px 16px 46px;
  background: var(--cream);
  border: 3px dashed var(--ink);
  border-radius: 14px;
}
.drop-hint {
  position: absolute;
  bottom: 14px;
  font: 700 22px var(--hand);
  color: var(--muted);
  animation: fade-out 0.3s 0.9s both;
}
@keyframes fade-out { to { opacity: 0; } }
.file-icon {
  width: 96px;
  animation: drop-file 0.9s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes drop-file {
  from { opacity: 0; transform: translate(70px, -90px) rotate(18deg) scale(1.15); }
  60% { opacity: 1; transform: translate(0, 6px) rotate(-6deg) scale(1.05); }
  to { transform: rotate(-4deg); }
}
.file-ext { font: 800 17px var(--display); fill: #fff; }

.file-meta { display: grid; gap: 4px; }
.file-meta strong { font-size: 17px; word-break: break-all; }
.file-meta > span { font-size: 15px; color: var(--muted); }
.progress {
  height: 12px;
  margin-top: 6px;
  background: var(--cream);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
}
.progress span {
  display: block;
  height: 100%;
  background: var(--green);
  transform-origin: left;
  animation: upload 1.4s 1.2s ease-out both;
}
@keyframes upload { from { transform: scaleX(0); } }
.file-meta .file-done { color: var(--green); font-weight: 700; animation: fade-in 0.3s 2.6s both; }
@keyframes fade-in { from { opacity: 0; } }

.ex-arrow { display: grid; justify-items: center; gap: 4px; width: 120px; }
.ex-arrow svg { width: 120px; }
.ex-arrow span { font: 700 24px var(--hand); white-space: nowrap; }

.player {
  overflow: hidden;
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 10px 10px 0 var(--ink);
  transform: rotate(1deg);
}
.player video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--ink); }
.player-placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  aspect-ratio: 16 / 9;
  background-color: #fffdf7;
  background-image: radial-gradient(rgba(43, 33, 64, 0.12) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}
.play-btn {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  padding-left: 6px;
  font-size: 30px;
  color: var(--ink);
  background: var(--yellow);
  border: 4px solid var(--ink);
  border-radius: 50%;
  box-shadow: 4px 4px 0 var(--ink);
  animation: pulse 1.6s ease-in-out infinite;
}
.ph-text { font: 700 26px var(--hand); color: var(--muted); }

/* ---- who ------------------------------------------------------------ */

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: 860px;
  margin: 0 auto;
}
.chip {
  padding: 12px 22px;
  font: 700 20px var(--display);
  color: var(--ink);
  border: 3px dotted var(--ink);
  border-radius: 999px;
}
.chip:nth-child(odd) { transform: rotate(-2deg); }
.chip:nth-child(even) { transform: rotate(2deg); }
.chip:has(.aside) { position: relative; }
.aside {
  position: absolute;
  top: 0;
  left: 46%;
  white-space: nowrap;
  pointer-events: none;
  font: 700 24px/1 var(--hand);
  color: var(--red);
  transform: rotate(-8deg) translateY(-4px);
  animation: goofy 1.8s ease-in-out infinite;
}
@keyframes goofy {
  0%, 100% { transform: rotate(-8deg) translateY(-4px); }
  50% { transform: rotate(6deg) translateY(-8px) scale(1.06); }
}

/* ---- faq ---------------------------------------------------------- */

.faq-list {
  display: grid;
  gap: 16px;
  max-width: 780px;
  margin: 0 auto;
}
.faq details {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.faq details:nth-child(odd) { transform: rotate(-0.6deg); }
.faq details:nth-child(even) { transform: rotate(0.6deg); }
.faq details[open] { transform: none; background: var(--pink); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  font-weight: 800;
  font-size: 20px;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 24px;
  line-height: 1;
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 22px 20px; color: var(--muted); }

/* ---- waitlist ------------------------------------------------------- */

.waitlist { padding-bottom: 110px; }
.waitlist-card {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 40px;
  text-align: center;
  background: var(--purple);
  color: #fff;
  border: 4px solid var(--ink);
  border-radius: 32px;
  box-shadow: 12px 12px 0 var(--ink);
}
.waitlist-card h2 { margin-bottom: 14px; }
.waitlist-card p { margin: 0 0 28px; font-size: 20px; opacity: 0.92; }
form {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
input[type="email"] {
  flex: 1 1 260px;
  max-width: 380px;
  padding: 14px 20px;
  font: 600 18px var(--display);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  outline: none;
}
input[type="email"]:focus { box-shadow: 0 0 0 4px var(--yellow); }
.thanks { font: 700 30px var(--hand) !important; }

.confetti {
  position: fixed;
  width: 10px; height: 14px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  pointer-events: none;
  z-index: 100;
}

/* ---- footer --------------------------------------------------------- */

.footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px 40px;
  border-top: 3px dashed rgba(43, 33, 64, 0.25);
  color: var(--muted);
}
.footer-links { display: flex; gap: 18px; }
.footer-links a { color: inherit; }
.hand-inline { font: 700 24px var(--hand); }
.flag { width: 27px; height: 18px; vertical-align: -2px; border: 2px solid var(--ink); border-radius: 3px; }
.hand-inline a { color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }

/* ---- reveal on scroll ---------------------------------------------- */

.reveal { opacity: 0; translate: 0 30px; transition: opacity 0.6s ease, translate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.reveal.shown { opacity: 1; translate: 0 0; }

/* ---- responsive ----------------------------------------------------- */

@media (max-width: 900px) {
  .tab-panel { grid-template-columns: 1fr; gap: 12px; }
  .ex-arrow { justify-self: center; }
  .ex-arrow svg { transform: rotate(90deg); width: 80px; }
  .hero { grid-template-columns: 1fr; gap: 56px; padding-top: 20px; }
  .feature { grid-template-columns: 1fr; gap: 32px; margin-top: 72px; }
  .feature .feature-art { order: -1; }
  .nav nav a:not(.btn):not(.keep) { display: none; }
}
@media (max-width: 520px) {
  .nav { padding: 16px; }
  .hero, .features, .example, .who, .faq, .waitlist { padding-left: 16px; padding-right: 16px; }
  .waitlist-card { padding: 40px 20px; }
  .sticker { font-size: 18px; }
  .sticker.s2 { left: 0; }
}
@media (max-width: 520px) {
  .nav .btn-small { padding: 9px 14px; font-size: 14px; white-space: nowrap; }
}
@media (max-width: 400px) {
  .aside { font-size: 18px; }
  .nav nav { gap: 14px; }
  .logo-name { display: none; } /* the mic mark alone on phones; the nav needs the room */
}

@media (prefers-reduced-motion: reduce) {
  /* Feature illustrations: show one finished frame instead of the loop. */
  .feature-art * { animation: none !important; }
  .f5-lang.w1, .f2-w { opacity: 1; }
  .f2-w { fill: #fff; }
  .f3-caret, .f3-before, .f2-ding, .f6-q { display: none; }
  .f3-after { opacity: 1; }
  .k { font-size: 21px; }
  .f3-arrow { stroke: #ff5a5f; }

  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}