/* styles.css — Mintlify 风格组件样式 + 暗黑模式细节
   设计原则：
   - 主体是 dark mode（canvas-dark），但卡片/内容区保持白色以获得清晰阅读
   - 黑底主按钮 + 薄荷绿点缀
   - 圆角：卡片 12px，按钮 9999px
   - 12–16px body text
*/

:root {
  --canvas: #ffffff;
  --canvas-dark: #0b0f12;
  --surface: #f6f8fa;
  --surface-soft: #fafbfc;
  --surface-code: #0d1117;
  --ink: #0b0f12;
  --charcoal: #1f2328;
  --slate: #57606a;
  --steel: #8b949e;
  --muted: #afb8c1;
  --primary: #000000;
  --on-primary: #ffffff;
  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, 0.7);
  --brand-green: #00d4a4;
  --brand-green-deep: #00b894;
  --brand-green-soft: #e6f9f4;
  --hairline: #e5e7eb;
  --hairline-soft: #f0f2f5;
  --hero-sky-from: #cbe6ff;
  --hero-sky-to: #fff8ee;
  --hero-dark-from: #0d2e2e;
  --hero-dark-to: #0a4f3c;
}

/* Geist Mono fallback - use SF Mono until we ship the woff2 */
@font-face {
  font-family: 'Geist Mono Fallback';
  src: local('SF Mono'), local('Menlo'), local('Consolas');
  font-display: swap;
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============ Buttons (Mintlify) ============ */
.button-primary {
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.30;
  padding: 10px 20px;
  transition: background-color 150ms ease, transform 150ms ease;
}
.button-primary:hover { background: var(--charcoal); }
.button-primary:active { transform: translateY(1px); }

.button-secondary {
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.30;
  padding: 10px 20px;
  backdrop-filter: blur(6px);
  transition: background-color 150ms ease;
}
.button-secondary:hover { background: #ffffff; }

.button-accent-green {
  background: var(--brand-green);
  color: var(--primary);
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 20px;
  transition: background-color 150ms ease;
}
.button-accent-green:hover { background: var(--brand-green-deep); }

.button-on-dark {
  background: var(--on-dark);
  color: var(--primary);
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 20px;
}
.button-on-dark:hover { background: rgba(255, 255, 255, 0.92); }

.button-ghost {
  background: transparent;
  color: var(--ink);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  transition: background-color 150ms ease;
}
.button-ghost:hover { background: var(--surface); }

/* ============ Cards ============ */
.card-base {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 24px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.card-base:hover {
  border-color: #d4d8de;
  box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 2px 0px;
}

/* ============ Hero bands ============ */
.hero-band-sky {
  color: var(--ink);
  padding-top: clamp(64px, 12vw, 120px);
  padding-bottom: clamp(64px, 12vw, 120px);
}
.hero-band-dark {
  position: relative;
  color: var(--on-dark);
  padding-top: clamp(64px, 12vw, 96px);
  padding-bottom: clamp(64px, 12vw, 96px);
}

.hero-product-mockup {
  position: relative;
}

/* ============ Badges ============ */
.badge-type {
  display: inline-block;
  background: var(--surface);
  color: var(--steel);
  font-family: 'Geist Mono', 'SF Mono', monospace;
  font-size: 13px;
  font-weight: 400;
  padding: 2px 8px;
  border-radius: 6px;
}

.badge-required {
  display: inline-block;
  background: #cf222e;
  color: var(--on-dark);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.badge-discount {
  display: inline-block;
  background: var(--brand-green);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
}

/* ============ Logo wall ============ */
.logo-wall-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  filter: grayscale(100%);
  opacity: 0.7;
}

/* ============ FAQ ============ */
.faq-accordion-item {
  background: var(--canvas);
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  padding: 24px;
  transition: border-color 150ms ease;
}
.faq-accordion-item:hover { border-color: var(--hairline); }

/* ============ Testimonial ============ */
.testimonial-card-feature {
  background: #ff7a59;
  color: var(--on-dark);
  border-radius: 12px;
  padding: 64px;
}

/* ============ Footer ============ */
.footer-region {
  background: var(--canvas);
  border-top: 1px solid var(--hairline);
  padding: 64px 0;
}
.footer-link {
  display: block;
  color: var(--steel);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.50;
  padding: 2px 0;
  transition: color 150ms ease;
}
.footer-link:hover { color: var(--ink); }

/* ============ Reveal animation ============ */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms ease, transform 600ms ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============ Form / inputs (for convert.html) ============ */
.text-input {
  background: var(--canvas);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 12px 16px;
  height: 40px;
  width: 100%;
  font-size: 14px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.text-input:focus {
  outline: none;
  border-color: var(--brand-green);
  border-width: 2px;
  padding: 11px 15px; /* compensate for border width */
}
@media (max-width: 767px) {
  .text-input { height: 44px; }
}

/* ============ Dropzone ============ */
.dropzone {
  border: 2px dashed var(--hairline);
  border-radius: 12px;
  background: var(--canvas);
  padding: 48px 24px;
  text-align: center;
  transition: border-color 150ms ease, background-color 150ms ease;
  cursor: pointer;
}
.dropzone:hover, .dropzone.is-dragover {
  border-color: var(--brand-green);
  background: var(--brand-green-soft);
}

/* ============ Toast (utility) ============ */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--ink);
  color: var(--on-dark);
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 4px 12px 0px;
  font-size: 14px;
  z-index: 50;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms ease;
  pointer-events: none;
}
.toast.is-shown {
  transform: translateY(0);
  opacity: 1;
}
.toast.is-error { background: var(--brand-error); }
.toast.is-success { background: var(--brand-green-deep); }