/* Marabot landing page — hand-written, no preprocessor, no framework.
   Canvas v2 (claude.ai/design): premium Mac-app polish, Newsreader serif
   headlines, Clay accent. The page markup leans on inline styles for one-off
   layout (per the design canvas); this file owns the design tokens, the
   interactive bits (Lead Awakening demo, FAQ accordion, form states), and the
   reusable hover / accessibility utilities. */

:root {
  --paper: #F4EEE3;       /* main background */
  --paper-2: #FBF8F1;     /* card surfaces, inner Mac chrome */
  --cream: #ECE4D4;       /* alternating section background */
  --ink: #221E18;         /* primary text, dark sections */
  --ink-2: #1A1611;       /* footer (darker than ink) */
  --ink-soft: #29241E;    /* body text on paper */
  --muted: #544D43;       /* secondary text */
  --muted-2: #6B6253;     /* tertiary text */
  --muted-3: #8B8273;     /* quaternary, fine print */
  --muted-4: #A79C8A;     /* eyebrow labels */
  --accent: #B4502F;      /* Clay — primary CTA, all links/highlights */
  --accent-warm: #D88A66; /* lighter accent for eyebrows on dark sections */
  --moss: #5FA85A;        /* success / "active" green */
  --moss-2: #3E7A39;      /* deeper moss for "Local AI Active" pill */
  --gold: #C2924A;        /* warm-lead amber */

  --font-serif: Newsreader, Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; }

@keyframes maraPulse { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@keyframes maraRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes maraFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* Layout */
.container { width: min(1140px, 92vw); margin-inline: auto; }

/* Accessibility */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.5rem 1rem;
  border-radius: 0 0 10px 0;
  z-index: 100;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Hover affordances (the canvas used non-standard style-hover attributes) */
.btn-accent:hover { filter: brightness(0.93); }
.nav-links a:hover { color: var(--ink); }
.link-arrow:hover { gap: 12px; }
footer a:hover { color: #F1EADD; }
input[type="email"]:focus { border-color: var(--accent) !important; }

/* ── Lead Awakening demo: 4-phase loop driven by [data-phase] ───────────── */
.capture-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  flex: none;
  opacity: 0.4;
}
.capture-demo[data-phase="1"] .capture-dot,
.capture-demo[data-phase="2"] .capture-dot,
.capture-demo[data-phase="3"] .capture-dot { opacity: 1; }
.capture-demo[data-phase="1"] .capture-dot { animation: maraPulse 1.1s ease-in-out infinite; }

/* status line: show the phase-appropriate label, hide the rest */
.capture-status { display: none; }
.capture-demo[data-phase="0"] .capture-status-0 { display: inline; }
.capture-demo[data-phase="1"] .capture-status-1 { display: inline; }
.capture-demo[data-phase="2"] .capture-status-2,
.capture-demo[data-phase="3"] .capture-status-2 { display: inline; }

/* extracted chips: fade + rise in at phase >= 2, staggered */
.capture-chip {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  background: #FFFFFF;
  border: 1px solid rgba(41, 36, 30, 0.1);
  border-radius: 8px;
  padding: 6px 11px;
  font-size: 0.84rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease;
}
.capture-chip .chip-k {
  color: var(--muted-4);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-mono);
}
.capture-chip .chip-v { color: #3B342B; font-weight: 550; }
.capture-demo[data-phase="2"] .capture-chip,
.capture-demo[data-phase="3"] .capture-chip { opacity: 1; transform: translateY(0); }
.capture-chip:nth-child(1) { transition-delay: 0.05s; }
.capture-chip:nth-child(2) { transition-delay: 0.11s; }
.capture-chip:nth-child(3) { transition-delay: 0.17s; }
.capture-chip:nth-child(4) { transition-delay: 0.23s; }
.capture-chip:nth-child(5) { transition-delay: 0.29s; }
.capture-chip:nth-child(6) { transition-delay: 0.35s; }

/* relationship card: slides up at phase 3 */
.capture-card {
  margin-top: 16px;
  background: #FFFFFF;
  border: 1px solid rgba(41, 36, 30, 0.09);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 22px -16px rgba(41, 30, 18, 0.4);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
  pointer-events: none;
}
.capture-demo[data-phase="3"] .capture-card { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ── FAQ accordion ──────────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid rgba(41, 36, 30, 0.1); }
.faq-list .faq-item:last-child { border-bottom: 1px solid rgba(41, 36, 30, 0.1); }
.faq-toggle {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 2px;
  text-align: left;
  font-family: inherit;
}
.faq-q { font-size: clamp(1.05rem, 1.6vw, 1.2rem); font-weight: 550; color: var(--ink-soft); }
.faq-icon {
  color: var(--accent);
  font-size: 1.4rem;
  line-height: 1;
  flex: none;
  transition: transform .25s ease;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer { display: none; }
.faq-item.open .faq-answer { display: block; }
.faq-answer p {
  margin: 0;
  padding: 0 2px 24px;
  font-size: 1.04rem;
  color: var(--muted-2);
  line-height: 1.65;
  max-width: 60ch;
}

/* ── Waitlist form states ───────────────────────────────────────────────── */
.form-status { margin-top: 18px; font-size: 0.95rem; font-weight: 550; }
.form-status.is-error { color: var(--accent); }
.form-status.is-ok { color: var(--moss-2); }
.form-success {
  background: rgba(95, 168, 90, 0.12);
  border: 1px solid rgba(95, 168, 90, 0.35);
  border-radius: 14px;
  padding: 26px;
  text-align: center;
}
.form-success .form-success-mark { font-size: 1.5rem; margin-bottom: 8px; }
.form-success .form-success-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--ink);
  margin-bottom: 6px;
}
.form-success .form-success-body { font-size: 0.95rem; color: var(--muted-2); }

