@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/outfit-latin.woff2) format('woff2');
}
/* Caveat 600 from Google Fonts, subset to lowercase letters, space, ! and an arrow: only the handwritten doodle notes use it. */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/caveat-notes.woff2) format('woff2');
}

/* Tokens: cream paper, black ink, one accent (burst yellow), sticker edges with hard offset shadows, springs. */
:root {
  --ink: #111111;
  --paper: #fdf9f0;
  --surface: #ffffff;
  --surface-2: #efebe2;
  --slate: #57544e;
  --burst: #ffc93c;
  --burst-deep: #ffb020;
  --on-burst: #0b2037;
  --good: #1f6f5c;
  --good-bg: #eaf4f0;
  --rare: #2563a8;
  --warn: #9a5a00;
  --warn-bg: #fdf3e1;
  --line: rgba(17, 17, 17, 0.14);
  --hairline: rgba(17, 17, 17, 0.08);
  --band: #111111;
  --on-band: #f4f6fa;
  --on-band-muted: #b9c2d6;
  --focus: #2f6bff;
  --glow: rgba(255, 201, 60, 0.34);
  --cta-bg: #111111;
  --cta-fg: #ffffff;
  --edge: #111111;
  --sticker: 4px 4px 0 var(--edge);
  --sticker-up: 7px 7px 0 var(--edge);
  --lift: 0 1px 2px rgba(11, 32, 55, 0.06), 0 8px 24px rgba(11, 32, 55, 0.07);
  --lift-hover: 0 2px 4px rgba(11, 32, 55, 0.07), 0 18px 40px rgba(11, 32, 55, 0.13);
  --lift-big: 0 1px 2px rgba(11, 32, 55, 0.06), 0 10px 30px rgba(11, 32, 55, 0.08), 0 40px 80px -40px rgba(11, 32, 55, 0.3);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring: linear(0, 0.04, 0.14, 0.278, 0.433, 0.587, 0.731, 0.855, 0.957, 1.034, 1.087, 1.119, 1.134, 1.134, 1.124, 1.108, 1.088, 1.067, 1.046, 1.028, 1.013, 1.001, 0.992, 0.986, 0.983, 0.982, 0.982, 0.984, 0.987, 0.989, 0.992, 0.995, 0.997, 0.999, 1.001, 1.002, 1.002, 1.002, 1.002, 1.002, 1);
  --wrap: 1180px;
  --gutter: 32px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.6 'Outfit', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--burst); color: #0b2037; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 999px; background: var(--cta-bg); color: var(--cta-fg); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* Type */
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(42px, 5.4vw, 68px); line-height: 1; letter-spacing: -0.04em; }
h2 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.04; }
h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
p { margin: 0; text-wrap: pretty; }
.lede { font-size: 21px; line-height: 1.55; color: var(--slate); max-width: 34em; }
.muted { color: var(--slate); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; color: var(--slate); }
.eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--burst); box-shadow: 0 0 0 4px color-mix(in srgb, var(--burst) 25%, transparent); }
.section-head { display: grid; gap: 14px; margin-bottom: 44px; }
.section-head.center { justify-items: center; text-align: center; }
.section-head .lede { max-width: 36em; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px; border: 2.5px solid var(--edge);
  background: var(--burst); color: #111;
  font: inherit; font-weight: 700; font-size: 17px; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: var(--sticker);
  transition: transform 180ms var(--snap), box-shadow 180ms var(--snap);
}
/* Stickers you can press: lift toward the pointer on hover, sink flat into the shadow on click. */
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--edge); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--edge); transition-duration: 60ms; }
.btn.ink { background: var(--cta-bg); color: var(--cta-fg); }
.btn.ghost { background: var(--surface); color: var(--ink); }
.btn.small { padding: 9px 17px; font-size: 15px; border-width: 2px; box-shadow: 3px 3px 0 var(--edge); }
.btn.small:hover { box-shadow: 5px 5px 0 var(--edge); }
.btn.small:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--edge); }
.btn.big { padding: 18px 34px; font-size: 20px; border-width: 3px; }
.btn[aria-disabled='true'] { background: var(--surface-2); color: var(--slate); border-color: var(--line); box-shadow: none; cursor: default; transform: none; white-space: normal; text-align: center; }
.textlink { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, var(--burst) 90%, transparent); transition: text-decoration-color 160ms; }
.textlink:hover { text-decoration-color: currentColor; }
.arrow::after { content: '→'; display: inline-block; margin-left: 6px; transition: transform 380ms var(--spring); }
a:hover .arrow::after, a.arrow:hover::after { transform: translateX(4px); }

/* Nav */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color 200ms; }
.top[data-scrolled] { border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 22px; letter-spacing: -0.03em; flex: none; }
.brand img { width: 34px; height: 34px; }
.nav-links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav-links a { text-decoration: none; font-weight: 600; font-size: 16px; color: var(--slate); transition: color 160ms; }
.nav-links a:hover, .nav-links a[aria-current='page'] { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 18px; height: 18px; }
.menu-panel { position: absolute; right: 0; top: 52px; min-width: 220px; padding: 8px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--lift-hover); display: grid; animation: pop-in 420ms var(--spring) both; transform-origin: 90% 0; }
.menu-panel a { padding: 11px 14px; border-radius: 12px; text-decoration: none; font-weight: 600; }
.menu-panel a:hover { background: var(--paper); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.94); } }

/* Page backdrop glow (as in onboarding) */
.glow-bg { position: relative; isolation: isolate; }


/* Hand-drawn doodles: ink strokes that draw themselves once scrolled into view (site.js adds .in). */
.doodle { position: absolute; max-width: none; overflow: visible; pointer-events: none; }
.doodle path { fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.cta-note .doodle path { stroke-width: 4.5; }
.section-head .scribble .doodle path { stroke-width: 5; }
.js .doodle path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 650ms cubic-bezier(0.65, 0, 0.35, 1); }
.js .doodle.in path { stroke-dashoffset: 0; }
.js .doodle.in path + path { transition-delay: 380ms; transition-duration: 380ms; }
.scribble { position: relative; display: inline-block; }
.scribble > .doodle { left: -3%; width: 106%; bottom: -0.2em; height: 0.3em; }
.hand { font-family: 'Caveat', 'Comic Sans MS', cursive; font-weight: 600; letter-spacing: 0; }

