/* ============================================================
   RSO OPS — interactive product tour ("HUD Bento")
   Scoped entirely under .rso-tour so none of this leaks into
   the marketing site's "Film Still" system. This is the RSO Ops
   product's own design language: obsidian surfaces, brand-red
   glass, Archivo for UI, JetBrains Mono for every number/label.
   Loaded only on rso-ops.html.
   ============================================================ */

.rso-tour {
  /* ---- HUD Bento tokens (local, self-contained) ---- */
  --t-bg: #08080a;
  --t-panel: #0e0e11;
  --t-panel-brd: #1e1e22;
  --t-tile: #141417;
  --t-tile-brd: #26262a;
  --t-div: #17171a;

  --t-accent: #e0322f;
  --t-accent-bright: #ff6a63;
  --t-accent-soft: #ff8580;

  --t-green: #39d98a;   --t-green-t: #6fe0a8;
  --t-amber: #d98a1a;   --t-amber-t: #f0b658;

  --t-1: #ffffff;
  --t-2: #e9e8e6;
  --t-muted: #b4b3b0;
  --t-dim: #8a8986;
  --t-faint: #5f5e5c;

  --t-ui: 'Archivo', system-ui, -apple-system, sans-serif;
  --t-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace;

  --t-radius: 14px;
  --t-gap: 14px;

  font-family: var(--t-ui);
  color: var(--t-2);
  max-width: 1060px;
  margin: 0 auto;
}

.rso-tour *, .rso-tour *::before, .rso-tour *::after { box-sizing: border-box; }

/* ---------- App window frame ---------- */

.rso-tour__frame {
  position: relative;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(224, 50, 47, 0.10), transparent 60%),
    var(--t-bg);
  border: 1px solid var(--t-panel-brd);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.9);
}

/* window chrome bar */
.rso-tour__chrome {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--t-div);
  background: rgba(255, 255, 255, 0.015);
}

.rso-tour__dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: #2a2a2e; flex: none;
}
.rso-tour__dot:nth-child(1) { background: #3a2020; }

.rso-tour__url {
  flex: 1;
  margin: 0 0.4rem;
  font-family: var(--t-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--t-dim);
  background: #0b0b0d;
  border: 1px solid var(--t-panel-brd);
  border-radius: 7px;
  padding: 0.32rem 0.75rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rso-tour__url b { color: var(--t-muted); font-weight: 500; }

.rso-tour__live {
  font-family: var(--t-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-green-t);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
}
.rso-tour__live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--t-green);
  box-shadow: 0 0 8px 0 var(--t-green);
}

/* body = sidebar + stage */
.rso-tour__body {
  display: grid;
  grid-template-columns: 190px 1fr;
  min-height: 500px;
}

/* ---------- Sidebar nav (doubles as tour stops) ---------- */

.rso-tour__nav {
  border-right: 1px solid var(--t-div);
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: rgba(255, 255, 255, 0.008);
}

.rso-tour__brand {
  font-family: var(--t-ui);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--t-1);
  padding: 0.2rem 0.65rem 0.9rem;
}
.rso-tour__brand span { color: var(--t-accent); }

.rso-tour__navitem {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 44px;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 9px;
  padding: 0.55rem 0.65rem;
  color: var(--t-muted);
  font-family: var(--t-ui);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.rso-tour__navitem:hover { background: rgba(255, 255, 255, 0.04); color: var(--t-2); }

.rso-tour__navitem.is-active {
  background: linear-gradient(90deg, rgba(224, 50, 47, 0.16), rgba(224, 50, 47, 0.02));
  color: var(--t-1);
  box-shadow: inset 2px 0 0 0 var(--t-accent);
}

.rso-tour__navico {
  width: 15px; height: 15px; flex: none;
  color: currentColor; opacity: 0.85;
}
.rso-tour__navitem.is-active .rso-tour__navico { color: var(--t-accent-bright); opacity: 1; }

.rso-tour__nav-spacer { flex: 1; min-height: 0.75rem; }

.rso-tour__avery {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.6rem 0.65rem;
  border-top: 1px solid var(--t-div);
  margin-top: 0.35rem;
}
.rso-tour__avery-chip {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  font-family: var(--t-ui); font-weight: 800; font-size: 0.8rem;
  color: #fff;
  background: linear-gradient(150deg, var(--t-accent-bright), var(--t-accent));
  box-shadow: 0 0 16px -3px var(--t-accent);
}
.rso-tour__avery-name { font-size: 0.78rem; color: var(--t-2); font-weight: 600; }
.rso-tour__avery-role { font-family: var(--t-mono); font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--t-dim); }

/* ---------- Stage (screens stack in one cell) ---------- */

.rso-tour__stage { display: grid; position: relative; }

.rso-tour__screen {
  grid-area: 1 / 1;
  padding: 1.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.rso-tour__screen.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.rso-tour__screen-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.95rem;
}
.rso-tour__screen-title { font-family: var(--t-ui); font-weight: 700; font-size: 1.15rem; color: var(--t-1); }
.rso-tour__screen-sub { font-family: var(--t-mono); font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--t-dim); }

/* ---------- Reusable HUD primitives ---------- */

.t-grid { display: grid; gap: var(--t-gap); }
.t-cols-4 { grid-template-columns: repeat(4, 1fr); }
.t-cols-3 { grid-template-columns: repeat(3, 1fr); }
.t-cols-2 { grid-template-columns: repeat(2, 1fr); }
.t-span-2 { grid-column: span 2; }

.t-tile {
  background: var(--t-tile);
  border: 1px solid var(--t-tile-brd);
  border-radius: var(--t-radius);
  padding: 0.9rem 0.95rem;
}
.t-tile__label { font-family: var(--t-mono); font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--t-dim); }
.t-tile__num { font-family: var(--t-mono); font-weight: 600; font-size: 1.5rem; color: var(--t-1); line-height: 1.1; margin-top: 0.4rem; }
.t-tile__foot { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.45rem; }

