/* ===== TOKENS ===== */
:root {
  --bg: #fafaf7;
  --bg-card: #ffffff;
  --bg-warm: #f4ede3;
  --ink: #1a1612;
  --ink-soft: #4a423a;
  --ink-muted: #7a7165;
  --rule: #e8e2d6;
  --coral: #d05945;
  --coral-deep: #a8412f;
  --coral-soft: #f4d9d2;
  --gold: #b8923a;
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --shadow-card: 0 1px 3px rgba(26, 22, 18, 0.04), 0 8px 24px rgba(26, 22, 18, 0.06);
  --shadow-card-hover: 0 1px 3px rgba(26, 22, 18, 0.06), 0 12px 32px rgba(26, 22, 18, 0.1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--coral); color: white; }

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h1 {
  font-size: clamp(2.25rem, 5.5vw, 4.75rem);
  font-weight: 500;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
h2 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-variation-settings: "opsz" 96;
  margin-bottom: 1rem;
}
h3 {
  font-size: 1.25rem;
  font-variation-settings: "opsz" 36;
  font-weight: 600;
}
p { color: var(--ink-soft); }
.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 36em;
}

/* ===== LAYOUT ===== */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}

/* ===== NAV ===== */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 247, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
  padding: 16px 0;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.nav-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--coral) 0%, var(--coral-deep) 100%);
  color: white;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  font-style: italic;
  box-shadow: 0 2px 8px rgba(208, 89, 69, 0.3);
  flex-shrink: 0;
}
.nav-logo-img {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}
.nav-brand-text {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.125rem;
  font-variation-settings: "opsz" 36;
  letter-spacing: -0.015em;
}
.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
}
.nav-links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--ink); }
.nav-cta {
  background: var(--ink);
  color: white !important;
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 0.875rem !important;
  transition: transform 0.15s, background 0.2s;
  white-space: nowrap;
}
.nav-cta:hover {
  background: var(--coral-deep);
  transform: translateY(-1px);
}
.nav-mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  padding: 8px;
  position: relative;
  z-index: 101;
}
.nav-mobile-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
  transform-origin: center;
}
.nav-mobile-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-mobile-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-mobile-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== HERO ===== */
.hero {
  padding: 80px 0 100px;
  position: relative;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 32px;
  letter-spacing: 0.01em;
}
.hero-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px rgba(208, 89, 69, 0.15);
}
.hero h1 {
  max-width: 14ch;
  margin-bottom: 28px;
}
.hero h1 em {
  font-style: italic;
  color: var(--coral);
  font-weight: 500;
}
.hero-lead {
  margin-bottom: 40px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink);
  color: white;
}
.btn-primary:hover {
  background: var(--coral-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(168, 65, 47, 0.25);
}
.btn-secondary {
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--rule);
}
.btn-secondary:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.btn-arrow {
  transition: transform 0.2s;
}
.btn:hover .btn-arrow {
  transform: translateX(3px);
}

/* Story callout */
.story-callout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  background: var(--bg-warm);
  border-left: 3px solid var(--coral);
  border-radius: 0 12px 12px 0;
  max-width: 600px;
  margin-top: 8px;
}
.story-callout-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
  font-variation-settings: "opsz" 24;
  margin: 0;
}
.story-callout-attribution {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  margin-top: 8px;
}

/* ===== HERO VISUAL — product mockup ===== */
.hero-visual {
  margin-top: 64px;
  position: relative;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%);
  padding: 40px;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.product-mockup {
  background: white;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(26, 22, 18, 0.08), 0 24px 56px rgba(26, 22, 18, 0.12);
  overflow: hidden;
  border: 1px solid var(--rule);
}
.mockup-header {
  background: #fafaf7;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mockup-dot {
  width: 12px; height: 12px; border-radius: 50%;
  flex-shrink: 0;
}
.mockup-dot:nth-child(1) { background: #f0a09a; }
.mockup-dot:nth-child(2) { background: #f0d09a; }
.mockup-dot:nth-child(3) { background: #b0d8a0; }
.mockup-url {
  margin-left: 24px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mockup-body {
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  min-height: 380px;
}
.mockup-section-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin-bottom: 12px;
  font-weight: 600;
}
.mockup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.mockup-chip {
  padding: 6px 12px;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-size: 0.8125rem;
  font-family: var(--mono);
  color: var(--ink-soft);
}
.mockup-helper {
  font-size: 0.875rem;
  color: var(--ink-muted);
  margin-top: 16px;
}
.mockup-helper strong {
  color: var(--coral-deep);
}
.mockup-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #fcfaf6;
  border: 1px solid var(--rule);
  border-radius: 8px;
  margin-bottom: 8px;
  gap: 12px;
}
.mockup-field-name {
  font-size: 0.875rem;
  color: var(--ink);
  font-weight: 500;
}
.mockup-field-value {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-muted);
  white-space: nowrap;
}
.mockup-field.is-mapped {
  background: white;
  border-color: var(--coral-soft);
}
.mockup-field.is-mapped .mockup-field-value {
  color: var(--coral-deep);
  background: var(--coral-soft);
  padding: 4px 10px;
  border-radius: 4px;
}

/* ===== SECTION COMMON ===== */
section {
  padding: 100px 0;
  position: relative;
}
.section-eyebrow {
  font-family: var(--mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--coral);
  margin-bottom: 16px;
  font-weight: 500;
}
.section-header {
  max-width: 720px;
  margin-bottom: 64px;
}
.section-header p {
  margin-top: 16px;
  font-size: 1.125rem;
  line-height: 1.5;
}

/* ===== TRUST STRIP ===== */
.trust-strip {
  padding: 32px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-warm);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: center;
}
.trust-item {
  text-align: center;
}
.trust-number {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  font-variation-settings: "opsz" 72;
}
.trust-label {
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.trust-wisdom {
  margin-top: 24px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  font-variation-settings: "opsz" 24;
  color: var(--ink-muted);
  max-width: 36em;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ===== FEATURES ===== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
}
.feature {
  background: var(--bg-card);
  padding: 36px 28px;
  transition: background 0.2s;
}
.feature:hover {
  background: #fffefb;
}
.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--coral-soft);
  color: var(--coral-deep);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  font-size: 1.25rem;
}
.feature h3 {
  margin-bottom: 10px;
  font-size: 1.1875rem;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.feature p {
  font-size: 0.9375rem;
  line-height: 1.55;
}
.feature-pro {
  font-family: var(--mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--ink);
  color: var(--coral);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
}

/* ===== HOW IT WORKS ===== */
.how-it-works {
  background: var(--bg-warm);
  padding: 120px 0;
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 32px;
}
.step-number {
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  color: var(--coral);
  line-height: 1;
  margin-bottom: 12px;
  font-style: italic;
}
.step h3 {
  font-size: 1.125rem;
  margin-bottom: 8px;
}
.step p {
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* ===== COMPARISON ===== */
.comparison {
  padding: 120px 0;
}
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.compare-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 40px;
  position: relative;
  box-shadow: var(--shadow-card);
  transition: all 0.3s;
}
.compare-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.compare-card.is-pro {
  background: linear-gradient(180deg, #1a1612 0%, #2d2620 100%);
  color: white;
  border-color: var(--ink);
}
.compare-card.is-pro h3,
.compare-card.is-pro .compare-price {
  color: white;
}
.compare-card.is-pro p {
  color: rgba(255,255,255,0.7);
}
.compare-card.is-pro .compare-features li {
  color: rgba(255,255,255,0.9);
}
.compare-card.is-pro::before {
  content: 'Recommended';
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--coral);
  color: white;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 100px;
}
.compare-tier {
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.compare-card:not(.is-pro) .compare-tier { color: var(--ink-muted); }
.compare-card.is-pro .compare-tier { color: var(--coral); }
.compare-price {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 3rem);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 4px;
  font-variation-settings: "opsz" 96;
}
.compare-price-detail {
  font-size: 0.875rem;
  margin-bottom: 24px;
}
.compare-card.is-pro .compare-price-detail { color: rgba(255,255,255,0.6); }
.compare-card:not(.is-pro) .compare-price-detail { color: var(--ink-muted); }
.compare-features {
  list-style: none;
  margin: 24px 0;
  padding: 0;
}
.compare-features li {
  padding: 10px 0;
  font-size: 0.9375rem;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.4;
}
.compare-features li::before {
  content: '✓';
  flex-shrink: 0;
  color: var(--coral);
  font-weight: 700;
  margin-top: 2px;
}
.compare-btn {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: 100px;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-top: 16px;
  transition: all 0.2s;
}
.compare-card:not(.is-pro) .compare-btn {
  background: var(--bg-warm);
  color: var(--ink);
  border: 1px solid var(--rule);
}
.compare-card:not(.is-pro) .compare-btn:hover {
  background: var(--ink);
  color: white;
}
.compare-card.is-pro .compare-btn {
  background: var(--coral);
  color: white;
}
.compare-card.is-pro .compare-btn:hover {
  background: var(--coral-deep);
  transform: translateY(-1px);
}

/* ===== STORY SECTION ===== */
.story {
  background: var(--ink);
  color: white;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.story::before {
  content: '"';
  position: absolute;
  top: -80px;
  right: -40px;
  font-family: var(--serif);
  font-size: clamp(15rem, 35vw, 32rem);
  font-weight: 500;
  color: rgba(208, 89, 69, 0.08);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.story-content {
  max-width: 720px;
  position: relative;
  z-index: 1;
}
.story h2 {
  color: white;
  margin-bottom: 32px;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.625rem, 3vw, 2.25rem);
}
.story p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: 20px;
}
.story p strong { color: white; font-weight: 600; }
.story-pull {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 400;
  font-variation-settings: "opsz" 48;
  color: var(--coral);
  line-height: 1.3;
  padding: 24px 0 24px 24px;
  border-left: 3px solid var(--coral);
  margin: 16px 0 24px;
  max-width: 30em;
}
.story-pull-secondary {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1875rem;
  font-weight: 400;
  font-variation-settings: "opsz" 36;
  color: rgba(255,255,255,0.95) !important;
  line-height: 1.5;
  padding: 20px 24px;
  background: rgba(208, 89, 69, 0.12);
  border-radius: 10px;
  margin: 24px 0;
  border-left: 3px solid var(--coral);
}
.story-signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--coral);
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-variation-settings: "opsz" 24;
}
.story-eyebrow { color: var(--coral); }

