/* ZeroBound marketing site — shared styles
 * Tokens lifted from the ZeroBound iOS design system.
 * Type scale enlarged for desktop reading (the app's 14/16pt body
 * would feel claustrophobic on a 1200px-wide landing page).
 */

/* ─── Fonts ──────────────────────────────────────────────────── */


:root {
  /* Brand palette */
  --zb-primary:            #E53836;
  --zb-primary-dark:       #BF2624;
  --zb-primary-light:      #F25954;
  --zb-primary-bg:         #FFEDED;
  --zb-primary-bg-subtle:  #FFF2F2;

  --zb-success:            #2EBF59;
  --zb-success-bg:         #E8F8ED;
  --zb-gold:               #FFC71A;
  --zb-gold-light:         #FFD933;
  --zb-gold-bg:            #FFF8E0;
  --zb-orange:             #FF9926;
  --zb-info:               #66A6E5;

  --zb-text-primary:       #1F1F24;
  --zb-text-secondary:     #5C5C64;
  --zb-text-muted:         #999999;
  --zb-text-disabled:      #BFBFC7;
  --zb-surface:            #FFFFFF;
  --zb-app-bg:             #F7F5F0;
  --zb-elevated:           #F0F0F0;
  --zb-border:             #E0E0E0;
  --zb-border-light:       #EDEDED;

  --zb-radius-xs:   4px;
  --zb-radius-sm:   8px;
  --zb-radius-md:   12px;
  --zb-radius-lg:   16px;
  --zb-radius-xl:   20px;
  --zb-radius-2xl:  28px;
  --zb-radius-full: 9999px;

  --zb-shadow-sm: 0 1px 4px rgba(0,0,0,0.04);
  --zb-shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --zb-shadow-lg: 0 12px 40px rgba(0,0,0,0.10);
  --zb-shadow-xl: 0 24px 60px rgba(0,0,0,0.14);
  --zb-glow-gold: 0 0 40px rgba(255,199,26,0.40);

  --zb-font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --zb-font-text:    "SF Pro Text",    -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
}

/* ─── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--zb-font-text);
  color: var(--zb-text-primary);
  background: var(--zb-app-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-family: var(--zb-font-display); letter-spacing: -0.02em; line-height: 1.1; color: var(--zb-text-primary); }
p { margin: 0; }

/* ─── Layout ─────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.container-narrow {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ─── Top nav ────────────────────────────────────────────────── */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,245,240,0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.site-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--zb-font-display); font-weight: 700; font-size: 18px;
  letter-spacing: -0.02em; color: var(--zb-text-primary);
}
.brand__mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: #18181D;
  display: grid; place-items: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  overflow: hidden;
}
.brand__mark img { width: 100%; height: 100%; object-fit: contain; }

.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  font-family: var(--zb-font-text); font-weight: 500; font-size: 14px;
  color: var(--zb-text-secondary); transition: color .15s;
}
.nav-links a:hover { color: var(--zb-text-primary); }
.nav-links a.is-current { color: var(--zb-text-primary); }

/* ─── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border-radius: var(--zb-radius-full);
  font-family: var(--zb-font-text); font-weight: 600; font-size: 15px;
  border: 0; cursor: pointer; transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--primary {
  background: var(--zb-primary); color: #fff;
  box-shadow: 0 6px 16px rgba(229,56,54,0.30);
}
.btn--primary:hover { background: var(--zb-primary-light); }
.btn--ghost {
  background: transparent; color: var(--zb-text-primary);
}
.btn--ghost:hover { background: rgba(0,0,0,0.04); }
.btn--white {
  background: #fff; color: var(--zb-text-primary);
  box-shadow: var(--zb-shadow-md);
}
.btn--sm { height: 38px; padding: 0 16px; font-size: 13px; }

/* ─── App Store badge ────────────────────────────────────────── */
.appstore-badge {
  display: inline-flex; align-items: center; gap: 12px;
  height: 54px; padding: 0 22px 0 18px;
  background: #000; color: #fff;
  border-radius: 12px;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.appstore-badge:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,0.24); }
