/*
 * Shared design system — extracted from index-v3.html (redesign).
 * CSS variables, typography base, button system, section wrappers,
 * dark/light section theming, and fade-in utility.
 *
 * Does NOT include marketing-page-specific styles (blobs, canvas,
 * hero, step numbers, before/after grid, features grid, waitlist).
 */

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

:root {
  /* accent palette */
  --coral: #df5b38;
  --coral-dark:  #9b3d22;
  --coral-light: #f0997b;
  --coral-pale:  #f7c4b0;
  --sky: #4888d4;
  --sage: #579a78;
  --amber: #cc8b09;

  /* dark theme */
  --dark:  #1a1814;
  --dark2: #222018;
  --dark3: #2c2a22;
  --d-border: rgba(255,255,255,0.07);
  --d-border2: rgba(255,255,255,0.12);
  --d-text: #f2ede6;
  --d-dim: rgba(242,237,230,0.5);
  --d-muted: rgba(242,237,230,0.28);

  /* light theme */
  --warm:  #ffffff;
  --warm2: #f7f7f7;
  --l-border: #e8e8e8;
  --l-text: #111110;
  --l-dim: #444440;
  --l-muted: #888884;

  /* ink (button fill) */
  --ink: #111110;
  --ink-soft: rgba(150,146,138,0.3);
}

/* ── TYPOGRAPHY BASE ── */
html { scroll-behavior: smooth; }

