/* Rippit marketing site. Tokens match the app: cream, ink, lime, near-black. */

:root {
  --bg: #f5f2ea;
  --ink: #141412;
  --muted: #3c3934;
  --lime: #73f816;
  --on-lime: #141412;
  --stage: #0e0d0b;
  --stage-ink: #f5f2ea;
  --surface: #e6e1d4;
  --font: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
  --step-lead: 1.25rem;
  --step-display: clamp(2.6rem, 7.5vw, 6.25rem);
  --margin: clamp(1rem, 2.2vw, 2rem);
  --radius: 20px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --bang: cubic-bezier(0.55, 0, 0.85, 0.9);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable both-edges; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.5;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.16em; text-decoration-thickness: 1.5px; }
:target { scroll-margin-top: 5rem; }
::selection { background: var(--lime); color: var(--on-lime); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
h1, h2 { font-weight: 800; letter-spacing: -0.045em; line-height: 0.96; text-wrap: balance; }

.skip {
  position: absolute;
  left: var(--margin);
  top: 0;
  transform: translateY(-120%);
  background: var(--lime);
  color: var(--on-lime);
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  z-index: 5;
  text-decoration: none;
  font-weight: 700;
}
.skip:focus { transform: none; top: 0.6rem; }

.nav {
  display: flex;
  align-items: center;
  gap: 1rem 1.25rem;
  padding: 1.1rem var(--margin) 0.4rem;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.brand img { width: auto; height: 28px; }
.nav-links { display: flex; align-items: center; gap: 1.1rem; }
.nav-links a { text-decoration: none; font-weight: 700; font-size: 1rem; }
.nav-links a:hover { text-decoration: underline; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.65rem 1.2rem;
  background: var(--lime);
  color: var(--on-lime);
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: transform 140ms var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-lg { min-height: 60px; padding: 0.8rem 1.7rem; font-size: 1.2rem; }
.btn.ink { background: var(--ink); color: var(--bg); }

.hero {
  padding: 0.25rem var(--margin) 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: clip;
}
.stage-logo {
  position: relative;
  width: min(680px, 100%);
  height: min(440px, 92vw);
  overflow: clip;
}
.orbit, .mark { position: absolute; inset: 0; }
.mark { inset: auto; width: 48%; left: 26%; top: 34%; height: auto; aspect-ratio: 1227 / 546; }
.mark-hit { position: relative; width: 100%; height: 100%; transform: rotate(-4deg); }
.part {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  background: transparent;
}
.part.letter { transform-origin: var(--origin); }
.sticker {
  position: absolute;
  width: 22%;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%) rotate(var(--tilt));
}
.sticker img { width: 100%; height: auto; background: transparent; }
.hero h1 { font-size: var(--step-display); max-width: 12ch; }
.lede { margin-top: 0.85rem; font-size: var(--step-lead); font-weight: 700; }
.hero .btn { margin-top: 1.35rem; }

.shots {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(0.6rem, 2.4vw, 2rem);
  padding: 1.5rem var(--margin) 3.5rem;
  overflow: clip;
}
.device { width: min(250px, 30vw); flex: 0 1 250px; pointer-events: none; }
.device.tilt-c { width: min(280px, 34vw); flex-basis: 280px; }
.bezel {
  background: #141412;
  border-radius: 34px;
  padding: 9px;
}
.screen {
  position: relative;
  background: var(--stage);
  color: var(--stage-ink);
  border-radius: 26px;
  min-height: 500px;
  padding: 18px 12px 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.screen.light { background: var(--bg); color: var(--ink); }
.island {
  width: 78px;
  height: 18px;
  margin: 0 auto 14px;
  border-radius: 20px;
  background: #000;
}
.appbar { display: flex; align-items: center; justify-content: space-between; padding: 0 6px; }
.app-title {
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.04em;
  font-size: 1.35rem;
  white-space: nowrap;
}
.disc { width: 28px; height: 28px; border-radius: 50%; background: var(--lime); }
.stack { position: relative; flex: 1; margin: 16px 8px 12px; }
.pile, .card {
  position: absolute;
  inset: 10px 6px 0;
  border-radius: 16px;
  background: var(--lime);
}
.pile.a { transform: rotate(-7deg); }
.pile.b { inset: 6px 4px 8px; background: #2a2824; transform: rotate(5deg); }
.card {
  inset: 0 0 16px;
  background: #141412;
  border: 8px solid #fffcf7;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 14px;
}
.card-logo { width: 72px; height: auto; }
.dock {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 12px;
}
.dock span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2a2824;
}
.dock .on { background: var(--lime); }
.screen-title {
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: 1.45rem;
  padding: 0 8px;
}
.drop {
  margin: 16px 8px 12px;
  flex: 1;
  border-radius: 18px;
  background: #141412;
  color: var(--stage-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  outline: 3px dashed var(--lime);
  outline-offset: -12px;
}
.plus { font-size: 2.4rem; font-weight: 800; color: var(--lime); line-height: 1; }
.drop-label { font-weight: 800; letter-spacing: -0.03em; }
.pills { display: flex; gap: 8px; justify-content: center; margin: 0 8px 16px; }
.pill-btn {
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  background: #2a2824;
  color: var(--stage-ink);
  font-size: 0.75rem;
  font-weight: 800;
}
.pill-btn.lime { background: var(--lime); color: var(--on-lime); }
.reply-card {
  margin: 16px 8px 18px;
  flex: 1;
  background: #fffcf7;
  color: var(--ink);
  border-radius: 18px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.shot, .field {
  border-radius: 12px;
  background: var(--surface);
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 0.95rem;
  text-align: center;
  padding: 0.6rem;
}
.field { min-height: 48px; font-weight: 700; color: var(--muted); }
.tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 36px;
  margin-top: auto;
  border-radius: 999px;
  background: #1c1b18;
}
.screen.light .tabs { background: #1c1b18; }
.tabs .pill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(25% - 4px);
  border-radius: 999px;
  background: var(--lime);
}
.tabs .shift-2 { left: calc(50% + 1px); }
.tabs .shift-3 { left: calc(75% - 1px); }
.tab { position: relative; z-index: 1; }

.closer {
  padding: 1rem var(--margin) 4.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
}
.closer h2 { font-size: clamp(2.4rem, 6vw, 4.5rem); max-width: 12ch; }

.foot {
  background: var(--lime);
  color: var(--on-lime);
  padding: 3rem var(--margin) 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
}
.foot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.35rem;
  align-items: baseline;
  font-size: 1rem;
}
.foot a:not(.btn) { font-weight: 700; }
.foot h2 { font-size: clamp(2.4rem, 6vw, 4.2rem); }

.legal { padding: 1.5rem var(--margin) 4rem; }
.legal h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); max-width: 12ch; }
.legal .updated { margin-top: 0.8rem; }
.legal-body { margin-top: 2rem; display: grid; gap: 1.6rem; max-width: 68ch; }
.legal h2 { font-size: clamp(1.45rem, 2vw, 1.8rem); letter-spacing: -0.03em; line-height: 1.15; }
.legal p + p { margin-top: 0.75rem; }
.legal ul { list-style: disc; padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.legal a { font-weight: 700; }

@media (max-width: 52em) {
  .shots { flex-direction: column; align-items: center; }
  .device, .device.tilt-c { width: min(300px, 86vw); flex-basis: auto; }
  .screen { min-height: 540px; }
}

@media (prefers-reduced-motion: no-preference) {
  .play .part.base { animation: slam 0.34s var(--bang) 0.08s both; }
  .play .part.white { animation-delay: 0.14s; }
  .play .part.letter { animation: drop 0.3s var(--bang) both; animation-delay: calc(0.4s + var(--i) * 0.06s); }
  .play .part.swoosh { animation: draw 0.36s cubic-bezier(0.3, 0.7, 0.2, 1) 1.5s both; }
  .play .mark-hit { animation: hit 1.7s linear both; }
  .play .sticker {
    animation-name: fly, counter;
    animation-duration: 0.9s, 40s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1), linear;
    animation-fill-mode: both, none;
    animation-iteration-count: 1, infinite;
    animation-delay: calc(1.15s + var(--i) * 0.07s), 2.7s;
  }
  .play .orbit { animation: spin 40s linear 2.7s infinite; }
  .play .sticker img { animation: rock var(--rock) cubic-bezier(0.45, 0, 0.55, 1) 2.7s infinite; }
  .play .tilt-l { animation: drift 7s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  .play .tilt-c { animation: drift 8.5s cubic-bezier(0.45, 0, 0.55, 1) 0.4s infinite; }
  .play .tilt-r { animation: drift 7.6s cubic-bezier(0.45, 0, 0.55, 1) 0.8s infinite reverse; }
}

@keyframes slam {
  from { transform: scale(7) rotate(-18deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes drop {
  from { transform: scale(6) rotate(var(--angle)); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes draw {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes hit {
  0%, 72% { transform: rotate(-4deg) scale(1); }
  76% { transform: rotate(-5deg) scale(0.86) translateX(-10px); }
  82% { transform: rotate(-3deg) scale(1.04) translateX(7px); }
  88% { transform: rotate(-4deg) scale(0.98) translateX(-2px); }
  100% { transform: rotate(-4deg) scale(1); }
}
@keyframes fly {
  from { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(640deg); opacity: 0; }
  to { transform: translate(-50%, -50%) rotate(var(--tilt)); opacity: 1; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes counter {
  from { transform: translate(-50%, -50%) rotate(var(--tilt)); }
  to { transform: translate(-50%, -50%) rotate(calc(var(--tilt) - 360deg)); }
}
@keyframes rock {
  0%, 100% { transform: rotate(-1.8deg); }
  50% { transform: rotate(1.8deg); }
}
@keyframes drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}