/* ===========================================================
   LOGOS TRUST STRIP, brands the developer has shipped for
   - Infinite horizontal marquee, CSS only
   - Two identical copies of logos in one track so it loops
     seamlessly: the track translates by -50% over 38s, then snaps
     back to 0% on the next iteration, looking continuous
   - Greyscale by default, full color on hover. Pause on hover too.
   =========================================================== */

.logos-strip {
  padding: 36px 0 40px;
  background: var(--bg-warm);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.logos-strip-eyebrow {
  text-align: center;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-transform: none;
  margin-bottom: 24px;
  font-family: var(--sans);
  font-weight: 500;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
  line-height: 1.55;
}

.logos-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    black 60px,
    black calc(100% - 60px),
    transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0,
    black 60px,
    black calc(100% - 60px),
    transparent 100%);
}

.logos-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logos-scroll 38s linear infinite;
  gap: 56px;
  padding: 8px 24px;
}
.logos-marquee:hover .logos-track {
  animation-play-state: paused;
}

@keyframes logos-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.logos-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fixed dimensions so all logos share the same vertical rhythm */
  height: 64px;
  width: 160px;
}
.logos-item img {
  /* Force a constrained size that overrides the global `img { max-width: 100% }`
     rule. Width and height are both auto so the natural aspect ratio is
     preserved while max-* clamps the box. */
  display: block;
  max-height: 64px !important;
  max-width: 160px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  /* Muted but still recognizable. Hover brings them to full color. */
  filter: grayscale(85%) opacity(0.75);
  transition: filter 240ms ease;
  -webkit-user-drag: none;
  user-select: none;
}
.logos-item:hover img {
  filter: grayscale(0%) opacity(1);
}

/* META ROW under the logos: Shopify pill + custom-work link */
.logos-strip-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
  font-family: var(--sans);
  font-size: 0.8125rem;
}
.logos-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  background: rgba(208, 89, 69, 0.08);
  color: var(--coral-deep);
  border: 1px solid rgba(208, 89, 69, 0.2);
  border-radius: 100px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.logos-meta-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 0 rgba(208, 89, 69, 0.4);
  animation: logos-meta-pulse 2.2s ease-in-out infinite;
}
@keyframes logos-meta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(208, 89, 69, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(208, 89, 69, 0); }
}
.logos-meta-sep {
  color: var(--ink-muted);
  opacity: 0.5;
}
.logos-meta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dashed rgba(0,0,0,0.18);
  padding-bottom: 1px;
  transition: color 200ms ease, border-color 200ms ease;
}
.logos-meta-link:hover {
  color: var(--coral-deep);
  border-bottom-color: var(--coral);
}
.logos-meta-arrow {
  transition: transform 200ms ease;
}
.logos-meta-link:hover .logos-meta-arrow {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .logos-track {
    animation: none;
    transform: translateX(0);
  }
  .logos-marquee {
    overflow-x: auto;
  }
}

@media (max-width: 640px) {
  .logos-strip { padding: 28px 0 32px; }
  .logos-strip-eyebrow {
    font-size: 0.8125rem;
    margin-bottom: 18px;
  }
  .logos-item { height: 44px; width: 110px; }
  .logos-item img {
    max-height: 44px !important;
    max-width: 110px !important;
  }
  .logos-track { gap: 32px; padding: 6px 16px; animation-duration: 28s; }
  .logos-strip-meta {
    margin-top: 16px;
    font-size: 0.75rem;
    gap: 10px;
  }
  .logos-meta-pill { padding: 4px 10px 4px 9px; }
}

.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;
  width: 100%;
  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: 48s infinite ease-in-out;
}

/* New 48s timeline, 8 scenes:
   Scene 1: 0-7%     (0.0-3.4s)   Empty imports list
   Scene 2: 7-14%    (3.4-6.7s)   Pick content type
   Scene 3: 14-21%   (6.7-10.1s)  Upload
   Scene 4: 21-46%   (10.1-22.1s) Map columns (longest, drags + auto-map + preview)
   Scene 5: 46-52%   (22.1-25.0s) Pick mode + Start
   Scene 6: 52-74%   (25.0-35.5s) Progress + log + done
   Scene 7: 74-83%   (35.5-39.8s) Saved import row
   Scene 8: 83-100%  (39.8-48.0s) Export flow
*/

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

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

