/* OAT page: the hero + scroll tour. The left column is page copy in the site's
   voice; the right column is a live replica of the OAT window, drawn at a fixed
   1120x700 design size and scaled to fit (tour.js sets --s). */

.tour { position: relative; padding: calc(var(--header-height) + 1rem) 0 4rem; }
.tour-grid {
    max-width: 1640px; margin: 0 auto; padding: 0 2.5rem;
    display: grid; grid-template-columns: minmax(300px, 0.55fr) 1fr; column-gap: 4rem;
    grid-template-areas: "hero stage" "steps stage";
}
.tour-hero { grid-area: hero; min-height: calc(100vh - var(--header-height) - 1rem); display: flex; flex-direction: column; justify-content: center; padding-bottom: 6vh; }
.tour-steps { grid-area: steps; }
.tour-stage {
    grid-area: stage; align-self: start; position: sticky;
    top: calc(var(--header-height) + max(1rem, (100vh - var(--header-height) - var(--win-h, 600px)) / 2));
}

.tour-hero h1 { font-size: clamp(2.3rem, 4.4vw, 3.9rem); font-weight: 900; line-height: 1.02; letter-spacing: -0.02em; margin-bottom: 1.25rem; max-width: 12ch; }
.tour-hero p { font-size: 1.15rem; color: var(--color-text-secondary); line-height: 1.6; max-width: 34rem; margin-bottom: 2rem; }
.tour-hero .tour-note { font-size: 0.9rem; color: var(--color-text-muted); margin: 1.25rem 0 0; }
.tour-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.tour-cta .oat-btn-ghost { margin-left: 0; }

