/*
 * Product page (tour.html, at /product). Loads after styles.css and product.css: the header and footer come from the
 * home page, and everything inside a .tour-app window or the Ask Invix pane is the app's own markup styled by
 * styles.css. This file lays out the page around those screens: a two-tone title, then a stage on the surface-strong
 * tone with the app's windows floating on it (two, one over the other, or one wide one), then three short points. A
 * window carries the app's frame: the top bar with Ask Invix, and the side nav in styles.css's side-item classes. The
 * page's classes are tour-.
 */
.tour {
  --tour-shadow: 0 1px 2px rgb(38 37 30 / .06), 0 10px 24px -8px rgb(38 37 30 / .16), 0 28px 56px -20px rgb(38 37 30 / .22);
  --tour-shadow-front: 0 1px 2px rgb(38 37 30 / .08), 0 16px 32px -10px rgb(38 37 30 / .22), 0 40px 72px -24px rgb(38 37 30 / .3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tour {
    --tour-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 12px 28px -8px rgb(0 0 0 / .5), 0 28px 56px -20px rgb(0 0 0 / .6);
    --tour-shadow-front: 0 1px 2px rgb(0 0 0 / .45), 0 18px 36px -10px rgb(0 0 0 / .6), 0 40px 72px -24px rgb(0 0 0 / .7);
  }
}
:root[data-theme="dark"] .tour {
  --tour-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 12px 28px -8px rgb(0 0 0 / .5), 0 28px 56px -20px rgb(0 0 0 / .6);
  --tour-shadow-front: 0 1px 2px rgb(0 0 0 / .45), 0 18px 36px -10px rgb(0 0 0 / .6), 0 40px 72px -24px rgb(0 0 0 / .7);
}

/* titles: a statement in ink, then its explanation in the muted tone, as one heading */
.tour-title { margin: 0; max-width: 880px; font-size: 40px; font-weight: 400; line-height: 1.15; letter-spacing: -1px; color: var(--ink); text-wrap: balance }
.tour-title span { color: var(--muted) }
.tour-title-xl { font-size: 60px; line-height: 1.05; letter-spacing: -1.9px; max-width: 900px }
.tour-cta { display: flex; align-items: center; gap: 20px; margin-top: 32px }
.tour-cta-link { font-size: 14px; font-weight: 500; color: var(--ink) }
.tour-cta-link:hover { color: var(--body) }
/* the hero's jump row: the three sections below, as chips */
.tour-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px }
.tour-jump a { font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: none; padding: 6px 14px; border: 1px solid var(--hairline-strong); border-radius: 99px }
.tour-jump a:hover { background: var(--hairline-soft) }

.tour-hero { padding-block: 96px 40px }
.tour-sec { padding-block: 72px; scroll-margin-top: 64px }
.tour-sec .tour-title { margin-bottom: 32px }

/* the stage: one surface-strong panel, the same in every section, that the windows float on */
.tour-stage { position: relative; overflow: hidden; padding: 56px 48px; border-radius: 22px; border: 1px solid var(--hairline); background: var(--surface-strong) }
/* a faint dot grid, fading out toward the bottom */
.tour-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1.2px); background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 75%); mask-image: linear-gradient(to bottom, #000, transparent 75%);
}

/* two windows on a 12-column grid: the back one, and the front one over its free side, lower down */
.tour-layers { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start }
.tour-layers > * { grid-row: 1; min-width: 0 }
.tour-layers-right .tour-back { grid-column: 1 / 10 }
.tour-layers-right .tour-front { grid-column: 7 / 13; margin-top: 112px }
/* the back window's content keeps clear of the part the front one covers */
.tour-layers-right .tour-back .tour-screen { padding-right: calc(100% / 3 + 24px) }
.tour-layers-left .tour-back { grid-column: 4 / 13 }
.tour-layers-left .tour-front { grid-column: 1 / 5; margin-top: 56px }
.tour-layers-left .tour-back .tour-screen { padding-left: calc(100% / 9 + 24px) }