/* ===== WISDOM LINES (global) ===== */
.wisdom-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.0625rem;
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  color: var(--coral-deep);
  margin: 8px 0 24px;
  line-height: 1.4;
  max-width: 36em;
}
.section-wisdom {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  color: var(--ink-muted);
  margin-top: 12px;
  line-height: 1.5;
  max-width: 32em;
}

/* ===== FAQ ===== */
.faq-grid {
  max-width: 800px;
}
.faq-item {
  border-bottom: 1px solid var(--rule);
  padding: 24px 0;
}
.faq-item:first-child { padding-top: 0; }
.faq-item summary {
  cursor: pointer;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.1875rem;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-variation-settings: "opsz" 36;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--sans);
  font-size: 1.75rem;
  color: var(--coral);
  font-weight: 300;
  transition: transform 0.3s;
  flex-shrink: 0;
  line-height: 1;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-item p {
  margin-top: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.faq-item p a {
  color: var(--coral);
  text-decoration: none;
  font-weight: 500;
}
.faq-item p a:hover { text-decoration: underline; }

/* ===== FINAL CTA ===== */
.final-cta {
  background: var(--bg-warm);
  padding: 120px 0;
  text-align: center;
}
.final-cta h2 {
  max-width: 16ch;
  margin: 0 auto 24px;
}
.final-cta .lead {
  margin: 0 auto 40px;
}
.final-cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.final-cta-wisdom {
  margin-top: 48px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--ink-muted);
  font-variation-settings: "opsz" 24;
  max-width: 32em;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ===== FOOTER ===== */
footer {
  background: var(--ink);
  color: rgba(255,255,255,0.7);
  padding: 60px 0 32px;
  font-size: 0.9375rem;
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand .nav-brand-text { color: white; }
.footer-brand .nav-logo-img {
  filter: drop-shadow(0 0 0.5px rgba(255,255,255,0.4));
}
.footer-brand p {
  color: rgba(255,255,255,0.6);
  margin-top: 12px;
  max-width: 24em;
  font-size: 0.875rem;
  line-height: 1.5;
}
.footer-col h4 {
  font-family: var(--sans);
  color: white;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  font-weight: 600;
}
.footer-col a {
  display: block;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  padding: 5px 0;
  font-size: 0.9375rem;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--coral); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  color: rgba(255,255,255,0.4);
  font-size: 0.8125rem;
}
.footer-bottom a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
}
.footer-bottom a:hover { color: var(--coral); }

/* ===== ANIMATIONS ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up {
  animation: fadeUp 0.8s ease-out backwards;
}
.fade-up-1 { animation-delay: 0.1s; }
.fade-up-2 { animation-delay: 0.2s; }
.fade-up-3 { animation-delay: 0.3s; }
.fade-up-4 { animation-delay: 0.4s; }
.fade-up-5 { animation-delay: 0.5s; }

/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
  .fade-up { animation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== LEGAL PAGES ===== */
.legal-page {
  padding: 80px 0 120px;
  max-width: 740px;
  margin: 0 auto;
}
.legal-page .container { padding: 0 32px; }
.legal-page .legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 0.875rem;
  margin-bottom: 40px;
  font-weight: 500;
}
.legal-page .legal-back:hover { color: var(--ink); }
.legal-page h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 12px;
}
.legal-page .legal-meta {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-muted);
  margin-bottom: 48px;
}
.legal-page h2 {
  font-size: 1.5rem;
  margin-top: 48px;
  margin-bottom: 16px;
}
.legal-page h3 {
  font-size: 1.125rem;
  margin-top: 28px;
  margin-bottom: 10px;
}
.legal-page p, .legal-page ul, .legal-page ol {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.legal-page ul, .legal-page ol {
  padding-left: 24px;
}
.legal-page li {
  margin-bottom: 8px;
}
.legal-page a {
  color: var(--coral-deep);
  text-decoration: underline;
  text-decoration-color: var(--coral-soft);
  text-underline-offset: 3px;
}
.legal-page a:hover {
  text-decoration-color: var(--coral);
}
.legal-page strong { color: var(--ink); }

/* ===========================================================
   RESPONSIVE — mobile first refinements
   =========================================================== */

/* Tablets and below */
@media (max-width: 960px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .container { padding: 0 24px; }
  section { padding: 80px 0; }
  .how-it-works, .comparison, .story, .faq, .final-cta { padding: 80px 0; }
  .hero { padding: 56px 0 80px; }
  .section-header { margin-bottom: 48px; }

  /* Nav: hide desktop links, show hamburger */
  .nav-mobile-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fafaf7;
    background-color: var(--bg);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 12px 32px rgba(26, 22, 18, 0.12);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px 24px 24px;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
    z-index: 99;
  }
  .nav-links.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .nav-links a {
    font-size: 1.125rem;
    font-family: var(--serif);
    font-weight: 500;
    padding: 14px 4px;
    border-bottom: 1px solid var(--rule);
    width: 100%;
    color: var(--ink);
  }
  .nav-links a:last-child {
    border-bottom: none;
  }
  .nav-links .nav-cta {
    margin-top: 12px;
    width: 100%;
    text-align: center;
    font-size: 0.9375rem !important;
    padding: 13px 20px;
    border-bottom: none;
    font-family: var(--sans);
    color: white !important;
    background: var(--ink);
    border-radius: 100px;
  }

  /* Mockup: stack columns */
  .mockup-body { grid-template-columns: 1fr; padding: 24px; gap: 24px; min-height: 0; }
  .mockup-url { display: none; }
  .hero-visual { padding: 24px; margin-top: 48px; }

  /* Trust strip: 2 cols on tablet */
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  /* Story background quote: smaller */
  .story::before {
    top: -40px;
    right: -20px;
  }
}

