/**
 * Tokens and the reset, shared by the product and the marketing pages.
 *
 * The marketing pages load only this file. They used to load the whole
 * product stylesheet for the colour variables, which meant every class name
 * was shared: a `.row` in the nav quietly picked up the styling of a critique
 * row in the app, and painted a grey plate behind the glass. One set of
 * tokens, two stylesheets, no shared class names.
 */
:root{
  --bg:#000000;
  --panel:#000000;
  --elev:#0C0C0C;
  --elev-2:#141414;
  --hover:#161616;
  --stroke:#1C1C1C;
  --stroke-2:#242424;
  /* The hairline the council grid is drawn with. Brighter than --stroke on
     purpose: --stroke is for edges that should be felt rather than seen, and
     this one is the drawing itself — the cells have no fill behind them, so
     the line is the only thing holding the shape. */
  --hair:rgba(255,255,255,.17);
  --hair-2:rgba(255,255,255,.30);
  --text:#FFFFFF;
  --text-2:#B4B4B4;
  --text-3:#6E6E6E;
  --accent:#5B6BFF;
  --a:#E6E6E6;   /* seat colours, deliberately flat */
  --b:#C97A54;
  --c:#4FA98C;
  --d:#5B6BFF;
}
[data-theme="light"]{
  --bg:#FFFFFF;
  --panel:#FAFAFA;
  --elev:#FFFFFF;
  --elev-2:#F2F2F2;
  --hover:#F0F0F0;
  --stroke:#E6E6E6;
  --stroke-2:#DADADA;
  --hair:rgba(0,0,0,.16);
  --hair-2:rgba(0,0,0,.30);
  --text:#000000;
  --text-2:#454545;
  --text-3:#8A8A8A;
  --a:#1A1A1A;
  --b:#B4643F;
  --c:#2F8A6E;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;-webkit-font-smoothing:antialiased;overflow:hidden;
  letter-spacing:-.005em;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-thumb{background:#242424;border-radius:8px}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:#DDD}
::-webkit-scrollbar-track{background:transparent}