/**
 * Mercury runtime theme overrides for this site.
 *
 * This file lives in the web root on purpose. Mercury will automatically
 * override its bundled src/theme.css with /theme.css when present.
 */

:root {
  --background: oklch(0.985 0.008 95);
  --foreground: oklch(0.24 0.02 250);
  --card: oklch(0.995 0.004 95);
  --card-foreground: oklch(0.24 0.02 250);
  --primary: oklch(0.47 0.12 196);
  --primary-foreground: oklch(0.985 0.004 95);
  --secondary: oklch(0.93 0.018 90);
  --secondary-foreground: oklch(0.28 0.02 250);
  --muted: oklch(0.95 0.012 90);
  --muted-foreground: oklch(0.45 0.02 245);
  --accent: oklch(0.84 0.06 82);
  --accent-foreground: oklch(0.22 0.02 250);
  --destructive: oklch(0.62 0.21 28);
  --destructive-foreground: oklch(0.985 0.004 95);
  --border: oklch(0.88 0.014 88);
  --input: oklch(0.88 0.014 88);
  --font-sans:
    "Site Sans",
    "Noto Sans TC",
    "PingFang TC",
    "Microsoft JhengHei",
    "Heiti TC",
    sans-serif;
  --font-serif:
    "Site Serif",
    "Noto Serif TC",
    "PMingLiU",
    "Songti TC",
    serif;
  --font-mono:
    "JetBrains Mono",
    "SFMono-Regular",
    "Consolas",
    "Liberation Mono",
    monospace;
  --radius: 0.9rem;
  --shadow-x: 0;
  --shadow-y: 10px;
  --shadow-blur: 28px;
  --shadow-spread: -12px;
  --shadow-opacity: 0.18;
  --shadow-color: oklch(0.34 0.03 230);
  --shadow-2xs: 0 3px 10px -8px hsl(200 30% 20% / 0.12);
  --shadow-xs: 0 6px 18px -12px hsl(200 30% 20% / 0.14);
  --shadow-sm: 0 10px 24px -14px hsl(200 30% 20% / 0.16);
  --shadow: 0 14px 30px -16px hsl(200 30% 20% / 0.18);
  --shadow-md: 0 20px 40px -22px hsl(200 30% 20% / 0.2);
  --shadow-lg: 0 24px 54px -24px hsl(200 30% 20% / 0.22);
  --shadow-xl: 0 32px 70px -30px hsl(200 30% 20% / 0.26);
  --shadow-2xl: 0 40px 90px -36px hsl(200 30% 20% / 0.3);
  --tracking-normal: 0.01em;
  --spacing: 0.25rem;
  --navbar-height: calc(var(--spacing) * 16);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 20);
  }
}

.dark {
  --background: oklch(0.2 0.018 235);
  --foreground: oklch(0.96 0.006 90);
  --card: oklch(0.24 0.018 235);
  --card-foreground: oklch(0.96 0.006 90);
  --primary: oklch(0.72 0.11 194);
  --primary-foreground: oklch(0.18 0.012 235);
  --secondary: oklch(0.31 0.018 235);
  --secondary-foreground: oklch(0.96 0.006 90);
  --muted: oklch(0.28 0.016 235);
  --muted-foreground: oklch(0.8 0.01 90);
  --accent: oklch(0.68 0.08 82);
  --accent-foreground: oklch(0.16 0.012 235);
  --destructive: oklch(0.68 0.19 28);
  --destructive-foreground: oklch(0.98 0.003 90);
  --border: oklch(0.38 0.02 235);
  --input: oklch(0.38 0.02 235);
}

body {
  background:
    radial-gradient(circle at top, hsl(44 75% 92% / 0.7), transparent 26%),
    linear-gradient(180deg, hsl(48 45% 98%), hsl(45 36% 96%));
  color: hsl(225 18% 18%);
}