@media (max-width: 560px) {
  .container { padding: 0 20px; }
  .features-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 24px; }
  .compare-grid { grid-template-columns: 1fr; }
  .compare-card { padding: 32px 24px; }
  .compare-card.is-pro::before { right: 50%; transform: translateX(50%); }

  /* Footer stacks fully */
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Hero spacing tightens */
  .hero { padding: 48px 0 64px; }
  .hero h1 { max-width: 16ch; margin-bottom: 20px; }
  .hero-lead { margin-bottom: 32px; }
  .hero-actions { gap: 12px; margin-bottom: 40px; }
  .btn { padding: 13px 22px; font-size: 0.875rem; }
  .hero-actions .btn { flex: 1; min-width: 0; justify-content: center; }

  /* Mockup adjustments */
  .mockup-chip { font-size: 0.75rem; padding: 5px 10px; }
  .mockup-field { padding: 10px 12px; }
  .mockup-field-name { font-size: 0.8125rem; }
  .mockup-field-value { font-size: 0.75rem; }

  /* Section header tighter */
  .section-header p { font-size: 1rem; }

  /* Story callout: tighter */
  .story-callout { padding: 16px 18px; }
  .story-callout-quote { font-size: 1rem; }

  /* Pricing card top badge */
  .compare-card.is-pro { margin-top: 16px; }

  /* Final CTA buttons full width */
  .final-cta-actions .btn { flex: 1; min-width: 140px; justify-content: center; }
}

@media (max-width: 380px) {
  .trust-grid { grid-template-columns: 1fr; gap: 16px; }
  .trust-item { padding: 8px 0; }
  h1 { font-size: 2rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { flex: none; width: 100%; }
}

/* ===========================================================
   ANIMATED PRODUCT TOUR — 7 scenes, 38-second loop
   ===========================================================
   Master timeline:
     0.0 → 3.5s   Scene 1: Empty list → New import click   (0-9.2%)
     3.5 → 6.5s   Scene 2: Type picker → Products click    (9.2-17.1%)
     6.5 → 10s    Scene 3: Upload → file flies in          (17.1-26.3%)
     10 → 22s     Scene 4: Mapping (chips, mode, preview)  (26.3-57.9%)
     22 → 25s     Scene 5: Import mode + Start button      (57.9-65.8%)
     25 → 36s     Scene 6: Progress + log + done           (65.8-94.7%)
     36 → 38s     Scene 7: Imports list with new entry     (94.7-100%)
   ===========================================================
*/

.tour {
  padding: 100px 0;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.tour::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(208, 89, 69, 0.04), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(184, 146, 58, 0.03), transparent 40%);
  pointer-events: none;
}
.tour-caption {
  margin-top: 40px;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.0625rem;
  color: var(--ink-muted);
  font-variation-settings: "opsz" 24;
}
.tour-caption em { font-style: italic; }

.tour-stage {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  z-index: 1;
}

/* === BROWSER FRAME === */
.tour-browser {
  background: white;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(26, 22, 18, 0.08), 0 24px 72px rgba(26, 22, 18, 0.16);
  overflow: hidden;
  border: 1px solid var(--rule);
  position: relative;
}
.tour-browser-chrome {
  background: #fafaf7;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tour-dot {
  width: 12px; height: 12px; border-radius: 50%;
  flex-shrink: 0;
}
.tour-dot:nth-child(1) { background: #f0a09a; }
.tour-dot:nth-child(2) { background: #f0d09a; }
.tour-dot:nth-child(3) { background: #b0d8a0; }
.tour-browser-url {
  margin-left: 24px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tour-stage-inner {
  position: relative;
  height: 460px;
  padding: 32px;
}

/* === SCENE STACK ===
   All scenes are absolutely positioned, fade in/out via opacity.
   Each scene gets its own keyframe animation showing exactly when it's visible.
   Timeline percentages (38 sec total):
     Scene 1: 0-9.2%   visible
     Scene 2: 9.2-17.1%
     Scene 3: 17.1-26.3%
     Scene 4: 26.3-57.9%
     Scene 5: 57.9-65.8%
     Scene 6: 65.8-94.7%
     Scene 7: 94.7-100%
*/
.tour-scene {
  position: absolute;
  inset: 32px;
  opacity: 0;
  transform: translateY(8px);
  animation: 38s infinite ease-in-out;
}

.tour-scene-1 { animation-name: scene1-show; }
@keyframes scene1-show {
  0%, 8% { opacity: 1; transform: translateY(0); }
  10%, 100% { opacity: 0; transform: translateY(-8px); }
}

.tour-scene-2 { animation-name: scene2-show; }
@keyframes scene2-show {
  0%, 8% { opacity: 0; transform: translateY(8px); }
  10%, 16% { opacity: 1; transform: translateY(0); }
  18%, 100% { opacity: 0; transform: translateY(-8px); }
}

.tour-scene-3 { animation-name: scene3-show; }
@keyframes scene3-show {
  0%, 16% { opacity: 0; transform: translateY(8px); }
  18%, 25% { opacity: 1; transform: translateY(0); }
  27%, 100% { opacity: 0; transform: translateY(-8px); }
}

.tour-scene-4 { animation-name: scene4-show; }
@keyframes scene4-show {
  0%, 25% { opacity: 0; transform: translateY(8px); }
  27%, 56% { opacity: 1; transform: translateY(0); }
  58%, 100% { opacity: 0; transform: translateY(-8px); }
}

.tour-scene-5 { animation-name: scene5-show; }
@keyframes scene5-show {
  0%, 56% { opacity: 0; transform: translateY(8px); }
  58%, 64% { opacity: 1; transform: translateY(0); }
  66%, 100% { opacity: 0; transform: translateY(-8px); }
}

.tour-scene-6 { animation-name: scene6-show; }
@keyframes scene6-show {
  0%, 64% { opacity: 0; transform: translateY(8px); }
  66%, 93% { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; transform: translateY(-8px); }
}

.tour-scene-7 { animation-name: scene7-show; }
@keyframes scene7-show {
  0%, 93% { opacity: 0; transform: translateY(8px); }
  95%, 99% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; }
}

.tour-section-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 20px;
  font-variation-settings: "opsz" 48;
}

/* === SCENE 1: EMPTY IMPORTS LIST === */
.tour-empty-list {
  background: var(--bg-warm);
  border: 1.5px dashed var(--rule);
  border-radius: 12px;
  padding: 40px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.tour-empty-icon {
  font-size: 3rem;
  opacity: 0.5;
}
.tour-empty-text {
  font-size: 1rem;
  color: var(--ink-muted);
}
.tour-new-import-btn {
  padding: 12px 24px;
  background: var(--ink);
  color: white;
  border-radius: 100px;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-top: 8px;
  transition: all 0.2s;
  animation: 38s infinite new-import-btn;
}
@keyframes new-import-btn {
  0%, 7% { background: var(--ink); transform: scale(1); }
  8% { background: var(--coral); transform: scale(0.97); }
  9%, 100% { background: var(--ink); transform: scale(1); }
}

/* === SCENE 2: TYPE PICKER === */
.tour-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.tour-type-card {
  background: white;
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
}
.tour-type-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}
.tour-type-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}
.tour-type-card[data-card="products"] {
  animation: 38s infinite product-card-highlight;
}
@keyframes product-card-highlight {
  0%, 14% { background: white; border-color: var(--rule); transform: scale(1); }
  15%, 17% { background: var(--coral-soft); border-color: var(--coral); transform: scale(1.04); }
  18%, 100% { background: white; border-color: var(--rule); transform: scale(1); }
}

/* === SCENE 3: UPLOAD === */
.tour-upload-zone {
  background: white;
  border: 2px dashed var(--rule);
  border-radius: 12px;
  height: 300px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  animation: 38s infinite upload-zone-state;
}
@keyframes upload-zone-state {
  0%, 22% { border-color: var(--rule); background: white; }
  24%, 26% { border-color: var(--coral); background: var(--coral-soft); }
  27%, 100% { border-color: var(--rule); background: white; }
}
.tour-upload-content {
  text-align: center;
  animation: 38s infinite upload-fade;
}
@keyframes upload-fade {
  0%, 25% { opacity: 1; }
  26%, 100% { opacity: 0.2; }
}
.tour-upload-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}
.tour-upload-text {
  font-size: 0.9375rem;
  color: var(--ink-muted);
}
.tour-flying-file {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  opacity: 0;
  animation: 38s infinite file-fly-in;
}
.tour-file-icon { font-size: 1.5rem; }
.tour-file-name {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--ink);
  font-weight: 500;
}
@keyframes file-fly-in {
  0%, 19% { opacity: 0; transform: translate(-50%, -120px) rotate(-4deg); }
  21% { opacity: 1; transform: translate(-50%, -120px) rotate(-4deg); }
  24% { opacity: 1; transform: translate(-50%, 80px) rotate(2deg); }
  25%, 27% { opacity: 1; transform: translate(-50%, 110px) rotate(0deg) scale(0.95); }
  29%, 100% { opacity: 0; transform: translate(-50%, 110px) scale(0.85); }
}