.appstore-badge svg { width: 28px; height: 28px; }
.appstore-badge__text { line-height: 1; display: flex; flex-direction: column; gap: 3px; }
.appstore-badge__small { font-family: var(--zb-font-text); font-size: 11px; opacity: 0.92; letter-spacing: 0.02em; }
.appstore-badge__big { font-family: var(--zb-font-display); font-weight: 600; font-size: 21px; letter-spacing: -0.01em; }

/* ─── Tag / pill ─────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  background: var(--zb-primary-bg); color: var(--zb-primary);
  border-radius: var(--zb-radius-full);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.tag--gold { background: var(--zb-gold-bg); color: #8A6B00; }
.tag--success { background: var(--zb-success-bg); color: #1B7A35; }

/* ─── Card ───────────────────────────────────────────────────── */
.card {
  background: var(--zb-surface);
  border-radius: var(--zb-radius-xl);
  box-shadow: var(--zb-shadow-md);
  padding: 28px;
}

/* ─── Footer ─────────────────────────────────────────────────── */
.site-footer {
  margin-top: 96px;
  padding: 56px 0 40px;
  background: #18181D;
  color: #C8C8CC;
}
.site-footer a { color: #C8C8CC; }
.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-col h4 {
  font-family: var(--zb-font-text);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #8E8E96; margin-bottom: 16px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col li a { font-size: 14px; }
.footer-brand {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.footer-brand img { width: 44px; height: 44px; border-radius: 10px; box-shadow: 0 6px 14px rgba(0,0,0,0.30); }
.footer-brand span { font-family: var(--zb-font-display); font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.02em; }
.footer-tag { font-size: 14px; line-height: 1.55; color: #A0A0A8; max-width: 320px; }
.footer-bottom {
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: #8E8E96;
}

/* ─── Section title ──────────────────────────────────────────── */
.eyebrow {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--zb-primary);
}
.section-title {
  font-family: var(--zb-font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-wrap: balance;
}
.section-lede {
  margin-top: 16px;
  font-size: 18px; line-height: 1.55;
  color: var(--zb-text-secondary);
  max-width: 640px;
  text-wrap: pretty;
}

/* ─── Doc page (privacy / terms) ────────────────────────────── */
.doc {
  padding: 64px 0 40px;
}
.doc h1 {
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.03em;
}
.doc .doc-meta {
  margin-top: 14px;
  font-size: 14px; color: var(--zb-text-secondary);
}
.doc-body {
  margin-top: 40px;
  font-family: var(--zb-font-text);
  font-size: 16px; line-height: 1.65;
  color: var(--zb-text-primary);
}
.doc-body h2 {
  font-family: var(--zb-font-display);
  font-size: 24px; font-weight: 700;
  margin-top: 40px; margin-bottom: 12px;
  letter-spacing: -0.015em;
}
.doc-body h3 {
  font-family: var(--zb-font-display);
  font-size: 18px; font-weight: 700;
  margin-top: 24px; margin-bottom: 8px;
}
.doc-body p { margin-bottom: 14px; color: var(--zb-text-primary); }
.doc-body ul { margin: 8px 0 16px 0; padding-left: 22px; }
.doc-body li { margin-bottom: 8px; }
.doc-body a { color: var(--zb-primary); font-weight: 600; }
.doc-body a:hover { text-decoration: underline; }
.doc-body strong { font-weight: 700; }
.doc-toc {
  margin-top: 32px; padding: 20px 22px;
  background: var(--zb-surface); border-radius: var(--zb-radius-lg);
  box-shadow: var(--zb-shadow-sm);
  border: 1px solid var(--zb-border-light);
}
.doc-toc__title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--zb-text-secondary); margin-bottom: 10px;
}
.doc-toc ol { margin: 0; padding-left: 22px; column-count: 2; column-gap: 30px; }
.doc-toc li { margin-bottom: 6px; font-size: 14px; break-inside: avoid; }
.doc-toc a { color: var(--zb-text-primary); }
.doc-toc a:hover { color: var(--zb-primary); }

/* ─── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-links--mobile { display: flex; gap: 16px; }
  .nav-links--mobile a { font-size: 13px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-col--brand { grid-column: 1 / -1; }
  .doc-toc ol { column-count: 1; }
}