/* Marketing UI kit — foundations loaded separately via colors_and_type.css link */

/* Token correction (operator-approved): amber aligned to identity canon (#B07A1E),
   overriding the DS default #C8881C so it never returns in future pieces. */
:root {
  --albein-amber: #B07A1E;
  --albein-amber-soft: #FFF7EC;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg-page); color: var(--fg-1); font-family: var(--font-sans); }

/* Reusable layout */
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 4px;
  font: 600 15px/1 var(--font-sans);
  cursor: pointer; border: 1px solid transparent;
  transition: background 180ms var(--ease-standard), border-color 180ms var(--ease-standard);
  white-space: nowrap; text-decoration: none;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: transparent; color: var(--fg-1); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg-surface); }
.btn-on-dark { background: #fff; color: var(--albein-navy); }
.btn-on-dark:hover { background: rgba(255,255,255,0.92); }
.btn-ghost-on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.25); }
.btn-ghost-on-dark:hover { background: rgba(255,255,255,0.08); }
.btn-lg { height: 48px; padding: 0 24px; font-size: 16px; }

/* Pill/eyebrow label */
.eyebrow {
  font: 500 12px/1.2 var(--font-sans);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-2);
}
.eyebrow-on-dark { color: rgba(255,255,255,0.65); }

/* Cards */
.card {
  background: #fff; border-radius: 8px; border: 0.5px solid var(--border);
  padding: 28px;
}

/* Hairline divider */
.hr { height: 1px; background: var(--border); transform: scaleY(0.5); transform-origin: top; }

/* Headlines */
.headline { font: 700 56px/1.05 var(--font-sans); letter-spacing: -0.02em; color: var(--fg-1); margin: 0; }
.headline-on-dark { color: #fff; }
.subhead   { font: 400 18px/1.55 var(--font-sans); color: var(--fg-2); margin: 0; max-width: 56ch; }
.subhead-on-dark { color: rgba(255,255,255,0.72); }
.section-title { font: 700 36px/1.15 var(--font-sans); letter-spacing: -0.015em; margin: 0; }

/* Icon helper */
.lucide { width: 20px; height: 20px; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; stroke: currentColor; }
.lucide-lg { width: 28px; height: 28px; }