.dark body {
  background:
    radial-gradient(circle at top, hsl(192 80% 24% / 0.22), transparent 26%),
    linear-gradient(180deg, hsl(222 20% 16%), hsl(226 18% 12%));
}

.mercury-showcase__main {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mercury-showcase-hero {
  overflow: hidden;
  color: var(--foreground);
  background:
    radial-gradient(circle at top right, hsl(190 78% 72% / 0.25), transparent 28%),
    radial-gradient(circle at left center, hsl(44 85% 75% / 0.28), transparent 30%),
    linear-gradient(135deg, hsl(48 60% 97%), hsl(45 50% 92%));
}

.mercury-showcase-hero__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 48rem;
}

.mercury-showcase-hero__title {
  max-width: 14ch;
  text-wrap: balance;
}

.mercury-showcase-hero__lede {
  max-width: 42rem;
  margin: 0;
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.75;
  color: color-mix(in oklab, var(--foreground) 82%, white);
}

.mercury-showcase-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.mercury-showcase-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.mercury-showcase-stats div {
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in oklab, var(--border) 85%, white);
  border-radius: 1rem;
  background: hsl(0 0% 100% / 0.58);
  backdrop-filter: blur(10px);
}

.mercury-showcase-stats dt {
  margin: 0 0 0.35rem;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.mercury-showcase-stats dd {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.mercury-showcase-section {
  width: min(1200px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 4.5rem 0;
}

.mercury-showcase-section__heading {
  max-width: 48rem;
  margin-bottom: 2rem;
}

.mercury-showcase-section__heading > p {
  margin: 1rem 0 0;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--muted-foreground);
}

.mercury-showcase-section__heading--center {
  margin-inline: auto;
  text-align: center;
}

.mercury-showcase-grid {
  display: grid;
  gap: 1.25rem;
}

.mercury-showcase-grid--features,
.mercury-showcase-grid--plans,
.mercury-showcase-grid--quotes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mercury-showcase-grid--quotes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mercury-showcase-section--workflow {
  padding-top: 1rem;
}

.mercury-showcase-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 2rem;
  align-items: start;
}

.mercury-showcase-split__lead {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mercury-showcase-split__lead > p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--muted-foreground);
}

.mercury-showcase-steps {
  display: grid;
  gap: 1rem;
}

.mercury-showcase-steps article {
  padding: 1.4rem 1.4rem 1.5rem;
  border-radius: 1.25rem;
  border: 1px solid var(--border);
  background: hsl(0 0% 100% / 0.72);
  box-shadow: var(--shadow-md);
}

.mercury-showcase-steps span {
  display: inline-block;
  margin-bottom: 0.7rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--primary);
}

.mercury-showcase-steps h3 {
  margin: 0 0 0.55rem;
  font-size: 1.35rem;
}

.mercury-showcase-steps p {
  margin: 0;
  line-height: 1.75;
  color: var(--muted-foreground);
}

.mercury-showcase-section--plans {
  padding-top: 2rem;
}

.mercury-showcase-footer {
  padding-bottom: 2rem;
}

.mercury-showcase-footer__text,
.mercury-showcase-footer__meta,
.mercury-showcase-footer__eyebrow {
  margin: 0;
}

.mercury-showcase-footer__text,
.mercury-showcase-footer__meta {
  line-height: 1.7;
  color: var(--muted-foreground);
}

.mercury-showcase-footer__eyebrow {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}

.mercury-showcase-footer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

@media (max-width: 900px) {
  .mercury-showcase-stats,
  .mercury-showcase-grid--features,
  .mercury-showcase-grid--plans,
  .mercury-showcase-grid--quotes,
  .mercury-showcase-split {
    grid-template-columns: 1fr;
  }

  .mercury-showcase-section {
    padding: 3.5rem 0;
  }
}

@media (max-width: 640px) {
  .mercury-showcase-hero__content {
    gap: 1.25rem;
  }

  .mercury-showcase-hero__actions,
  .mercury-showcase-footer__actions {
    flex-direction: column;
  }
}