/* Generated by scripts/gen-icons.mjs. */
@font-face {
  font-family:"FLOW Storefront"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/fonts/storefront/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2") format("woff2");
}
:root {
  color-scheme:light dark;
  --sans:"FLOW Storefront",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --bg:#FCFCFB; --surface:#FFFFFF; --bg-2:#F0F2F5;
  --ink:#23262C; --ink-2:#59616C; --ink-3:#646B75; --hair:#E1E4E9;
  --accent:#2859D9; --on-accent:#FFFFFF; --soft-blue:#EDF3FF;
  --paper:var(--bg); --muted:var(--ink-3); --line:var(--hair);
  --brand-ink:#111317; --brand-mark:#A8C4FF; --brand-text:#F0F1F4; --brand-muted:#C5CBD4;
}
@media (prefers-color-scheme:dark) {
  :root {
    --bg:#111317; --surface:#1C1F25; --bg-2:#252A32;
    --ink:#F0F1F4; --ink-2:#C5CBD4; --ink-3:#A9AFB9; --hair:#343940;
    --accent:#A8C4FF; --on-accent:#152341; --soft-blue:#202E43;
  }
}

.flowBrand {
  display:inline-flex; align-items:center; flex-shrink:0;
  min-width:44px; min-height:44px; color:var(--ink); text-decoration:none;
  line-height:1; font-style:normal;
  --flow-brand-blue:#2859D9;
}
.flowBrand-word { display:block; width:124px; }
.flowBrand-art { display:block; width:100%; height:auto; aspect-ratio:1370 / 433; overflow:visible; }
/* Brand identity remains blue. Sales/Marketing accents belong to work and data. */
.flowBrand-dot { fill:var(--flow-brand-blue,#2859D9); }
.flowBrand:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
/* The identity must stay still even when a consumer adds legacy button classes. */
.flowBrand:is(:hover, :active) { transform:none !important; }
.flowBrand--footer .flowBrand-word { width:100px; }
.flowBrand--sidebar .flowBrand-word { width:100px; }
.flowBrand--auth .flowBrand-word { width:124px; }
.flowBrand--brief .flowBrand-word { width:104px; }
.flowBrand--brief {
  /* Paper identity stays blue while the surrounding brief retains its existing palette. */
  --ink:#23262C; --accent:#2859D9; --hair:#E1E4E9;
}
@media (hover:hover) and (pointer:fine) { .flowBrand:hover { color:var(--ink); text-decoration:none; } }
@media (max-width:700px) {
  .flowBrand--header .flowBrand-word { width:112px; }
}