/* === SCENE 4: MAPPING === */
.tour-mapping-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 20px;
  height: 100%;
}
.tour-chips-strip, .tour-fields-strip {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 16px;
}
.tour-chips-label, .tour-fields-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin-bottom: 12px;
  font-weight: 600;
}
.tour-chips-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tour-chip {
  padding: 8px 12px;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  transition: all 0.3s;
}
/* Scene 4 spans 27-56% of timeline. Chip events within that:
   SKU drag: 30-32%  → SKU drop: 33%
   Title drag: 35-37% → drop: 38%
   Auto-Map button shows: 41%
   Auto-Map click: 45%
   Remaining 3 fields populate: 46-49%
   Preview slides in: 51% */
.tour-chip[data-chip="sku"] {
  animation: 38s infinite chip-sku;
}
@keyframes chip-sku {
  0%, 30% { opacity: 1; transform: translate(0, 0); background: var(--bg-warm); }
  32% { opacity: 1; transform: translate(0, -3px) scale(1.04); background: var(--coral-soft); }
  33%, 35% { opacity: 0; transform: translate(0, -3px); }
  36%, 100% { opacity: 0.3; transform: translate(0, 0); background: var(--bg-warm); }
}
.tour-chip[data-chip="title"] {
  animation: 38s infinite chip-title;
}
@keyframes chip-title {
  0%, 36% { opacity: 1; transform: translate(0, 0); background: var(--bg-warm); }
  38% { opacity: 1; transform: translate(0, -3px) scale(1.04); background: var(--coral-soft); }
  39%, 41% { opacity: 0; transform: translate(0, -3px); }
  42%, 100% { opacity: 0.3; transform: translate(0, 0); background: var(--bg-warm); }
}
.tour-chip[data-chip="other"] {
  animation: 38s infinite chip-others;
}
@keyframes chip-others {
  0%, 45% { opacity: 1; background: var(--bg-warm); }
  48%, 100% { opacity: 0.3; background: var(--bg-warm); }
}

