/* Reelio shared design tokens — used by both the marketing site (index.html) and the app (app/index.html).
   Change a value here once and both surfaces stay visually identical. */
:root{
  color-scheme: light;
  /* White theme (veed.io-style): every rule sitewide already reads colors through these tokens, so
     redefining the values here re-themes the whole site without touching layout/structure anywhere. */
  --void:#FFFFFF;
  --void-2:#F7F4F1;
  --void-3:#EFE9E3;
  --void-line:rgba(24,14,6,.12);
  --void-ink:#180C04;
  --void-muted:#6B5F53;
  --paper:#FFFFFF;
  --paper-2:#F7F4F1;
  --paper-line:rgba(24,14,6,.12);
  --paper-ink:#180C04;
  --paper-muted:#6B5F53;
  --saffron:#E8710A;
  --saffron-hot:#FF7A00;
  --saffron-dark:#C25A00;
  --maroon:#7B1E2B;
  --maroon-light:#FBEAEC;
  --gold:#D4A017;
  --ease-out:cubic-bezier(.33,1,.68,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Sora',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--void);
  color:var(--void-ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Guarantees the hidden attribute always wins: any element also styled with an unconditional `display`
   declaration in app.css/index.html (very common -- .some-class{display:flex}) would otherwise override
   `hidden` and stay visibly rendered even while JS has el.hidden = true, since normal author-origin CSS
   beats the browser's own `[hidden]{display:none}` UA rule regardless of selector specificity. This was
   the real cause of overlays/banners/panels across the app staying stuck on screen after being "hidden". */
[hidden]{display:none!important}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;text-wrap:balance;font-weight:700}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-inline:24px}
@media (max-width:640px){.wrap{padding-inline:18px}}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}