/* Hero: a centered headline in a reserved box, with draggable stickers scattered around it. */
.hero { position: relative; display: grid; place-items: center; min-height: 640px; padding: 64px var(--gutter) 88px; text-align: center; overflow: hidden; border-bottom: 2.5px solid var(--edge); }
.hero .hero-copy { position: relative; z-index: 2; display: grid; gap: 24px; justify-items: center; max-width: 900px; pointer-events: none; }
.hero .hero-copy > * { pointer-events: auto; }
.hero h1 { font-size: clamp(46px, 5.6vw, 82px); line-height: 0.98; letter-spacing: -0.045em; }
.hero h1 .line { display: block; }
.hero .lede { font-size: 21px; max-width: 31em; color: var(--slate); }
.hero-actions { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px; margin-top: 8px; }
.cta-note { position: absolute; left: calc(100% + 18px); top: 40px; width: max-content; text-align: left; }
.cta-note .doodle { position: absolute; left: -22px; top: -54px; width: 62px; height: 44px; transform: scaleX(-1) rotate(8deg); }
.cta-note .hand { display: block; font-size: 25px; line-height: 1; transform: rotate(-4deg); }

.stickers { position: absolute; inset: 0; z-index: 1; }
.sk { position: absolute; left: var(--x); top: var(--y); transform: rotate(var(--r)); touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; animation: sk-pop 700ms var(--spring) both; animation-delay: calc(250ms + var(--n) * 90ms); }
.sk-in { display: grid; place-items: center; border: 2.5px solid var(--edge); background: var(--surface); box-shadow: var(--sticker); animation: sk-drift 7s ease-in-out infinite; animation-delay: calc(var(--n) * -1.3s); transition: box-shadow 160ms var(--ease), scale 220ms var(--snap); }
.sk:hover .sk-in { animation: sk-drift 7s ease-in-out infinite, sk-wobble 620ms var(--ease); animation-delay: calc(var(--n) * -1.3s), 0s; }
.sk.grab { z-index: 5; cursor: grabbing; }
.sk.grab .sk-in { scale: 1.08; box-shadow: 10px 12px 0 var(--edge); }
.sk img { pointer-events: none; }
.sk-disc .sk-in { width: 112px; height: 112px; padding: 10px; border-radius: 50%; background: var(--burst); }
.sk-disc img { width: 100%; height: 100%; object-fit: contain; }
.sk-card .sk-in { width: 150px; padding: 16px 12px 18px; gap: 2px; border-radius: 16px; }
.sk-card span { font-size: 12px; font-weight: 700; color: var(--slate); }
.sk-card b { font-size: 25px; letter-spacing: -0.03em; }
.sk-xp .sk-in { padding: 9px 18px; border-radius: 999px; background: var(--burst); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; white-space: nowrap; }
.sk-flame .sk-in { grid-auto-flow: column; gap: 4px; padding: 10px 16px 10px 12px; border-radius: 18px; }
.sk-flame svg { width: 32px; height: 32px; }
.sk-flame b { font-size: 26px; letter-spacing: -0.03em; }
.sk-bolt .sk-in { width: 76px; height: 76px; border-radius: 18px; }
.sk-bolt svg { width: 44px; height: 44px; }
.sk-burst .sk-in { width: 104px; height: 104px; border: 0; background: none; box-shadow: none; filter: drop-shadow(4px 4px 0 var(--edge)); }
.sk-burst svg { width: 100%; height: 100%; }
.sk-burst text { font: 800 30px 'Outfit', sans-serif; letter-spacing: -1px; fill: #111; }
.sk-burst.grab .sk-in { box-shadow: none; filter: drop-shadow(10px 12px 0 var(--edge)); }
@keyframes sk-pop { from { scale: 0; opacity: 0; } 30% { opacity: 1; } }
@keyframes sk-drift { 0%, 100% { translate: 0 0; } 33% { translate: 3px -6px; } 66% { translate: -3px 4px; } }
@keyframes sk-wobble { 0%, 100% { rotate: 0deg; } 20% { rotate: -7deg; } 45% { rotate: 6deg; } 70% { rotate: -3deg; } }

/* The demo in a sticker-outlined browser window on a dotted yellow desk. The demo keeps its own styles inside. */
.demo-sec { padding: 8px 0 110px; }
.demo-stage { position: relative; max-width: 820px; margin: 0 auto; }
.demo-frame { border: 3px solid var(--edge); border-radius: 22px; background: var(--surface); box-shadow: 10px 10px 0 var(--edge); overflow: hidden; }
.demo-bar { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 3px solid var(--edge); background: var(--paper); }
.demo-bar i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--edge); background: var(--surface); }
.demo-bar i:first-child { background: var(--burst); }
.demo-bar span { flex: 1; max-width: 340px; height: 28px; margin-left: 14px; display: flex; align-items: center; padding: 0 10px; border: 2px solid var(--edge); border-radius: 999px; background: var(--surface); }
.demo-bar span svg { width: 14px; height: 14px; }
.demo-host { display: block; min-height: 690px; padding: 22px 22px 14px; background: radial-gradient(color-mix(in srgb, var(--ink) 16%, transparent) 1.4px, transparent 1.6px) 0 0 / 18px 18px, var(--burst); }
.demo-note { position: absolute; left: calc(100% + 22px); top: 96px; width: 150px; }
.demo-note .hand { display: block; font-size: 27px; line-height: 1.05; transform: rotate(5deg); }
.demo-note .doodle { position: relative; width: 70px; height: 56px; margin: 6px 0 0 6px; transform: scaleX(-1) rotate(10deg); }
.demo-note .doodle path { stroke-width: 3.6; }
@media (max-width: 1240px) {
  .demo-note { position: static; width: auto; display: flex; justify-content: center; align-items: flex-end; gap: 4px; margin: -18px 0 8px; }
  .demo-note .hand { transform: rotate(-3deg); }
  .demo-note .doodle { width: 44px; height: 40px; margin: 0; transform: rotate(20deg); }
}

