/* 1257end Design System – the Logo and Button components used on the site (from the design system's components bundle) */

/* ---------- Logo ---------- */
.e-logo {
  display: inline-grid;
  grid-template-columns: .528em .528em repeat(5, .583em);
  row-gap: .22em;
  font-family: var(--font-logo, "Space Grotesk", system-ui, sans-serif);
  font-weight: 600;
  line-height: 1;
  color: var(--ink, #1a2b3c);
}
.e-logo > span { grid-row: 1; justify-self: center; }
.e-logo .e-logo__track { grid-row: 2; align-self: center; height: .042em; background: var(--signal-red, #e8384f); }
.e-logo .e-logo__track--a { grid-column: 2 / 7; }
.e-logo .e-logo__track--b { grid-column: 7; width: 50%; }
.e-logo .e-logo__bar { grid-row: 2; align-self: center; height: .167em; background: currentColor; }
.e-logo .e-logo__bar--a { grid-column: 1; width: calc(50% + .083em); margin-left: calc(50% - .083em); border-radius: .083em 0 0 .083em; }
.e-logo .e-logo__bar--b { grid-column: 2; width: calc(50% + .09em); margin-left: -.007em; border-radius: 0 .083em .083em 0; }
.e-logo .e-logo__dot { grid-row: 2; align-self: center; justify-self: center; width: .167em; height: .167em; border-radius: 50%; background: currentColor; }
.e-logo .e-logo__dot--3 { grid-column: 3; }
.e-logo .e-logo__dot--4 { grid-column: 4; }
.e-logo .e-logo__dot--5 { grid-column: 5; }
.e-logo .e-logo__dot--6 { grid-column: 6; }
.e-logo .e-logo__dot--7 { grid-column: 7; }
.e-logo--inverse { color: var(--on-ink, #eef4f8); }
.e-logo--mono .e-logo__track { background: currentColor; }

/* ---------- Button ---------- */
.e-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2, 8px);
  min-height: 44px; padding: 0 22px; box-sizing: border-box;
  font-family: var(--font-sans, "Manrope", system-ui, sans-serif); font-size: 16px; line-height: 20px; font-weight: 600;
  border: var(--stroke-fine, 1px) solid transparent; border-radius: var(--radius-pill, 999px);
  cursor: pointer; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s;
}
.e-btn:focus-visible { outline: var(--stroke-focus, 2px) solid var(--signal-red, #e8384f); outline-offset: 2px; }
.e-btn--primary { background: var(--signal-red-deep, #c8283f); color: var(--on-signal, #ffffff); }
.e-btn--primary:hover { background: var(--ink, #1a2b3c); }
.e-btn--secondary { background: transparent; color: var(--ink, #1a2b3c); border-color: var(--ink, #1a2b3c); }
.e-btn--secondary:hover { background: var(--ice-deep, #e2ecf3); }
.e-btn--text { min-height: 44px; padding: 0 4px; background: transparent; color: var(--ink, #1a2b3c); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.e-btn--text:hover { color: var(--signal-red-deep, #c8283f); }
.e-btn:disabled, .e-btn[aria-disabled="true"] { background: var(--ice, #eef4f8); color: var(--slate, #566573); border-color: var(--line, #d6e2ea); cursor: not-allowed; }