/* Fields */
.tour-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #fcfaf6;
  border: 1px solid var(--rule);
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 0.875rem;
  transition: all 0.3s;
}
.tour-field-name {
  color: var(--ink);
  font-weight: 500;
}
.tour-field-target {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-muted);
}
/* SKU field fills at 33% */
.tour-field[data-field="sku"] { animation: 38s infinite field-sku; }
@keyframes field-sku {
  0%, 32%  { background: #fcfaf6; border-color: var(--rule); }
  33%, 100% { background: white; border-color: var(--coral-soft); }
}
.tour-field[data-field="sku"] .tour-field-target {
  animation: 38s infinite field-sku-text;
}
@keyframes field-sku-text {
  0%, 32%   { color: var(--ink-muted); background: transparent; padding: 0; }
  33%, 100% { color: var(--coral-deep); background: var(--coral-soft); padding: 3px 8px; border-radius: 4px; }
}
/* Name field fills at 38% */
.tour-field[data-field="name"] { animation: 38s infinite field-name; }
@keyframes field-name {
  0%, 37%  { background: #fcfaf6; border-color: var(--rule); }
  38%, 100% { background: white; border-color: var(--coral-soft); }
}
.tour-field[data-field="name"] .tour-field-target {
  animation: 38s infinite field-name-text;
}
@keyframes field-name-text {
  0%, 37%   { color: var(--ink-muted); background: transparent; padding: 0; }
  38%, 100% { color: var(--coral-deep); background: var(--coral-soft); padding: 3px 8px; border-radius: 4px; }
}
/* Other 3 fields populate after Auto-Map click at 45%, staggered 46/47/48 */
.tour-field[data-field="regular_price"] { animation: 38s infinite field-other-1; }
.tour-field[data-field="stock_quantity"] { animation: 38s infinite field-other-2; }
.tour-field[data-field="brand"]          { animation: 38s infinite field-other-3; }
@keyframes field-other-1 {
  0%, 46%  { background: #fcfaf6; border-color: var(--rule); }
  47%, 100% { background: white; border-color: var(--coral-soft); }
}
@keyframes field-other-2 {
  0%, 47%  { background: #fcfaf6; border-color: var(--rule); }
  48%, 100% { background: white; border-color: var(--coral-soft); }
}
@keyframes field-other-3 {
  0%, 48%  { background: #fcfaf6; border-color: var(--rule); }
  49%, 100% { background: white; border-color: var(--coral-soft); }
}
.tour-field[data-field="regular_price"] .tour-field-target { animation: 38s infinite field-other-1-text; }
.tour-field[data-field="stock_quantity"] .tour-field-target { animation: 38s infinite field-other-2-text; }
.tour-field[data-field="brand"] .tour-field-target { animation: 38s infinite field-other-3-text; }
@keyframes field-other-1-text {
  0%, 46%   { color: var(--ink-muted); background: transparent; padding: 0; }
  47%, 100% { color: var(--coral-deep); background: var(--coral-soft); padding: 3px 8px; border-radius: 4px; }
}
@keyframes field-other-2-text {
  0%, 47%   { color: var(--ink-muted); background: transparent; padding: 0; }
  48%, 100% { color: var(--coral-deep); background: var(--coral-soft); padding: 3px 8px; border-radius: 4px; }
}
@keyframes field-other-3-text {
  0%, 48%   { color: var(--ink-muted); background: transparent; padding: 0; }
  49%, 100% { color: var(--coral-deep); background: var(--coral-soft); padding: 3px 8px; border-radius: 4px; }
}

/* Auto-Map button: shows around 41%, pulses, clicked at 45% */
.tour-automap-btn {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 22px;
  background: var(--ink);
  color: white;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  animation: 38s infinite automap-btn;
}
@keyframes automap-btn {
  0%, 39% { opacity: 0; transform: translate(-50%, 16px); }
  41%, 42% { opacity: 1; transform: translate(-50%, 0); background: var(--ink); }
  43%, 44% { opacity: 1; transform: translate(-50%, 0); background: var(--coral); box-shadow: 0 4px 16px rgba(208, 89, 69, 0.4); }
  45% { opacity: 1; transform: translate(-50%, 1px) scale(0.97); background: var(--coral); }
  46%, 50% { opacity: 1; transform: translate(-50%, 0) scale(1); background: var(--coral); }
  53%, 100% { opacity: 0; transform: translate(-50%, -8px) scale(0.95); }
}

/* Live preview panel slides in from right at 51% */
.tour-preview-panel {
  position: absolute;
  bottom: 8px;
  right: 0;
  width: 260px;
  background: white;
  border: 1px solid var(--coral-soft);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(168, 65, 47, 0.15);
  opacity: 0;
  transform: translateX(280px);
  animation: 38s infinite preview-slide;
}
@keyframes preview-slide {
  0%, 50% { opacity: 0; transform: translateX(280px); }
  52%, 56% { opacity: 1; transform: translateX(0); }
  58%, 100% { opacity: 0; transform: translateX(280px); }
}
.tour-preview-label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 8px;
}
.tour-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.tour-preview-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink);
}
.tour-preview-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #d1fae5;
  color: #065f46;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
}
.tour-preview-meta {
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-family: var(--mono);
}

/* === SCENE 5: MODE + START === */
.tour-mode-group {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}
.tour-mode-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin-bottom: 12px;
  font-weight: 600;
}
.tour-mode-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.tour-mode-option {
  padding: 12px 14px;
  background: var(--bg-warm);
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.tour-mode-option.is-selected {
  background: var(--coral-soft);
  border-color: var(--coral);
  color: var(--coral-deep);
  font-weight: 600;
  animation: 38s infinite mode-selected-pulse;
}
@keyframes mode-selected-pulse {
  0%, 60% { transform: scale(1); }
  61%, 62% { transform: scale(1.03); }
  63%, 100% { transform: scale(1); }
}

.tour-start-btn {
  display: block;
  margin: 0 auto;
  width: fit-content;
  padding: 14px 36px;
  background: var(--coral);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(208, 89, 69, 0.3);
  animation: 38s infinite start-btn;
}
@keyframes start-btn {
  0%, 62% { transform: scale(1); background: var(--coral); box-shadow: 0 4px 12px rgba(208, 89, 69, 0.3); }
  63% { transform: scale(0.96); background: var(--coral-deep); box-shadow: 0 2px 6px rgba(168, 65, 47, 0.3); }
  64% { transform: scale(1); background: var(--coral-deep); }
  65%, 100% { transform: scale(1); background: var(--coral); }
}

/* === SCENE 6: PROGRESS === */
.tour-progress-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.tour-progress-bar {
  flex: 1;
  height: 16px;
  background: var(--bg-warm);
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.tour-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--coral) 0%, var(--coral-deep) 100%);
  border-radius: 100px;
  width: 0%;
  animation: 38s infinite progress-fill;
}
@keyframes progress-fill {
  0%, 65% { width: 0%; }
  68% { width: 8%; }
  75% { width: 38%; }
  82% { width: 71%; }
  88% { width: 100%; }
  100% { width: 100%; }
}
.tour-progress-pct {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--ink);
  min-width: 60px;
  animation: 38s infinite progress-pct;
}
@keyframes progress-pct {
  0%, 65% { color: var(--ink-muted); }
  88%, 100% { color: var(--coral-deep); }
}

.tour-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.tour-stat {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
.tour-stat-value {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  font-variation-settings: "opsz" 48;
}
.tour-stat-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  font-weight: 600;
  margin-top: 6px;
}
.tour-stat-success {
  background: #ecfdf5;
  border-color: #6ee7b7;
}
.tour-stat-success .tour-stat-value {
  color: #065f46;
  animation: 38s infinite counter-pulse;
}
@keyframes counter-pulse {
  0%, 65% { transform: scale(1); }
  68%, 85% { transform: scale(1.06); color: var(--coral); }
  88%, 100% { transform: scale(1); color: #065f46; }
}

.tour-log {
  background: #1a1612;
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.85);
  height: 80px;
  overflow: hidden;
}
.tour-log-row {
  padding: 3px 0;
  opacity: 0;
  transform: translateX(-12px);
  animation: 38s infinite;
}
.tour-log-ok {
  color: #6ee7b7;
  font-weight: 600;
  margin-right: 6px;
}
.tour-log-row-1 { animation-name: log-row-1; }
.tour-log-row-2 { animation-name: log-row-2; }
.tour-log-row-3 { animation-name: log-row-3; }
.tour-log-row-4 { animation-name: log-row-4; }
.tour-log-row-5 { animation-name: log-row-5; }
@keyframes log-row-1 { 0%, 67% { opacity: 0; transform: translateX(-12px); } 70%, 100% { opacity: 1; transform: translateX(0); } }
@keyframes log-row-2 { 0%, 69% { opacity: 0; transform: translateX(-12px); } 72%, 100% { opacity: 1; transform: translateX(0); } }
@keyframes log-row-3 { 0%, 71% { opacity: 0; transform: translateX(-12px); } 74%, 100% { opacity: 1; transform: translateX(0); } }
@keyframes log-row-4 { 0%, 73% { opacity: 0; transform: translateX(-12px); } 76%, 100% { opacity: 1; transform: translateX(0); } }
@keyframes log-row-5 { 0%, 75% { opacity: 0; transform: translateX(-12px); } 78%, 100% { opacity: 1; transform: translateX(0); } }

.tour-complete-badge {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 12px;
  text-align: center;
  opacity: 0;
  animation: 38s infinite complete-badge;
}
@keyframes complete-badge {
  0%, 88% { opacity: 0; transform: scale(0.95); }
  90%, 93% { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(1.02); }
}
.tour-complete-check {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981 0%, #065f46 100%);
  color: white;
  display: grid;
  place-items: center;
  font-size: 3rem;
  font-weight: 700;
  margin: 0 auto 16px;
  box-shadow: 0 12px 32px rgba(6, 95, 70, 0.3);
  animation: 38s infinite check-pop;
}
@keyframes check-pop {
  0%, 88% { transform: scale(0.4) rotate(-20deg); }
  90% { transform: scale(1.1) rotate(0deg); }
  92%, 100% { transform: scale(1) rotate(0deg); }
}
.tour-complete-text {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ink);
  font-variation-settings: "opsz" 36;
}