/* an app window: dots and its top bar, then the screen on the app's canvas */
.tour-app { position: relative; border: 1px solid var(--hairline-strong); border-radius: 14px; background: var(--canvas); box-shadow: var(--tour-shadow); overflow: hidden }
.tour-front { z-index: 2; box-shadow: var(--tour-shadow-front) }
.tour-bar { display: flex; align-items: center; gap: 16px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--hairline); background: var(--canvas-soft); font-size: 13px; font-weight: 500; color: var(--body); white-space: nowrap; overflow: hidden }
.tour-bar::before { content: ""; flex: none; width: 8px; height: 8px; margin-right: 32px; border-radius: 50%; background: var(--hairline-strong); box-shadow: 14px 0 0 var(--hairline-strong), 28px 0 0 var(--hairline-strong) }
.tour-bar-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600 }
.tour-bar-brand .brand-logo { width: 16px; height: 16px; fill: var(--ink) }
.tour-bar-title { color: var(--ink); overflow: hidden; text-overflow: ellipsis }
/* the app's top bar: the breadcrumb, the Ask Invix field in the middle, then the Ask button and the account */
.tour-top { gap: 12px; height: 48px; padding-right: 10px }
.tour-top svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.tour-top .brand-logo { stroke: none }
.tour-crumbs { flex: 1 1 0; min-width: 0; display: flex; align-items: center; overflow: hidden }
.tour-crumb { display: inline-flex; align-items: center; gap: 2px; color: var(--ink); font-weight: 400; white-space: nowrap }
.tour-crumb::before { content: "/"; padding: 0 6px 0 2px; color: var(--muted-soft) }
.tour-switch { font-weight: 500 }
.tour-switch svg { width: 14px; height: 14px; stroke-width: 1.8 }
.tour-search { flex: 0 1 300px; min-width: 0; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px 0 10px; border: 1px solid var(--hairline-strong); border-radius: var(--r-md); background: var(--surface-card); color: var(--muted); font-weight: 400 }
.tour-search > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis }
.tour-tools { flex: 1 1 0; display: flex; justify-content: flex-end; align-items: center; gap: 8px }
.tour-ask-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; color: var(--ink) }
.tour-avatar { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--hairline); border-radius: 50%; background: var(--surface-card); color: var(--ink) }
.tour-avatar svg { width: 15px; height: 15px }

/* the side nav beside the page; only the items that switch the window's page respond */
.tour-shell { display: flex; min-height: 0 }
.tour-shell > .tour-screen { flex: 1; min-width: 0 }
.tour-side { flex: none; width: 188px; display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--canvas-soft); border-right: 1px solid var(--hairline); overflow: hidden }
.tour-side .side-item { gap: 9px; height: 34px; min-height: 34px; padding: 0 8px; font-size: 12.5px }
.tour-side span.side-item, .tour-side span.side-item:hover { cursor: default; background: transparent; color: var(--body) }
.tour-side span.side-item.active { background: var(--surface-card); border-color: var(--hairline); color: var(--ink) }
.tour-side .side-count { overflow: visible }
.tour-side.collapsed { width: 52px }
.tour-side.collapsed .side-group, .tour-side.collapsed .side-item > span { display: none }
.tour-side.collapsed .side-item { justify-content: center; padding: 0 }
/* a whole page in a window of fixed height: the page scrolls inside it, under the top bar and beside the side nav */
@media (min-width: 1025px) { .tour-stage:has(.tour-wide) { padding: 40px 28px } }
.tour-wide { position: relative; z-index: 1 }
.tour-wide .tour-shell { height: 680px }
.tour-wide .tour-screen { overflow-y: auto; padding: 24px; container: page / inline-size }
.tour-pills { margin-bottom: 16px }
.tour-gear { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-md); color: var(--muted) }
.tour-gear:hover { background: var(--hairline-soft); color: var(--ink) }
.tour-gear svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.tour-sym { flex: none; min-width: 44px; font-weight: 500; color: var(--ink) }
/* the tab row that stands in for the side nav in a narrow window, styled as the app's .tabs links */
.tour-tab-row { display: none; margin: 12px 0 16px }
.tour-tab-row > * { all: unset; flex: none; padding: 10px 4px 12px; margin-right: var(--s-base); font-size: 14px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px }
.tour-tab-row > button { cursor: pointer }
.tour-tab-row > button:hover, .tour-tab-row > .active { color: var(--ink) }
.tour-tab-row > .active { border-bottom-color: var(--ink) }
.tour-tab-row > button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }

.tour-screen { padding: 20px }
.tour-screen > :last-child, .tour-screen [role="tabpanel"] > :last-child, .tour-screen .card:last-child { margin-bottom: 0 }
.tour-screen > .section-head:first-child { margin-top: 0 }
.tour-front .tour-screen { padding: 14px }
.tour-front .card { border-color: var(--hairline-soft) }

/* connections */
.tour-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px }
.tour-add .btn { height: 36px; padding: 0 14px; font-size: 13px; background: var(--surface-card) }
.tour-add-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block }

/* the Ask Invix pane, held in place instead of fixed to the window's edge */
.tour-pane { position: relative; display: flex; flex-direction: column; height: 600px; border: 1px solid var(--hairline-strong); border-radius: 14px; background: var(--canvas-soft); box-shadow: var(--tour-shadow-front); overflow: hidden }
.tour-pane .ask-head { justify-content: space-between; height: 52px }
.tour-head-icons { display: flex; margin-left: 6px }
.tour-head-ic { display: grid; place-items: center; width: 30px; height: 30px; color: var(--muted) }
.tour-head-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.tour-starters { gap: 6px; margin-bottom: 10px }
.tour-starters .chip { height: auto; min-height: 30px; white-space: normal; text-align: left }
.tour-input { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--hairline-strong); border-radius: var(--r-md); background: var(--surface-card); color: var(--muted-soft); font-size: 14px }
.tour-input .ask-chip { margin: 0 }

