/* ============================================================
   E Scapes — Business theme (scoped to body.biz)
   Editorial serif headlines + grotesk UI, calm pine/teal palette,
   flatter & more restrained than the playful kids theme.
   ============================================================ */
body.biz {
  /* refined token overrides — cascade through the shared components */
  --cream: #f4f2ec;
  --cream-2: #ebe6dc;
  --ink: #1d2624;
  --ink-soft: #586461;
  --night: #102320;
  --night-2: #0c1b18;
  --sun: #b3873f;     /* bronze accent (replaces playful gold) */
  --coral: #2f6f60;   /* pine-teal primary (replaces coral) */
  --aqua: #3a7d6e;
  --grape: #45605a;
  --leaf: #5c8c79;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-soft: 0 26px 64px -30px rgba(16, 38, 32, 0.42);
  --shadow-card: 0 16px 40px -24px rgba(16, 38, 32, 0.3);
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  background: #f4f2ec;
}

/* headings: serif, a touch lighter and tighter */
body.biz h1, body.biz h2, body.biz h3, body.biz h4 { font-weight: 500; letter-spacing: -0.012em; }
body.biz .hero h1 { font-weight: 500; letter-spacing: -0.02em; line-height: 1.04; }
body.biz .hero h1 .pop { color: var(--sun); font-style: italic; font-weight: 500; }

/* keep the wordmark as the brand logo (Fredoka), but tidy the accent */
body.biz .wordmark-text { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; }
body.biz .wordmark-text .e { color: var(--sun); }

/* UI chrome uses the grotesk, not the serif */
body.biz .btn, body.biz .nav-links, body.biz .eyebrow, body.biz .kicker,
body.biz .dock, body.biz .chip, body.biz .dock-label, body.biz .field label,
body.biz .footer-col h4, body.biz .use .case .tag, body.biz .step .num,
body.biz .contact-points, body.biz .form-success p, body.biz .footer .tag,
body.biz .footer-bottom { font-family: var(--font-body); }

/* buttons: flatter, confident, less bounce */
body.biz .btn { border-radius: 10px; font-weight: 600; font-size: 0.97rem; padding: 13px 24px; }
body.biz .btn-primary { box-shadow: 0 12px 26px -16px rgba(18, 52, 44, 0.85); }
body.biz .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -16px rgba(18, 52, 44, 0.85); }
body.biz .btn:active { transform: none; }

/* kicker: quieter, more letterspacing */
body.biz .kicker { letter-spacing: 0.16em; font-weight: 600; font-size: 0.78rem; }

/* hero eyebrow: squared, uppercase, restrained */
body.biz .eyebrow {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #dceae5;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
body.biz .eyebrow .dot { background: var(--leaf); box-shadow: 0 0 8px var(--leaf); }
body.biz .hero-sub { font-weight: 400; }

/* how-it-works: clean bordered cards, no playful blobs */
body.biz .step { border: 1px solid #e6e0d4; border-radius: var(--radius-lg); }
body.biz .step .blob { display: none; }
body.biz .step .num { border-radius: 9px; background: var(--coral) !important; font-weight: 700; font-size: 0.84rem; }
body.biz .step h3 { font-weight: 600; }

/* use cases: refined muted panels (override the bright inline gradients) */
body.biz .use .case { border-radius: var(--radius-lg); }
body.biz .use .case:nth-child(1) { background: linear-gradient(155deg, #244a42, #1b3a34) !important; }
body.biz .use .case:nth-child(2) { background: linear-gradient(155deg, #29343b, #1d262b) !important; }
body.biz .use .case:nth-child(3) { background: linear-gradient(155deg, #5d4c39, #41362a) !important; }
body.biz .use .case:nth-child(4) { background: linear-gradient(155deg, #2e4a4d, #21373a) !important; }
body.biz .use .case .deco { display: none; }
body.biz .use .case .tag { letter-spacing: 0.12em; opacity: 0.8; font-weight: 600; }
body.biz .use .case h3 { font-weight: 600; }

/* about / stats */
body.biz .about .kicker { color: var(--sun); }
body.biz .stat .n { color: var(--leaf); font-weight: 600; }

/* contact form: squarer, calmer */
body.biz .form-card { border: 1px solid #e6e0d4; }
body.biz .field input, body.biz .field select, body.biz .field textarea { border-radius: 9px; }
body.biz .contact-points li { font-weight: 600; }

/* dock: teal active state */
body.biz .chip.active { background: rgba(92, 140, 121, 0.22); border-color: rgba(120, 170, 150, 0.5); }

/* ---- demo / auto-tour control ---- */
body.biz .dock .demo-toggle { gap: 7px; padding-right: 13px; }
body.biz .dock .demo-toggle.active {
  background: rgba(92, 140, 121, 0.26);
  border-color: rgba(120, 170, 150, 0.55);
  color: #fff;
}
body.biz .dock-divider {
  width: 1px; align-self: stretch; margin: 4px 1px; flex: none;
  background: rgba(255, 255, 255, 0.16);
}
.demo-toggle .demo-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  transition: background 0.2s, box-shadow 0.2s;
}
.demo-toggle.active .demo-dot {
  background: var(--leaf);
  box-shadow: 0 0 8px var(--leaf);
  animation: demoPulse 2.4s ease-in-out infinite;
}
.demo-toggle .demo-bar {
  width: 26px; height: 3px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  display: none;
}
.demo-toggle.active .demo-bar { display: block; }
.demo-toggle .demo-bar i {
  display: block; height: 100%; width: 0%;
  background: var(--leaf); border-radius: inherit;
}
@keyframes demoPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.62); }
}
@media (prefers-reduced-motion: reduce) {
  .demo-toggle.active .demo-dot { animation: none; }
}

/* nav scrolled bg matches the warmer paper */
body.biz .nav.scrolled { background: rgba(244, 242, 236, 0.9); }