/* repfun.app — Dropset's layout in RepFun's sketchbook look (docs/design/visual-system.md).
   Tokens mirror apps/mobile/src/theme.ts: paper, a whiter sheet, graphite ink, one honey highlighter. */

@font-face { font-family: "Architects Daughter"; src: url(/fonts/ArchitectsDaughter_400Regular.woff) format("woff"); font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url(/fonts/SpaceGrotesk_700Bold.woff) format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/Inter_400Regular.woff) format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/Inter_600SemiBold.woff) format("woff"); font-weight: 600; font-display: swap; }

:root {
  --paper: #F2EEE4;
  --sheet: #FBF9F4;
  --ink: #2B2A2E;
  --ink-2: #5E5A57;
  --line: #2B2A2E;
  --honey: #E3B95C;
  --honey-edge: #7A5512;
  --honey-tint: #F1DDA8;
  --climb: #A24A22;
  --ride: #2A6FAE;
  --core: #6A4FC8;
  --fort: #2A7146;
  --cat-ink: none;          /* cat art is black graphite on transparent paper */
  --hand: "Architects Daughter", "Comic Sans MS", cursive;
  --num: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sketch: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --sketch-2: 18px 225px 18px 255px / 255px 18px 225px 18px;
  --wrap: 960px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1E1D20; --sheet: #29282C; --ink: #EDE8DD; --ink-2: #B5AFA6; --line: #D9D3C7;
    --honey-tint: #4A3C1C; --climb: #E08A63; --ride: #7DB2E8; --core: #A994F0; --fort: #74C08F;
    --cat-ink: invert(0.92); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1E1D20; --sheet: #29282C; --ink: #EDE8DD; --ink-2: #B5AFA6; --line: #D9D3C7;
  --honey-tint: #4A3C1C; --climb: #E08A63; --ride: #7DB2E8; --core: #A994F0; --fort: #74C08F;
  --cat-ink: invert(0.92); color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.55 var(--body); overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
img[src*="/cat/"] { filter: var(--cat-ink); }
a { color: inherit; }
h1, h2, h3 { font-family: var(--hand); font-weight: 400; line-height: 1.05; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.center { text-align: center; }
.muted { color: var(--ink-2); }
.big { font-size: clamp(44px, 8vw, 92px); }

/* The highlighter: honey sits behind graphite, never as text colour. */
.hl {
  background: linear-gradient(transparent 52%, var(--honey) 52%, var(--honey) 88%, transparent 88%);
  padding: 0 .08em; color: inherit;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hl { color: var(--ink); } }

/* Buttons: pencil outline, hatched 4px edge the face drops onto when pressed. */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: 2px solid var(--line); border-radius: var(--sketch-2);
  background: var(--honey); color: #2B2A2E; font: 400 19px/1 var(--hand); text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 0 -0px var(--line); transition: transform .08s ease, box-shadow .08s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--line); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--line); }
.btn:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--honey-edge); outline-offset: 3px; }
.btn-small { min-height: 40px; font-size: 17px; padding: 0 18px; }
.btn-ghost { background: var(--sheet); color: var(--ink); }

/* Nav: logo left, one Download button right (Dropset). */
.nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1.5px dashed color-mix(in srgb, var(--line) 35%, transparent); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 400 26px/1 var(--hand); }
.brand img { border-radius: 9px; }

/* Hero */
.hero { position: relative; padding: clamp(56px, 12vw, 150px) 0 40px; }
.hero h1 { font-size: clamp(54px, 10.5vw, 112px); max-width: 11ch; }
.lede { margin-top: 28px; max-width: min(34em, 100% - 300px); font-size: clamp(18px, 2.1vw, 21px); color: var(--ink-2); }
.hero-cat { position: absolute; right: -10px; bottom: 10px; width: clamp(150px, 26vw, 300px); transform: rotate(4deg); pointer-events: none; }
@media (max-width: 720px) { .hero-cat { position: static; margin: 24px auto 0; width: 220px; } .lede { max-width: none; } }

/* Store badges */
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; }
.stores.center { justify-content: center; }
.store { display: inline-block; height: 56px; }
.store img { height: 56px; width: auto; }
.store-soon {
  display: inline-flex; flex-direction: column; justify-content: center; height: 56px; padding: 0 18px;
  border: 2px dashed var(--line); border-radius: 12px; background: var(--sheet); color: var(--ink);
  font: 600 13px/1.2 var(--body); text-decoration: none; cursor: pointer;
}
.store-soon b { font: 400 19px/1.1 var(--hand); }