/* === SCENE 7: IMPORTS LIST WITH NEW ENTRY === */
.tour-imports-list {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
}
.tour-import-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--rule);
  animation: 38s infinite import-row-fade;
}
.tour-import-row:last-child { border-bottom: none; }
@keyframes import-row-fade {
  0%, 94% { background: white; }
  95%, 97% { background: #ecfdf5; }
  98%, 100% { background: white; }
}
.tour-import-row-main { flex: 1; }
.tour-import-row-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink);
  margin-bottom: 4px;
  font-variation-settings: "opsz" 36;
}
.tour-import-row-meta {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  font-family: var(--mono);
}
.tour-import-row-badge {
  padding: 4px 12px;
  background: #ecfdf5;
  color: #065f46;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* === CURSOR ===
   Choreographed waypoints for the 7-scene flow:
   Scene 1 (0-9%):    Cursor moves to "New import" button → click ~8%
   Scene 2 (10-17%):  Cursor moves to Products card → click ~15%
   Scene 3 (18-25%):  Cursor drifts to upload zone center
   Scene 4 (27-56%):  Drag SKU 30-33, Title 36-39, click Auto-Map 45, drift to preview
   Scene 5 (58-64%):  Move to Insert/Update toggle → Start button → click ~63%
   Scene 6 (66-93%):  Hangs near top-right watching progress
   Scene 7 (95-99%):  Drifts toward the new import row
*/
.tour-cursor {
  position: absolute;
  width: 28px;
  height: 28px;
  top: 0;
  left: 0;
  z-index: 10;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
  pointer-events: none;
  animation: 38s infinite cursor-path;
}
@keyframes cursor-path {
  /* Scene 1: 0-9% - drift to "New import" button */
  0%   { top: 88%; left: 8%; transform: rotate(0deg); }
  4%   { top: 88%; left: 8%; transform: rotate(0deg); }
  7%   { top: 52%; left: 50%; transform: rotate(-4deg); }
  8%   { top: 52%; left: 50%; transform: rotate(0deg) scale(0.9); }
  9%   { top: 52%; left: 50%; transform: rotate(0deg); }

  /* Scene 2: 10-17% - to Products card */
  12%  { top: 38%; left: 18%; transform: rotate(-4deg); }
  15%  { top: 38%; left: 18%; transform: rotate(0deg) scale(0.9); }
  16%  { top: 38%; left: 18%; transform: rotate(0deg); }

  /* Scene 3: 18-25% - drift to upload area, hover while file flies in */
  21%  { top: 50%; left: 50%; transform: rotate(-4deg); }
  24%  { top: 60%; left: 50%; transform: rotate(0deg); }

  /* Scene 4: 27-56% - mapping choreography */
  30%  { top: 50%; left: 18%; transform: rotate(-6deg); }   /* over SKU chip */
  32%  { top: 50%; left: 18%; transform: rotate(0deg) scale(0.92); } /* pickup */
  33%  { top: 38%; left: 62%; transform: rotate(-2deg) scale(0.95); } /* drag to SKU field */
  34%  { top: 38%; left: 62%; transform: rotate(0deg); } /* drop */
  36%  { top: 58%; left: 18%; transform: rotate(-6deg); }   /* over Title chip */
  38%  { top: 58%; left: 18%; transform: rotate(0deg) scale(0.92); }
  39%  { top: 46%; left: 62%; transform: rotate(-2deg) scale(0.95); }
  40%  { top: 46%; left: 62%; transform: rotate(0deg); }
  44%  { top: 92%; left: 50%; transform: rotate(-4deg); }   /* over Auto-Map button */
  45%  { top: 92%; left: 50%; transform: rotate(0deg) scale(0.92); } /* click */
  47%  { top: 92%; left: 50%; transform: rotate(0deg); }
  53%  { top: 85%; left: 78%; transform: rotate(2deg); }   /* drift toward preview panel */

  /* Scene 5: 58-64% - mode + Start */
  60%  { top: 30%; left: 82%; transform: rotate(2deg); }   /* near mode toggle */
  62%  { top: 70%; left: 50%; transform: rotate(-4deg); }   /* over Start button */
  63%  { top: 70%; left: 50%; transform: rotate(0deg) scale(0.92); } /* click */
  64%  { top: 70%; left: 50%; transform: rotate(0deg); }

  /* Scene 6: 66-93% - hangs out near top-right while progress runs */
  72%  { top: 30%; left: 75%; transform: rotate(0deg); }
  88%  { top: 55%; left: 70%; transform: rotate(-2deg); }

  /* Scene 7: 95-99% - drifts toward the new import row */
  96%  { top: 55%; left: 30%; transform: rotate(0deg); }
  100% { top: 88%; left: 8%; transform: rotate(0deg); } /* return to start */
}

/* === CLICK RIPPLE ===
   Triggered at every click moment. Position matches cursor click position.
*/
.tour-click-ripple {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--coral);
  opacity: 0;
  pointer-events: none;
  z-index: 9;
  transform: translate(-50%, -50%);
  animation: 38s infinite click-ripple;
}
@keyframes click-ripple {
  /* Click 1: New import button at 8% */
  0%, 7%    { opacity: 0; top: 52%; left: 50%; transform: translate(-50%, -50%) scale(0.3); }
  8%        { opacity: 0.8; top: 52%; left: 50%; transform: translate(-50%, -50%) scale(0.3); }
  10%       { opacity: 0; top: 52%; left: 50%; transform: translate(-50%, -50%) scale(1.8); }

  /* Click 2: Products card at 15% */
  10.01%, 14% { opacity: 0; top: 38%; left: 18%; transform: translate(-50%, -50%) scale(0.3); }
  15%        { opacity: 0.8; top: 38%; left: 18%; transform: translate(-50%, -50%) scale(0.3); }
  17%        { opacity: 0; top: 38%; left: 18%; transform: translate(-50%, -50%) scale(1.8); }

  /* Click 3: SKU drop at 33% */
  17.01%, 32% { opacity: 0; top: 38%; left: 62%; transform: translate(-50%, -50%) scale(0.3); }
  33%        { opacity: 0.8; top: 38%; left: 62%; transform: translate(-50%, -50%) scale(0.3); }
  35%        { opacity: 0; top: 38%; left: 62%; transform: translate(-50%, -50%) scale(1.8); }

  /* Click 4: Title drop at 39% */
  35.01%, 38% { opacity: 0; top: 46%; left: 62%; transform: translate(-50%, -50%) scale(0.3); }
  39%        { opacity: 0.8; top: 46%; left: 62%; transform: translate(-50%, -50%) scale(0.3); }
  41%        { opacity: 0; top: 46%; left: 62%; transform: translate(-50%, -50%) scale(1.8); }

  /* Click 5: Auto-Map at 45% */
  41.01%, 44% { opacity: 0; top: 92%; left: 50%; transform: translate(-50%, -50%) scale(0.3); }
  45%        { opacity: 0.8; top: 92%; left: 50%; transform: translate(-50%, -50%) scale(0.3); }
  47%        { opacity: 0; top: 92%; left: 50%; transform: translate(-50%, -50%) scale(1.8); }

  /* Click 6: Start Import at 63% */
  47.01%, 62% { opacity: 0; top: 70%; left: 50%; transform: translate(-50%, -50%) scale(0.3); }
  63%        { opacity: 0.8; top: 70%; left: 50%; transform: translate(-50%, -50%) scale(0.3); }
  65%        { opacity: 0; top: 70%; left: 50%; transform: translate(-50%, -50%) scale(1.8); }

  65.01%, 100% { opacity: 0; }
}