/* ── Mascot float ───────────────────────────────────────────────────────── */
.mascot-float { animation: maraFloat 5s ease-in-out infinite; }

/* ── Mobile nav toggle (hamburger) ──────────────────────────────────────── */
/* `display:flex` lives here (not inline on the element) so the <=720px media
   query's `.nav-links { display:none }` can actually override it — inline
   styles outrank an external stylesheet rule. */
/* All nav-links layout lives here (nothing inline) so the responsive overrides
   below win without specificity fights — see the round-3/round-4 inline-style
   traps. */
.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 0.93rem;
  color: var(--muted);
}

/* Hidden on desktop; the @media block below reveals it and collapses the
   inline links into a backdrop-blurred dropdown. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  padding: 6px;
  margin: -6px;
  border-radius: 8px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .nav-links { display: none; }
  .nav-links.nav-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(244, 238, 227, 0.96);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    padding: 8px 0;
    box-shadow: 0 8px 18px rgba(41, 36, 30, 0.1);
    border-bottom: 1px solid rgba(41, 36, 30, 0.07);
  }
  .nav-links.nav-open a { padding: 12px 24px; }

  /* Let the hero columns shrink to the viewport (inline min-widths otherwise
     force horizontal overflow). !important beats the inline min-width. */
  #top > div { min-width: 0 !important; }
  .hero-visual { min-width: 0 !important; width: 100%; }
}

/* ── Window mocks fit narrow phones ─────────────────────────────────────── */
/* The macOS window mocks (hero Today, Capture, Local AI, Remember) have a
   fixed internal layout (~360px) — below that the contact-card "Nudge"/"Open"
   pills clip. Pin each "stage" to its 360px design width so the internal layout
   never clips, then `zoom` it down to fit the viewport. `zoom` (unlike
   transform:scale) shrinks the layout box too, so there's no leftover space and
   no page overflow. */
@media (max-width: 480px) {
  /* The header CTA crowds the hamburger off-screen on small phones; the hero
     and the Join section both still surface the CTA. */
  .nav-cta { display: none; }

  .mac-stage {
    flex: none !important;            /* neutralise inline flex:1 1 400px */
    width: 400px;
    min-width: 400px;
    max-width: 400px;
    margin-inline: auto;
  }
}
/* `zoom` shrinks the laid-out 400px stage to fit (numeric only — `zoom` does not
   accept calc()/min(), so step it). 400px is the hero window's design width
   (140px sidebar + cards) so the contact-card pills never clip; each step keeps
   400 × zoom within the viewport minus side margins. */
@media (max-width: 426px) { .mac-stage { zoom: 0.84; } }
@media (max-width: 360px) { .mac-stage { zoom: 0.72; } }

/* ── Honor reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}