/* a generic AI app (not Invix) using Invix through MCP: chats on the left, the conversation, then the composer */
.tour-agent { position: relative; display: flex; flex-direction: column; height: 720px; border: 1px solid var(--hairline-strong); border-radius: 14px; background: var(--surface-card); box-shadow: var(--tour-shadow); overflow: hidden }
.tour-agent svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.tour-agent-bar { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px 0 16px; border-bottom: 1px solid var(--hairline); font-size: 13px }
.tour-agent-name { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600 }
/* the AI apps as a stack of round marks, each overlapping the one before it and ringed in the bar's colour */
.tour-ai-stack { display: inline-flex; align-items: center; padding-left: 8px }
.tour-ai-logo { display: grid; place-items: center; width: 26px; height: 26px; margin-left: -8px; border-radius: 50%; border: 1px solid var(--hairline-strong); box-shadow: 0 0 0 2px var(--surface-card); background: var(--surface-card); color: var(--ink) }
.tour-ai-logo svg { width: 14px; height: 14px; fill: currentColor; stroke: none }
.tour-ai-logo:nth-child(1) { z-index: 4 } .tour-ai-logo:nth-child(2) { z-index: 3 } .tour-ai-logo:nth-child(3) { z-index: 2 } .tour-ai-logo:nth-child(4) { z-index: 1 }
.tour-ai-claude { color: #d97757 }
.tour-ai-gemini { color: #4285f4 }
.tour-agent-model { padding: 2px 8px; border-radius: var(--r-pill); background: var(--hairline-soft); color: var(--muted); font-size: 12px }
.tour-agent-bar .chip { margin-left: auto; height: 26px; padding: 2px 10px; font-size: 12px }
.tour-agent-body { flex: 1; display: flex; min-height: 0 }
.tour-agent-side { flex: 0 0 200px; display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; border-right: 1px solid var(--hairline); background: var(--canvas-soft); font-size: 13px; color: var(--body); overflow: hidden }
.tour-agent-side > span { padding: 6px 8px; border-radius: var(--r-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tour-agent-side .on { background: var(--surface-strong); color: var(--ink) }
.tour-agent-new { color: var(--ink); font-weight: 500 }
.tour-agent-h { margin-top: 12px; font-size: 11px; font-weight: 600; letter-spacing: .88px; text-transform: uppercase; color: var(--muted-soft) }
.tour-agent-conn { display: flex; align-items: center; gap: 8px }
.tour-agent-conn i { width: 7px; height: 7px; border-radius: 50%; background: var(--success) }
.tour-agent-main { flex: 1; min-width: 0; display: flex; flex-direction: column }
.tour-agent-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; font-size: 14px; line-height: 1.55 }
.tour-agent-input { display: flex; align-items: center; gap: 8px; margin: 0 16px 16px; min-height: 46px; padding: 6px 12px; border: 1px solid var(--hairline-strong); border-radius: 12px; color: var(--muted-soft); font-size: 14px }
.tour-mention { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); font-weight: 500; font-size: 13px }
.tour-msg-user { align-self: flex-end; max-width: 86%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--surface-strong); color: var(--ink) }
.tour-msg-ai { display: flex; gap: 10px; align-items: flex-start }
.tour-msg-ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--chart-sleeve) 16%, transparent); color: var(--chart-sleeve) }
.tour-msg-ic svg { width: 14px; height: 14px; fill: currentColor; stroke: none }
.tour-msg-ai .ask-md { flex: 1; min-width: 0 }
.tour-calls { display: flex; flex-direction: column; gap: 2px; margin-left: 36px; padding: 8px 10px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--canvas-soft) }
.tour-calls-h { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 2px; font-size: 13px; font-weight: 500; color: var(--ink) }
.tour-call { display: flex; align-items: center; gap: 10px; min-height: 28px; padding: 2px 2px 2px 32px; font-size: 13px }
.tour-call-ic { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--surface-card); border: 1px solid var(--hairline) }
.tour-call-ic .brand-logo { width: 13px; height: 13px; fill: var(--ink); stroke: none }
.tour-call-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted) }
.tour-call-name b { color: var(--ink); font-weight: 500; margin-right: 4px }
/* a spinner while the skill runs, then a check */
.tour-call-st { flex: none; display: grid; place-items: center; width: 16px; height: 16px }
.tour-call-st svg { width: 16px; height: 16px; color: var(--success); stroke-width: 2.2 }
.tour-call[data-status="running"] .tour-call-st::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--hairline-strong); border-top-color: var(--chart-sleeve); animation: tour-spin .8s linear infinite }
.tour-call[data-status="running"] .tour-call-name b { color: var(--body) }
@keyframes tour-spin { to { transform: rotate(360deg) } }
/* the replay: each part rises in; a table row by row; a paragraph types out behind a caret */
.tour-in { animation: tour-rise .32s ease-out both }
.ask-table.tour-in { animation: none }
.ask-table.tour-in tr { animation: tour-rise .3s ease-out both }
@keyframes tour-rise { from { opacity: 0; transform: translateY(6px) } }
.tour-typing::after { content: ""; display: inline-block; width: 7px; height: 1.05em; margin-left: 2px; vertical-align: -2px; border-radius: 1px; background: var(--chart-sleeve); animation: tour-caret 1s steps(1) infinite }
@keyframes tour-caret { 50% { opacity: 0 } }
.tour-agent-log { scroll-behavior: auto }
@media (prefers-reduced-motion: reduce) { .tour-in, .ask-table.tour-in tr { animation: none } }
.tour-done { margin-left: 36px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--success) 35%, var(--hairline)); border-radius: 12px; background: var(--success-tint); font-size: 13px; color: var(--ink) }
.tour-done b { display: flex; align-items: center; gap: 6px; font-weight: 600 }
.tour-done ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; color: var(--body) }
.tour-done li { display: flex; align-items: center; gap: 6px; margin: 0 }
.tour-done svg { width: 15px; height: 15px; color: var(--success); stroke-width: 2.2 }
/* where the Ask Invix pane overlaps it, the bar and sidebar keep their content clear */
.tour-layers-left .tour-agent .tour-agent-bar { padding-left: calc(100% / 9 + 16px) }
.tour-layers-left .tour-agent .tour-agent-side { flex-basis: calc(100% / 9 + 190px); padding-left: calc(100% / 9 + 12px) }

