/* ============================================================
   Frame Theory OS - "how it works" product tour page
   Everything is prefixed "ot-" so it never collides with the
   shared vogue-/section- classes used across the rest of the site.
   The illustrations are pure HTML/CSS with made-up data.
   ============================================================ */

.ot-section-head { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.ot-section-head p { margin-top: 1rem; color: var(--text-secondary); line-height: 1.8; }

/* ── HERO ── */
.ot-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 10rem 4rem 5rem;
  max-width: 1300px;
  margin: 0 auto;
}
.ot-badge {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--border);
  padding: 0.4rem 0.9rem;
  margin-bottom: 1.4rem;
}
.ot-hero h1 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  line-height: 1.15;
  margin-bottom: 1.4rem;
}
.ot-hero h1 em { font-style: italic; color: var(--gold-light); }
.ot-hero-sub { font-size: 1.02rem; line-height: 1.8; color: var(--text-secondary); max-width: 560px; }
.ot-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin: 2rem 0 1rem; }
.ot-fine { font-size: 0.8rem; color: var(--muted); }

/* ── ILLUSTRATION PIECES ── */
.ot-hero-art, .ot-step-art { position: relative; min-height: 340px; }
.ot-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.12);
  padding: 1rem 1.1rem 1.2rem;
  font-size: 0.78rem;
  color: var(--text);
}
.ot-card-head { display: flex; align-items: center; gap: 5px; margin-bottom: 0.9rem; }
.ot-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0605a; }
.ot-dot:nth-child(2) { background: #e0b95a; }
.ot-dot:nth-child(3) { background: #5ac488; }
.ot-card-title { margin-left: 0.5rem; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.ot-float {
  position: absolute;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.14);
  padding: 0.7rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.74rem;
  color: var(--text);
  z-index: 2;
  animation: ot-bob 6s ease-in-out infinite;
}
.ot-float small { color: var(--muted); font-size: 0.68rem; }
.ot-float b { font-weight: 600; }
.ot-float:nth-of-type(2n) { animation-delay: -2.5s; }

.ot-pill {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(138, 125, 108, 0.16);
  color: var(--text-secondary);
  white-space: nowrap;
  align-self: flex-start;
}
.ot-gold { background: rgba(176, 141, 63, 0.18); color: #8a6a1d; }
.ot-green { background: rgba(46, 125, 82, 0.16); color: #2e7d52; }
.ot-blue { background: rgba(43, 108, 176, 0.16); color: #2b6cb0; }
.ot-purple { background: rgba(126, 87, 168, 0.16); color: #7e57a8; }
.ot-red { background: rgba(192, 57, 43, 0.14); color: #c0392b; }

.ot-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 600; flex-shrink: 0;
}
.ot-avatar.ot-b { background: #7e57a8; }
.ot-avatar.ot-c { background: #2b6cb0; }
.ot-avatar.ot-d { background: #2e7d52; }

.ot-btn-mini {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  font-size: 0.66rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  align-self: flex-start;
}
.ot-row {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0; border-top: 1px solid var(--border);
}
.ot-row b { flex: 1; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-check { width: 14px; height: 14px; border: 1.5px solid var(--gold); border-radius: 3px; flex-shrink: 0; }
.ot-checked { background: var(--gold); }

.ot-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.ot-kpi { background: rgba(138, 125, 108, 0.1); border-radius: 8px; padding: 0.6rem 0.7rem; display: flex; flex-direction: column; gap: 0.2rem; }
.ot-kpi small { color: var(--muted); font-size: 0.62rem; letter-spacing: 0.04em; }
.ot-kpi b { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; letter-spacing: 0.02em; color: var(--gold); }

.ot-mini-chart { display: flex; align-items: flex-end; gap: 6px; height: 74px; margin-top: 0.9rem; }
.ot-mini-chart i { flex: 1; background: linear-gradient(180deg, var(--gold-light), var(--gold)); border-radius: 3px 3px 0 0; opacity: 0.85; }
.ot-mini-chart.ot-line i { opacity: 0.6; }

.ot-bars { display: flex; flex-direction: column; gap: 0.6rem; }
.ot-barrow { display: grid; grid-template-columns: 74px 1fr 22px; align-items: center; gap: 0.6rem; }
.ot-barrow span { color: var(--muted); font-size: 0.7rem; }
.ot-barrow div { height: 9px; background: rgba(138, 125, 108, 0.16); border-radius: 999px; overflow: hidden; }
.ot-barrow i { display: block; height: 100%; background: var(--gold); border-radius: 999px; }
.ot-barrow i.ot-fill-green { background: #2e7d52; }
.ot-barrow b { text-align: right; font-weight: 500; }

.ot-doc-top { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 0.7rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--border); }
.ot-doc-top b { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 400; }
.ot-doc-top small { color: var(--muted); }
.ot-doc-line { display: flex; justify-content: space-between; padding: 0.4rem 0; color: var(--text-secondary); }
.ot-doc-total { display: flex; justify-content: space-between; padding-top: 0.7rem; margin-top: 0.4rem; border-top: 1.5px solid var(--text); font-size: 0.9rem; }
.ot-doc-total b { color: var(--gold); }
.ot-linkrow { display: flex; align-items: center; gap: 0.6rem; }
.ot-linkrow > span:first-child { font-family: var(--font-mono, monospace); font-size: 0.66rem; color: var(--muted); }

.ot-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; }
.ot-day { border: 1px solid var(--border); border-top: 2px solid var(--gold-light); border-radius: 6px; padding: 0.4rem 0.45rem; display: flex; flex-direction: column; gap: 0.15rem; }
.ot-day b { font-family: var(--font-display); font-size: 0.85rem; font-weight: 400; color: var(--gold); }
.ot-day span { font-size: 0.6rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ot-day-g { border-top-color: #2e7d52; }
.ot-day-r { border-top-color: #c0392b; opacity: 0.6; }

.ot-drop { flex-direction: row; align-items: center; gap: 0.6rem; }
.ot-file { width: 30px; height: 36px; border-radius: 4px; background: rgba(176, 141, 63, 0.18); color: var(--gold); font-size: 0.6rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ot-drop div { display: flex; flex-direction: column; gap: 0.15rem; }

.ot-donut { flex-direction: row; align-items: center; gap: 0.7rem; }
.ot-donut i { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(var(--gold) 0 40%, #7e57a8 0 68%, #2b6cb0 0 85%, #2e7d52 0 100%); -webkit-mask: radial-gradient(circle, transparent 46%, #000 48%); mask: radial-gradient(circle, transparent 46%, #000 48%); }
.ot-donut div { display: flex; flex-direction: column; gap: 0.15rem; }

/* Floating-card positions differ slightly per art block */
.ot-step-art .ot-a-main { position: relative; z-index: 1; width: 84%; margin: 1.4rem 0 0 8%; }
.ot-pos-a { right: 0; top: -0.2rem; }
.ot-pos-b { left: 0; bottom: 0.4rem; }
.ot-step-art .ot-cursor { position: absolute; right: 22%; bottom: 20%; z-index: 3; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.3)); animation: ot-bob 5s ease-in-out infinite; }

.ot-hero-art .ot-hero-main { position: relative; z-index: 1; width: 86%; margin: 2rem 0 0 7%; }
.ot-f1 { right: 0; top: 0; }
.ot-f2 { left: 0; top: 40%; }
.ot-f3 { right: 4%; bottom: 0; }

@keyframes ot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* ── STATS STRIP ── */
.ot-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #131210; padding: 3rem 4rem; text-align: center; gap: 1rem;
}
.ot-stat b { display: block; font-family: var(--font-display); font-size: 2.6rem; font-weight: 400; color: var(--gold-light); letter-spacing: 0.03em; }
.ot-stat span { font-size: 0.85rem; color: rgba(245, 240, 234, 0.72); }

/* ── PROBLEM: BEFORE / AFTER ── */
.ot-problem { padding: 6rem 4rem 3rem; }
.ot-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 1100px; margin: 0 auto; }
.ot-compare-col { border: 1px solid var(--border); background: var(--card-bg); padding: 2rem 1.8rem; border-radius: 6px; }
.ot-after { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(176, 141, 63, 0.2), 0 18px 40px rgba(176, 141, 63, 0.1); }
.ot-compare-tag { display: inline-block; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.8rem; }
.ot-after .ot-compare-tag { color: var(--gold); }
.ot-compare h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.4rem; margin-bottom: 1rem; }
.ot-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.2rem; }
.ot-chips span { font-size: 0.72rem; border: 1px dashed var(--border); padding: 0.25rem 0.65rem; border-radius: 999px; color: var(--muted); }
.ot-chips-one span { border-style: solid; border-color: var(--gold); color: var(--gold); }
.ot-compare ul { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.ot-compare li { position: relative; padding-left: 1.5rem; font-size: 0.9rem; line-height: 1.55; color: var(--text-secondary); }
.ot-before li::before { content: '\00d7'; position: absolute; left: 0; color: #c0392b; font-size: 1.1rem; line-height: 1.2; }
.ot-after li::before { content: '\2713'; position: absolute; left: 0; color: #2e7d52; font-weight: 600; }

/* ── WHAT IT IS ── */
.ot-what { padding: 4rem 4rem 3rem; }
.ot-what-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.ot-what-inner p { margin-top: 1.2rem; font-size: 1.05rem; line-height: 1.85; color: var(--text-secondary); }

/* ── BENEFITS ── */
.ot-benefits { padding: 4rem 4rem 5rem; }
.ot-benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; max-width: 1200px; margin: 0 auto; }
.ot-benefit { background: var(--card-bg); border: 1px solid var(--border); padding: 2rem 1.7rem; transition: border-color 0.3s, transform 0.3s; }
@media (hover: hover) and (pointer: fine) { .ot-benefit:hover { border-color: var(--gold); transform: translateY(-4px); } }
.ot-benefit span { font-family: var(--font-display); font-size: 1.7rem; color: var(--gold-light); opacity: 0.6; }
.ot-benefit h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.25rem; margin: 0.4rem 0 0.6rem; }
.ot-benefit p { font-size: 0.9rem; line-height: 1.7; color: var(--muted); }
.ot-benefit-note { max-width: 760px; margin: 2.5rem auto 0; text-align: center; font-size: 0.95rem; color: var(--text-secondary); line-height: 1.7; }

/* ── STEP TILES ── */
.ot-overview { padding: 4rem 4rem 3rem; border-top: 1px solid var(--border); }
.ot-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 1100px; margin: 0 auto; }
.ot-tile {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem;
  background: var(--card-bg); border: 1px solid var(--border); padding: 1.6rem 1rem; text-decoration: none; color: var(--text);
  transition: border-color 0.3s, transform 0.3s;
}
@media (hover: hover) and (pointer: fine) { .ot-tile:hover { border-color: var(--gold); transform: translateY(-3px); } }
.ot-tile-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(176, 141, 63, 0.14); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; }
.ot-tile-icon svg { width: 22px; height: 22px; }
.ot-tile-num { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.ot-tile-label { font-family: var(--font-serif); font-size: 1.05rem; }

/* ── THE STEPS ── */
.ot-step {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
  max-width: 1200px; margin: 0 auto; padding: 4.5rem 4rem; scroll-margin-top: 90px;
}
.ot-step:nth-of-type(even) .ot-step-art { order: 2; }
.ot-step-label { display: inline-block; font-size: 0.85rem; font-weight: 500; border-bottom: 2px solid var(--gold-light); padding-bottom: 2px; margin-bottom: 1rem; }
.ot-step-copy h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.2; margin-bottom: 1rem; }
.ot-step-copy > p { color: var(--text-secondary); line-height: 1.8; margin-bottom: 1.6rem; }
.ot-points { list-style: none; display: flex; flex-direction: column; gap: 1.1rem; }
.ot-points li { display: flex; gap: 0.9rem; align-items: flex-start; }
.ot-points svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--gold); margin-top: 2px; }
.ot-points b { display: block; font-weight: 500; margin-bottom: 0.15rem; }
.ot-points span { font-size: 0.9rem; color: var(--muted); line-height: 1.6; }

/* ── FAQ ── */
.ot-faq { padding: 5rem 4rem 4rem; border-top: 1px solid var(--border); }
.ot-faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; }
.ot-faq-list details { border: 1px solid var(--border); background: var(--card-bg); padding: 1.1rem 1.4rem; }
.ot-faq-list summary { cursor: pointer; font-family: var(--font-serif); font-size: 1.05rem; font-weight: 500; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.ot-faq-list summary::-webkit-details-marker { display: none; }
.ot-faq-list summary::after { content: '+'; font-family: var(--font-sans); font-size: 1.4rem; color: var(--gold); transition: transform 0.25s; margin-left: 1rem; }
.ot-faq-list details[open] summary::after { transform: rotate(45deg); }
.ot-faq-list p { margin-top: 0.9rem; font-size: 0.92rem; line-height: 1.75; color: var(--muted); }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .ot-hero { grid-template-columns: 1fr; padding: 9rem 2rem 3rem; }
  .ot-benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .ot-tiles { grid-template-columns: repeat(3, 1fr); }
  .ot-step { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 2rem; }
  .ot-step:nth-of-type(even) .ot-step-art { order: 0; }
  .ot-stats, .ot-problem, .ot-what, .ot-benefits, .ot-overview, .ot-faq { padding-left: 2rem; padding-right: 2rem; }
}
@media (max-width: 700px) {
  .ot-hero { padding: 8rem 1.25rem 2rem; }
  .ot-stats { grid-template-columns: 1fr 1fr; padding: 2rem 1.25rem; row-gap: 1.6rem; }
  .ot-compare { grid-template-columns: 1fr; }
  .ot-benefit-grid { grid-template-columns: 1fr; }
  .ot-tiles { grid-template-columns: 1fr 1fr; }
  .ot-step { padding: 2.5rem 1.25rem; }
  .ot-problem, .ot-what, .ot-benefits, .ot-overview, .ot-faq { padding-left: 1.25rem; padding-right: 1.25rem; }
  .ot-float { position: relative; inset: auto; margin-top: 0.8rem; animation: none; width: fit-content; }
  .ot-step-art .ot-a-main, .ot-hero-art .ot-hero-main { width: 100%; margin: 0; }
  .ot-step-art .ot-cursor { display: none; }
  .ot-hero-art, .ot-step-art { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ot-float, .ot-step-art .ot-cursor { animation: none; }
}

/* ── INTERACTIVE TOUR (guided click-through) ── */
.ot-try { padding: 4rem 4rem 5rem; }
.ot-demo {
  max-width: 1180px; margin: 0 auto;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: var(--card-bg);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.16);
  outline: none;
}
.ot-demo-chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 0.7rem 1rem; background: rgba(0, 0, 0, 0.05); border-bottom: 1px solid var(--border);
}
.ot-demo-url { flex: 1; margin: 0 0.8rem; text-align: center; font-size: 0.7rem; letter-spacing: 0.06em; color: var(--muted); }
.ot-demo-count { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }

.ot-demo-viewport {
  position: relative;
  height: clamp(340px, 60vh, 560px);
  overflow-y: auto; overflow-x: hidden;
  background: #f4efe7;
  scrollbar-width: thin;
}
.ot-demo-stage { position: relative; width: 100%; }
.ot-demo-img { display: block; width: 100%; height: auto; transition: opacity 0.25s ease; }
.ot-demo-img.is-fading { opacity: 0.25; }

.ot-demo-hot {
  position: absolute; z-index: 2; padding: 0; cursor: pointer;
  border: 2px solid var(--gold); border-radius: 10px;
  background: rgba(176, 141, 63, 0.10);
  box-shadow: 0 0 0 9999px rgba(20, 15, 8, 0.32), 0 0 0 4px rgba(176, 141, 63, 0.25);
  transition: left 0.4s ease, top 0.4s ease, width 0.4s ease, height 0.4s ease, opacity 0.2s ease;
  animation: ot-pulse 1.8s ease-in-out infinite;
}
.ot-demo-hot[hidden] { display: none; }
.ot-demo-hot::after {
  content: ''; position: absolute; top: 10px; right: 10px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 0 rgba(176, 141, 63, 0.6); animation: ot-ping 1.8s ease-out infinite;
}
.ot-demo-hot.nudge { animation: ot-nudge 0.5s ease; }
@keyframes ot-pulse { 0%, 100% { border-color: var(--gold); } 50% { border-color: var(--gold-light); } }
@keyframes ot-ping { 0% { box-shadow: 0 0 0 0 rgba(176, 141, 63, 0.55); } 100% { box-shadow: 0 0 0 16px rgba(176, 141, 63, 0); } }
@keyframes ot-nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.ot-demo-guide {
  display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap;
  padding: 1.1rem 1.4rem; border-top: 1px solid var(--border); background: var(--card-bg);
}
.ot-demo-guide-copy { flex: 1 1 320px; min-width: 0; }
.ot-demo-guide-top { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.35rem; }
.ot-demo-step { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.ot-demo-dots { display: flex; gap: 5px; }
.ot-demo-dots i { width: 18px; height: 3px; border-radius: 3px; background: rgba(138, 125, 108, 0.3); transition: background 0.25s; }
.ot-demo-dots i.done { background: var(--gold-light); }
.ot-demo-dots i.on { background: var(--gold); }
.ot-demo-guide h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.25rem; margin-bottom: 0.3rem; }
.ot-demo-guide p { font-size: 0.88rem; line-height: 1.6; color: var(--muted); margin: 0; }
.ot-demo-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
.ot-demo-actions button, .ot-demo-actions a {
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em;
  padding: 0.65rem 1.4rem; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--text); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background 0.2s, opacity 0.2s;
}
.ot-demo-actions button:disabled { opacity: 0.35; cursor: default; }
.ot-demo-actions .ot-demo-next, .ot-demo-actions .ot-demo-cta { background: var(--gold); border-color: var(--gold); color: #fff; }
.ot-demo-actions .ot-demo-next:hover, .ot-demo-actions .ot-demo-cta:hover { opacity: 0.88; }

/* End-of-tour state swaps the step guide for a call to action */
.ot-demo-end { display: none; }
.ot-demo.is-end .ot-demo-guide-copy, .ot-demo.is-end .ot-demo-steps-actions { display: none; }
.ot-demo.is-end .ot-demo-end { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; width: 100%; }
.ot-demo-end h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.35rem; margin-bottom: 0.3rem; }
.ot-demo-end p { font-size: 0.9rem; color: var(--muted); margin: 0; max-width: 620px; }
.ot-demo-end > div:first-child { flex: 1 1 320px; }
.ot-demo-note { text-align: center; margin-top: 1.1rem; font-size: 0.78rem; color: var(--muted); }

@media (max-width: 1100px) { .ot-try { padding: 3rem 2rem 4rem; } }
@media (max-width: 700px) {
  .ot-try { padding: 2.5rem 1rem 3rem; }
  .ot-demo-viewport { height: 300px; }
  .ot-demo-guide { padding: 1rem; gap: 1rem; }
  .ot-demo-actions { width: 100%; }
  .ot-demo-actions button, .ot-demo-actions a { flex: 1; text-align: center; }
  .ot-demo-url { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ot-demo-hot, .ot-demo-hot::after { animation: none; }
}

/* Real-screens gallery: two per row so the screenshots are big enough to read */
.crmx-tour-grid { grid-template-columns: repeat(2, 1fr) !important; }
.crmx-tour-card img { height: 300px !important; }
@media (max-width: 700px) { .crmx-tour-grid { grid-template-columns: 1fr !important; } .crmx-tour-card img { height: 220px !important; } }