.t-panel {
  background: var(--t-panel);
  border: 1px solid var(--t-panel-brd);
  border-radius: var(--t-radius);
  overflow: hidden;
}
.t-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.8rem 0.95rem;
  border-bottom: 1px solid var(--t-div);
}
.t-panel__title { font-family: var(--t-ui); font-weight: 700; font-size: 0.86rem; color: var(--t-2); }
.t-panel__meta { font-family: var(--t-mono); font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--t-dim); }
.t-panel__body { padding: 0.35rem 0.95rem 0.7rem; }

/* status pills */
.t-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--t-ui); font-weight: 600; font-size: 0.68rem;
  padding: 0.2rem 0.55rem; border-radius: 999px;
  border: 1px solid transparent;
}
.t-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.t-pill--green   { color: var(--t-green-t);  background: rgba(57, 217, 138, 0.12); }
.t-pill--amber   { color: var(--t-amber-t);  background: rgba(217, 138, 26, 0.14); }
.t-pill--red     { color: var(--t-accent-soft); background: rgba(224, 50, 47, 0.14); }
.t-pill--neutral { color: var(--t-muted);    background: rgba(255, 255, 255, 0.06); }

.t-delta { font-family: var(--t-mono); font-size: 0.66rem; font-weight: 500; }
.t-delta--up { color: var(--t-green-t); }
.t-delta--down { color: var(--t-accent-soft); }
.t-delta--flat { color: var(--t-dim); }

/* list rows with 3px colored left accent bar */
.t-row {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.5rem 0.6rem 0.7rem;
  border-bottom: 1px solid var(--t-div);
  border-left: 3px solid transparent;
  transition: background-color 0.15s;
}
.t-row:last-child { border-bottom: 0; }
.t-row:hover { background: rgba(224, 50, 47, 0.05); }
.t-row--green { border-left-color: var(--t-green); }
.t-row--amber { border-left-color: var(--t-amber); }
.t-row--red   { border-left-color: var(--t-accent); }
.t-row__main { flex: 1; min-width: 0; }
.t-row__title { font-size: 0.82rem; color: var(--t-2); font-weight: 500; }
.t-row__meta { font-family: var(--t-mono); font-size: 0.63rem; letter-spacing: 0.03em; color: var(--t-dim); margin-top: 0.15rem; }
.t-row__num { font-family: var(--t-mono); font-size: 0.8rem; color: var(--t-1); }

.t-avatar {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--t-ui); font-weight: 700; font-size: 0.72rem;
  color: var(--t-2);
  background: #16161a; border: 1px solid var(--t-tile-brd);
}

/* progress meter */
.t-meter { height: 7px; border-radius: 999px; background: #1b1b1f; overflow: hidden; }
.t-meter__fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--t-accent), var(--t-accent-bright));
  box-shadow: 0 0 14px -2px var(--t-accent);
}

/* ---------- Screen: Pipeline (kanban) ---------- */

.t-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; }
.t-col__head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--t-mono); font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--t-dim); padding: 0 0.15rem 0.55rem;
}
.t-col__count { color: var(--t-muted); }
.t-col__cards { display: flex; flex-direction: column; gap: 0.5rem; }
.t-card {
  background: var(--t-tile); border: 1px solid var(--t-tile-brd);
  border-radius: 11px; padding: 0.6rem 0.65rem;
}
.t-card__name { font-size: 0.8rem; color: var(--t-2); font-weight: 600; }
.t-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; }
.t-tag { font-family: var(--t-mono); font-size: 0.58rem; letter-spacing: 0.03em; color: var(--t-dim); }
.t-card__val { font-family: var(--t-mono); font-size: 0.68rem; color: var(--t-green-t); }

/* ---------- Screen: Attribution funnel ---------- */

.t-funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; align-items: stretch; }
.t-funnel__step {
  position: relative;
  background: var(--t-tile); border: 1px solid var(--t-tile-brd);
  border-radius: 12px; padding: 0.85rem 0.75rem; text-align: center;
}
.t-funnel__step:not(:last-child)::after {
  content: "›"; position: absolute; right: -0.45rem; top: 50%;
  transform: translateY(-50%); color: var(--t-faint); font-size: 1rem; z-index: 2;
}
.t-funnel__num { font-family: var(--t-mono); font-weight: 600; font-size: 1.5rem; color: var(--t-1); }
.t-funnel__label { font-family: var(--t-mono); font-size: 0.58rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--t-dim); margin-top: 0.25rem; }
.t-funnel__step--win { border-color: rgba(224, 50, 47, 0.5); box-shadow: 0 0 22px -6px var(--t-accent); }
.t-funnel__step--win .t-funnel__num { color: var(--t-accent-soft); }

.t-roi {
  margin-top: var(--t-gap);
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  padding: 0.85rem 1rem;
  border-radius: var(--t-radius);
  background:
    radial-gradient(500px 120px at 15% 0%, rgba(224, 50, 47, 0.16), transparent 70%),
    var(--t-panel);
  border: 1px solid rgba(224, 50, 47, 0.35);
}
.t-roi__k { font-family: var(--t-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-accent-soft); }
.t-roi__v { font-family: var(--t-ui); font-weight: 700; font-size: 1.05rem; color: var(--t-1); }
.t-roi__v span { color: var(--t-green-t); }

/* ---------- Screen: Avery (chat) ---------- */