.tour-scene-3 { animation-name: scene3-show; }
@keyframes scene3-show {
  0%, 13% { opacity: 0; transform: translateY(8px); }
  15%, 20% { opacity: 1; transform: translateY(0); }
  22%, 100% { opacity: 0; transform: translateY(-8px); }
}

.tour-scene-4 { animation-name: scene4-show; }
@keyframes scene4-show {
  0%, 20% { opacity: 0; transform: translateY(8px); }
  22%, 45% { opacity: 1; transform: translateY(0); }
  47%, 100% { opacity: 0; transform: translateY(-8px); }
}

.tour-scene-5 { animation-name: scene5-show; }
@keyframes scene5-show {
  0%, 45% { opacity: 0; transform: translateY(8px); }
  47%, 51% { opacity: 1; transform: translateY(0); }
  53%, 100% { opacity: 0; transform: translateY(-8px); }
}

.tour-scene-6 { animation-name: scene6-show; }
@keyframes scene6-show {
  0%, 51% { opacity: 0; transform: translateY(8px); }
  53%, 73% { opacity: 1; transform: translateY(0); }
  75%, 100% { opacity: 0; transform: translateY(-8px); }
}

.tour-scene-7 { animation-name: scene7-show; }
@keyframes scene7-show {
  0%, 73% { opacity: 0; transform: translateY(8px); }
  75%, 82% { opacity: 1; transform: translateY(0); }
  84%, 100% { opacity: 0; transform: translateY(-8px); }
}