/* === STEP INDICATORS === */
.tour-steps {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.tour-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  font-weight: 500;
  opacity: 0.45;
  animation: 38s infinite ease-in-out;
}
.tour-step-num {
  font-family: var(--mono);
  font-size: 0.6875rem;
  background: var(--bg-warm);
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
  color: var(--ink-soft);
}
.tour-step-1 { animation-name: step1-active; }
.tour-step-2 { animation-name: step2-active; }
.tour-step-3 { animation-name: step3-active; }
.tour-step-4 { animation-name: step4-active; }
.tour-step-5 { animation-name: step5-active; }
.tour-step-6 { animation-name: step6-active; }
.tour-step-7 { animation-name: step7-active; }
@keyframes step1-active {
  0%, 9% { opacity: 1; color: var(--coral-deep); }
  10%, 100% { opacity: 0.45; color: var(--ink-muted); }
}
@keyframes step2-active {
  0%, 9% { opacity: 0.45; }
  10%, 17% { opacity: 1; color: var(--coral-deep); }
  18%, 100% { opacity: 0.45; color: var(--ink-muted); }
}
@keyframes step3-active {
  0%, 17% { opacity: 0.45; }
  18%, 26% { opacity: 1; color: var(--coral-deep); }
  27%, 100% { opacity: 0.45; color: var(--ink-muted); }
}
@keyframes step4-active {
  0%, 26% { opacity: 0.45; }
  27%, 57% { opacity: 1; color: var(--coral-deep); }
  58%, 100% { opacity: 0.45; color: var(--ink-muted); }
}
@keyframes step5-active {
  0%, 57% { opacity: 0.45; }
  58%, 65% { opacity: 1; color: var(--coral-deep); }
  66%, 100% { opacity: 0.45; color: var(--ink-muted); }
}
@keyframes step6-active {
  0%, 65% { opacity: 0.45; }
  66%, 93% { opacity: 1; color: var(--coral-deep); }
  94%, 100% { opacity: 0.45; color: var(--ink-muted); }
}
@keyframes step7-active {
  0%, 93% { opacity: 0.45; }
  94%, 100% { opacity: 1; color: var(--coral-deep); }
}

/* === RESPONSIVE === */
@media (max-width: 820px) {
  .tour { padding: 80px 0; }
  .tour-stage-inner { height: 420px; padding: 24px; }
  .tour-scene { inset: 24px; }
  .tour-section-title { font-size: 1.25rem; margin-bottom: 16px; }
  .tour-type-grid { gap: 10px; }
  .tour-type-card { padding: 18px 10px; }
  .tour-type-icon { font-size: 1.5rem; }
  .tour-type-label { font-size: 0.8125rem; }
  .tour-mapping-layout { gap: 14px; }
  .tour-chips-strip, .tour-fields-strip { padding: 12px; }
  .tour-chip { padding: 6px 10px; font-size: 0.75rem; }
  .tour-field { padding: 8px 12px; font-size: 0.8125rem; }
  .tour-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .tour-stat { padding: 10px 8px; }
  .tour-stat-value { font-size: 1.25rem; }
  .tour-steps { gap: 14px; font-size: 0.75rem; }
  .tour-cursor { width: 24px; height: 24px; }
  .tour-preview-panel { width: 220px; padding: 12px; }
}

@media (max-width: 560px) {
  .tour-stage-inner { height: 380px; padding: 18px; }
  .tour-scene { inset: 18px; }
  .tour-browser-url { display: none; }
  .tour-section-title { font-size: 1.0625rem; margin-bottom: 12px; }
  .tour-mapping-layout { grid-template-columns: 1fr; gap: 10px; }
  .tour-chips-row { flex-direction: row; flex-wrap: wrap; }
  .tour-chip { padding: 5px 8px; font-size: 0.6875rem; }
  .tour-field { padding: 6px 10px; margin-bottom: 4px; font-size: 0.75rem; }
  .tour-field-target { font-size: 0.625rem; }
  .tour-stats { gap: 6px; }
  .tour-stat { padding: 8px 6px; }
  .tour-stat-value { font-size: 1rem; }
  .tour-stat-label { font-size: 0.5625rem; }
  .tour-log { font-size: 0.625rem; padding: 10px; height: 70px; }
  .tour-complete-check { width: 60px; height: 60px; font-size: 2.25rem; }
  .tour-complete-text { font-size: 1rem; }
  .tour-mode-options { grid-template-columns: 1fr; gap: 6px; }
  .tour-mode-option { padding: 8px 10px; font-size: 0.75rem; }
  .tour-mode-group { padding: 14px; margin-bottom: 14px; }
  .tour-start-btn { padding: 12px 28px; font-size: 0.9375rem; }
  .tour-preview-panel { display: none; }  /* hide preview overlay on small screens */
  .tour-empty-list { padding: 28px 16px; }
  .tour-empty-icon { font-size: 2.25rem; }
  .tour-import-row { padding: 14px 16px; }
  .tour-import-row-name { font-size: 0.9375rem; }
  .tour-import-row-meta { font-size: 0.75rem; }
  .tour-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 0.6875rem;
  }
  .tour-caption { font-size: 0.9375rem; padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .tour-cursor, .tour-click-ripple,
  .tour-scene, .tour-empty-list, .tour-new-import-btn,
  .tour-type-card[data-card="products"],
  .tour-upload-zone, .tour-upload-content, .tour-flying-file,
  .tour-chip, .tour-field, .tour-field .tour-field-target,
  .tour-automap-btn, .tour-preview-panel,
  .tour-mode-option.is-selected, .tour-start-btn,
  .tour-progress-fill, .tour-progress-pct,
  .tour-stat-success .tour-stat-value, .tour-log-row,
  .tour-complete-badge, .tour-complete-check,
  .tour-import-row, .tour-step {
    animation: none !important;
  }
  .tour-scene-1 { opacity: 1; transform: none; }
  .tour-scene-2, .tour-scene-3, .tour-scene-4,
  .tour-scene-5, .tour-scene-6, .tour-scene-7 { display: none; }
}

/* ===========================================================
   DOCS PAGE
   =========================================================== */
.docs-page {
  padding: 60px 0 120px;
}
.docs-header {
  max-width: 800px;
  margin: 0 auto 56px;
}
.docs-header h1 {
  margin-bottom: 16px;
}
.docs-header .lead {
  font-size: 1.0625rem;
  color: var(--ink-soft);
  margin-bottom: 32px;
}
.docs-header .lead a {
  color: var(--coral-deep);
  text-decoration: underline;
  text-decoration-color: var(--coral-soft);
  text-underline-offset: 3px;
}

/* SEARCH */
.docs-search-wrap {
  position: relative;
  max-width: 100%;
}
.docs-search {
  width: 100%;
  padding: 16px 20px 16px 52px;
  background: var(--bg-card);
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.docs-search:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(208, 89, 69, 0.12);
}
.docs-search::placeholder {
  color: var(--ink-muted);
}
.docs-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.125rem;
  pointer-events: none;
}
.docs-search-status {
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--ink-muted);
  font-family: var(--mono);
  min-height: 1.25em;
}

/* COMPAT STRIP */
.docs-compat {
  max-width: 800px;
  margin: 0 auto 56px;
  padding: 28px 32px;
  background: var(--bg-warm);
  border-radius: 12px;
}
.docs-compat h2 {
  font-size: 1.125rem;
  margin-bottom: 18px;
  font-variation-settings: "opsz" 36;
}
.compat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 16px;
}
.compat-item {
  text-align: center;
}
.compat-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.compat-value {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
  font-variation-settings: "opsz" 24;
}
.compat-note {
  font-size: 0.875rem;
  color: var(--ink-muted);
  margin: 0;
  font-style: italic;
}