body {
  font-family: 'IBM Plex Serif', serif;
  background: #ffffff;
  color: var(--l-text);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

/* ── NAV (dark) ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 52px; height: 58px;
  background: rgba(26,24,20,0.92);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--d-border);
}
.nav-logo {
  font-family: 'Rethink Sans', sans-serif;
  font-size: 16px; font-weight: 700; letter-spacing: -0.2px;
  color: var(--d-text); text-decoration: none;
}
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-link {
  font-family: 'IBM Plex Serif', serif;
  font-size: 13px; font-style: italic;
  color: var(--d-dim); text-decoration: none; transition: color 0.2s;
}
.nav-link:hover { color: var(--d-text); }
.nav-cta {
  font-family: 'Rethink Sans', sans-serif;
  font-weight: 700; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--coral); border: 1px solid rgba(223,91,56,0.4);
  padding: 7px 18px; border-radius: 100px; text-decoration: none; transition: all 0.2s;
}
.nav-cta:hover { background: var(--coral); color: #fff; border-color: var(--coral); }
.nav-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--d-text); color: var(--dark);
  font-family: 'Rethink Sans', sans-serif; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; transition: background 0.15s;
}
.nav-avatar:hover { background: var(--coral); color: #fff; }
.nav-divider { width: 1px; height: 18px; background: var(--d-border2); flex-shrink: 0; }

/* ── NAV EMAIL TOGGLE ── */
.nav-ooo-wrap { display: flex; align-items: center; gap: 7px; }
.nav-ooo-label {
  font-family: 'IBM Plex Serif', serif; font-size: 13px; font-style: italic;
  color: var(--d-dim); transition: color 0.2s; white-space: nowrap;
}
.nav-ooo-label.on { color: var(--coral); }
.nav-toggle-track {
  width: 34px; height: 19px; border-radius: 100px;
  background: rgba(255,255,255,0.15); cursor: pointer;
  position: relative; transition: background 0.25s;
  flex-shrink: 0; border: none; padding: 0;
}
.nav-toggle-track.on { background: var(--coral-light); }
.nav-toggle-thumb {
  position: absolute; top: 2.5px; left: 2.5px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.25s;
}
.nav-toggle-track.on .nav-toggle-thumb { transform: translateX(15px); }

/* ── BUTTON SYSTEM ── */

/* Large button — ink fill */
.btn-large {
  font-family: 'Rethink Sans', sans-serif;
  font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff;
  padding: 11px 24px; line-height: 1;
  border-radius: 100px; border: none;
  cursor: pointer; text-decoration: none;
  transition: all 0.15s; box-sizing: border-box;
}
.btn-large:hover { background: var(--coral); }
.btn-large:disabled { opacity: 0.28; cursor: not-allowed; background: var(--ink); }

/* Small button/pill — outlined, transparent bg */
.btn-small {
  font-family: 'Rethink Sans', sans-serif;
  font-weight: 600; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  padding: 4px 10px; line-height: 1;
  border-radius: 100px;
  cursor: pointer; text-decoration: none;
  transition: all 0.15s; box-sizing: border-box;
}

/* Small — sky (links out of product) */
.btn-small.sky { color: var(--sky); border: 1px solid rgba(72,136,212,0.3); }
.btn-small.sky:hover { border-color: var(--sky); background: rgba(72,136,212,0.08); }

/* Small — coral (progresses forward, selects, activates) */
.btn-small.coral { color: var(--coral); border: 1px solid rgba(223,91,56,0.3); }
.btn-small.coral:hover { border-color: var(--coral); background: rgba(223,91,56,0.08); }

/* Small — gray (discards, destructive-adjacent) */
.btn-small.gray { color: var(--l-muted); border: 1px solid var(--ink-soft); }
.btn-small.gray:hover { border-color: var(--l-muted); background: rgba(150,146,138,0.06); }

/* Small — selected state (filter pills) */
.btn-small.selected { background: var(--coral); color: #fff; border-color: var(--coral); }
.btn-small.selected:hover { background: var(--coral); }

/* Small — disabled */
.btn-small:disabled { opacity: 0.28; cursor: not-allowed; }

/* Add pitch / add angle — small coral outlined (matches system) */
.btn-add-pitch {
  font-family: 'Rethink Sans', sans-serif;
  font-weight: 600; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--coral); background: transparent;
  border: 1px solid rgba(223,91,56,0.3); border-radius: 100px;
  padding: 4px 10px; line-height: 1;
  cursor: pointer; transition: all 0.15s; box-sizing: border-box;
}
.btn-add-pitch:hover { border-color: var(--coral); background: rgba(223,91,56,0.08); }
.btn-add-pitch:disabled { opacity: 0.28; cursor: not-allowed; }

/* Legacy aliases for index.html marketing page (coral on dark bg) */
.btn-hero { font-family: 'Rethink Sans', sans-serif; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--coral); color: #fff; padding: 11px 24px; line-height: 1; border-radius: 100px; text-decoration: none; transition: all 0.15s; box-sizing: border-box; }
.btn-hero:hover { background: var(--coral-dark); }
.btn-main { font-family: 'Rethink Sans', sans-serif; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; padding: 11px 24px; line-height: 1; background: var(--coral); color: #fff; border: none; border-radius: 100px; cursor: pointer; transition: all 0.15s; box-sizing: border-box; }
.btn-main:hover { background: var(--coral-dark); }

/* ── SECTION WRAPPERS ── */
.section-wrap { padding: 96px 52px; }
.section-inner { max-width: 1060px; margin: 0 auto; }

/* ── SECTION LABELS / HEADINGS ── */
.s-label {
  font-family: 'IBM Plex Serif', serif;
  font-size: 11px; font-style: italic;
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
}
.s-label::before {
  content: ''; display: block; width: 20px; height: 1px;
  background: currentColor; opacity: 0.4;
}
.dark-section .s-label { color: var(--d-muted); }
.light-section .s-label { color: var(--l-muted); }

.s-h {
  font-family: 'Rethink Sans', sans-serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800; line-height: 1.03; letter-spacing: -1.2px; margin-bottom: 18px;
}
.dark-section .s-h { color: var(--d-text); }
.light-section .s-h { color: var(--l-text); }

.s-sub {
  font-family: 'IBM Plex Serif', serif;
  font-size: 16px; font-weight: 300; line-height: 1.85;
  max-width: 480px; margin-bottom: 56px;
}
.dark-section .s-sub { color: var(--d-dim); }
.light-section .s-sub { color: var(--l-dim); }

/* ── DARK / LIGHT SECTION THEMES ── */
.dark-section { background: var(--dark); }
.light-section {
  background: #ffffff;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
}

/* ── FOOTER ── */
footer {
  background: var(--dark);
  border-top: 1px solid var(--d-border);
  padding: 28px 52px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'IBM Plex Serif', serif;
  font-size: 12px; font-style: italic; color: var(--d-muted);
}
.footer-logo {
  font-family: 'Rethink Sans', sans-serif;
  font-size: 15px; font-weight: 700; font-style: normal;
  color: rgba(242,237,230,0.35); letter-spacing: -0.2px;
}

/* ── FADE-IN UTILITY ── */
.fi { opacity: 0; transform: translateY(20px); transition: opacity 0.75s ease, transform 0.75s ease; }
.fi.in { opacity: 1; transform: none; }
.fi.d1 { transition-delay: 0.1s; }
.fi.d2 { transition-delay: 0.2s; }
.fi.d3 { transition-delay: 0.3s; }

/* ── DARK CARD ── */
.dark-card {
  background: var(--dark);
  border-radius: 16px;
  padding: 32px;
  color: var(--d-text);
}
.dark-card-title {
  font-family: 'Rethink Sans', sans-serif;
  font-size: 30px; font-weight: 800; letter-spacing: -0.8px;
  color: var(--d-text); line-height: 1.1; margin-bottom: 12px;
}
.dark-card-strip {
  border-top: 1px solid var(--d-border);
  padding-top: 16px; margin-top: 24px;
  display: flex; align-items: center; gap: 10px;
}

/* ── OMBRE GRADIENT ── */
.ombre-text {
  background: linear-gradient(90deg, var(--coral), var(--sky));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; display: inline-block;
}


/* ── LOADING DOTS ── */
@keyframes dot-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.25); }
}
.loading-dots { display: flex; align-items: center; justify-content: center; }
.loading-dots .dot { border-radius: 50%; background: var(--sky); animation: dot-pulse 3s ease-in-out infinite; }
.loading-dots .dot:nth-child(2) { animation-delay: 0.4s; }
.loading-dots .dot:nth-child(3) { animation-delay: 0.8s; }

/* Page-level: 10px dots, 14px gap, centered with padding */
.loading-dots-page { padding: 80px 0; }
.loading-dots-page .dot { width: 10px; height: 10px; }
.loading-dots-page { gap: 14px; }

/* Inline/compact: 6px dots, 10px gap */
.loading-dots-inline .dot { width: 6px; height: 6px; }
.loading-dots-inline { gap: 10px; }

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
  nav { padding: 0 20px; }
  .nav-right .nav-link { display: none; }
  .section-wrap { padding: 64px 20px; }
  footer { padding: 24px 20px; flex-direction: column; gap: 8px; text-align: center; }
}