.tour-scene-8 { animation-name: scene8-show; }
@keyframes scene8-show {
  0%, 82% { opacity: 0; transform: translateY(8px); }
  84%, 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: 48s infinite new-import-btn;
}
@keyframes new-import-btn {
  0%, 5.5% { background: var(--ink); transform: scale(1); }
  6.3% { background: var(--coral); transform: scale(0.97); }
  7.1%, 79.2% { 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: 48s infinite product-card-highlight;
}
@keyframes product-card-highlight {
  0%, 11.1% { background: white; border-color: var(--rule); transform: scale(1); }
  11.9%, 13.5% { background: var(--coral-soft); border-color: var(--coral); transform: scale(1.04); }
  14.2%, 79.2% { 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: 48s infinite upload-zone-state;
}
@keyframes upload-zone-state {
  0%, 17.4% { border-color: var(--rule); background: white; }
  19%, 20.6% { border-color: var(--coral); background: var(--coral-soft); }
  21.4%, 79.2% { border-color: var(--rule); background: white; }
}
.tour-upload-content {
  text-align: center;
  animation: 48s infinite upload-fade;
}
@keyframes upload-fade {
  0%, 19.8% { opacity: 1; }
  20.6%, 79.2% { 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: 48s 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%, 15.0% { opacity: 0; transform: translate(-50%, -120px) rotate(-4deg); }
  16.6% { opacity: 1; transform: translate(-50%, -120px) rotate(-4deg); }
  19% { opacity: 1; transform: translate(-50%, 80px) rotate(2deg); }
  19.8%, 21.4% { opacity: 1; transform: translate(-50%, 110px) rotate(0deg) scale(0.95); }
  23.0%, 79.2% { 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: 48s infinite chip-sku;
}
@keyframes chip-sku {
  0%, 23.8% { opacity: 1; transform: translate(0, 0); background: var(--bg-warm); }
  25.3% { opacity: 1; transform: translate(0, -3px) scale(1.04); background: var(--coral-soft); }
  26.1%, 27.7% { opacity: 0; transform: translate(0, -3px); }
  28.5%, 79.2% { opacity: 0.3; transform: translate(0, 0); background: var(--bg-warm); }
}
.tour-chip[data-chip="title"] {
  animation: 48s infinite chip-title;
}
@keyframes chip-title {
  0%, 28.5% { opacity: 1; transform: translate(0, 0); background: var(--bg-warm); }
  30.1% { opacity: 1; transform: translate(0, -3px) scale(1.04); background: var(--coral-soft); }
  30.9%, 32.5% { opacity: 0; transform: translate(0, -3px); }
  33.2%, 79.2% { opacity: 0.3; transform: translate(0, 0); background: var(--bg-warm); }
}
.tour-chip[data-chip="other"] {
  animation: 48s infinite chip-others;
}
@keyframes chip-others {
  0%, 35.6% { opacity: 1; background: var(--bg-warm); }
  38%, 79.2% { 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: 48s infinite field-sku; }
@keyframes field-sku {
  0%, 25.3%  { background: #fcfaf6; border-color: var(--rule); }
  26.1%, 79.2% { background: white; border-color: var(--coral-soft); }
}
.tour-field[data-field="sku"] .tour-field-target {
  animation: 48s infinite field-sku-text;
}
@keyframes field-sku-text {
  0%, 25.3%   { color: var(--ink-muted); background: transparent; padding: 0; }
  26.1%, 79.2% { 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: 48s infinite field-name; }
@keyframes field-name {
  0%, 29.3%  { background: #fcfaf6; border-color: var(--rule); }
  30.1%, 79.2% { background: white; border-color: var(--coral-soft); }
}
.tour-field[data-field="name"] .tour-field-target {
  animation: 48s infinite field-name-text;
}
@keyframes field-name-text {
  0%, 29.3%   { color: var(--ink-muted); background: transparent; padding: 0; }
  30.1%, 79.2% { 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: 48s infinite field-other-1; }
.tour-field[data-field="stock_quantity"] { animation: 48s infinite field-other-2; }
.tour-field[data-field="brand"]          { animation: 48s infinite field-other-3; }
@keyframes field-other-1 {
  0%, 36.4%  { background: #fcfaf6; border-color: var(--rule); }
  37.2%, 79.2% { background: white; border-color: var(--coral-soft); }
}
@keyframes field-other-2 {
  0%, 37.2%  { background: #fcfaf6; border-color: var(--rule); }
  38%, 79.2% { background: white; border-color: var(--coral-soft); }
}
@keyframes field-other-3 {
  0%, 30.1%  { background: #fcfaf6; border-color: var(--rule); }
  38.8%, 79.2% { background: white; border-color: var(--coral-soft); }
}
.tour-field[data-field="regular_price"] .tour-field-target { animation: 48s infinite field-other-1-text; }
.tour-field[data-field="stock_quantity"] .tour-field-target { animation: 48s infinite field-other-2-text; }
.tour-field[data-field="brand"] .tour-field-target { animation: 48s infinite field-other-3-text; }
@keyframes field-other-1-text {
  0%, 36.4%   { color: var(--ink-muted); background: transparent; padding: 0; }
  37.2%, 79.2% { color: var(--coral-deep); background: var(--coral-soft); padding: 3px 8px; border-radius: 4px; }
}
@keyframes field-other-2-text {
  0%, 37.2%   { color: var(--ink-muted); background: transparent; padding: 0; }
  38%, 79.2% { color: var(--coral-deep); background: var(--coral-soft); padding: 3px 8px; border-radius: 4px; }
}
@keyframes field-other-3-text {
  0%, 30.1%   { color: var(--ink-muted); background: transparent; padding: 0; }
  38.8%, 79.2% { 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: 48s infinite automap-btn;
}
@keyframes automap-btn {
  0%, 30.9% { opacity: 0; transform: translate(-50%, 16px); }
  32.5%, 33.2% { opacity: 1; transform: translate(-50%, 0); background: var(--ink); }
  34.0%, 34.8% { opacity: 1; transform: translate(-50%, 0); background: var(--coral); box-shadow: 0 4px 16px rgba(208, 89, 69, 0.4); }
  35.6% { opacity: 1; transform: translate(-50%, 1px) scale(0.97); background: var(--coral); }
  36.4%, 39.6% { opacity: 1; transform: translate(-50%, 0) scale(1); background: var(--coral); }
  42.0%, 79.2% { opacity: 0; transform: translate(-50%, -8px) scale(0.95); }
}

/* Live preview panel slides in from right at 51% — now product-card style */
.tour-preview-panel {
  position: absolute;
  bottom: 8px;
  right: 0;
  width: 240px;
  background: white;
  border: 1px solid var(--coral-soft);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(168, 65, 47, 0.18);
  opacity: 0;
  transform: translateX(280px);
  animation: 48s infinite preview-slide;
}
@keyframes preview-slide {
  0%, 39.6% { opacity: 0; transform: translateX(280px); }
  41.2%, 44.3% { opacity: 1; transform: translateX(0); }
  45.9%, 79.2% { opacity: 0; transform: translateX(280px); }
}
.tour-preview-panel-header {
  padding: 8px 12px;
  background: var(--bg-warm);
  border-bottom: 1px solid var(--coral-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tour-preview-label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  font-weight: 600;
}
.tour-preview-row-meta {
  font-size: 0.625rem;
  color: var(--ink-muted);
  font-family: var(--mono);
}
.tour-preview-card-tour {
  padding: 10px;
}
.tour-preview-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--bg-warm) 0%, var(--coral-soft) 100%);
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 2.5rem;
  margin-bottom: 8px;
  border: 1px solid var(--coral-soft);
}
.tour-preview-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tour-preview-name {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--ink);
  line-height: 1.2;
}
.tour-preview-brand {
  font-size: 0.625rem;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  font-weight: 500;
}
.tour-preview-price {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--coral-deep);
  margin-top: 2px;
}
.tour-preview-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--bg-warm);
  font-size: 0.625rem;
  color: var(--ink-soft);
  font-family: var(--mono);
}
.tour-preview-meta-row strong {
  color: var(--ink);
}

/* === 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: 48s infinite mode-selected-pulse;
}
@keyframes mode-selected-pulse {
  0%, 47.5% { transform: scale(1); }
  48.3%, 49.1% { transform: scale(1.03); }
  49.9%, 79.2% { 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: 48s infinite start-btn;
}
@keyframes start-btn {
  0%, 49.1% { transform: scale(1); background: var(--coral); box-shadow: 0 4px 12px rgba(208, 89, 69, 0.3); }
  49.9% { transform: scale(0.96); background: var(--coral-deep); box-shadow: 0 2px 6px rgba(168, 65, 47, 0.3); }
  50.7% { transform: scale(1); background: var(--coral-deep); }
  51.5%, 79.2% { 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: 48s infinite progress-fill;
}
@keyframes progress-fill {
  0%, 51.5% { width: 0%; }
  53.8% { width: 8%; }
  59.4% { width: 38%; }
  64.9% { width: 71%; }
  69.7% { width: 100%; }
  79.2%, 100% { width: 100%; }
}
.tour-progress-pct {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--ink);
  min-width: 60px;
  animation: 48s infinite progress-pct;
}
@keyframes progress-pct {
  0%, 51.5% { color: var(--ink-muted); }
  69.7%, 79.2% { 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: 48s infinite counter-pulse;
}
@keyframes counter-pulse {
  0%, 51.5% { transform: scale(1); }
  53.8%, 67.3% { transform: scale(1.06); color: var(--coral); }
  69.7%, 79.2% { 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: 48s 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%, 53.0% { opacity: 0; transform: translateX(-12px); } 55.4%, 79.2% { opacity: 1; transform: translateX(0); } }
@keyframes log-row-2 { 0%, 54.6% { opacity: 0; transform: translateX(-12px); } 57%, 79.2% { opacity: 1; transform: translateX(0); } }
@keyframes log-row-3 { 0%, 56.2% { opacity: 0; transform: translateX(-12px); } 58.6%, 79.2% { opacity: 1; transform: translateX(0); } }
@keyframes log-row-4 { 0%, 57.8% { opacity: 0; transform: translateX(-12px); } 60.2%, 79.2% { opacity: 1; transform: translateX(0); } }
@keyframes log-row-5 { 0%, 59.4% { opacity: 0; transform: translateX(-12px); } 61.8%, 79.2% { 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: 48s infinite complete-badge;
}
@keyframes complete-badge {
  0%, 69.7% { opacity: 0; transform: scale(0.95); }
  71.2%, 73.6% { opacity: 1; transform: scale(1); }
  75.2%, 79.2% { 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: 48s 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: 48s infinite import-row-fade;
}
.tour-import-row:last-child { border-bottom: none; }
@keyframes import-row-fade {
  0%, 74% { background: white; }
  75%, 77% { background: #ecfdf5; }
  79%, 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;
}

/* === SCENE 8: EXPORT FLOW (83-100%) ===
   Visible 39.8s-48s of 48s loop. Choreography:
   - 84%: tab bar fades in, "Export" tab gets highlighted
   - 86%: "Products" card pulse-selects
   - 89%: "CSV" format pulse-selects
   - 92%: Generate Export button pulses, then clicks
   - 95%: Download toast slides in from bottom
*/

.tour-export-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0;
}
.tour-export-tab {
  padding: 8px 14px;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--sans);
  font-weight: 500;
}
.tour-export-tab.is-active {
  color: var(--coral-deep);
  border-bottom-color: var(--coral);
  font-weight: 600;
  animation: 48s infinite export-tab-pulse;
}
@keyframes export-tab-pulse {
  0%, 83% { background: transparent; }
  84%, 85% { background: rgba(208, 89, 69, 0.12); }
  86%, 100% { background: transparent; }
}

.tour-export-row {
  margin-bottom: 14px;
}
.tour-export-row-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 8px;
}

.tour-export-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.tour-export-type-card {
  padding: 10px;
  background: white;
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ink);
  font-weight: 500;
}
.tour-export-type-card.is-selected {
  background: #f4d9d2;
  border-color: var(--coral);
  color: var(--coral-deep);
  font-weight: 600;
  animation: 48s infinite export-card-select;
}
@keyframes export-card-select {
  0%, 85% { background: white; border-color: var(--rule); color: var(--ink); transform: scale(1); }
  86%, 87% { background: #f4d9d2; border-color: var(--coral); color: var(--coral-deep); transform: scale(1.03); }
  88%, 100% { background: #f4d9d2; border-color: var(--coral); color: var(--coral-deep); transform: scale(1); }
}

.tour-export-format-options {
  display: flex;
  gap: 8px;
}
.tour-export-format-option {
  flex: 1;
  padding: 10px 14px;
  background: white;
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.tour-export-format-option.is-selected {
  border-color: var(--coral);
  background: #fef7f4;
  animation: 48s infinite export-format-select;
}
@keyframes export-format-select {
  0%, 88% { background: white; border-color: var(--rule); transform: scale(1); }
  89%, 90% { background: #fef7f4; border-color: var(--coral); transform: scale(1.02); }
  91%, 100% { background: #fef7f4; border-color: var(--coral); transform: scale(1); }
}
.tour-export-format-name {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.9375rem;
}
.tour-export-format-hint {
  font-size: 0.6875rem;
  color: var(--ink-muted);
}

.tour-export-generate-btn {
  padding: 12px 24px;
  background: var(--ink);
  color: white;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-align: center;
  display: inline-block;
  margin-top: 8px;
  animation: 48s infinite export-generate-btn;
}
@keyframes export-generate-btn {
  0%, 91% { transform: scale(1); box-shadow: 0 2px 8px rgba(26, 22, 18, 0.15); }
  92% { transform: scale(1.05); box-shadow: 0 4px 16px rgba(208, 89, 69, 0.35); background: var(--coral-deep); }
  93% { transform: scale(0.95); box-shadow: 0 1px 4px rgba(208, 89, 69, 0.5); background: var(--coral-deep); }
  94%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(26, 22, 18, 0.15); background: var(--ink); }
}

.tour-download-toast {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(60px);
  opacity: 0;
  background: var(--ink);
  color: white;
  padding: 12px 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8125rem;
  box-shadow: 0 12px 32px rgba(26, 22, 18, 0.25);
  animation: 48s infinite download-toast-show;
  font-family: var(--mono);
  white-space: nowrap;
}
@keyframes download-toast-show {
  0%, 93% { opacity: 0; transform: translateX(-50%) translateY(60px); }
  94%, 95% { opacity: 1; transform: translateX(-50%) translateY(0); }
  98% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(60px); }
}
.tour-download-icon { font-size: 1rem; }
.tour-download-text {
  color: white;
  font-weight: 500;
}
.tour-download-status {
  color: #6ee7b7;
  font-weight: 600;
  font-family: var(--sans);
  font-size: 0.75rem;
}

/* === 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 {
  display: none;
}
.tour-click-ripple {
  display: none;
}
@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: 48s 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: 48s 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; }
.tour-step-8 { animation-name: step8-active; }
@keyframes step1-active {
  0%, 7% { opacity: 1; color: var(--coral-deep); }
  9%, 100% { opacity: 0.45; color: var(--ink-muted); }
}
@keyframes step2-active {
  0%, 7% { opacity: 0.45; }
  9%, 14% { opacity: 1; color: var(--coral-deep); }
  16%, 100% { opacity: 0.45; color: var(--ink-muted); }
}
@keyframes step3-active {
  0%, 14% { opacity: 0.45; }
  16%, 21% { opacity: 1; color: var(--coral-deep); }
  23%, 100% { opacity: 0.45; color: var(--ink-muted); }
}
@keyframes step4-active {
  0%, 21% { opacity: 0.45; }
  23%, 46% { opacity: 1; color: var(--coral-deep); }
  48%, 100% { opacity: 0.45; color: var(--ink-muted); }
}
@keyframes step5-active {
  0%, 46% { opacity: 0.45; }
  48%, 52% { opacity: 1; color: var(--coral-deep); }
  54%, 100% { opacity: 0.45; color: var(--ink-muted); }
}
@keyframes step6-active {
  0%, 52% { opacity: 0.45; }
  54%, 74% { opacity: 1; color: var(--coral-deep); }
  76%, 100% { opacity: 0.45; color: var(--ink-muted); }
}
@keyframes step7-active {
  0%, 74% { opacity: 0.45; }
  76%, 83% { opacity: 1; color: var(--coral-deep); }
  85%, 100% { opacity: 0.45; color: var(--ink-muted); }
}
@keyframes step8-active {
  0%, 83% { opacity: 0.45; }
  85%, 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; }
  /* Scene 8 mobile adjustments */
  .tour-export-tabs { gap: 4px; margin-bottom: 12px; }
  .tour-export-tab { padding: 5px 8px; font-size: 0.6875rem; }
  .tour-export-type-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .tour-export-type-card { padding: 8px; font-size: 0.6875rem; }
  .tour-export-row-label { font-size: 0.5625rem; margin-bottom: 5px; }
  .tour-export-format-option { padding: 8px 10px; flex-direction: column; align-items: flex-start; gap: 2px; }
  .tour-export-format-name { font-size: 0.8125rem; }
  .tour-export-format-hint { font-size: 0.5625rem; }
  .tour-export-generate-btn { padding: 10px 20px; font-size: 0.8125rem; }
  .tour-download-toast { font-size: 0.6875rem; padding: 9px 14px; gap: 8px; max-width: 92%; }
  .tour-download-status { display: none; }
}

@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,
  .tour-export-tab.is-active, .tour-export-type-card.is-selected,
  .tour-export-format-option.is-selected, .tour-export-generate-btn,
  .tour-download-toast {
    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, .tour-scene-8 { display: none; }
}