/* =========================================================================
   ConversionClub — Base layer
   Light reset + brand defaults + a few utilities used across cards & pages.
   Depends on the token files (imported before this in styles.css).
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--cc-font-body);
  font-size: var(--cc-body);
  line-height: var(--cc-lh-body);
  color: var(--text-body);
  background-color: var(--cc-bg-base);
  background-image: var(--cc-bg-radial);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display / headings default to Poppins with tight tracking */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--cc-font-display);
  color: var(--text-heading);
  line-height: var(--cc-lh-heading);
  letter-spacing: var(--cc-tracking-heading);
  font-weight: var(--cc-w-semibold);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

::selection { background: rgba(79,124,255,0.32); color: #fff; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--cc-dur-fast) var(--cc-ease-out);
}
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: none;
  box-shadow: var(--cc-ring-focus);
  border-radius: var(--cc-radius-xs);
}

code, kbd, samp { font-family: var(--cc-font-mono); font-size: 0.92em; }

/* Subtle dark scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--cc-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--cc-border-strong);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

/* =========================================================================
   Utilities
   ========================================================================= */

/* The brand gradient painted onto a single word / short run of type */
.cc-gradient-text {
  background: var(--cc-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Eyebrow / kicker */
.cc-eyebrow {
  font-family: var(--cc-font-body);
  font-size: var(--cc-overline);
  font-weight: var(--cc-w-semibold);
  letter-spacing: var(--cc-tracking-overline);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Pill eyebrow with a leading accent dot */
.cc-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  padding: 6px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--cc-radius-pill);
  background: var(--cc-white-04);
  font-size: var(--cc-caption);
  color: var(--text-body);
}

/* Page background helper (radial + optional accent blooms behind content) */
.cc-page-bg {
  background-color: var(--cc-bg-base);
  background-image: var(--cc-bg-radial);
}

/* Content column */
.cc-container {
  width: 100%;
  max-width: var(--cc-container-max);
  margin-inline: auto;
  padding-inline: var(--cc-container-pad);
}

/* 1px hairline divider */
.cc-hr {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--cc-border), transparent);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}