.t-chat { display: flex; flex-direction: column; gap: 0.85rem; }
.t-msg { display: flex; gap: 0.65rem; align-items: flex-start; }
.t-msg__chip {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  display: grid; place-items: center;
  font-family: var(--t-ui); font-weight: 800; font-size: 0.82rem; color: #fff;
  background: linear-gradient(150deg, var(--t-accent-bright), var(--t-accent));
  box-shadow: 0 0 16px -3px var(--t-accent);
}
.t-msg__bubble {
  background: var(--t-panel); border: 1px solid var(--t-panel-brd);
  border-radius: 12px; border-top-left-radius: 4px;
  padding: 0.7rem 0.85rem; max-width: 82%;
}
.t-msg__who { font-family: var(--t-mono); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-dim); margin-bottom: 0.3rem; }
.t-msg__text { font-size: 0.86rem; color: var(--t-2); line-height: 1.5; }
.t-msg__text b { color: var(--t-1); font-weight: 700; }
.t-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.65rem; }
.t-chip {
  font-family: var(--t-ui); font-size: 0.72rem; font-weight: 600;
  padding: 0.35rem 0.7rem; border-radius: 8px; cursor: default;
  color: var(--t-2); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--t-tile-brd);
}
.t-chip--primary {
  color: #fff; background: linear-gradient(150deg, var(--t-accent-bright), var(--t-accent));
  border-color: transparent; box-shadow: 0 0 16px -4px var(--t-accent);
}

/* ---------- Screen: Comms (inbox) ---------- */

.t-inbox { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--t-gap); }
.t-thread { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--t-div); border-left: 3px solid transparent; }
.t-thread:last-child { border-bottom: 0; }
.t-thread.is-open { border-left-color: var(--t-accent); background: rgba(224, 50, 47, 0.05); }
.t-thread__unread { width: 7px; height: 7px; border-radius: 50%; background: var(--t-accent); flex: none; box-shadow: 0 0 8px 0 var(--t-accent); }
.t-thread__unread.is-read { background: transparent; box-shadow: none; }
.t-chan { font-family: var(--t-mono); font-size: 0.54rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--t-dim); border: 1px solid var(--t-tile-brd); border-radius: 5px; padding: 0.1rem 0.35rem; }

/* ---------- Screen: Deliveries (video review + download) ---------- */