/* TOC */
.docs-toc {
  max-width: 800px;
  margin: 0 auto 56px;
  padding: 24px 28px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  position: static;
  top: auto;
  z-index: auto;
}
.docs-toc-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--coral);
  margin-bottom: 12px;
  font-weight: 600;
}
.docs-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 24px;
}
.docs-toc li a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9375rem;
  padding: 6px 0;
  display: block;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}
.docs-toc li a:hover {
  color: var(--coral-deep);
  border-bottom-color: var(--coral-soft);
}

/* DOC SECTIONS */
.docs-section {
  max-width: 800px;
  margin: 0 auto 56px;
}
.docs-section h2 {
  font-size: 1.75rem;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  font-variation-settings: "opsz" 48;
  scroll-margin-top: 80px;
}
.docs-section h3 {
  font-size: 1.1875rem;
  margin-top: 28px;
  margin-bottom: 12px;
  font-variation-settings: "opsz" 36;
  color: var(--ink);
}
.docs-section p,
.docs-section ul,
.docs-section ol {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.docs-section ul,
.docs-section ol {
  padding-left: 24px;
}
.docs-section li {
  margin-bottom: 8px;
}
.docs-section strong {
  color: var(--ink);
}
.docs-section a {
  color: var(--coral-deep);
  text-decoration: underline;
  text-decoration-color: var(--coral-soft);
  text-underline-offset: 3px;
}
.docs-section a:hover {
  text-decoration-color: var(--coral);
}
.docs-section code {
  font-family: var(--mono);
  font-size: 0.875em;
  background: var(--bg-warm);
  padding: 2px 7px;
  border-radius: 4px;
  color: var(--coral-deep);
}
.docs-tip {
  background: var(--bg-warm);
  border-left: 3px solid var(--coral);
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin: 20px 0;
}

/* Q&A blocks inside troubleshooting use h3 as their header */
.docs-section .qa-block {
  padding-top: 12px;
  margin-bottom: 28px;
}
.docs-section .qa-block h3 {
  margin-top: 8px;
  color: var(--coral-deep);
  font-style: italic;
}

/* NO RESULTS */
.docs-no-results {
  max-width: 800px;
  margin: 0 auto;
  padding: 56px 32px;
  text-align: center;
  background: var(--bg-warm);
  border-radius: 12px;
}
.docs-no-results h2 {
  font-size: 1.5rem;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 12px;
}
.docs-no-results p {
  color: var(--ink-soft);
  margin: 0;
}
.docs-no-results a {
  color: var(--coral-deep);
  text-decoration: underline;
  text-decoration-color: var(--coral-soft);
}

/* Active nav state */
.nav-links a.is-active {
  color: var(--coral-deep) !important;
  font-weight: 600;
}

/* ===========================================================
   SUPPORT PAGE
   =========================================================== */
.support-page {
  padding: 60px 0 120px;
}
.support-header {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}
.support-header h1 {
  margin-bottom: 16px;
}
.support-header .lead {
  margin: 0 auto 12px;
  font-size: 1.0625rem;
  color: var(--ink-soft);
}
.support-wisdom {
  margin-top: 16px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.0625rem;
  font-variation-settings: "opsz" 24;
  color: var(--coral-deep);
}

.support-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
  max-width: 1040px;
  margin: 0 auto;
}

/* FORM */
.support-form-wrap {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 36px;
}
.support-form .form-row {
  margin-bottom: 20px;
}
.support-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
}
.support-form .req {
  color: var(--coral);
  margin-left: 2px;
}
.support-form input[type="text"],
.support-form input[type="email"],
.support-form select,
.support-form textarea {
  width: 100%;
  padding: 11px 14px;
  background: white;
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.support-form textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.5;
}
.support-form input:focus,
.support-form select:focus,
.support-form textarea:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(208, 89, 69, 0.1);
}
.support-form select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 8l5 5 5-5' stroke='%237a7165' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}
.support-form small {
  display: block;
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
.form-row-half-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.form-row-half {
  margin-bottom: 0;
}
.form-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.875rem;
  margin-bottom: 16px;
  font-weight: 500;
}
.support-submit-btn {
  width: 100%;
  padding: 15px 24px;
  background: var(--ink);
  color: white;
  border: none;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.2s;
  margin-top: 8px;
}
.support-submit-btn:hover {
  background: var(--coral-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(168, 65, 47, 0.25);
}
.support-form-note {
  text-align: center;
  margin: 16px 0 0;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
.support-form-note a {
  color: var(--coral-deep);
  text-decoration: underline;
}

/* SIDEBAR */
.support-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.support-aside-card {
  background: var(--bg-warm);
  border-radius: 12px;
  padding: 24px;
}
.support-aside-card h3 {
  font-size: 1rem;
  margin-bottom: 12px;
  font-variation-settings: "opsz" 24;
  color: var(--ink);
}
.support-aside-card p,
.support-aside-card ul {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-bottom: 10px;
  line-height: 1.5;
}
.support-aside-card ul {
  list-style: none;
  padding: 0;
}
.support-aside-card ul li {
  margin-bottom: 8px;
}
.support-aside-card a {
  color: var(--coral-deep);
  text-decoration: none;
  font-weight: 500;
}
.support-aside-card a:hover {
  text-decoration: underline;
  text-decoration-color: var(--coral-soft);
  text-underline-offset: 3px;
}
.support-times li strong {
  color: var(--ink);
}
.support-times-note {
  margin-top: 12px;
  font-style: italic;
  font-family: var(--serif);
  color: var(--ink-muted);
  font-size: 0.875rem;
}

/* RESPONSIVE */
@media (max-width: 820px) {
  .docs-page,
  .support-page {
    padding: 40px 0 80px;
  }
  .compat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .docs-toc ul {
    grid-template-columns: 1fr;
  }
  .support-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .support-form-wrap {
    padding: 28px 24px;
  }
}

@media (max-width: 560px) {
  .docs-header h1,
  .support-header h1 {
    font-size: 2rem;
  }
  .docs-compat {
    padding: 22px 20px;
  }
  .compat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .docs-toc {
    padding: 20px 22px;
  }
  .docs-section h2 {
    font-size: 1.5rem;
  }
  .form-row-half-wrap {
    grid-template-columns: 1fr;
  }
  .support-form-wrap {
    padding: 24px 20px;
  }
}

/* ===========================================================
   HOMEPAGE COMPAT STRIP (in features section)
   =========================================================== */
.compat-strip {
  margin-top: 32px;
  padding: 24px 28px;
  background: var(--bg-warm);
  border-radius: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 28px;
}
.compat-strip-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--coral);
  font-weight: 600;
  flex-shrink: 0;
}
.compat-strip-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  flex: 1;
}
.compat-strip-item {
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.compat-strip-item strong {
  color: var(--ink);
  font-weight: 600;
}
.compat-strip-note {
  width: 100%;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  margin: 4px 0 0;
  font-style: italic;
}
.compat-strip-note a {
  color: var(--coral-deep);
  text-decoration: underline;
  text-decoration-color: var(--coral-soft);
  font-style: normal;
}

@media (max-width: 560px) {
  .compat-strip {
    padding: 18px 20px;
    gap: 12px;
  }
  .compat-strip-items {
    flex-direction: column;
    gap: 6px;
    width: 100%;
  }
}