/* Brand artwork and wordmark supplied by the site owner. */
:root { --brand-accent: #0752ff; --brand-ink: #080c2b; --brand-arrow: #fff; --brand-surface: #fff; --brand-beta-ink: #b91c1c; --brand-beta-surface: #fef2f2; --brand-beta-border: #fecaca; }
:root[data-theme="dark"] { --brand-accent: #1464ff; --brand-ink: #f7faff; --brand-surface: #0b1d2f; --brand-beta-ink: #fca5a5; --brand-beta-surface: rgba(239, 68, 68, 0.14); --brand-beta-border: rgba(248, 113, 113, 0.38); }
.site-header { background: var(--brand-surface); }
.brand {
      --icon-size: 40px;
      --wordmark-offset-y: 1px;
      display: inline-flex;
      align-items: baseline;
      height: var(--icon-size);
      gap: 9px;
      color: var(--brand-ink);
      font-family: Inter, "Arial Black", Arial, Helvetica, sans-serif;
      font-size: 23px;
      font-weight: 800;
      line-height: 1;
      text-decoration: none;
      vertical-align: middle;
    }

    .brand:hover {
      text-decoration: none;
    }

    .brand:focus-visible {
      outline: 2px solid var(--brand-accent);
      outline-offset: 5px;
      border-radius: 4px;
    }

    .brand svg {
      display: block;
      width: var(--icon-size);
      height: var(--icon-size);
      flex-shrink: 0;
    }

    .mark-arrow {
      fill: none;
      stroke: var(--brand-arrow);
      stroke-width: 4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .brand-copy {
      display: block;
      flex-shrink: 0;
      white-space: nowrap;
      /*
        Baseline-based optical alignment, not line-box centering.
        The SVG's bottom edge establishes the flex baseline at y=32.
        The rounded bubble's center is y=13 (the tail is excluded).
        Raise the text baseline by 19/32 of the icon size, then add half
        the actual font's x-height (0.5ex). The center of the lowercase
        letter bodies now sits on the bubble centerline. This responds
        to the selected font and every responsive icon/font size.
      */
      transform: translateY(calc(var(--icon-size) * -0.59375 + 0.5ex + var(--wordmark-offset-y)));
    }

    .brand-wordmark {
      display: block;
      letter-spacing: -1px;
      line-height: 1;
    }

    .brand-accent {
      color: var(--brand-accent);
    }

    .brand-beta {
      /* Keep the badge aligned to the bubble body without shifting the wordmark. */
      position: relative;
      align-self: flex-start;
      top: calc(var(--icon-size) * 0.40625 + var(--wordmark-offset-y));
      transform: translateY(-50%);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      min-height: 19px;
      padding: 3px 6px;
      border: 1px solid var(--brand-beta-border);
      border-radius: 5px;
      background: var(--brand-beta-surface);
      color: var(--brand-beta-ink);
      font-family: Arial, Helvetica, sans-serif;
      font-size: 9px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.1em;
      white-space: nowrap;
    }

    @media (max-width: 650px) {
      .brand {
        --icon-size: 36px;
        font-size: 20px;
      }

      .brand-wordmark {
        letter-spacing: -.85px;
      }
    }

    @media (max-width: 400px) {
      .brand {
        --icon-size: 32px;
        font-size: 16px;
        gap: 7px;
      }

      .brand-wordmark {
        letter-spacing: -.65px;
      }

      .brand-beta {
        min-height: 18px;
        padding: 3px 5px;
        border-radius: 4px;
      }
    }