/* Phone: graphite bezel around a real screenshot. */
.phone {
  position: relative; width: min(330px, 70vw); aspect-ratio: 440 / 956; padding: 9px;
  background: var(--ink); border-radius: 54px;
  box-shadow: 10px 12px 0 -2px var(--paper), 10px 12px 0 0 var(--line);
}
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 46px; background: #F2EEE4; }
.phone::after { /* hatched shadow, the sketch kit's depth */
  content: ""; position: absolute; inset: 22px -18px -18px 22px; z-index: -1; border-radius: 54px;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--line) 45%, transparent) 0 1.5px, transparent 1.5px 7px);
}
.phone-tilt { transform: rotate(3deg); }

/* Scroll scene: labels on the left, sticky phone on the right (Dropset's hero scene). */
.scene { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: 40px; padding: 40px 0 80px; }
.scene-labels { list-style: none; margin: 0; padding: 18vh 0 30vh; display: grid; gap: 34vh; }
.scene-labels li { border-top: 2px solid var(--line); padding-top: 14px; opacity: .3; transition: opacity .35s ease; }
.scene-labels li.on { opacity: 1; }
.scene-labels b { display: block; font: 400 clamp(26px, 3.2vw, 36px)/1.1 var(--hand); }
.scene-labels span { display: block; margin-top: 6px; color: var(--ink-2); max-width: 26em; }
.scene-stage { position: sticky; top: 96px; height: max-content; display: grid; justify-items: center; }
.scene-stage .phone img { transition: opacity .25s ease; }
.scene-cat { position: absolute; left: -120px; bottom: -20px; width: 190px; pointer-events: none; }
@media (max-width: 860px) {
  .scene { grid-template-columns: 1fr; }
  .scene-stage { position: static; order: -1; }
  .scene-labels { padding: 0; gap: 22px; }
  .scene-labels li { opacity: 1; }
  .scene-cat { left: -6px; width: 120px; }
}

/* Made for… */
.made { padding: 60px 0; }
.made h2 { font-size: clamp(36px, 5.5vw, 60px); }
.made p { margin-top: 20px; max-width: 40em; font-size: 19px; color: var(--ink-2); }
.chips { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 8px 16px; border: 2px solid var(--line); border-radius: var(--sketch); background: var(--sheet); font-weight: 600; font-size: 15px; }
.chips li:nth-child(3n+1) { background: var(--honey-tint); }

