:root {
  --primary: #C75B39;
  --primary-light: #E8814F;
  --cream: #FBF7F2;
  --cream-deep: #F4ECE0;
  --brown: #2D1B0E;
  --muted: #8B7D72;
  --success: #5B8C5A;
  --line: #E9DECE;
  --line-soft: #F0E6DC;
  --serif: 'Newsreader', 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--cream); color: var(--brown); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }

body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(199, 91, 57, 0.04), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(199, 91, 57, 0.03), transparent 50%);
  z-index: 0;
}

#root { position: relative; z-index: 1; }

/* Anchor scroll lands above the sticky nav, not under it. */
html { scroll-behavior: smooth; }
section[id], div[id], form[id] { scroll-margin-top: 88px; }

.bode-mark { display: inline-flex; align-items: center; gap: 10px; }
.bode-mark svg { display: block; }

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  display: inline-flex; align-items: center; gap: 48px;
  animation: marquee 40s linear infinite;
  will-change: transform;
}

@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.7; }
  50% { transform: scale(1.05); opacity: 0.3; }
  100% { transform: scale(0.95); opacity: 0.7; }
}
.pulse-dot::before {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse-ring 2s ease-in-out infinite;
  z-index: -1;
}

@keyframes float-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.float-in { animation: float-in 0.7s ease-out backwards; }

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.lift { transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s; }
.lift:hover { transform: translateY(-4px); }

.press { transition: transform 0.1s ease; }
.press:active { transform: scale(0.97); }

::selection { background: var(--primary); color: var(--cream); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .marquee-track, .pulse-dot::before, .float-in { animation: none !important; }
}

/* ── Responsive overrides ────────────────────────────────────────────────
   The site uses inline styles for layout, so these queries use !important
   to override them at narrower widths. Inline styles win on specificity. */

/* Laptop and below — hide decorative collage and policy ToC. */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .hero-collage-wrap { display: none !important; }

  .policy-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .policy-toc { display: none !important; }

  .contact-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* Tablet and below — stack waitlist card, contact form. */
@media (max-width: 768px) {
  .waitlist-card {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding: 40px 28px !important;
    border-radius: 24px !important;
  }
  .nav-links { display: none !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}

/* Phone — single-column footer. */
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
}

/* Defensive: at mobile widths, force block text to wrap inside its parent
   regardless of any inline max-width. Disables text-wrap: pretty which can
   overflow by a few pixels in some Chrome builds. Adds break-word so long
   words wrap rather than punch through. */
@media (max-width: 768px) {
  p, h1, h2, h3, h4 {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    text-wrap: wrap !important;
  }
}