/* ============================================================
   Catch Balance — Custom Styles
   Tailwind handles layout/spacing. This file handles:
   - Custom component classes
   - Animations
   - Things Tailwind can't do inline
============================================================ */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  color-scheme: light dark;
}

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background-color: #F2EDE4;
  color: #1E1812;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Nav ---------- */
#site-nav {
  background: rgba(242, 237, 228, 0.85);
}
#site-nav.scrolled {
  background: rgba(242, 237, 228, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid #DDD8CE;
}

.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: #1C1A2E;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.nav-link:hover::after { transform: scaleX(1); }

/* Hamburger lines */
.hamburger-line {
  display: block;
  width: 22px;
  height: 1.5px;
  background: #1C1A2E;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
#menu-btn.open .hamburger-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#menu-btn.open .hamburger-line:nth-child(2) { opacity: 0; }
#menu-btn.open .hamburger-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

#mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Trust pills ---------- */
.trust-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid #DDD8CE;
  background: rgba(253, 250, 246, 0.6);
  font-size: 12px;
  font-weight: 500;
  color: rgba(30, 24, 18, 0.55);
  letter-spacing: 0.01em;
}

/* ---------- Section labels ---------- */
.section-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5C8A6B;
}
.section-label-sm {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.section-label-light {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

/* ---------- Path cards ---------- */
.path-card {
  border-radius: 20px;
  padding: 32px 28px 36px;
  border: 1px solid;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.path-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(28, 26, 46, 0.08);
}
.path-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

/* ---------- Feature blocks ---------- */
.feature-block {
  position: relative;
}
.app-screen-placeholder {
  width: 100%;
  max-width: 280px;
  height: 480px;
  border-radius: 28px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

/* Feature check list items */
.feature-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
}
.feature-check::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ---------- Macro bars (hero card) ---------- */
.macro-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: rgba(30, 24, 18, 0.45);
}
.macro-bar span:first-child { width: 36px; flex-shrink: 0; }
.macro-bar span:last-child  { width: 26px; flex-shrink: 0; text-align: right; }
.bar {
  flex: 1;
  height: 4px;
  background: #DDD8CE;
  border-radius: 2px;
  overflow: hidden;
}
.fill {
  height: 100%;
  border-radius: 2px;
  transition: width 1s ease;
}
.fill-sage  { background: #5C8A6B; }
.fill-terra { background: #C4553A; }

/* ---------- Floating app card ---------- */
.app-float-card {
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50%       { transform: rotate(-2deg) translateY(-8px); }
}

/* ---------- Community section ---------- */
.stat-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.friend-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 20px;
  width: 260px;
  text-align: left;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s ease;
}
.friend-card:hover {
  background: rgba(255,255,255,0.09);
}

/* ---------- Integrations ---------- */
.integration-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px;
  border-radius: 16px;
  border: 1px solid #DDD8CE;
  background: #FDFAF6;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.integration-badge:hover {
  border-color: #A8B8C4;
  box-shadow: 0 4px 16px rgba(28,26,46,0.06);
}
.integration-icon {
  font-size: 24px;
  line-height: 1;
}
.integration-name {
  font-size: 12px;
  font-weight: 500;
  color: rgba(30,24,18,0.55);
  text-align: center;
  line-height: 1.4;
}

/* ---------- Store badges ---------- */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid #DDD8CE;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.store-badge-active {
  background: #1C1A2E;
  border-color: #1C1A2E;
  color: #FDFAF6;
}
.store-badge-active:hover {
  box-shadow: 0 6px 20px rgba(28,26,46,0.25);
}
.store-badge-inactive {
  background: #FDFAF6;
  color: rgba(30,24,18,0.35);
  cursor: default;
}
.store-badge-sub {
  font-size: 10px;
  line-height: 1;
  opacity: 0.6;
  font-weight: 400;
}
.store-badge-main {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

/* ---------- Footer ---------- */
.footer-col-heading {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #5C8A6B;
  margin-bottom: 14px;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-links a {
  font-size: 14px;
  color: rgba(30,24,18,0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-links a:hover { color: #1E1812; }

.social-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #DDD8CE;
  background: #FDFAF6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(30,24,18,0.5);
  transition: border-color 0.2s, color 0.2s;
}
.social-icon:hover {
  border-color: #1C1A2E;
  color: #1C1A2E;
}

/* ---------- Scroll reveal animations ---------- */
.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1),
              transform 0.65s cubic-bezier(0.4,0,0.2,1);
}
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Waitlist form ---------- */
#waitlist-form input:focus {
  outline: none;
  border-color: rgba(28,26,46,0.4);
  box-shadow: 0 0 0 3px rgba(28,26,46,0.07);
}

/* ---------- FAQ accordion ---------- */
.faq-item {
  border: 1px solid #DDD8CE;
  border-radius: 14px;
  background: #FDFAF6;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.faq-item[open] {
  box-shadow: 0 4px 20px rgba(28,26,46,0.07);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-size: 16px;
  font-weight: 600;
  color: #1E1812;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 0.2s ease;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: #3A3530; }
.faq-q::after {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #DDD8CE;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231E1812' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.25s ease;
}
details[open] .faq-q::after {
  transform: rotate(180deg);
}
.faq-a {
  padding: 0 22px 20px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(30,24,18,0.6);
}
.faq-a ul {
  padding-left: 4px;
}
.faq-a li {
  padding: 2px 0;
}

/* ============================================================
   DARK MODE — intentional, warm, editorial
   Overrides Chrome dark theme + respected by Dark Reader
============================================================ */
@media (prefers-color-scheme: dark) {

  body {
    background-color: #141210;
    color: #B8AFA4;
  }

  /* Nav */
  #site-nav {
    background: rgba(20, 18, 16, 0.85);
  }
  #site-nav.scrolled {
    background: rgba(20, 18, 16, 0.92);
    border-bottom-color: #2E2A26;
  }
  .nav-link { color: rgba(240, 234, 224, 0.65); }
  .nav-link:hover { color: #F0EAE0; }
  .nav-link::after { background: #F0EAE0; }

  /* Logo */
  header .font-serif { color: #F0EAE0; }

  /* Hero section */
  #hero { background-color: #141210; }

  /* Force text colors — overrides Tailwind utility classes */
  h1, h2, h3,
  .text-brand,
  .font-serif { color: #F0EAE0 !important; }

  /* Keep terracotta accent on hero headline */
  h1 em, .text-terra { color: #D4654A !important; }

  /* Body copy */
  p, .text-ink\/65, .text-ink\/60, .text-ink\/55,
  .text-ink\/50, .text-ink\/45 { color: #B8AFA4 !important; }

  /* Ghost button */
  .border-brand\/25 { border-color: rgba(240,234,224,0.25) !important; color: #F0EAE0 !important; }
  .hover\:border-brand\/50:hover { border-color: rgba(240,234,224,0.5) !important; }

  /* Beta badge */
  #hero .bg-sage\/15 { background: rgba(107, 154, 120, 0.15); }

  /* Trust pills */
  .trust-pill {
    border-color: #2E2A26;
    background: rgba(30, 27, 24, 0.6);
    color: rgba(184, 175, 164, 0.7);
  }

  /* CTA buttons — platinum stays readable on dark */
  a[href="#waitlist"].bg-platinum,
  a[href="#waitlist"].bg-platinum-dark {
    background-color: #C8D4DC;
    color: #1C1A2E;
  }

  /* Ghost button */
  .border-brand\/25 {
    border-color: rgba(240, 234, 224, 0.25);
    color: #F0EAE0;
  }
  .border-brand\/25:hover {
    border-color: rgba(240, 234, 224, 0.5);
  }

  /* Three paths section */
  #how-it-works { background-color: #1E1B18; }
  #how-it-works h2 { color: #F0EAE0; }

  .path-card[style*="background:#FDF0EC"] { background: #2A1A14 !important; border-color: #3D2218 !important; }
  .path-card[style*="background:#EEF4F0"] { background: #142018 !important; border-color: #1E3224 !important; }
  .path-card[style*="background:#EBF0F4"] { background: #121E28 !important; border-color: #1A2E3C !important; }
  .path-card[style*="background:#FBF5E8"] { background: #24180A !important; border-color: #3A2810 !important; }

  /* Integration section */
  #science { background-color: #1E1B18; border-color: #2E2A26; }
  #science h2 { color: #F0EAE0; }
  #science p { color: #B8AFA4; }

  .integration-badge {
    background: #141210;
    border-color: #2E2A26;
  }
  .integration-badge:hover {
    border-color: #C8D4DC;
  }
  .integration-name { color: rgba(184, 175, 164, 0.65); }

  /* Samsung callout */
  .bg-\[\#EBF0F4\] { background: #121E28 !important; }
  .border-\[\#C2D0DA\] { border-color: #1A2E3C !important; }

  /* API trust box */
  .bg-parchment.rounded-2xl { background: #1E1B18 !important; border-color: #2E2A26 !important; }

  /* Waitlist section */
  #waitlist { background-color: #141210; }
  #waitlist h2 { color: #F0EAE0; }
  #waitlist p { color: #B8AFA4; }

  #waitlist-form input {
    background: #1E1B18;
    border-color: #2E2A26;
    color: #F0EAE0;
  }
  #waitlist-form input::placeholder { color: rgba(184,175,164,0.4); }
  #waitlist-form input:focus {
    border-color: rgba(200,212,220,0.4);
    box-shadow: 0 0 0 3px rgba(200,212,220,0.08);
  }

  #waitlist-form button[type="submit"] {
    background: #F0EAE0;
    color: #1C1A2E;
  }
  #waitlist-form button[type="submit"]:hover {
    background: #C8D4DC;
  }

  /* Store badges */
  .store-badge-active {
    background: #F0EAE0;
    border-color: #F0EAE0;
    color: #1C1A2E;
  }
  .store-badge-inactive {
    background: #1E1B18;
    border-color: #2E2A26;
    color: rgba(184,175,164,0.4);
  }

  /* Footer */
  footer {
    background-color: #141210 !important;
    border-color: #2E2A26;
  }
  .footer-links a { color: rgba(184,175,164,0.55); }
  .footer-links a:hover { color: #F0EAE0; }

  .social-icon {
    background: #1E1B18;
    border-color: #2E2A26;
    color: rgba(184,175,164,0.5);
  }
  .social-icon:hover {
    border-color: #F0EAE0;
    color: #F0EAE0;
  }

  /* Footer app badge */
  footer .bg-cream {
    background: #1E1B18 !important;
    border-color: #2E2A26 !important;
    color: rgba(184,175,164,0.7) !important;
  }

  /* Footer baseline text */
  footer .text-ink\/35 { color: rgba(184,175,164,0.35); }
  footer .text-ink\/30 { color: rgba(184,175,164,0.3); }
  footer a.text-ink\/35 { color: rgba(184,175,164,0.35); }
  footer a.text-ink\/35:hover { color: rgba(184,175,164,0.7); }

  /* FAQ accordion */
  #faq { background-color: #1E1B18; border-color: #2E2A26; }
  .faq-item {
    background: #141210;
    border-color: #2E2A26;
  }
  .faq-item[open] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  }
  .faq-q { color: #F0EAE0; }
  .faq-q:hover { color: #FFFFFF; }
  .faq-q::after {
    border-color: #2E2A26;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23F0EAE0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .faq-a { color: #B8AFA4; }
  .faq-a strong { color: #F0EAE0; }

  /* App float card on hero */
  .app-float-card {
    background: #1E1B18;
    border-color: #2E2A26;
  }
  .app-float-card p { color: rgba(184,175,164,0.45); }
  .bar { background: #2E2A26; }

  /* Streak badge stays dark brand — already dark, fine */

  /* Section labels */
  .section-label { color: #6B9A78; }
  .footer-col-heading { color: #6B9A78; }
}