/* Bento */
.bento-wrap { padding: 70px 0; }
.bento { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tile {
  display: flex; flex-direction: column; gap: 6px; padding: 24px; min-height: 200px;
  background: var(--sheet); border: 2px solid var(--line); border-radius: var(--sketch);
}
.tile:nth-child(2) { border-radius: var(--sketch-2); }
.tile b { font: 400 24px/1.15 var(--hand); margin-top: auto; }
.tile span { color: var(--ink-2); font-size: 15px; }
.tile svg { width: 52px; height: 52px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tile-tall { grid-row: span 2; background: var(--honey-tint); }
.tile-num { font: 700 clamp(72px, 11vw, 132px)/0.9 var(--num); letter-spacing: -0.04em; }
.tile-wide { grid-column: span 2; flex-direction: row; align-items: center; gap: 18px; }
.tile-wide b { margin: 0 0 6px; display: block; }
.tile-cat { width: 130px; flex: none; }
@media (max-width: 720px) {
  .bento { grid-template-columns: 1fr; }
  .tile-tall, .tile-wide { grid-row: auto; grid-column: auto; }
  .tile { min-height: 0; }
}

/* Games */
.games { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; padding: 80px 0; }
.games-text p { margin-top: 20px; color: var(--ink-2); font-size: 18px; max-width: 32em; }
.modes { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.modes li { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; background: var(--sheet); border: 2px solid var(--line); border-radius: var(--sketch-2); }
.modes img { width: 72px; height: 72px; object-fit: contain; flex: none; }
.modes b { display: block; font: 400 22px/1.1 var(--hand); }
.modes span { color: var(--ink-2); font-size: 15px; }
.m-climb { color: var(--climb); } .m-ride { color: var(--ride); } .m-fort { color: var(--fort); } .m-core { color: var(--core); }
@media (max-width: 860px) { .games { grid-template-columns: 1fr; justify-items: center; } .games-text { justify-self: stretch; } }

/* Fully featured: card with the phone, then a big title + one-liner under it (Dropset). */
.features { padding: 60px 0 40px; }
.features > h2 { margin-bottom: 56px; }
.feature { margin-bottom: 96px; }
.feature-card {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px;
  grid-template-rows: 484px; padding: 36px 56px 0 40px; overflow: hidden;
  background: var(--sheet); border: 2px solid var(--line); border-radius: 28px;
}
.feature:nth-child(odd) .feature-card { grid-template-columns: auto 1fr; padding: 36px 40px 0 56px; }
.feature:nth-child(odd) .feature-side { order: 2; }
.feature-card .phone { align-self: start; box-shadow: none; }
.feature-card .phone::after { display: none; }
.feature-side { display: grid; gap: 8px; max-width: 340px; padding-bottom: 36px; }
.feature-side img { width: 150px; }
.feature-side b { font: 400 26px/1.15 var(--hand); }
.feature-side span { color: var(--ink-2); }
.feature h3 { margin-top: 28px; font-size: clamp(44px, 7vw, 76px); }
.feature > p { margin-top: 6px; font-size: clamp(18px, 2.2vw, 24px); color: var(--ink-2); }
@media (max-width: 720px) {
  .feature-card, .feature:nth-child(odd) .feature-card { grid-template-columns: 1fr; grid-template-rows: auto 440px; padding: 24px 20px 0; justify-items: center; }
  .feature:nth-child(odd) .feature-side { order: 0; }
  .feature-side { padding-bottom: 8px; max-width: none; justify-self: stretch; }
  .feature-card .phone { max-height: 440px; overflow: hidden; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .feature { margin-bottom: 64px; }
}

/* Score */
.score { padding: 60px 0; }
.score-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin: 40px 0 24px; }
.score-tile { min-width: 190px; padding: 22px 24px; text-align: center; background: var(--sheet); border: 2px solid var(--line); border-radius: var(--sketch); }
.score-tile:nth-child(3) { background: var(--honey-tint); border-radius: var(--sketch-2); }
.score-num { font: 700 64px/1 var(--num); letter-spacing: -0.03em; }
.score-tile:nth-child(3) .score-num { font: 400 58px/1.1 var(--hand); }
.score-tile span { color: var(--ink-2); font-size: 15px; }
.score-op { font: 400 48px/1 var(--hand); }

/* Promises */
.promise { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 40px; align-items: center; padding: 70px 0; }
.promise h2 { font-size: clamp(36px, 5vw, 56px); }
.promise ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; font-size: 18px; }
.promise li { padding-left: 34px; position: relative; }
.promise li::before { content: "✓"; position: absolute; left: 0; top: -4px; font: 400 26px/1 var(--hand); background: linear-gradient(transparent 45%, var(--honey) 45%, var(--honey) 90%, transparent 90%); color: var(--ink); }
@media (max-width: 720px) { .promise { grid-template-columns: 1fr; } .promise img { width: 240px; margin: 0 auto; } }

/* Download */
.download { padding: 90px 0 110px; text-align: center; }
.download-cat { width: 170px; margin: 0 auto 10px; }
.price { margin-top: 22px; color: var(--ink-2); }
.waitlist { margin: 44px auto 0; max-width: 520px; padding: 24px; text-align: left; background: var(--sheet); border: 2px solid var(--line); border-radius: var(--sketch); }
.waitlist label { display: block; margin-bottom: 12px; }
.waitlist-row { display: flex; gap: 10px; }
.waitlist input[type=email] {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; font: inherit; color: var(--ink);
  background: var(--paper); border: 2px solid var(--line); border-radius: 12px;
}
.waitlist small { display: block; margin-top: 10px; color: var(--ink-2); }
.waitlist-msg:not(:empty) { margin-top: 10px; font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 480px) { .waitlist-row { flex-direction: column; } }

/* Footer */
.footer { border-top: 1.5px dashed color-mix(in srgb, var(--line) 35%, transparent); padding: 48px 0 56px; }
.footer-inner { display: grid; gap: 18px; justify-items: start; }
.brand-big { font-size: clamp(54px, 9vw, 96px); gap: 16px; }
.brand-big img { width: clamp(64px, 9vw, 96px); border-radius: 20px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer nav a { color: var(--ink-2); }

/* Reveal on scroll (skipped with reduced motion). */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in { opacity: 1; transform: none; }
}