.t-player {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: 12px; border: 1px solid var(--t-tile-brd);
  background: radial-gradient(120% 120% at 50% 0, #1a1a1f, #0b0b0d);
  display: grid; place-items: center; overflow: hidden;
  margin: 0.4rem 0 0.85rem;
}
.t-player__play {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: 0.85rem; padding-left: 3px;
  background: linear-gradient(150deg, var(--t-accent-bright), var(--t-accent));
  box-shadow: 0 0 24px -4px var(--t-accent);
}
.t-player__ratio {
  position: absolute; top: 0.55rem; left: 0.6rem;
  font-family: var(--t-mono); font-size: 0.55rem; letter-spacing: 0.05em; color: var(--t-muted);
  border: 1px solid var(--t-tile-brd); border-radius: 5px; padding: 0.1rem 0.4rem; background: rgba(0,0,0,0.45);
}
.t-player__time { position: absolute; bottom: 0.55rem; right: 0.6rem; font-family: var(--t-mono); font-size: 0.58rem; color: var(--t-muted); }

.t-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.t-act {
  font-family: var(--t-ui); font-weight: 600; font-size: 0.74rem;
  color: var(--t-2); background: var(--t-tile); border: 1px solid var(--t-tile-brd);
  border-radius: 8px; padding: 0.45rem 0.7rem; cursor: default;
  transition: border-color 0.15s, color 0.15s, filter 0.15s;
}
.t-act:hover { border-color: var(--t-accent); color: var(--t-1); }
.t-act--go { color: #06180f; background: linear-gradient(150deg, var(--t-green-t), var(--t-green)); border-color: transparent; }
.t-act--go:hover { color: #06180f; filter: brightness(1.08); }
.t-act--dl { color: #fff; background: linear-gradient(150deg, var(--t-accent-bright), var(--t-accent)); border-color: transparent; box-shadow: 0 0 16px -5px var(--t-accent); }
.t-act--dl:hover { color: #fff; filter: brightness(1.08); }

.t-thumb {
  width: 30px; height: 34px; flex: none; border-radius: 6px;
  display: grid; place-items: center;
  font-family: var(--t-mono); font-size: 0.5rem; color: var(--t-dim);
  background: radial-gradient(120% 120% at 50% 0, #1a1a1f, #0b0b0d); border: 1px solid var(--t-tile-brd);
}
.t-dl {
  font-family: var(--t-mono); color: var(--t-muted);
  border: 1px solid var(--t-tile-brd); border-radius: 7px;
  width: 26px; height: 26px; flex: none; display: grid; place-items: center; font-size: 0.8rem; cursor: default;
  transition: border-color 0.15s, color 0.15s;
}
.t-dl:hover { border-color: var(--t-accent); color: var(--t-1); }

/* ---------- Screen: Landing pages (browser preview) ---------- */

.t-browser { background: var(--t-panel); border: 1px solid var(--t-panel-brd); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.t-browser__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem; border-bottom: 1px solid var(--t-div); }
.t-browser__dot { width: 8px; height: 8px; border-radius: 50%; background: #2a2a2e; flex: none; }
.t-browser__url { font-family: var(--t-mono); font-size: 0.6rem; color: var(--t-dim); background: #0b0b0d; border: 1px solid var(--t-panel-brd); border-radius: 6px; padding: 0.2rem 0.6rem; flex: 1; text-align: center; }
.t-browser__page { padding: 1.1rem 1rem 1.25rem; text-align: center; background: radial-gradient(150% 90% at 50% -10%, rgba(224,50,47,0.10), transparent 60%); }

.t-lp__brand { font-family: var(--t-ui); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--t-1); }
.t-lp__brand span { color: var(--t-accent); }
.t-lp__eyebrow { font-family: var(--t-mono); font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-accent-soft); margin-top: 0.9rem; }
.t-lp__head { font-family: var(--t-ui); font-weight: 800; font-size: 1.35rem; color: var(--t-1); margin-top: 0.3rem; line-height: 1.05; }
.t-lp__sub { font-size: 0.72rem; color: var(--t-muted); margin: 0.4rem auto 0; max-width: 22em; line-height: 1.45; }
.t-field { margin: 0.55rem auto 0; max-width: 15rem; text-align: left; font-family: var(--t-ui); font-size: 0.7rem; color: var(--t-dim); background: #0c0c0e; border: 1px solid var(--t-tile-brd); border-radius: 8px; padding: 0.5rem 0.65rem; }
.t-lp__cta { margin: 0.7rem auto 0; max-width: 15rem; font-family: var(--t-ui); font-weight: 700; font-size: 0.78rem; color: #fff; background: linear-gradient(150deg, var(--t-accent-bright), var(--t-accent)); border-radius: 8px; padding: 0.55rem; box-shadow: 0 0 18px -5px var(--t-accent); }

.t-published { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.7rem; border: 1px solid var(--t-panel-brd); border-radius: 12px; background: var(--t-panel); }
.t-published__url { font-family: var(--t-mono); font-size: 0.68rem; color: var(--t-2); flex: 1; }

/* ---------- Chrome launch button + preview note ---------- */

.rso-tour__open {
  font-family: var(--t-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--t-muted); border: 1px solid var(--t-tile-brd); border-radius: 6px; padding: 0.3rem 0.5rem; flex: none;
  transition: border-color 0.15s, color 0.15s;
}
.rso-tour__open:hover { border-color: var(--t-accent); color: var(--t-1); }

.rso-tour__note { margin-top: 0.85rem; text-align: center; font-family: var(--t-mono); font-size: 0.66rem; letter-spacing: 0.02em; color: var(--t-dim); }
.rso-tour__note a { color: var(--t-accent-soft); border-bottom: 1px solid transparent; transition: border-color 0.15s, color 0.15s; }
.rso-tour__note a:hover { color: var(--t-accent-bright); border-bottom-color: var(--t-accent-soft); }

/* ---------- Subtle hover life on product tiles/cards ---------- */

.t-tile, .t-card { transition: border-color 0.15s, transform 0.15s; }
.t-tile:hover, .t-card:hover { border-color: var(--t-accent-soft); }

/* ---------- Tour rail (controls + caption) ---------- */

.rso-tour__rail {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.1rem;
  padding: 1rem 1.1rem;
  background: var(--t-panel);
  border: 1px solid var(--t-panel-brd);
  border-radius: var(--t-radius);
}
.rso-tour__meta { display: flex; align-items: baseline; gap: 0.9rem; min-width: 0; }
.rso-tour__count { font-family: var(--t-mono); font-size: 0.72rem; color: var(--t-dim); letter-spacing: 0.05em; white-space: nowrap; }
.rso-tour__count b { color: var(--t-accent-soft); font-weight: 600; }
.rso-tour__caption { min-width: 0; }
.rso-tour__caption h3 { font-family: var(--t-ui); font-weight: 700; font-size: 0.95rem; color: var(--t-1); }
.rso-tour__caption p { font-size: 0.82rem; color: var(--t-muted); margin-top: 0.15rem; line-height: 1.45; }

.rso-tour__controls { display: flex; align-items: center; gap: 0.55rem; }
.rso-tour__btn {
  font-family: var(--t-ui); font-weight: 600; font-size: 0.85rem;
  color: var(--t-2);
  background: var(--t-tile); border: 1px solid var(--t-tile-brd);
  border-radius: 9px; padding: 0.5rem 0.7rem; cursor: pointer;
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
  line-height: 1;
}
.rso-tour__btn:hover { border-color: var(--t-accent); color: var(--t-1); }
.rso-tour__btn--nav { min-width: 44px; font-size: 1.05rem; }
.rso-tour__btn--play {
  font-family: var(--t-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; background: linear-gradient(150deg, var(--t-accent-bright), var(--t-accent));
  border-color: transparent; box-shadow: 0 0 18px -5px var(--t-accent);
  padding: 0.55rem 0.9rem;
}
.rso-tour__btn--play:hover { color: #fff; filter: brightness(1.08); }

/* Dots keep an 8px (22px active) visual size via ::before, but the
   button itself is a 32px hit area — much closer to a comfortable tap
   target than the visual dot alone, without blowing up the rail. */
.rso-tour__dots { display: flex; align-items: center; gap: 0.1rem; padding: 0 0.2rem; }
.rso-tour__dot-btn {
  position: relative;
  width: 32px; height: 32px; padding: 0; cursor: pointer;
  background: none; border: 0;
  display: grid; place-items: center;
}
.rso-tour__dot-btn::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: #2c2c31;
  transition: background-color 0.2s, width 0.2s, box-shadow 0.2s;
}
.rso-tour__dot-btn.is-active::before {
  width: 22px; border-radius: 999px;
  background: linear-gradient(90deg, var(--t-accent), var(--t-accent-bright));
  box-shadow: 0 0 10px -1px var(--t-accent);
}

/* ---------- Keyboard focus (HUD Bento accent, scoped) ---------- */

.rso-tour :focus:not(:focus-visible) { outline: none; }
.rso-tour :focus-visible {
  outline: 2px solid var(--t-accent-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Responsive ---------- */

@media (max-width: 820px) {
  .rso-tour__body { grid-template-columns: 1fr; min-height: 0; }
  .rso-tour__nav {
    flex-direction: row; overflow-x: auto; gap: 0.4rem;
    border-right: 0; border-bottom: 1px solid var(--t-div);
    padding: 0.65rem 0.75rem;
    -webkit-overflow-scrolling: touch;
  }
  .rso-tour__brand, .rso-tour__nav-spacer, .rso-tour__avery { display: none; }
  .rso-tour__navitem { width: auto; white-space: nowrap; flex: none; }
  .rso-tour__navitem.is-active { box-shadow: inset 0 -2px 0 0 var(--t-accent); }
  .t-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .t-board { grid-template-columns: repeat(2, 1fr); }
  .t-funnel { grid-template-columns: repeat(2, 1fr); }
  .t-funnel__step:nth-child(2)::after { display: none; }
  .rso-tour__rail { grid-template-columns: 1fr; }
  .rso-tour__controls { justify-content: center; flex-wrap: wrap; row-gap: 0.6rem; }
  .rso-tour__open { padding: 0.45rem 0.6rem; }
}

@media (max-width: 480px) {
  .t-cols-4, .t-cols-3, .t-cols-2, .t-span-2 { grid-template-columns: 1fr; grid-column: auto; }
  .t-board { grid-template-columns: 1fr; }
  .t-inbox { grid-template-columns: 1fr; }
  .rso-tour__screen-title { font-size: 1rem; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .rso-tour__screen { transition: opacity 0.01s; transform: none; }
  .t-meter__fill { box-shadow: none; }
}

/* ============================================================
   RSO OPS — SCROLL-DRIVEN PRODUCT TOUR  (.rso-optour / .ot-*)
   The 9-module, pinned "Apple product-page" experience built by
   tour.js. Fully self-contained: it declares its own --t-* tokens
   so the shared .t-* HUD primitives above resolve inside it too,
   and everything is scoped under .rso-optour so nothing leaks.
   Layout: a tall track (height set in JS) with a position:sticky
   stage. NEVER wrap this in overflow-x:hidden — it kills the pin.
   ============================================================ */

.rso-optour {
  /* same HUD Bento tokens as .rso-tour, redeclared locally */
  --t-bg: #08080a;
  --t-panel: #0e0e11;
  --t-panel-brd: #1e1e22;
  --t-tile: #141417;
  --t-tile-brd: #26262a;
  --t-div: #17171a;
  --t-accent: #e0322f;
  --t-accent-bright: #ff6a63;
  --t-accent-soft: #ff8580;
  --t-green: #39d98a;   --t-green-t: #6fe0a8;
  --t-amber: #d98a1a;   --t-amber-t: #f0b658;
  --t-1: #ffffff;
  --t-2: #e9e8e6;
  --t-muted: #b4b3b0;
  --t-dim: #8a8986;
  --t-faint: #5f5e5c;
  --t-ui: 'Archivo', system-ui, -apple-system, sans-serif;
  --t-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace;
  --t-radius: 14px;
  --t-gap: 14px;
  --t-ease: cubic-bezier(.22, 1, .36, 1);

  position: relative;
  font-family: var(--t-ui);
  color: var(--t-2);
  background: #050506;
}

.rso-optour *, .rso-optour *::before, .rso-optour *::after { box-sizing: border-box; }

/* ---------- Static fallback (shown only if tour.js never runs) ---------- */
.ot-fallback {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  border: 1px solid var(--t-panel-brd);
  border-radius: 16px;
  background:
    radial-gradient(700px 300px at 50% -20%, rgba(224, 50, 47, 0.12), transparent 60%),
    var(--t-bg);
}
.ot-fallback__title { font: 800 1.4rem/1.1 var(--t-ui); color: var(--t-1); margin-bottom: 0.6rem; }
.ot-fallback p { color: var(--t-muted); font-size: 0.95rem; margin-bottom: 1.2rem; }
.ot-fallback a {
  display: inline-block; font: 700 0.85rem var(--t-ui); color: #fff;
  background: var(--t-accent); border-radius: 10px; padding: 0.75rem 1.35rem;
  box-shadow: 0 0 24px -8px var(--t-accent);
}

/* ---------- Pinned stage ---------- */
.ot-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 54px);
  padding: clamp(24px, 4vw, 70px);
  overflow: hidden;
  background:
    radial-gradient(1000px 600px at 80% -8%, rgba(224, 50, 47, 0.13), transparent 60%),
    var(--t-bg);
}

/* brand lockup, top-left */
.ot-brand {
  position: absolute; top: 26px; left: clamp(24px, 4vw, 54px); z-index: 6;
  display: flex; align-items: center; gap: 10px;
}
.ot-brand__chip { width: 26px; height: 26px; border-radius: 7px; background: var(--t-accent); box-shadow: 0 0 16px -2px var(--t-accent); }
.ot-brand__name { font: 800 14px var(--t-ui); color: #fff; letter-spacing: -0.01em; }
.ot-brand__tag { font: 600 10px var(--t-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-dim); padding-left: 8px; border-left: 1px solid var(--t-tile-brd); }

/* ---------- Caption column ---------- */
.ot-caps { position: relative; flex: 0 0 33vw; height: 62vh; }
.ot-cap {
  position: absolute; left: 0; bottom: 0; max-width: 33vw;
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.55s var(--t-ease), transform 0.6s var(--t-ease);
  pointer-events: none;
}
.ot-cap.is-active { opacity: 1; transform: none; pointer-events: auto; }
.ot-capnum { font: 600 clamp(80px, 9vw, 140px)/0.9 var(--t-mono); color: transparent; -webkit-text-stroke: 1.5px #2a2a30; }
.ot-caplabel { font: 600 11px var(--t-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--t-accent-soft); }
.ot-captitle { font: 800 clamp(28px, 3.2vw, 44px)/1.04 var(--t-ui); color: #fff; letter-spacing: -0.015em; }
.ot-capbody { font: 400 15px/1.6 var(--t-ui); color: var(--t-muted); max-width: 360px; }

/* ---------- App window ---------- */
.ot-winwrap { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; }
.ot-win {
  width: min(56vw, 760px);
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(14, 14, 17, 0.72);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 50px 130px -30px #000;
  transform: perspective(1800px) rotateY(-10deg) rotateX(3deg);
  transition: transform 0.25s linear;
}
.ot-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--t-panel-brd);
  background: rgba(8, 8, 10, 0.55);
}
.ot-chrome__dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.ot-chrome__dot--r { background: var(--t-accent); }
.ot-chrome__dot--a { background: var(--t-amber); }
.ot-chrome__dot--g { background: var(--t-green); }
.ot-chrome__url {
  flex: 1; margin: 0 12px; padding: 5px 12px; border-radius: 7px;
  background: var(--t-tile); border: 1px solid var(--t-tile-brd);
  font: 500 11px var(--t-mono); color: var(--t-dim);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.ot-chrome__live {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 10px; border-radius: 20px; background: rgba(57, 217, 138, 0.12);
  font: 600 10.5px var(--t-mono); text-transform: uppercase; color: var(--t-green-t);
}
.ot-chrome__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--t-green); animation: rsoLiveDot 2.4s infinite; }

/* ---------- Screen stack ---------- */
.ot-screens { position: relative; height: min(64vh, 560px); min-height: 400px; background: #0b0b0d; }
.ot-screen {
  position: absolute; inset: 0;
  padding: clamp(14px, 1.6vw, 20px);
  display: flex; flex-direction: column; gap: 12px; overflow: hidden;
  opacity: 0; transform: translateY(26px) scale(0.985);
  transition: opacity 0.6s var(--t-ease), transform 0.7s var(--t-ease);
  pointer-events: none;
}
.ot-screen.is-prev { transform: translateY(-26px) scale(0.985); }
.ot-screen.is-active { opacity: 1; transform: none; pointer-events: auto; }
.ot-screen__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ot-screen__title { font: 800 15px var(--t-ui); color: #fff; }
.ot-screen__sub { font: 500 10px var(--t-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--t-dim); }

/* screen-local grid ratios */
.ot-grid-15 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; }
.ot-grid-14 { grid-template-columns: 1.4fr 1fr; }
.ot-grid-13 { grid-template-columns: 1.35fr 1fr; }
.ot-grid-cust { grid-template-columns: 0.85fr 1.15fr; }
.ot-body-flush { padding-left: 0; padding-right: 0; }

.ot-num--accent { color: var(--t-accent-bright) !important; }
.ot-num--green { color: var(--t-green-t) !important; }
.ot-tile--accent { background: linear-gradient(180deg, rgba(224, 50, 47, 0.12), var(--t-tile)); border-color: rgba(224, 50, 47, 0.3); }
.ot-tile--green { background: linear-gradient(180deg, rgba(57, 217, 138, 0.08), var(--t-tile)); }
.ot-row__val { width: 52px; text-align: right; flex: none; }

/* AR aging bars */
.ot-barline { margin-bottom: 0.7rem; }
.ot-barline:last-child { margin-bottom: 0; }
.ot-barline__top { display: flex; justify-content: space-between; margin-bottom: 5px; font: 500 11.5px var(--t-ui); color: #9a9997; }
.ot-barline__v { font-family: var(--t-mono); font-weight: 600; color: var(--t-muted); }
.ot-bar { height: 7px; border-radius: 4px; background: var(--t-div); overflow: hidden; }
.ot-bar__fill { width: 0; height: 100%; border-radius: 4px; background: #3a3a3f; transition: width 0.9s var(--t-ease); }
.ot-bar__fill--hot { background: linear-gradient(90deg, var(--t-accent-bright), var(--t-accent)); box-shadow: 0 0 16px -4px var(--t-accent); }

/* pipeline columns */
.ot-col { border-radius: 12px; background: var(--t-panel); border: 1px solid var(--t-panel-brd); padding: 11px; display: flex; flex-direction: column; gap: 8px; }
.ot-col--win { background: linear-gradient(180deg, rgba(57, 217, 138, 0.08), var(--t-panel)); }
.ot-col .t-col__head { padding: 0; }
.ot-card--red { border-left: 3px solid var(--t-accent); }
.ot-card--amber { border-left: 3px solid var(--t-amber); }
.ot-card--green { border-left: 3px solid var(--t-green); }
.t-card__meta { font-family: var(--t-mono); font-size: 0.62rem; color: var(--t-dim); margin-top: 0.35rem; }

/* deliveries */
.ot-player { aspect-ratio: auto; margin: 0; cursor: pointer; background: repeating-linear-gradient(135deg, #101013, #101013 11px, #0c0c0f 11px, #0c0c0f 22px); }
.ot-player__scrub { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.ot-player__scrubfill { width: 34%; height: 100%; background: var(--t-accent); box-shadow: 0 0 10px -1px var(--t-accent); }
.t-player__play.is-playing { padding-left: 0; }
.ot-dlcol { display: flex; flex-direction: column; gap: 9px; }
.ot-file { border-radius: 11px; background: var(--t-tile); border: 1px solid var(--t-tile-brd); padding: 10px 12px; display: flex; align-items: center; gap: 9px; }
.ot-file__ic { width: 22px; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); display: grid; place-items: center; font-size: 12px; color: var(--t-muted); flex: none; }
.ot-file__ic.is-new { background: rgba(224, 50, 47, 0.16); color: var(--t-accent-soft); }
.ot-file__main { flex: 1; min-width: 0; }
.ot-file__name { font: 600 11.5px var(--t-ui); color: #fff; }
.ot-file__meta { font: 400 9.5px var(--t-mono); color: var(--t-dim); }
.ot-file__dl { font-size: 14px; color: var(--t-muted); }
.ot-approve { margin-top: auto; border: none; cursor: pointer; border-radius: 10px; padding: 11px; background: var(--t-accent); color: #fff; font: 700 12.5px var(--t-ui); box-shadow: 0 0 20px -6px var(--t-accent); transition: background 0.2s, transform 0.1s; }
.ot-approve:hover { transform: translateY(-1px); }
.ot-approve.is-approved { background: var(--t-green); color: #06180f; }

/* landing pages */
.ot-lp { display: flex; flex-direction: column; }
.ot-lp__hero { height: 46%; min-height: 88px; background: repeating-linear-gradient(135deg, #141417, #141417 10px, #101013 10px, #101013 20px); position: relative; }
.ot-lp__heroline { position: absolute; left: 14px; bottom: 12px; font: 800 17px var(--t-ui); color: #fff; max-width: 80%; line-height: 1.1; }
.ot-lp__form { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.ot-lp__bar { height: 10px; width: 70%; border-radius: 3px; background: var(--t-tile-brd); }
.ot-lp__bar--dim { background: var(--t-panel-brd); }
.ot-lp__cta { height: 34px; border-radius: 8px; background: var(--t-accent); display: grid; place-items: center; font: 700 12px var(--t-ui); color: #fff; }
.ot-lead-count { font: 600 10px var(--t-mono); color: var(--t-green-t); }
.ot-pubpanel { display: flex; flex-direction: column; }
.ot-pub { display: flex; flex-direction: column; gap: 8px; }
.ot-pub__row { display: flex; justify-content: space-between; font: 400 11px var(--t-mono); color: var(--t-dim); }
.ot-pub__v { color: var(--t-muted); }
.ot-pub__status.is-live { color: var(--t-green-t); }
.ot-pub__btnwrap { position: relative; margin-top: auto; }
.ot-pub__btn { width: 100%; border: none; cursor: pointer; border-radius: 10px; padding: 12px; background: var(--t-accent); color: #fff; font: 700 13px var(--t-ui); box-shadow: 0 0 22px -6px var(--t-accent); transition: opacity 0.3s; }
.ot-pub__btn.is-published { opacity: 0; }
.ot-pub__done { position: absolute; inset: 0; border-radius: 10px; background: rgba(57, 217, 138, 0.14); border: 1px solid rgba(57, 217, 138, 0.4); display: flex; align-items: center; justify-content: center; gap: 7px; font: 700 13px var(--t-ui); color: var(--t-green-t); opacity: 0; transform: scale(0.9); transition: opacity 0.35s, transform 0.35s cubic-bezier(.22, 1.4, .36, 1); pointer-events: none; }
.ot-pub__done.is-live { opacity: 1; transform: scale(1); }
.ot-livedot { width: 7px; height: 7px; border-radius: 50%; background: var(--t-green); animation: rsoLiveDot 2s infinite; }

/* inbox */
.ot-conv { display: flex; flex-direction: column; }
.ot-thread-body { display: flex; flex-direction: column; gap: 10px; }
.ot-bubble { max-width: 82%; padding: 9px 12px; font: 400 11.5px var(--t-ui); line-height: 1.4; }
.ot-bubble--in { align-self: flex-start; border-radius: 12px 12px 12px 3px; background: var(--t-tile); border: 1px solid var(--t-tile-brd); color: var(--t-2); }
.ot-bubble--out { align-self: flex-end; border-radius: 12px 12px 3px 12px; background: rgba(224, 50, 47, 0.18); border: 1px solid rgba(224, 50, 47, 0.3); color: #fff; }
.ot-chips { margin-top: auto; }

/* bookings calendar */
.ot-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.ot-cal__day { border-radius: 10px; background: var(--t-panel); border: 1px solid var(--t-panel-brd); padding: 8px 6px; display: flex; flex-direction: column; gap: 6px; }
.ot-cal__dow { font: 600 9px var(--t-mono); color: var(--t-dim); text-align: center; }
.ot-evt { border-radius: 6px; padding: 5px; font: 600 8.5px var(--t-ui); border-left: 2px solid; }
.ot-evt--red { background: rgba(224, 50, 47, 0.16); border-left-color: var(--t-accent); color: var(--t-accent-soft); }
.ot-evt--green { background: rgba(57, 217, 138, 0.12); border-left-color: var(--t-green); color: var(--t-green-t); }
.ot-evt--amber { background: rgba(217, 138, 26, 0.16); border-left-color: var(--t-amber); color: var(--t-amber-t); }
.ot-evt--neutral { background: var(--t-tile); border-left-color: var(--t-tile-brd); color: var(--t-muted); }

/* automations */
.ot-toggle, .ot-synced { display: inline-flex; align-items: center; gap: 6px; font: 600 10px var(--t-mono); text-transform: uppercase; color: var(--t-green-t); }
.ot-synced { padding: 4px 10px; border-radius: 20px; background: rgba(57, 217, 138, 0.12); }
.ot-toggle__sw { width: 26px; height: 15px; border-radius: 9px; background: rgba(57, 217, 138, 0.3); position: relative; }
.ot-toggle__sw::after { content: ""; position: absolute; right: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--t-green); }
.ot-flow { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.ot-flow__trigger { border-radius: 12px; background: linear-gradient(180deg, rgba(224, 50, 47, 0.1), var(--t-panel)); border: 1px solid rgba(224, 50, 47, 0.3); padding: 12px 15px; }
.ot-flow__k { font: 600 9.5px var(--t-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--t-accent-soft); margin-bottom: 3px; }
.ot-flow__t { font: 600 13px var(--t-ui); color: #fff; }
.ot-flow__arrow { align-self: center; font-size: 14px; color: #3a3a3f; }
.ot-flow__step { border-radius: 12px; background: var(--t-panel); border: 1px solid var(--t-panel-brd); padding: 12px 15px; display: flex; align-items: center; gap: 11px; }
.ot-flow__ico { width: 26px; height: 26px; border-radius: 7px; background: rgba(255, 255, 255, 0.06); display: grid; place-items: center; font-size: 13px; color: var(--t-muted); flex: none; }
.ot-flow__meta { font: 400 10px var(--t-mono); color: var(--t-dim); margin-top: 2px; }

/* payments */
.ot-payrow { gap: 10px; }
.ot-payrow__date { font: 500 11px var(--t-mono); color: var(--t-dim); flex: none; }

/* reports chart */
.ot-chartwrap { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.ot-chart { flex: 1; display: flex; align-items: flex-end; gap: 10px; min-height: 90px; padding-top: 6px; }
.ot-chart__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.ot-chart__bar { width: 100%; height: 0; border-radius: 5px 5px 0 0; background: #2a2a30; transition: height 0.9s var(--t-ease); }
.ot-chart__bar--hot { background: linear-gradient(180deg, var(--t-accent-bright), var(--t-accent)); box-shadow: 0 0 16px -4px var(--t-accent); }
.ot-chart__labels { display: flex; gap: 10px; }
.ot-chart__labels span { flex: 1; text-align: center; font: 500 9px var(--t-mono); color: var(--t-faint); }

/* ---------- Right-edge dot rail ---------- */
.ot-rail { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.ot-dot { width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.ot-dot::before { content: ""; width: 8px; height: 9px; border-radius: 5px; background: #2a2a30; transition: height 0.3s, background 0.3s, box-shadow 0.3s; }
.ot-dot.is-active::before { height: 26px; background: var(--t-accent); box-shadow: 0 0 12px -2px var(--t-accent); }

/* ---------- Step counter + scroll hint ---------- */
.ot-counter { position: absolute; bottom: 26px; left: clamp(24px, 4vw, 54px); z-index: 6; display: flex; align-items: center; gap: 14px; font: 600 11px var(--t-mono); letter-spacing: 0.1em; color: var(--t-dim); }
.ot-counter__now { color: var(--t-accent-soft); }
.ot-counter__hint { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 10.5px; color: var(--t-faint); }
.ot-counter__hint span { font-size: 13px; animation: otHintBob 1.8s var(--t-ease) infinite; }

/* ---------- Boot intro overlay ---------- */
.ot-boot { position: absolute; inset: 0; z-index: 20; background: var(--t-bg); display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(28px, 6vw, 90px); gap: 9px; transition: opacity 0.7s ease; }
.ot-boot.is-gone { opacity: 0; }
.ot-boot__line { font: 500 14px var(--t-mono); color: var(--t-dim); opacity: 0; transition: opacity 0.2s; }
.ot-boot__line.is-shown { opacity: 1; }
.ot-boot__ok { color: var(--t-green-t); font-weight: 600; }
.ot-boot__track { margin-top: 18px; height: 3px; width: min(320px, 60vw); border-radius: 2px; background: var(--t-div); overflow: hidden; }
.ot-boot__bar { display: block; width: 0; height: 100%; background: var(--t-accent); box-shadow: 0 0 10px -1px var(--t-accent); transition: width 2.1s linear; }

/* ---------- Sentinels (invisible scroll rulers) ---------- */
.ot-sentinels { position: absolute; top: 0; left: 0; width: 1px; height: 100%; pointer-events: none; }
.ot-sen { height: 100vh; }

/* ---------- Keyboard focus ---------- */
.rso-optour :focus:not(:focus-visible) { outline: none; }
.rso-optour :focus-visible { outline: 2px solid var(--t-accent-bright); outline-offset: 3px; border-radius: 4px; }

@keyframes rsoLiveDot { 0%, 100% { box-shadow: 0 0 0 0 rgba(57, 217, 138, 0.5); } 50% { box-shadow: 0 0 0 5px rgba(57, 217, 138, 0); } }
@keyframes otHintBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* ---------- Responsive: stack caption over window, drop the tilt ---------- */
@media (max-width: 820px) {
  .ot-stage { flex-direction: column; gap: 18px; justify-content: flex-start; padding: 74px 18px 24px; }
  .ot-caps { flex: none; width: 100%; height: auto; order: 2; }
  .ot-cap { position: relative; bottom: auto; max-width: 100%; }
  .ot-cap:not(.is-active) { display: none; }
  .ot-capnum { font-size: 60px; }
  .ot-captitle { font-size: 26px; }
  .ot-winwrap { width: 100%; order: 1; }
  .ot-win { width: 100%; transform: none !important; }
  .ot-screens { height: 58vh; min-height: 340px; }
  .ot-rail { display: none; }
  .ot-grid-15, .ot-grid-14, .ot-grid-13, .ot-grid-cust { grid-template-columns: 1fr; }
  .t-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .t-board { grid-template-columns: repeat(2, 1fr); }
  .ot-cal { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 480px) {
  .ot-screen__title { font-size: 13px; }
  .t-cols-4, .t-cols-3 { grid-template-columns: repeat(2, 1fr); }
  .ot-cal { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ot-cap, .ot-screen, .ot-win, .ot-bar__fill, .ot-chart__bar, .ot-pub__btn, .ot-pub__done, .ot-boot { transition: none; }
  .ot-chrome__live::before, .ot-livedot, .ot-counter__hint span { animation: none; }
}

/* The static tilt below only replaces the scroll-driven 3D transform
   tour.js would otherwise apply (JS already skips that under reduced
   motion). Gated to the same >820px width JS uses, so it never fights
   the mobile breakpoint's "stack flat, no tilt" rule above. */
@media (prefers-reduced-motion: reduce) and (min-width: 821px) {
  .ot-win { transform: perspective(1800px) rotateY(-10deg) rotateX(3deg) !important; }
}