/* Website presentation only. Keep the mini-program preview's in-app colors truthful. */
:root {
  --ink: #17212b;
  --ink-2: #36424c;
  --muted: #5e6b75;
  --cream: #f6f5f1;
  --line: #dce1e2;
  --rose: #846b51;
  --rose-soft: #eee9e2;
  --shadow: 0 28px 70px rgba(23, 33, 43, .12);
}

body { background: var(--cream); }
:focus-visible { outline-color: #846b51; }
.site-header { background: rgba(246, 245, 241, .95); border-bottom-color: #dce1e2; }
.brand-symbol { border-radius: 7px; }
.brand-symbol span:nth-child(2) { background: #b9a186; }
.main-nav .nav-button,
.button-primary { background: var(--ink); color: #fff; }
.main-nav .nav-button:hover,
.button-primary:hover { background: #303d49; color: #fff; }
.button { border-radius: 8px; }
.button-primary { box-shadow: 0 12px 26px rgba(23, 33, 43, .16); }
.button-quiet { border-color: #cbd2d4; }

.kicker,
.eyebrow { color: #725b42; letter-spacing: .14em; }
.eyebrow-dot { background: #a4896b; box-shadow: 0 0 0 5px #e9e2d8; }
.hero {
  background:
    radial-gradient(circle at 84% 22%, rgba(211, 220, 225, .48), transparent 30%),
    linear-gradient(135deg, #f8f7f3 0%, #f2f3f1 100%);
}
.hero h1,
.page-hero h1 { letter-spacing: -.055em; }
.hero h1 em,
.page-hero h1 em { color: #33404a; }
.hero-points span { color: #4f5d68; border-color: #d8dedf; background: rgba(255, 255, 255, .72); }
.calendar-phone { border-color: #414d59; }
.crop-section { background: #f1f2ef; }
.crop-card,
.feature-card,
.product-steps article,
.detail-right { border-radius: 12px; }
.crop-copy > span,
.feature-index,
.extra-grid span,
.platform-row span,
.product-steps span,
.detail-label { color: #725b42; }
.feature-card-wide { background: linear-gradient(125deg, #eef1f2, #f8f7f4); }
.check-list li::before,
.detail-block li::before { color: #846b51; }
.project-demo-head span { color: #e4cfb4; }
.tag-pink { background: #e9edf0; color: #465969; }
.start-section { background: #17212b; }
.start-section .kicker { color: #ddc5a6; }
.faq-list summary::after { color: #725b42; }
.platform-note { background: #e9edec; }
.site-footer { background: #e1e6e6; }
.page-hero { background: linear-gradient(135deg, #f7f6f2, #edf0ef); }
.page-hero-side { border-left-color: #a4896b; }

/* The blue, mint and violet previews use their own action color.
   The white skin deliberately keeps the mini-program's actual pink action. */
.app-showcase .app-tab-add i {
  background: var(--skin-accent);
  box-shadow: 0 3px 9px rgba(23, 33, 43, .16);
}
.app-showcase[data-skin="white"] .app-tab-add i { background: #f43f5e; }