/* GENERATED by tools/brand_assets.py from frontend/css/style.css. Do not edit:
   change the app's block and run python tools/brand_assets.py. */
/* ==== BEGIN BRAND WORDMARK (shared: tools/brand_assets.py copies this block, byte for byte, to website/brand.css) ==== */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 500;
  line-height: 1;
}
/* Option B. Plain text ITAI in one run, so every letter shares one baseline
   and cap line. The last I is a plain inline span in the accent (never an
   inline-block, which could sit a pixel off). The spark above it is an
   in-flow empty span after the I that takes no room: a zero-size margin box
   (negative margins equal to its padding), lifted by vertical-align to one cap height plus a
   gap above the baseline, and pulled back from the end of the I to the middle of its stem.
   --brand-cap is the font's own cap height (the cap unit; 0.7em where the
   browser lacks it). Tune by eye: --brand-spark (width as a share of the cap
   height), --brand-spark-gap, --brand-i-half (how far back from the end of the I's
   box the spark's centre sits: 0.145em, half the advance of an I, measured
   at 0.29em in Segoe UI; near that in the other common sans fonts). js/common.js
   centerBrandSparks replaces --brand-i-half once the page has drawn with the
   distance to the middle of the I's INK, so the spark is centred on the stem
   in any font or zoom. */
.brand-lockup-wordmark {
  --brand-cap: 0.7em;
  --brand-spark: calc(var(--brand-cap) * 0.54);  /* owner: bigger again (0.34, then 0.46), 2026-10-02 */
  --brand-spark-layout: calc(var(--brand-cap) * 0.46);
  --brand-spark-gap: calc(var(--brand-cap) * 0.16);
  --brand-i-half: 0.145em;
  display: inline;
}
@supports (width: 1cap) {
  .brand-lockup-wordmark {
    --brand-cap: 1cap;
  }
}
.brand-cap-i {
  color: var(--accent);
}
.brand-spark {
  display: inline-block;
  width: 0;
  height: 0;
  padding: calc(var(--brand-spark) / 2);
  margin: calc(var(--brand-spark) / -2);
  margin-left: calc(var(--brand-spark) / -2 - var(--brand-i-half));
  margin-right: calc(var(--brand-spark) / -2 + var(--brand-i-half));
  /* The line box is sized by where the zero-size box sits, so that is still
     worked out from the 0.46 spark (--brand-spark-layout): the sidebar row and
     the sign-in heading keep the height they had before the spark grew (the
     bigger one nudged them 0.7px taller). top lifts the drawn spark the
     rest of the way to its centre; relative positioning moves no layout. */
  vertical-align: calc(var(--brand-cap) + var(--brand-spark-gap) + var(--brand-spark-layout) / 2);
  position: relative;
  top: calc((var(--brand-spark-layout) - var(--brand-spark)) / 2);
  background: var(--accent);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
/* ==== END BRAND WORDMARK ==== */