.tour-group { font-size: 0.95rem; font-weight: 700; color: #00d4ff; margin: 0 0 0; padding-top: 18vh; }
.tour-group + .tour-step { padding-top: 6vh; }
.tour-step {
    min-height: 78vh; display: flex; flex-direction: column; justify-content: center;
    opacity: 0.35; transition: opacity 0.35s ease;
}
.tour-step.is-active { opacity: 1; }
.tour-step h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 800; line-height: 1.15; margin-bottom: 0.9rem; max-width: 18ch; }
.tour-step p { color: var(--color-text-secondary); line-height: 1.65; font-size: 1.05rem; max-width: 32rem; }
.tour-step .tour-pro { display: inline-block; font-size: 0.75rem; font-weight: 700; color: #00d4ff; border: 1px solid rgba(0, 212, 255, 0.45); border-radius: 4px; padding: 0.05rem 0.4rem; margin-left: 0.35rem; vertical-align: 0.15em; }
.tour-step .tour-beta { display: inline-block; font-size: 0.75rem; font-weight: 700; color: #f5b942; border: 1px solid rgba(245, 185, 66, 0.5); border-radius: 4px; padding: 0.05rem 0.4rem; margin-left: 0.35rem; vertical-align: 0.15em; }
.tour-step:last-child { min-height: 85vh; }

/* ── The window ─────────────────────────────────────────────────────────── */
.oatwin-frame {
    width: 100%; height: var(--win-h, 600px); position: relative;
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 0 0 1px #26262e, 0 30px 80px -20px rgba(0, 0, 0, 0.9), 0 0 120px -40px rgba(0, 212, 255, 0.25);
}
.oatwin {
    --bg: #0a0a0c; --bg2: #111114; --bg3: #1a1a20; --card: #0d0d10; --border: #26262e; --line: #20202a;
    --cyan: #00d4ff; --orange: #ff6b35; --green: #00ff88; --fast: #22c55e; --slow: #e05555; --gold: #d4a537;
    --text: #e8e8ee; --text2: #a1a1aa; --muted: #9ca3af;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    position: absolute; left: 0; top: 0; width: 1120px; height: 700px;
    transform: scale(var(--s, 1)); transform-origin: 0 0;
    background: var(--bg); color: var(--text);
    font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px; line-height: 1.35;
    display: flex; flex-direction: column; overflow: hidden; user-select: none;
}
.oatwin * { box-sizing: border-box; }
.oatwin .mono { font-family: var(--mono); }

.ow-bar { height: 38px; flex: none; display: flex; align-items: center; gap: 7px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--bg); }
.ow-logo { height: 20px; }
.ow-name { font-weight: 700; font-size: 13px; }
.ow-sub { font-size: 10px; color: var(--text2); margin-right: 10px; white-space: nowrap; }
.ow-tabs { display: flex; align-items: center; gap: 2px; }
.ow-tab { all: unset; display: flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 6px; font-size: 11.5px; color: var(--text2); cursor: pointer; transition: background 0.2s, color 0.2s; }
.ow-tab svg { width: 13px; height: 13px; }
.ow-tab:hover { color: var(--text); background: var(--bg3); }
.ow-tab.on { color: var(--cyan); background: rgba(0, 212, 255, 0.13); }
.ow-tab:focus-visible { outline: 2px solid var(--cyan); }
.ow-sep { width: 1px; height: 16px; background: var(--border); margin: 0 6px; }
.ow-right { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--muted); }
.ow-btn { border: 1px solid var(--border); border-radius: 6px; padding: 4px 9px; font-size: 11px; color: var(--text); background: var(--bg2); white-space: nowrap; }
.ow-btn.primary { background: var(--cyan); border-color: var(--cyan); color: #001018; font-weight: 600; }
.ow-btn.gold { border-color: var(--gold); color: var(--gold); background: rgba(212, 165, 55, 0.08); }

.ow-views { position: relative; flex: 1; min-height: 0; }
.ow-view { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s; overflow: hidden; }
.ow-view.on { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }

/* Shared app voice: mono uppercase labels, cards, tables. */
.ow-eyebrow { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.ow-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; min-width: 0; }
.ow-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.ow-table th { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.ow-table td { padding: 6px 8px; border-bottom: 1px solid #16161c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.ow-table .num { font-family: var(--mono); text-align: right; }
.ow-group td { background: var(--bg2); color: var(--text2); font-family: var(--mono); font-size: 10px; }
.ow-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 6px; padding: 4px 9px; font-size: 11px; color: var(--text2); background: var(--bg2); white-space: nowrap; }
.ow-chip.on { border-color: var(--cyan); color: var(--cyan); background: rgba(0, 212, 255, 0.1); }
.ow-dot { width: 7px; height: 7px; border-radius: 50%; background: #3a3a46; flex: none; transition: background 0.3s, box-shadow 0.3s; }
.ow-dot.live { background: var(--green); box-shadow: 0 0 8px rgba(0, 255, 136, 0.7); }
.ow-rise { animation: ow-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes ow-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Home */
.ow-home { height: 100%; display: flex; flex-direction: column; justify-content: center; max-width: 920px; margin: 0 auto; padding: 18px 24px; }
.ow-brand { position: relative; height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 16px; }
.ow-emblem { position: absolute; inset: 0; width: 100%; height: 100%; }
.ow-emblem path { fill: none; stroke: rgba(0, 212, 255, 0.28); stroke-width: 2; }
.ow-brand img { height: 56px; position: relative; }
.ow-brand h4 { position: relative; margin: 12px 0 0; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.34em; padding-left: 0.34em; text-transform: uppercase; }
.ow-status { position: relative; font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 8px; }
.ow-status b { color: var(--text); }
.ow-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; margin-bottom: 12px; }
.ow-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: border-color 0.16s, background 0.16s, transform 0.16s; }
.ow-tile svg { width: 18px; height: 18px; color: var(--cyan); }
.ow-tile:hover, .ow-tile.hot { border-color: rgba(0, 212, 255, 0.45); background: var(--bg2); transform: translateY(-2px); }
.ow-week { text-align: center; padding: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 12px; }
.ow-panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ow-panels .ow-card { height: 172px; overflow: hidden; }
.ow-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; font-size: 11px; }
.ow-row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ow-row .meta { font-family: var(--mono); font-size: 9.5px; color: var(--muted); }
.ow-tag { font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; border-radius: 4px; padding: 1px 5px; background: rgba(0, 212, 255, 0.14); color: var(--cyan); }
.ow-tag.grey { background: rgba(148, 163, 184, 0.14); color: var(--muted); }
.ow-wx { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ow-wx .t { font-size: 26px; font-weight: 600; }
.ow-hours { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-family: var(--mono); font-size: 9px; color: var(--muted); gap: 2px; }
.ow-hours b { display: block; color: var(--text); font-size: 11px; margin: 3px 0; }

/* Two-pane and three-pane shells */
.ow-split { display: flex; height: 100%; }
.ow-side { width: 200px; flex: none; border-right: 1px solid var(--line); padding: 10px 0; overflow: hidden; background: var(--bg); }
.ow-side .ow-eyebrow { padding: 0 12px; margin-bottom: 6px; }
.ow-side-row { display: flex; justify-content: space-between; padding: 5px 12px; font-size: 11px; color: var(--text2); }
.ow-side-row.on { background: rgba(0, 212, 255, 0.1); color: var(--cyan); box-shadow: inset 2px 0 var(--cyan); }
.ow-side-row .meta { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.ow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ow-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ow-head h5 { font-size: 14px; font-weight: 700; margin: 0; }
.ow-head .sub { font-size: 10.5px; color: var(--muted); }
.ow-filters { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.ow-search { width: 210px; border: 1px solid var(--border); border-radius: 6px; padding: 5px 9px; font-size: 11px; color: var(--text); background: var(--bg2); min-height: 26px; }
.ow-search:empty::before { content: attr(data-ph); color: var(--muted); }
.ow-search.typing::after { content: ""; display: inline-block; width: 1px; height: 11px; background: var(--cyan); margin-left: 1px; vertical-align: -1px; animation: ow-blink 0.8s steps(1) infinite; }
@keyframes ow-blink { 50% { opacity: 0; } }
.ow-scroll { flex: 1; min-height: 0; overflow: hidden; }

/* Database rows collapse when filtered out */
.ow-table tr.f-out td { padding-top: 0; padding-bottom: 0; line-height: 0; border-bottom-color: transparent; opacity: 0; }
.ow-table tr td { transition: padding 0.3s, line-height 0.3s, opacity 0.25s, background 0.3s; line-height: 1.35; }
.ow-type { font-family: var(--mono); font-size: 9px; font-weight: 700; color: var(--orange); }
.ow-type.v { color: #9d4edd; }
.ow-best { color: var(--green); }

/* Download */
.ow-dl { display: grid; grid-template-columns: 1fr 250px; grid-template-rows: 1fr auto auto auto; height: 100%; }
.ow-dl-sessions { grid-column: 1; grid-row: 1; overflow: hidden; padding: 10px 14px; }
.ow-dl-devices { grid-column: 2; grid-row: 1 / 3; border-left: 1px solid var(--line); padding: 10px 12px; }
.ow-device { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 7px; background: var(--card); }
.ow-device .who { flex: 1; min-width: 0; }
.ow-device .who b { display: block; font-size: 11.5px; }
.ow-device .who span { font-family: var(--mono); font-size: 9.5px; color: var(--muted); }
.ow-device .st { font-family: var(--mono); font-size: 9px; color: var(--muted); }
.ow-device .st.live { color: var(--green); }
.ow-dl-log { grid-column: 1; grid-row: 2; height: 92px; border-top: 1px solid var(--line); padding: 7px 14px; font-family: var(--mono); font-size: 10px; color: var(--muted); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.ow-dl-log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-dl-log .ok { color: var(--green); }
.ow-dl-session { grid-column: 1 / 3; grid-row: 3; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-top: 1px solid var(--line); font-size: 11px; }
.ow-dl-session .lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--muted); }
.ow-field { border: 1px solid var(--border); background: var(--bg2); border-radius: 5px; padding: 4px 8px; font-size: 11px; }
.ow-dl-bar { grid-column: 1 / 3; grid-row: 4; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--bg2); }
.ow-dl-bar .status { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.ow-dl-bar .status.live { color: var(--green); }
.ow-dl tr.done td { background: rgba(0, 255, 136, 0.06); }
.ow-dl tr.done td:first-child { box-shadow: inset 2px 0 var(--green); }
.ow-prog { width: 90px; height: 5px; background: var(--bg3); border-radius: 3px; overflow: hidden; display: inline-block; vertical-align: middle; }
.ow-prog i { display: block; height: 100%; width: 0; background: var(--cyan); }
.ow-ok { color: var(--green); font-family: var(--mono); font-size: 10px; }

/* Team */
.ow-team { max-width: 760px; margin: 0 auto; padding: 22px 20px; }
.ow-team-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ow-team-head h5 { font-size: 15px; margin: 0 6px 0 0; }
.ow-team .note { font-size: 10.5px; color: var(--muted); margin-bottom: 14px; }
.ow-roster { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ow-div { padding: 6px 12px; font-size: 10px; color: var(--muted); background: var(--bg2); }
.ow-div b { color: var(--cyan); font-family: var(--mono); margin-right: 6px; }
.ow-driver { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-top: 1px solid #16161c; font-size: 12px; }
.ow-av { width: 24px; height: 24px; border-radius: 50%; background: var(--bg3); font-size: 9px; display: grid; place-items: center; color: var(--text2); flex: none; }
.ow-driver .grow { flex: 1; font-weight: 600; }
.ow-driver .k { width: 70px; font-family: var(--mono); color: var(--muted); font-size: 10.5px; }
.ow-ref { font-family: var(--mono); font-size: 9px; font-weight: 700; color: var(--gold); border: 1px solid var(--gold); border-radius: 4px; padding: 1px 6px; opacity: 0; transform: scale(0.6); transition: opacity 0.3s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ow-ref.on { opacity: 1; transform: none; }
.ow-gen { margin-top: 14px; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.ow-gen .grow { flex: 1; font-size: 11.5px; }
.ow-gen .grow span { display: block; font-size: 10px; color: var(--muted); font-family: var(--mono); margin-top: 3px; }
.ow-gen .ow-prog { width: 160px; }

/* Reports */
.ow-rep-list { padding: 12px 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-content: start; }
.ow-rep-group { grid-column: 1 / -1; font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 4px; }
.ow-rep { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--card); transition: border-color 0.25s, background 0.25s; }
.ow-rep.sel { border-color: var(--cyan); background: rgba(0, 212, 255, 0.06); }
.ow-rep b { display: block; font-size: 12px; margin-bottom: 3px; }
.ow-rep .meta { font-family: var(--mono); font-size: 9.5px; color: var(--muted); }
.ow-rep .gap { float: right; font-family: var(--mono); font-size: 11px; color: var(--slow); }
.ow-rep-preview { position: absolute; top: 0; right: 0; bottom: 0; width: 470px; background: #0c0c0f; border-left: 1px solid var(--border); padding: 16px 18px; transform: translateX(105%); transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: -30px 0 60px rgba(0, 0, 0, 0.6); }
.ow-rep-preview.open { transform: none; }
.ow-rep-preview h6 { font-size: 15px; margin: 0 0 2px; }
.ow-rep-preview .meta { font-family: var(--mono); font-size: 9.5px; color: var(--muted); margin-bottom: 12px; }
.ow-takeaway { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-top: 7px; font-size: 11px; background: var(--card); }
.ow-takeaway b { display: block; font-size: 11.5px; margin-bottom: 2px; }
.ow-takeaway.warn { border-color: rgba(255, 107, 53, 0.5); background: rgba(255, 107, 53, 0.06); }
.ow-takeaway.good { border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.06); }

/* Telemetry */
.ow-tel { display: grid; grid-template-columns: 170px 1fr 330px; height: 100%; }
.ow-files { border-right: 1px solid var(--line); padding: 8px 0; overflow: hidden; }
.ow-files .open { margin: 0 8px 8px; text-align: center; border: 1px solid var(--cyan); color: var(--cyan); border-radius: 6px; padding: 5px; font-family: var(--mono); font-size: 10px; }
.ow-file { padding: 4px 10px; font-size: 10.5px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-file.on { color: var(--text); background: var(--bg3); }
.ow-file i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; background: #3a3a46; }
.ow-charts { display: flex; flex-direction: column; min-width: 0; }
.ow-sess { display: flex; align-items: center; gap: 10px; padding: 5px 10px; border-bottom: 1px solid var(--line); font-size: 11px; }
.ow-sess .sw { width: 8px; height: 8px; border-radius: 50%; }
.ow-sess .best { font-family: var(--mono); color: var(--green); }
.ow-sess .lap { font-family: var(--mono); font-size: 10px; border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; color: var(--text2); }
.ow-tools { display: flex; gap: 5px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.ow-tools .ow-chip { font-family: var(--mono); font-size: 9.5px; padding: 3px 7px; }
.ow-plot { position: relative; flex: 1; min-height: 0; }
.ow-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ow-trace { fill: none; stroke-width: 1.4; stroke-linejoin: round; }
.ow-axis { font-family: var(--mono); font-size: 9px; fill: var(--muted); }
.ow-grid { stroke: var(--line); stroke-width: 1; }
.ow-cursor { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; stroke-dasharray: 3 3; }
.ow-readout { margin-left: auto; white-space: nowrap; font-family: var(--mono); font-size: 10px; background: rgba(13, 13, 16, 0.9); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; line-height: 1.5; }
.ow-mappane { border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.ow-maptabs { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.ow-map { position: relative; flex: 1; background: radial-gradient(ellipse at 50% 45%, #13161c 0%, #0b0c0f 70%); }
.ow-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ow-badge { font-family: var(--mono); font-size: 8.5px; font-weight: 700; fill: #fff; text-anchor: middle; dominant-baseline: central; }

/* Video */
.ow-video { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; height: 100%; grid-template-rows: auto auto 1fr auto; }
.ow-vhead { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.ow-vhead .meta { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--muted); font-weight: 400; }
.ow-vpane { position: relative; border-radius: 8px; overflow: hidden; background: #000; border: 1px solid var(--line); }
.ow-vpane canvas { width: 100%; height: 100%; display: block; }
.ow-vosd { position: absolute; left: 10px; top: 8px; font-family: var(--mono); font-size: 11px; color: #fff; text-shadow: 0 1px 3px #000; }
.ow-vmini { position: absolute; right: 8px; top: 8px; width: 92px; height: 70px; background: rgba(0, 0, 0, 0.45); border-radius: 6px; }
.ow-vaudio { position: relative; min-height: 70px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); overflow: hidden; }
.ow-vaudio svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ow-vaudio .lbl { position: absolute; left: 8px; top: 5px; font-family: var(--mono); font-size: 9.5px; color: var(--muted); }
.ow-vsync { grid-column: 1 / -1; text-align: center; font-size: 10.5px; color: var(--muted); padding: 2px 0 4px; }
.ow-vsync b { color: var(--green); font-family: var(--mono); font-weight: 600; }

/* Comparison */
.ow-cmp { display: flex; flex-direction: column; height: 100%; }
.ow-cmp-pick { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.ow-cmp-pick .pk { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 11px; background: var(--bg2); }
.ow-cmp-pick .ab { width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; font-size: 9px; font-weight: 800; color: #000; }
.ow-cmp-times { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-family: var(--mono); }
.ow-cmp-times .a { font-size: 19px; font-weight: 700; color: var(--fast); }
.ow-cmp-times .b { font-size: 19px; font-weight: 700; color: var(--slow); }
.ow-cmp-times .verdict { margin-left: auto; color: var(--fast); font-size: 12px; }
.ow-cmp-body { display: grid; grid-template-columns: 1fr 300px; gap: 10px; padding: 10px; flex: 1; min-height: 0; }
.ow-cmp-map { position: relative; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #13161c 0%, #0b0c0f 70%); }
.ow-cmp-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ow-cmp-map .ow-eyebrow { position: absolute; left: 12px; top: 10px; }
.ow-loss { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-family: var(--mono); font-size: 10.5px; }
.ow-loss .t { width: 28px; }
.ow-loss .bar { flex: 1; height: 12px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.ow-loss .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f5a352, var(--orange)); transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); border-radius: 3px; }
.ow-loss .v { width: 52px; text-align: right; color: var(--orange); }
.ow-cmp-coach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 10px 10px; }
.ow-cmp-coach .ow-takeaway { margin: 0; }

/* AI Coach */
.ow-coach { padding: 10px 14px; display: flex; flex-direction: column; height: 100%; gap: 10px; }
.ow-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ow-stat { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--card); transition: border-color 0.5s, background 0.5s; }
.ow-stat .k { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.ow-stat .v { font-family: var(--mono); font-size: 17px; font-weight: 700; margin-top: 2px; }
.ow-coach-body { display: grid; grid-template-columns: 1fr 360px; gap: 10px; flex: 1; min-height: 0; }
.ow-focus { position: relative; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #13161c 0%, #0b0c0f 70%); transition: border-color 0.6s; }
.ow-focus svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ow-focus .ow-eyebrow { position: absolute; left: 12px; top: 10px; }
.ow-run { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 8px 16px; font-size: 12px; font-weight: 600; transition: opacity 0.4s, transform 0.2s; }
.ow-run.press { transform: translateX(-50%) scale(0.95); }
.ow-run.gone { opacity: 0; }
.ow-cards { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.ow-ccard { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: var(--card); opacity: 0; transform: translateX(14px); transition: opacity 0.45s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s; }
.ow-ccard.in { opacity: 1; transform: none; }
.ow-ccard .hd { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.ow-ccard .tn { font-family: var(--mono); font-size: 10px; font-weight: 700; border-radius: 4px; padding: 1px 6px; background: var(--bg3); }
.ow-ccard b { font-size: 12px; }
.ow-ccard .gain { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--fast); }
.ow-ccard p { margin: 0; font-size: 11px; color: var(--text2); line-height: 1.45; }
.ow-coach.gold .ow-ccard { border-color: rgba(212, 165, 55, 0.45); }
.ow-coach.gold .ow-ccard .tn { background: rgba(212, 165, 55, 0.18); color: var(--gold); }
.ow-coach.gold .ow-focus { border-color: rgba(212, 165, 55, 0.55); }
.ow-coach.gold .ow-stat.ideal { border-color: rgba(212, 165, 55, 0.6); background: rgba(212, 165, 55, 0.07); }
.ow-coach .ow-stat.ideal .v { color: var(--gold); }
.ow-unlock { font-family: var(--mono); font-size: 9.5px; color: var(--gold); letter-spacing: 0.1em; opacity: 0; transition: opacity 0.5s; }
.ow-coach.gold .ow-unlock { opacity: 1; }

/* Draw-on helper for SVG paths */
.ow-draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.ow-view.on .ow-draw.go { transition: stroke-dashoffset var(--dur, 1.4s) cubic-bezier(0.4, 0, 0.2, 1); stroke-dashoffset: 0; }

/* ── Phones and small tablets: window pinned on top, captions scroll under it ── */
@media (max-width: 960px) {
    .tour { padding-top: calc(var(--header-height) + 0.5rem); }
    .tour-grid { grid-template-columns: 1fr; grid-template-areas: "hero" "stage" "steps"; padding: 0 1rem; }
    .tour-hero { min-height: auto; padding: 2.5rem 0 1.5rem; }
    .tour-stage { top: calc(var(--header-height) + 0.5rem); z-index: 2; padding-bottom: 0.75rem; background: var(--color-bg-primary); }
    .tour-step { min-height: 60vh; opacity: 0.3; }
    .tour-group { padding-top: 10vh; }
    .tour-step h3 { font-size: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tour-step, .ow-view, .ow-ccard, .ow-rep-preview, .ow-loss .bar i, .ow-ref, .tour-step { transition: none !important; }
    .ow-rise { animation: none; }
}