@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Newsreader:opsz,wght@6..72,400;6..72,500&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.31.0/dist/tabler-icons.min.css');

/* Product UI tokens. These mirror the landing page palette in index.html so the
   mockups read as the same brand. The softer radii inside the mockups are
   deliberate: this is app UI, and the page chrome around it stays sharp. */
:root{
  --surface-1:#f1efea;
  --surface-2:#ffffff;
  --border:#dbd6ce;
  --border-strong:#c9c2b8;
  --border-stronger:#b3aaa0;
  --text-primary:#15120f;
  --text-secondary:#514a41;
  --text-muted:#6b645c;
  --text-success:#1f6b46;
  --text-warning:#8a5a12;
  --text-accent:#1b4f8a;
  --bg-success:#e7f0ea;
  --bg-warning:#f5ede0;
  --bg-accent:#e6ecf3;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-voice:'Newsreader',Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--surface-1);color:var(--text-primary);overflow:hidden}
body{font-family:'Archivo',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.sr-only{margin:0}

/* These are static pictures of the product, so nothing inside them is clickable. */
button{font:inherit;cursor:default}

/* Message bubbles, chart bars, and status stamps all stay paused at their
   0% frame until the parent page confirms (via postMessage) that this
   mockup iframe has actually scrolled into view — see scroll-trigger.js,
   loaded by every mockup that uses one of these three classes. Falls back
   to playing after a short timeout if that message never arrives (e.g. the
   mockup file is opened standalone, outside the main page). */
.bubble-pop{animation:bubblePop .5s cubic-bezier(.34,1.56,.64,1) both paused}
.chart-bar{transform-origin:bottom;animation:barGrow .45s cubic-bezier(.34,1.15,.4,1) both paused}
.stamp{animation:stampIn .4s cubic-bezier(.2,.9,.3,1) both paused}
html.is-visible .bubble-pop,
html.is-visible .chart-bar,
html.is-visible .stamp{animation-play-state:running}

@keyframes bubblePop{
  0%{transform:scale(.85);opacity:0}
  60%{transform:scale(1.04);opacity:1}
  100%{transform:scale(1)}
}
@keyframes barGrow{
  from{transform:scaleY(0)}
  to{transform:scaleY(1)}
}
@keyframes stampIn{
  0%{transform:scale(2) rotate(-12deg);opacity:0}
  60%{transform:scale(.92) rotate(2deg);opacity:1}
  80%{transform:scale(1.04) rotate(-1deg)}
  100%{transform:scale(1) rotate(0)}
}
@media (prefers-reduced-motion:reduce){
  .bubble-pop,.chart-bar,.stamp{animation:none}
}