/* three short points under each stage: captions in three columns, no boxes */
.tour-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; margin-top: 24px; padding-inline: 4px }
.tour-points > div { display: flex; flex-direction: column; gap: 2px }
.tour-points b { color: var(--ink); font-size: 15px; font-weight: 500 }
.tour-points span { color: var(--muted); font-size: 14px }

.tour-close { padding-block: 88px 120px; text-align: center }
.tour-close .tour-title { margin: 0 auto }
.tour-close .tour-cta { justify-content: center }
.tour-close .pp-note { margin-top: 56px }

/* below 1024px the windows stack, the front one slightly inset; Ask Invix comes before the agent card, as in the title */
@media (max-width: 1024px) {
  .tour-layers { display: flex; flex-direction: column; align-items: stretch }
  .tour-layers-right .tour-back .tour-screen, .tour-layers-left .tour-back .tour-screen { padding: 20px }
  .tour-layers-left .tour-agent .tour-agent-bar { padding-left: 16px }
  .tour-layers-left .tour-agent .tour-agent-side { flex-basis: 200px; padding-left: 10px }
  .tour-layers .tour-front { margin: 20px 0 0 24px }
  .tour-layers-left .tour-front { order: -1; margin: 0 0 20px }
  .tour-stage { padding: 32px 28px }
}
@media (max-width: 760px) {
  .tour-points { grid-template-columns: minmax(0, 1fr); gap: 12px }
  .tour-search { display: none }
  .tour-side { display: none }
  .tour-tab-row { display: flex }
  .tour-wide .tour-shell { height: 720px }
  .tour-wide .tour-screen { padding: 16px }
  .tour-agent-side { display: none !important }
  .tour-agent-log { padding: 16px 14px }
  .tour-calls, .tour-done { margin-left: 0 }
}
@media (max-width: 640px) {
  .tour-hero { padding-block: 48px 16px }
  .tour-title { font-size: 28px; letter-spacing: -.6px }
  .tour-title-xl { font-size: 38px; letter-spacing: -1px }
  .tour-sec { padding-block: 48px }
  .tour-stage { padding: 16px 12px; border-radius: 16px }
  .tour-layers .tour-front { margin: 14px 0 0 }
  .tour-layers-left .tour-front { margin: 0 0 14px }
  .tour-bar { padding: 0 12px }
  .tour-bar::before { display: none }
  .tour-wide .tour-screen { padding: 12px }
  .tour-wide .pf-movers-list td.pf-move-bar { width: 60px }
  .tour-screen, .tour-layers-right .tour-back .tour-screen, .tour-layers-left .tour-back .tour-screen { padding: 12px }
  .tour-pane { height: 560px }
}