@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'Europa Grotesk SH';
  src: url('fonts/EuropaGroteskSH-Reg.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Europa Grotesk SH';
  src: url('fonts/EuropaGroteskSH-Med.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Europa Grotesk SH';
  src: url('fonts/EuropaGroteskSH-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

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

:root {
  --bg:        #000000;
  --surface:   #121212;
  --surface2:  #1a1a1a;
  --border:    #262626;
  --border-hi: #444444;
  --fg:        #ffffff;
  --muted:     #a0a0a0;
  --dim:       #6a6a6a;
  --font-sans: 'Europa Grotesk SH', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* --font kept as alias for elements that should stay robotic/mono */
  --font: var(--font-mono);
}

html { scroll-behavior: smooth; }

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.012em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* mono elements shouldn't inherit the body's sans letter-spacing */
[style*="font-mono"], .item-num, .item .note, .img-label,
.included-item .num, label, .top-nav a, .top-nav span,
.form-note, .cta-note, .provider-btn {
  letter-spacing: 0.04em;
}

/* Body / reading copy → Inter (headings stay Europa). Inter reads best
   near 0 tracking with a slightly taller line-height. */
.desc, .item p, .why-body, .why-list li,
.product-desc, .included-item p,
.profile p, .product-info p {
  font-family: var(--font-body);
  letter-spacing: 0;
  line-height: 1.52;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── CONTAINER ── */
.wrap {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ── DIVIDER ── */
.divider {
  height: 1px;
  background: var(--border);
  margin: 0 16px;
}

/* ── BUTTON ── */
.btn {
  display: block;
  width: 100%;
  padding: 16px 24px;
  background: #fff;
  color: #000;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn:hover { background: #e8e8e8; }
.btn:active { background: #d0d0d0; }

.btn-outline {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border-hi);
}
.btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.04); }

/* ── INPUTS ── */
input[type="email"],
input[type="text"] {
  display: block;
  width: 100%;
  padding: 15px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
}
input:focus { border-color: var(--border-hi); }
input::placeholder { color: var(--dim); }

/* input field titles stay robotic/mono */
label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 7px;
}

/* ── STRIPE CARD ELEMENT ── */
#stripe-card-element,
#stripe-card-element-playbook {
  padding: 13px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color 0.15s;
}
.StripeElement--focus { border-color: var(--border-hi) !important; }

/* ── FORM ERROR ── */
.form-error { font-size: 11px; color: #f66; margin-top: 6px; display: none; }
.form-error.visible { display: block; }