/* Research: four sticker cards, claim + study + who ran it. */
.research { padding: 96px 0 104px; }
.research .section-head { margin-bottom: 40px; }
.cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; list-style: none; margin: 0; padding: 0; }
.cards4 > li:nth-child(1) { --tilt: -2deg; } .cards4 > li:nth-child(2) { --tilt: 1.6deg; } .cards4 > li:nth-child(3) { --tilt: -1.2deg; } .cards4 > li:nth-child(4) { --tilt: 2.2deg; }
.rcard {
  position: relative; height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 24px 22px 20px;
  border-radius: 20px; background: var(--surface); border: 2.5px solid var(--edge); box-shadow: var(--sticker);
  text-decoration: none; color: var(--ink); transform: rotate(var(--tilt, 0deg));
  transition: transform 420ms var(--snap), box-shadow 240ms var(--ease), background-color 200ms;
}
.rcard:hover { transform: rotate(0deg) translate(-3px, -6px); box-shadow: 8px 10px 0 var(--edge); }
.rcard:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--edge); transition-duration: 80ms; }
.rcard .claim { font-size: 21px; line-height: 1.25; letter-spacing: -0.02em; text-wrap: pretty; }
.rcard .study { font-size: 15px; font-weight: 600; color: var(--slate); }
.rcard .by { margin-top: auto; display: grid; gap: 6px; padding-top: 14px; border-top: 2px dashed var(--line); }
.rcard .by small { font-size: 11.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate); }
.wm { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; justify-self: start; padding: 7px 12px; border-radius: 10px; border: 2px solid var(--edge); font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; transition: background-color 200ms; }
.wm b { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.rcard:hover .wm { background: var(--burst); color: #111; }
.research-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 28px; margin-top: 34px; }
.swipe-hint { display: none; }

/* What you could learn while AI thinks: sliders on the left, the words-a-year number on yellow. */
.calc { padding: 8px 0 104px; }
.calc-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); border-radius: 28px; overflow: hidden; background: var(--surface); border: 3px solid var(--edge); box-shadow: 8px 8px 0 var(--edge); }
.calc-in { display: grid; gap: 26px; align-content: start; padding: 44px 44px 40px; }
.calc-in h2 { font-size: clamp(30px, 3.4vw, 44px); }
.field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 10px 16px; }
.field label { font-weight: 700; font-size: 17px; line-height: 1.35; }
.field output { font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.field input { grid-column: 1 / -1; }
input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer; --fill: 20%; }
input[type='range']::-webkit-slider-runnable-track { height: 12px; border-radius: 12px; border: 2px solid var(--edge); background: linear-gradient(90deg, var(--burst) var(--fill), var(--surface) var(--fill)); }
input[type='range']::-moz-range-track { height: 8px; border-radius: 12px; border: 2px solid var(--edge); background: linear-gradient(90deg, var(--burst) var(--fill), var(--surface) var(--fill)); }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: var(--surface); border: 3px solid var(--edge); box-shadow: 2px 2px 0 var(--edge); transition: transform 300ms var(--snap); }
input[type='range']::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 3px solid var(--edge); box-shadow: 2px 2px 0 var(--edge); }
input[type='range']:active::-webkit-slider-thumb { transform: scale(1.18); }
input[type='range']:focus-visible { outline: none; }
input[type='range']:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 45%, transparent); }
input[type='range']:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 45%, transparent); }
.calc-out { display: grid; align-content: center; justify-items: start; gap: 12px; padding: 44px; background: var(--burst); color: #111; border-left: 3px solid var(--edge); }
.calc-kicker { font-weight: 700; font-size: 19px; }
.calc-big { display: grid; gap: 10px; font-weight: 800; }
.calc-big .num { position: relative; justify-self: start; padding: 0 0.12em; font-size: clamp(72px, 8.6vw, 116px); letter-spacing: -0.05em; line-height: 0.95; font-variant-numeric: tabular-nums; }
.calc-big .num .doodle { left: -14%; top: -22%; width: 128%; height: 144%; }
.calc-big .num .doodle path { stroke: #111; stroke-width: 2.2; }
.calc-big .num.bump { animation: bump 520ms var(--spring); }
.calc-big small { font-size: 24px; letter-spacing: -0.02em; }
.calc-compare { font-size: 19px; font-weight: 600; padding: 8px 14px; border-radius: 12px; background: #fff; border: 2px solid #111; box-shadow: 3px 3px 0 #111; transform: rotate(-1.5deg); }
.calc-source { max-width: 60em; margin: 22px auto 0; font-size: 13.5px; line-height: 1.55; color: var(--slate); text-align: center; }
.calc-source a { text-underline-offset: 3px; }
@keyframes bump { 30% { scale: 1.08; } }
@media (max-width: 860px) {
  .calc-card { grid-template-columns: minmax(0, 1fr); }
  .calc-out { border-left: 0; border-top: 3px solid var(--edge); }
  .calc-in, .calc-out { padding: 28px 22px; }
  .calc { padding-bottom: 72px; }
}

/* Three uses: sticker cards that flip over (tap, or the round button) to show the one-line pitch. */
.uses { padding: 104px 0; background: var(--surface); border-block: 2.5px solid var(--edge); }
.uses .section-head { margin-bottom: 38px; }
.uses-note .hand { display: inline-block; font-size: 27px; transform: rotate(-3deg); }
.uses-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.uses-grid > li:nth-child(1) { --tilt: -1.8deg; } .uses-grid > li:nth-child(2) { --tilt: 1.4deg; } .uses-grid > li:nth-child(3) { --tilt: -1deg; }
.use { position: relative; height: 100%; perspective: 1400px; transform: rotate(var(--tilt, 0deg)); transition: transform 420ms var(--snap); }
.use:hover { transform: rotate(0deg) translateY(-6px); }
.use-in { display: grid; gap: 16px; height: 100%; transform-style: preserve-3d; transition: transform 760ms var(--spring); }
.side { display: flex; flex-direction: column; gap: 14px; padding: 14px 14px 24px; border-radius: 22px; background: var(--paper); border: 2.5px solid var(--edge); box-shadow: var(--sticker); transition: box-shadow 240ms var(--ease); }
.use:hover .side { box-shadow: 8px 10px 0 var(--edge); }
.side h3 { padding: 4px 10px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.back { justify-content: center; gap: 12px; padding: 30px 28px; background: var(--burst); color: #111; }
.back-title { font-weight: 800; font-size: 25px; line-height: 1.15; letter-spacing: -0.03em; }
.back p { font-size: 19px; line-height: 1.45; font-weight: 500; }
.turn { display: none; }
.flips .use { cursor: pointer; }
.flips .side { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flips .back { transform: rotateY(180deg); box-shadow: -4px 4px 0 var(--edge); }
.flips .use:hover .back { box-shadow: -8px 10px 0 var(--edge); }
.flips .use.flipped .use-in { transform: rotateY(180deg); }
.flips .turn { position: absolute; z-index: 3; top: -12px; right: -12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 2.5px solid var(--edge); background: var(--burst); color: #111; box-shadow: 3px 3px 0 var(--edge); cursor: pointer; transition: transform 180ms var(--snap), box-shadow 180ms var(--snap); }
.flips .turn svg { width: 22px; height: 22px; transition: transform 600ms var(--spring); }
.flips .turn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--edge); }
.flips .turn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--edge); }
.flips .use:hover .turn svg { animation: sk-wobble 620ms var(--ease); }
.flips .use.flipped .turn svg { transform: rotate(180deg); }
.tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; border: 2px solid var(--edge); font-size: 12.5px; font-weight: 800; letter-spacing: 0.01em; background: var(--surface); color: var(--ink); white-space: nowrap; }
.tag.soon { background: var(--surface); transform: rotate(-3deg); }
.tag.pro { background: var(--burst); color: #111; }
.viz { position: relative; height: 196px; border-radius: 14px; background: var(--surface); border: 2px solid var(--edge); overflow: hidden; display: grid; place-items: center; }

/* Viz 1: pasted rows become cards */
.viz-import { padding: 18px; place-items: stretch; grid-template-columns: minmax(0, 1.3fr) 30px minmax(0, 1fr); align-items: center; }
.paste { display: grid; gap: 7px; font-size: 11px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; color: var(--slate); }
.paste span { display: block; padding: 5px 7px; border-radius: 7px; background: var(--paper); border: 1.5px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: row-in 6s var(--ease) infinite; }
.paste span:nth-child(2) { animation-delay: 0.25s; } .paste span:nth-child(3) { animation-delay: 0.5s; } .paste span:nth-child(4) { animation-delay: 0.75s; }
.flow { justify-self: center; width: 22px; height: 22px; color: var(--ink); animation: nudge 6s var(--ease) infinite; }
.stack { position: relative; height: 120px; }
.stack i { position: absolute; inset: 0; border-radius: 12px; background: var(--surface); border: 2px solid var(--edge); box-shadow: 3px 3px 0 var(--edge); display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.stack i:nth-child(1) { transform: rotate(-7deg) translate(-6px, 6px); background: var(--burst); }
.stack i:nth-child(2) { transform: rotate(4deg) translate(5px, 2px); }
.stack i:nth-child(3) { animation: deal 6s var(--spring) infinite; }
.stack i small { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 700; color: var(--good); letter-spacing: 0; }
@keyframes row-in { 0% { opacity: 0; transform: translateX(-8px); } 8%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes nudge { 0%, 30% { transform: none; opacity: 0.4; } 40% { transform: translateX(5px); opacity: 1; } 50%, 100% { transform: none; opacity: 0.4; } }
@keyframes deal { 0%, 6% { transform: translateY(-30px) rotate(-8deg) scale(0.9); opacity: 0; } 18%, 92% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }

/* Viz 2: a word card that flips */
.flip { width: 210px; height: 128px; perspective: 800px; }
.flip-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: flip 5.2s var(--spring) infinite; }
.flip-in > div { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 16px; background: var(--surface); border: 2px solid var(--edge); box-shadow: 3px 3px 0 var(--edge); display: grid; place-content: center; text-align: center; padding: 14px; gap: 4px; }
.flip-in .front b { font-size: 28px; letter-spacing: -0.03em; }
.flip-in .front span, .flip-in .back span { font-size: 12px; font-weight: 700; color: var(--slate); }
.flip-in .back { transform: rotateY(180deg); background: var(--burst); color: #111; }
.flip-in .back p { font-size: 15px; font-weight: 600; line-height: 1.35; }
.flip-in .back span { color: rgba(17, 17, 17, 0.7); }
@keyframes flip { 0%, 38% { transform: none; } 50%, 88% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }

/* Viz 3: an SAT-style question */
.q { width: 236px; display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 2px solid var(--edge); box-shadow: 3px 3px 0 var(--edge); font-size: 12.5px; }
.q p { font-weight: 700; font-size: 13px; line-height: 1.35; margin-bottom: 2px; }
.q span { display: flex; gap: 8px; align-items: center; padding: 3px 8px; border-radius: 8px; border: 1.5px solid var(--line); color: var(--slate); }
.q span b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--edge); font-size: 11px; color: var(--ink); flex: none; }
.q span.right { animation: pick 5s var(--ease) infinite; }
@keyframes pick { 0%, 45% { border-color: var(--line); background: transparent; color: var(--slate); } 55%, 92% { border-color: var(--edge); background: var(--burst); color: #111; } 100% { border-color: var(--line); } }

/* How it works: the mascot walks a sticker track while three tilted step cards wait below. */
.how { padding: 112px 0 96px; }
.track { position: relative; height: 128px; margin: 8px 0 26px; }
.track::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 16px; border-radius: 999px; border: 2.5px solid var(--edge); background: var(--surface); box-shadow: 3px 3px 0 var(--edge); }
.track .progress { position: absolute; left: 3px; right: 3px; bottom: 7px; height: 10px; border-radius: 999px; background: var(--burst); transform-origin: left; transform: scaleX(0.66); z-index: 1; }
.walker { position: absolute; bottom: 16px; left: calc(66% - 52px); width: 104px; height: 105px; background: url(img/walk-sprite.svg) 0 0 / 832px 105px no-repeat; z-index: 2; }
.flag-end { position: absolute; right: 4px; bottom: 30px; font: 600 26px/1 'Caveat', 'Comic Sans MS', cursive; transform: rotate(6deg); }
.how.in .track .progress { animation: fill 7s linear infinite; }
.how.in .walker { animation: step 0.8s steps(8) infinite, walk 7s linear infinite; }
.how.in .flag-end { animation: cheer 7s var(--ease) infinite; }
@keyframes step { to { background-position: -832px 0; } }
@keyframes walk { from { left: 0; } to { left: calc(100% - 104px); } }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cheer { 0%, 88% { scale: 1; rotate: 0deg; } 93% { scale: 1.25; rotate: -8deg; } 100% { scale: 1; rotate: 0deg; } }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; counter-reset: step; }
.steps li { position: relative; counter-increment: step; padding: 24px; border-radius: 22px; background: var(--surface); border: 2.5px solid var(--edge); box-shadow: var(--sticker); rotate: var(--tilt, 0deg); transition: rotate 420ms var(--snap), translate 420ms var(--snap), box-shadow 240ms var(--ease); }
.steps li:nth-child(1) { --tilt: -1.4deg; } .steps li:nth-child(2) { --tilt: 1deg; } .steps li:nth-child(3) { --tilt: -0.8deg; }
.steps li:hover { rotate: 0deg; translate: 0 -6px; box-shadow: 8px 10px 0 var(--edge); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--burst); color: #111; border: 2.5px solid var(--edge); box-shadow: 3px 3px 0 var(--edge); font-weight: 800; font-size: 20px; margin-bottom: 16px; }
.steps li:hover::before { animation: sk-wobble 620ms var(--ease); }
.steps h3 { margin-bottom: 6px; }
.steps p { color: var(--slate); font-size: 17px; }
.step-note { position: absolute; top: 22px; right: 18px; font-size: 26px; line-height: 1; transform: rotate(8deg); }

/* Features: a bento of tilted sticker tiles. */
.features { padding: 16px 0 112px; }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; }
.tile { grid-column: span 2; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 22px; background: var(--surface); border: 2.5px solid var(--edge); box-shadow: var(--sticker); position: relative; }
.bento > :nth-child(1) { --tilt: -0.9deg; } .bento > :nth-child(2) { --tilt: 0.8deg; } .bento > :nth-child(3) { --tilt: 1.2deg; } .bento > :nth-child(4) { --tilt: -1.3deg; } .bento > :nth-child(5) { --tilt: 0.9deg; }
.tile { rotate: var(--tilt, 0deg); transition: rotate 420ms var(--snap), translate 420ms var(--snap), box-shadow 240ms var(--ease), opacity 700ms var(--ease), transform 900ms var(--spring); }
.tile:hover { rotate: 0deg; translate: 0 -6px; box-shadow: 8px 10px 0 var(--edge); }
.tile h3 { font-size: 22px; }
.tile p { color: var(--slate); font-size: 16.5px; }
.tile .pose { width: 112px; height: 112px; margin: 0 0 6px; padding: 12px; border-radius: 50%; background: var(--burst); border: 2.5px solid var(--edge); box-shadow: 3px 3px 0 var(--edge); }
.tile:hover .pose { animation: sk-wobble 620ms var(--ease); }
.tile.wide { grid-column: span 3; flex-direction: row; align-items: center; gap: 24px; }
.tile.wide > div { display: grid; gap: 10px; }
.tile.wide .pose { flex: none; width: 140px; height: 140px; margin: 0; }
.ring-demo { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.ring-demo svg { width: 54px; height: 54px; transform: rotate(-90deg); }
.ring-demo circle { fill: none; stroke-width: 7; }
.ring-demo .bg { stroke: var(--surface-2); }
.ring-demo .fg { stroke: var(--burst-deep); stroke-linecap: round; stroke-dasharray: 138; stroke-dashoffset: 34; }
.js .ring-demo .fg { stroke-dashoffset: 138; transition: stroke-dashoffset 1400ms var(--ease) 400ms; }
.js .tile.in .ring-demo .fg { stroke-dashoffset: 34; }
.ring-demo b { font-size: 26px; letter-spacing: -0.03em; }
.ring-demo span { font-size: 14px; color: var(--slate); font-weight: 600; display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.chips span { padding: 5px 12px; border-radius: 999px; background: var(--paper); border: 2px solid var(--edge); font-size: 14px; font-weight: 700; transition: background-color 160ms, rotate 300ms var(--snap); }
.chips span:nth-child(odd) { rotate: -2deg; } .chips span:nth-child(even) { rotate: 1.5deg; }
.chips span:hover { background: var(--burst); rotate: 0deg; animation: sk-wobble 520ms var(--ease); }

/* Pricing: two sticker cards; the yearly option gets a hand-drawn ring and a "best deal" note. */
.pricing { padding: 112px 0; background: var(--surface); border-block: 2.5px solid var(--edge); }
.plans { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 30px; align-items: stretch; max-width: 1040px; margin: 0 auto; }
.plan { display: flex; flex-direction: column; gap: 18px; padding: 30px; border-radius: 24px; background: var(--paper); border: 2.5px solid var(--edge); box-shadow: var(--sticker); rotate: -1deg; transition: rotate 420ms var(--snap), box-shadow 240ms var(--ease), opacity 700ms var(--ease), transform 900ms var(--spring); }
.plan.pro { background: var(--surface); border-width: 3px; box-shadow: 8px 8px 0 var(--edge); rotate: 0.8deg; }
.plan:hover { rotate: 0deg; }
.plan h3 { font-size: 26px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan .price { font-size: 46px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.plan .price small { font-size: 16px; font-weight: 600; color: var(--slate); letter-spacing: 0; margin-left: 4px; }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 16.5px; line-height: 1.45; }
.plan li svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.plan li.later svg { color: var(--slate); }
.plan .note { font-size: 14.5px; color: var(--slate); }
.plan .btn { align-self: flex-start; margin-top: auto; }
.options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 44px; }
.opt { position: relative; display: grid; align-content: start; gap: 2px; padding: 18px 14px 14px; border-radius: 16px; border: 2px solid var(--edge); background: var(--paper); }
.opt b { font-size: 28px; letter-spacing: -0.035em; line-height: 1.1; }
.opt span { font-size: 13.5px; color: var(--slate); font-weight: 600; line-height: 1.35; }
.opt .name { font-size: 12.5px; font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em; }
.opt.best { background: var(--burst); color: #111; box-shadow: 3px 3px 0 var(--edge); rotate: -1.5deg; }
.opt.best span { color: rgba(17, 17, 17, 0.75); }
.opt.best .name { color: #111; }
.opt .flag { position: absolute; bottom: calc(100% + 4px); right: -6px; font-size: 27px; line-height: 1; color: var(--ink); white-space: nowrap; transform: rotate(5deg); }
.opt .flag .doodle { right: calc(100% - 6px); top: 6px; width: 40px; height: 34px; transform: rotate(-4deg); }
.opt b { position: relative; justify-self: start; }
.opt .doodle.ring { left: -16%; top: -22%; width: 134%; height: 150%; }
.opt .doodle.ring path { stroke-width: 2.4; }
.pricing-foot { text-align: center; margin-top: 34px; color: var(--slate); font-size: 16px; }

/* Privacy: a yellow band with three hand-stuck notes. */
.band { padding: 96px 0; background: var(--burst); color: #111; border-block: 2.5px solid var(--edge); }
.band-head { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 44px; text-align: center; }
.band .disc { width: 120px; height: 120px; padding: 12px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--edge); box-shadow: var(--sticker); rotate: -8deg; transition: rotate 420ms var(--snap); }
.band .disc:hover { rotate: 6deg; animation: sk-wobble 620ms var(--ease); }
.notes { list-style: none; padding: 0; margin: 0 0 34px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.notes li { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 20px; background: var(--surface); border: 2.5px solid var(--edge); box-shadow: var(--sticker); rotate: var(--tilt, 0deg); transition: rotate 420ms var(--snap), translate 420ms var(--snap), box-shadow 240ms var(--ease), opacity 700ms var(--ease), transform 900ms var(--spring); }
.notes li:nth-child(1) { --tilt: -1.6deg; } .notes li:nth-child(2) { --tilt: 1.2deg; } .notes li:nth-child(3) { --tilt: -0.8deg; }
.notes li:hover { rotate: 0deg; translate: 0 -6px; box-shadow: 8px 10px 0 var(--edge); }
.notes svg { width: 40px; height: 40px; padding: 7px; border-radius: 12px; background: var(--burst); border: 2px solid var(--edge); margin-bottom: 6px; }
.notes b { font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; }
.notes span { font-size: 16.5px; color: var(--slate); line-height: 1.5; }
.band .small { text-align: center; font-size: 16px; font-weight: 600; }
.band a { font-weight: 800; text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* FAQ: sticker rows that spring open. */
.faq { padding: 112px 0 64px; }
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 14px; }
.faq details { border-radius: 18px; background: var(--surface); border: 2.5px solid var(--edge); box-shadow: var(--sticker); rotate: var(--tilt, 0deg); transition: rotate 420ms var(--snap), box-shadow 240ms var(--ease), opacity 700ms var(--ease), transform 900ms var(--spring); }
.faq details:nth-child(odd) { --tilt: -0.5deg; } .faq details:nth-child(even) { --tilt: 0.5deg; }
.faq details:hover, .faq details[open] { rotate: 0deg; }
.faq details[open] { box-shadow: 7px 7px 0 var(--edge); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 18px 22px; font-weight: 700; font-size: 18px; line-height: 1.35; border-radius: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--burst); border: 2px solid var(--edge); font-size: 24px; font-weight: 700; line-height: 1; transition: rotate 520ms var(--spring); }
.faq summary:hover::after { animation: sk-wobble 520ms var(--ease); }
.faq details[open] summary::after { rotate: 135deg; }
.faq .answer { padding: 0 22px 22px; color: var(--slate); font-size: 17px; display: grid; gap: 10px; }
.faq details[open] .answer { animation: spring-open 620ms var(--spring) both; transform-origin: 50% 0; }
@keyframes spring-open { from { opacity: 0; transform: translateY(-12px) scaleY(0.85); } }

/* Closing: the stickers come back around one big line. */
.closing { position: relative; display: grid; place-items: center; min-height: 560px; padding: 96px var(--gutter) 110px; text-align: center; overflow: hidden; border-top: 2.5px solid var(--edge); }
.closing-copy { position: relative; z-index: 2; display: grid; gap: 22px; justify-items: center; max-width: 780px; pointer-events: none; }
.closing-copy > * { pointer-events: auto; }
.closing h2 { font-size: clamp(40px, 5.2vw, 72px); line-height: 1; letter-spacing: -0.045em; }
.closing p { font-size: 19px; color: var(--slate); }

/* Footer */
.footer { border-top: 2.5px solid var(--edge); background: var(--surface); padding: 36px 0 48px; font-size: 15px; color: var(--slate); }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
.footer .brand { font-size: 18px; color: var(--ink); margin-right: auto; }
.footer .brand img { width: 26px; height: 26px; transition: rotate 520ms var(--spring); }
.footer .brand:hover img { rotate: -14deg; }
.footer a { text-decoration: none; font-weight: 600; transition: rotate 300ms var(--snap), color 160ms; }
.footer a:not(.brand) { display: inline-block; }
.footer a:not(.brand):hover { color: var(--ink); rotate: -3deg; text-decoration: underline wavy var(--burst-deep); text-underline-offset: 5px; }

/* A little mascot that rides along once you scroll past the hero; tap it to go back up. */
.buddy { position: fixed; z-index: 15; right: 22px; bottom: 22px; width: 68px; height: 68px; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; scale: 0.4; pointer-events: none; transition: opacity 240ms var(--ease), scale 520ms var(--spring); }
.buddy[data-on] { opacity: 1; scale: 1; pointer-events: auto; }
.buddy-in { display: grid; place-items: center; width: 100%; height: 100%; padding: 7px; border-radius: 50%; background: var(--burst); border: 2.5px solid var(--edge); box-shadow: var(--sticker); rotate: var(--turn, 0deg); transition: translate 180ms var(--snap), box-shadow 180ms var(--snap); }
.buddy:hover .buddy-in { translate: -2px -2px; box-shadow: 6px 6px 0 var(--edge); }
.buddy:active .buddy-in { translate: 4px 4px; box-shadow: 0 0 0 var(--edge); }
.buddy img { width: 100%; height: 100%; }

/* Title doodle: a scribbled underline that draws itself under each page's headline. */
.doodle.title-doodle { position: relative; display: block; width: min(260px, 60%); height: 22px; margin: -6px 0 22px; }
.doodle.title-doodle path { stroke-width: 4; }
.section-head.center .title-doodle, .page-head .title-doodle { margin-inline: auto; }

/* Simple content pages (beta, privacy, account) */
.page { max-width: 740px; margin: 0 auto; padding: 40px var(--gutter) 96px; }
.page h1 { font-size: clamp(38px, 6vw, 58px); margin-bottom: 14px; }
.page h2 { font-size: 26px; margin: 40px 0 12px; }
.page p, .page li { color: var(--slate); }
.page p + p { margin-top: 14px; }
.page ol { padding-left: 0; list-style: none; counter-reset: step; margin: 28px 0; }
.page ol li { counter-increment: step; position: relative; padding: 4px 0 22px 58px; color: var(--ink); }
.page ol li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--burst); color: #111; border: 2.5px solid var(--edge); box-shadow: 2px 2px 0 var(--edge); font-weight: 800; rotate: -6deg; }
.page ol li:nth-child(even)::before { rotate: 5deg; }
.page code { font-size: 0.9em; background: var(--surface); border: 2px solid var(--edge); border-radius: 7px; padding: 1px 6px; color: var(--ink); }
.page .pose { width: 132px; height: 132px; margin-bottom: 18px; padding: 12px; border-radius: 50%; background: var(--burst); border: 2.5px solid var(--edge); box-shadow: var(--sticker); rotate: -7deg; transition: rotate 420ms var(--snap); }
.page .pose:hover { rotate: 5deg; animation: sk-wobble 620ms var(--ease); }
.callout { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 2.5px solid var(--edge); box-shadow: var(--sticker); margin: 26px 0; rotate: -0.6deg; }
.callout svg { width: 24px; height: 24px; flex: none; color: var(--ink); margin-top: 2px; }
.callout p { color: var(--ink) !important; }
.callout p + p { margin-top: 6px; }

/* Article pages (research, believe): Read mode. Calm text, playful edges. */
.article { max-width: 760px; margin: 0 auto; padding: 40px var(--gutter) 88px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14.5px; color: var(--slate); margin-bottom: 22px; }
.crumbs a { text-decoration: none; font-weight: 600; }
.crumbs a:hover { color: var(--ink); text-decoration: underline wavy var(--burst-deep); text-underline-offset: 4px; }
.crumbs span[aria-hidden] { opacity: 0.6; }
.article h1 { font-size: clamp(38px, 5.4vw, 58px); line-height: 1.03; margin-bottom: 16px; }
.article .lede { margin-bottom: 30px; }
.article h2 { font-size: clamp(26px, 3vw, 32px); margin: 52px 0 14px; }
.article h3 { font-size: 21px; margin: 30px 0 8px; }
.article p, .article li { font-size: 18.5px; line-height: 1.7; }
.article p + p { margin-top: 16px; }
.article ul, .article ol { padding-left: 22px; margin: 14px 0; display: grid; gap: 8px; }
.article ul:not(.study-list) { list-style: none; padding-left: 30px; }
.article ul:not(.study-list) > li { position: relative; }
.article ul:not(.study-list) > li::before { content: ''; position: absolute; left: -28px; top: 0.55em; width: 13px; height: 13px; border-radius: 4px; background: var(--burst); border: 2px solid var(--edge); rotate: 12deg; }
.article blockquote { position: relative; margin: 28px 0; padding: 22px 24px 20px 26px; border-radius: 18px; background: var(--surface); border: 2.5px solid var(--edge); box-shadow: var(--sticker); font-size: 19px; font-weight: 600; line-height: 1.5; rotate: -0.6deg; }
.article blockquote + blockquote { rotate: 0.5deg; }
.article blockquote::before { content: '“'; position: absolute; left: -14px; top: -20px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--burst); border: 2.5px solid var(--edge); font-size: 34px; font-weight: 800; line-height: 1; padding-top: 12px; }
.article blockquote p { font-size: inherit; line-height: inherit; }
.article blockquote cite { display: block; margin-top: 8px; font-style: normal; font-size: 14.5px; font-weight: 600; color: var(--slate); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5px; margin: 26px 0 8px; border-radius: 18px; overflow: hidden; border: 2.5px solid var(--edge); background: var(--edge); box-shadow: var(--sticker); }
.facts div { padding: 14px 18px; background: var(--surface); }
.facts div:first-child { background: var(--burst); }
.facts dt { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate); }
.facts div:first-child dt { color: #111; }
.facts dd { margin: 3px 0 0; font-size: 16.5px; font-weight: 600; line-height: 1.4; }
/* Caveats: a hand-labelled sticky note, tilted a hair. */
.caveats { position: relative; margin: 40px 0 18px; padding: 26px 26px 22px; border-radius: 16px; background: #fff4c7; color: #111; border: 2.5px solid var(--edge); box-shadow: var(--sticker); rotate: -0.7deg; }
.hand-tag { position: absolute; top: -22px; right: 18px; padding: 0 10px; background: var(--paper); font-size: 27px; line-height: 1.2; rotate: 4deg; }
.article .caveats h2 { margin: 0 0 8px; font-size: 22px; }
.caveats ul { margin: 0; }
.article .caveats li { font-size: 17px; }
.paper { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.paper .btn { flex: none; }
.article .paper span { font-size: 16px; line-height: 1.5; color: var(--slate); flex: 1 1 260px; }
.relate { margin: 44px 0 0; padding: 26px; border-radius: 22px; background: var(--surface); border: 2.5px solid var(--edge); box-shadow: var(--sticker); display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 22px; align-items: start; rotate: 0.5deg; }
.relate img { width: 96px; height: 96px; padding: 10px; border-radius: 50%; background: var(--burst); border: 2.5px solid var(--edge); rotate: -8deg; transition: rotate 420ms var(--snap); }
.relate:hover img { rotate: 6deg; }
.article .relate h2 { margin: 0 0 8px; font-size: 24px; }
.article .relate p { font-size: 17px; color: var(--slate); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 44px; }
.pager a, .study-list a { border: 2.5px solid var(--edge); box-shadow: var(--sticker); background: var(--surface); text-decoration: none; transition: rotate 420ms var(--snap), translate 420ms var(--snap), box-shadow 240ms var(--ease); }
.pager a:hover, .study-list a:hover { rotate: 0deg; translate: -3px -5px; box-shadow: 7px 9px 0 var(--edge); }
.pager a:active, .study-list a:active { translate: 3px 3px; box-shadow: 0 0 0 var(--edge); transition-duration: 80ms; }
.pager a { display: grid; gap: 4px; padding: 18px 20px; border-radius: 18px; rotate: 0.8deg; }
.pager a:first-child:not(.next) { rotate: -0.8deg; }
.pager span { font-size: 13px; font-weight: 700; color: var(--slate); }
.pager b { font-size: 17px; line-height: 1.3; }
.pager .next { text-align: right; grid-column: 2; }
.study-list { list-style: none; padding: 0 !important; display: grid; gap: 16px !important; }
.study-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 18px 20px; border-radius: 18px; }
.study-list li:nth-child(odd) a { rotate: -0.6deg; } .study-list li:nth-child(even) a { rotate: 0.6deg; }
.study-list b { font-size: 18px; line-height: 1.35; }
.study-list span { grid-column: 1; font-size: 15px; color: var(--slate); line-height: 1.45; }
.study-list i { grid-row: 1 / span 2; grid-column: 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--burst); border: 2px solid var(--edge); font-style: normal; font-size: 20px; font-weight: 800; color: #111; transition: translate 380ms var(--spring); }
.study-list a:hover i { translate: 4px 0; }
.sign { display: flex; align-items: center; gap: 16px; margin-top: 44px; padding-top: 26px; border-top: 2.5px dashed var(--line); }
.sign img { width: 68px; height: 68px; padding: 8px; border-radius: 50%; background: var(--burst); border: 2.5px solid var(--edge); box-shadow: 3px 3px 0 var(--edge); rotate: -8deg; transition: rotate 420ms var(--snap); }
.sign:hover img { rotate: 8deg; }
.article .sign p { font-size: 16px; line-height: 1.4; margin: 0; color: var(--slate); }
.sign b { display: block; font-size: 20px; color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin-top: 30px; }

/* Pricing page */
.plan h2 { font-size: 26px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.compare-wrap { overflow-x: auto; margin-top: 12px; padding: 0 8px 8px 0; }
.compare { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 0; border: 2.5px solid var(--edge); border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: var(--sticker); font-size: 16.5px; }
.compare th, .compare td { padding: 14px 18px; text-align: left; border-bottom: 1.5px solid var(--line); vertical-align: top; line-height: 1.45; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare thead th { background: var(--burst); color: #111; border-bottom: 2.5px solid var(--edge); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }
.compare tbody tr { transition: background-color 160ms; }
.compare tbody tr:hover { background: color-mix(in srgb, var(--burst) 16%, var(--surface)); }
.compare td { width: 27%; color: var(--slate); }
.compare td b { color: var(--ink); }
.compare tbody th { font-weight: 600; }
.page-head { padding-top: 48px; padding-bottom: 8px; }

/* Landing page */
.landing-hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 52px; align-items: center; padding-top: 40px; padding-bottom: 72px; }
.landing-hero .hero-copy { display: grid; gap: 20px; justify-items: start; }
.landing-hero h1 { font-size: clamp(40px, 5vw, 62px); }
.landing-hero .title-doodle { margin: -14px 0 0; }
.landing-hero .hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 14px 22px; margin-top: 4px; }
.landing-hero .demo-frame { rotate: 0.8deg; }
.prose-wide { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter) 72px; }
.prose-wide h2 { font-size: clamp(26px, 3vw, 34px); margin: 48px 0 14px; }
.prose-wide p, .prose-wide li { font-size: 18.5px; line-height: 1.7; color: var(--slate); }
.prose-wide p + p { margin-top: 14px; }
.prose-wide ul { list-style: none; padding-left: 30px; display: grid; gap: 8px; }
.prose-wide ul > li { position: relative; }
.prose-wide ul > li::before { content: ''; position: absolute; left: -28px; top: 0.55em; width: 13px; height: 13px; border-radius: 4px; background: var(--burst); border: 2px solid var(--edge); rotate: 12deg; }
.prose-wide b { color: var(--ink); }
.eyebrow { padding: 5px 14px 5px 10px; border-radius: 999px; border: 2px solid var(--edge); background: var(--surface); color: var(--ink); box-shadow: 2px 2px 0 var(--edge); rotate: -1.5deg; }
.article .eyebrow { margin-bottom: 18px; }
.eyebrow::before { box-shadow: none; border: 1.5px solid var(--edge); width: 10px; height: 10px; }

/* Scroll reveal: only when JS is on (site.js adds .js) and motion is allowed. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease), transform 900ms var(--spring), rotate 420ms var(--snap), translate 420ms var(--snap), box-shadow 240ms var(--ease); transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s, 0s; }
.js .reveal.in { opacity: 1; transform: none; }
.hero-copy > *, .page-head > *, .article > *, .page > * { animation: rise 800ms var(--spring) both; }
.hero-copy > :nth-child(2) { animation-delay: 60ms; } .hero-copy > :nth-child(3) { animation-delay: 140ms; } .hero-copy > :nth-child(4) { animation-delay: 220ms; } .hero-copy > :nth-child(5) { animation-delay: 280ms; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}


@media (max-width: 1080px) {
  .nav-links { gap: 20px; }
  .landing-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 32px; }
  /* Narrower screens: fewer stickers, parked in bands above and below the copy. */
  .hero { min-height: 0; padding-top: 136px; padding-bottom: 136px; }
  .sk:not([data-m]) { display: none; }
  .sk[data-m] { left: var(--mx); top: var(--my); }
  .cta-note { position: static; flex-basis: 100%; width: auto; display: flex; justify-content: center; align-items: flex-end; gap: 4px; margin-top: -2px; }
  .cta-note .doodle { position: relative; left: auto; top: auto; flex: none; width: 40px; height: 30px; transform: scale(-1, 1) rotate(20deg); }
  .hero-copy { max-width: 720px; }
  .cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile, .tile.wide { grid-column: span 1; }
  .tile.wide { flex-direction: column; align-items: flex-start; }
  .tile.wide .pose { width: 112px; height: 112px; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .menu { display: block; }
  .nav { gap: 12px; }
  .nav-cta { margin-left: auto; }
  .uses-grid, .steps { grid-template-columns: minmax(0, 1fr); }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .notes { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .uses-grid { max-width: 520px; margin-inline: auto; }
  .plans { max-width: 560px; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  body { font-size: 17px; }
  h1 { font-size: 42px; }
  .lede, .hero .lede { font-size: 18.5px; }
  .nav { height: 64px; }
  .brand { font-size: 20px; }
  .brand img { width: 30px; height: 30px; }
  .nav-cta .btn { padding: 10px 14px; font-size: 14.5px; }
  .hero { padding-top: 116px; padding-bottom: 140px; }
  .hero .lede { font-size: 18px; }
  .btn.big { padding: 16px 26px; font-size: 18px; }
  .sk-disc .sk-in { width: 86px; height: 86px; padding: 8px; }
  .sk-xp .sk-in { font-size: 19px; padding: 7px 14px; }
  .sk-flame .sk-in { padding: 7px 12px 7px 9px; }
  .sk-flame svg { width: 26px; height: 26px; }
  .sk-flame b { font-size: 22px; }
  .sk-burst .sk-in { width: 84px; height: 84px; }
  .research { padding-top: 64px; }
  .rcard .claim { font-size: 20px; }
  .research-foot { justify-content: space-between; }
  .demo-host { min-height: 814px; padding: 10px 8px 10px; }
  .demo-frame { border-width: 2.5px; box-shadow: 6px 6px 0 var(--edge); }
  .demo-bar { padding: 9px 12px; }
  .demo-bar span { margin-left: 8px; }
  .section-head { margin-bottom: 28px; }
  /* Research: a swipeable row with the next card peeking in. */
  .research { padding-bottom: 72px; }
  .cards4 { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 16px var(--gutter) 24px; scroll-padding: 0 var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .cards4::-webkit-scrollbar { display: none; }
  .cards4 > li { flex: 0 0 84%; scroll-snap-align: start; }
  .rcard:hover { transform: rotate(var(--tilt)); box-shadow: var(--sticker); }
  .swipe-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--slate); }
  .uses, .how, .pricing { padding: 72px 0; }
  .features { padding-bottom: 72px; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .options { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .opt { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 14px 16px; }
  .opt .name { grid-column: 1; grid-row: 1; }
  .opt > span:not(.name):not(.flag) { grid-column: 1; grid-row: 2; }
  .opt b { grid-column: 2; grid-row: 1 / span 2; font-size: 26px; }
  .plan { padding: 22px; }
  .plan .price { font-size: 40px; }
  .faq { padding-top: 72px; }
  .faq summary { padding: 18px; font-size: 17px; }
  .faq .answer { padding: 0 18px 18px; font-size: 16.5px; }
  .closing { min-height: 0; padding: 124px var(--gutter) 128px; }
  .closing p { font-size: 17.5px; }
  .band { padding: 64px 0; }
  .band-head { flex-direction: column; gap: 14px; margin-bottom: 30px; }
  .band .disc { width: 96px; height: 96px; }
  .notes li { padding: 20px; }
  .steps { gap: 20px; }
  .step-note { font-size: 23px; }
  .flag-end { font-size: 22px; }
  .flips .turn { top: -10px; right: -6px; }
  .opt .flag { right: 8px; }
  .opt.best { margin-top: 30px; }
  .buddy { display: none; }
  .tile .pose, .tile.wide .pose { width: 84px; height: 84px; padding: 9px; }
  .tile { padding: 22px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .relate { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .relate img { width: 72px; height: 72px; }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager .next { grid-column: 1; }
  .article p, .article li, .prose-wide p, .prose-wide li { font-size: 17.5px; }
  .footer .brand { flex-basis: 100%; }
}
@media (max-width: 640px) { .cta-free { display: none; } }