/* ============================================================
 * Website UI Kit — additional styles
 * (foundation tokens come from ../../colors_and_type.css)
 * ============================================================ */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
body {
  background: var(--cu-bg);
  color: var(--cu-fg);
  font-family: var(--cu-font-sans);
  font-size: 16px;
  line-height: var(--cu-lh-body);
}

img { display: block; max-width: 100%; }
button { font-family: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

.container {
  width: 100%;
  max-width: var(--cu-container);
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) {
  .container { padding: 0 40px; }
}

.section {
  padding: 64px 0;
}
@media (min-width: 768px) {
  .section { padding: 80px 0; }
}

.section--dark {
  background: var(--cu-ink-950);
  color: var(--cu-fg-on-dark);
}
.section--bone {
  background: var(--cu-bone-50);
}
.section--paper {
  background: var(--cu-paper);
}

.eyebrow {
  font-family: var(--cu-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cu-mark);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}
.section--dark .eyebrow { color: var(--cu-steel-400); }
.theme--teal-orange .section--dark .eyebrow { color: var(--cu-teal-400); }

.section-head h2 { margin: 0 0 12px; }
.section-head p {
  margin: 0;
  font-size: 16px;
  max-width: 560px;
  color: var(--cu-slate-700);
}
.section--dark .section-head p { color: rgba(245,243,237,.65); }

/* ---------- Button ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background 200ms var(--cu-ease), border-color 200ms var(--cu-ease), color 200ms var(--cu-ease);
  text-decoration: none;
  border-radius: 4px;
  padding: 12px 20px;
  font-size: 14px;
  white-space: nowrap;
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--cu-shadow-focus);
}
.btn--primary { background: var(--cu-cta); color: var(--cu-cta-fg); }
.btn--primary:hover { background: var(--cu-cta-hover); }
.btn--ghost {
  background: transparent;
  color: var(--cu-ink-900);
  border: 1px solid var(--cu-line-strong);
  padding: 11px 19px;
}
.btn--ghost:hover { background: var(--cu-steel-50); border-color: var(--cu-steel-400); }
.btn--ghost-dark {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  padding: 11px 19px;
}
.btn--ghost-dark:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }
.btn--dark {
  background: var(--cu-ink-700);
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
}
.btn--dark:hover { background: var(--cu-ink-600); border-color: rgba(255,255,255,.16); }
.btn--lg { padding: 14px 24px; font-size: 15px; }
.btn--link { background: transparent; color: var(--cu-accent); padding: 8px 0; }
.btn--link:hover { color: var(--cu-accent-hover); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Tag ---------- */
.tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 2px;
  letter-spacing: -0.005em;
}
.tag--dark { background: var(--cu-ink-900); color: #fff; }
.tag--steel { background: var(--cu-steel-100); color: var(--cu-steel-700); }
.tag--bone { background: var(--cu-bone-100); color: var(--cu-slate-700); }
.tag--ghost { background: transparent; color: var(--cu-slate-700); border: 1px solid var(--cu-line-strong); }

/* ---------- Eyebrow already styled above ---------- */