/* ==========================================================================
   Primitives: eyebrow, buttons, watermark, torn edge, icons
   ========================================================================== */

/* Eyebrow --------------------------------------------------------------- */

.eyebrow { display: flex; flex-direction: column; gap: 12px; }

.eyebrow__index {
  display: flex; align-items: center; gap: 8px;
}
.eyebrow__num {
  font-weight: 700; font-size: 24px; line-height: 1;
  letter-spacing: 1px; color: var(--c-blue);
}
.eyebrow__rule {
  width: 24px; height: 2px; background: var(--c-blue); flex: none;
}
.eyebrow__label {
  font-weight: 700; font-size: 14px; line-height: 1;
  letter-spacing: 2px; color: var(--c-blue-light);
}
.eyebrow__title {
  font-weight: 700; font-size: 56px; line-height: 1.05;
  letter-spacing: -2px; color: var(--c-text); text-transform: uppercase;
}

/* Buttons --------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px;
  padding: 16px 24px;
  font-weight: 700; font-size: 14px; line-height: 1; letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--c-blue); color: var(--c-white); }
.btn--primary:hover { background: #0038CC; }
.btn--ghost { border-color: var(--c-text); color: var(--c-text); }
.btn--ghost:hover { background: var(--c-text); color: var(--c-bg); }
.btn--dark { background: var(--c-bg); color: var(--c-white); }
.btn--dark:hover { background: #000; }
.btn--block { display: flex; width: 100%; }
.btn__icon { flex: none; }

/* Inline text link with arrow ------------------------------------------- */

.arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 13px; line-height: 1; color: var(--c-text);
}
.arrow-link:hover { color: var(--c-blue-light); }
.arrow-link--blue { color: var(--c-blue-light); text-decoration: underline; }
.arrow-link--blue:hover { color: var(--c-white); }

/* Outlined background watermark ----------------------------------------- */

.watermark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-border);
  white-space: nowrap;
  z-index: 0;
}
.watermark--thick { -webkit-text-stroke-width: 2px; }

/* Torn paper edge -------------------------------------------------------- */

.torn-edge {
  --tooth: var(--c-blue);
  --base: var(--c-text);
  position: relative;
  flex: none;
}
.torn-edge__teeth {
  height: 12px;
  background-color: var(--tooth);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='12' viewBox='0 0 160 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12 L40 0 L80 12 L120 0 L160 12 Z' fill='%23fff'/%3E%3C/svg%3E") repeat-x 0 0 / 160px 12px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='12' viewBox='0 0 160 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12 L40 0 L80 12 L120 0 L160 12 Z' fill='%23fff'/%3E%3C/svg%3E") repeat-x 0 0 / 160px 12px;
}
.torn-edge__base { height: 12px; background: var(--base); }

@media (max-width: 767px) {
  .torn-edge__teeth {
    height: 6px;
    -webkit-mask-size: 30px 6px;
            mask-size: 30px 6px;
  }
  .torn-edge__base { height: 6px; }
}

/* Divider dot ------------------------------------------------------------ */

.dot { width: 4px; height: 4px; background: var(--c-border); flex: none; }

/* Chip ------------------------------------------------------------------- */

.chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  background: var(--c-navy-chip);
  color: var(--c-white);
  font-weight: 700; font-size: 11px; line-height: 1;
}