.cs-modal-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center; justify-content: center;
  z-index: 9999;
}
.cs-modal-overlay.is-open{ display:flex; }
.cs-modal{
  width: min(980px, calc(100vw - 28px));
  border-radius: 18px;
  background: rgba(10,18,32,.92);
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 30px 120px rgba(0,0,0,.55);
  position: relative;
}
.cs-modal-x{
  position:absolute; top: 14px; right: 14px;
  background: transparent; border: 0; color: #cbd5e1;
  font-size: 18px; cursor:pointer;
}

.cs-tour{ display:grid; grid-template-columns: 1.2fr 1fr; gap: 0; }
.cs-tour-media{ padding: 18px; }
.cs-tour-media img{
  width:100%; height: 420px; object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(2,6,23,.35);
}
.cs-tour-content{ padding: 22px 22px 18px; }
.cs-tour-kicker{ font-size:.72rem; letter-spacing:.18em; opacity:.8; }
.cs-tour-title{ margin: 10px 0 10px; font-size: 1.5rem; }
.cs-tour-body p{ margin: 0 0 12px; opacity:.9; line-height:1.45; }
.cs-tour-footer{ display:flex; align-items:center; justify-content:space-between; gap: 14px; margin-top: 14px; }
.cs-tour-dots{ display:flex; gap: 8px; }
.cs-dot{
  width: 9px; height: 9px; border-radius: 999px;
  border: 1px solid rgba(148,163,184,.28);
  background: transparent; cursor:pointer;
}
.cs-dot.is-active{ background: rgba(56,189,248,.9); border-color: rgba(56,189,248,.9); }

.cs-tour-dontshow{ display:flex; gap: 10px; align-items:center; margin-top: 10px; opacity:.9; }
.cs-tour-link{ display:inline-block; margin-top: 10px; opacity:.75; }
html.cs-modal-open{ overflow:hidden; }

@media (max-width: 860px){
  .cs-tour{ grid-template-columns: 1fr; }
  .cs-tour-media img{ height: 260px; }
}

/* ============ Slide 0 Intro Mode ============ */

.cs-modal.cs-tour-intro .cs-tour-media img#tourImg{
  display: none; /* no screenshot on slide 0 */
}

.cs-tour-brand{
  display: none;
}

.cs-modal.cs-tour-intro .cs-tour-brand{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 18px;
}

.cs-modal.cs-tour-intro .cs-tour-brand img{
  height: 26px;   /* adjust */
  width: auto;
  opacity: .95;
}

/* Give slide 0 more “thesis” spacing */
.cs-modal.cs-tour-intro .cs-tour-title{
  font-size: 28px;        /* adjust to taste */
  line-height: 1.15;
  margin-top: 10px;
}

.cs-modal.cs-tour-intro .cs-tour-body{
  margin-top: 10px;
  max-width: 52ch;
}

/* Make the primary button big */
.cs-btn-hero{
  padding: 12px 18px;
  font-size: 15px;
  border-radius: 12px;
  min-width: 180px;
}

/* Optional: hide dots + “don’t show again” on Slide 0 to keep it clean */
.cs-modal.cs-tour-intro .cs-tour-dots{
  display: none;
}

/* Optional: move skip to the far left on intro */
.cs-modal.cs-tour-intro .cs-tour-footer{
  justify-content: flex-end;
}

/* Optional: replace QUICK TOUR label with something more serious */
.cs-modal.cs-tour-intro .cs-tour-kicker{
  letter-spacing: .18em;
  opacity: .85;
}


/* ================================
   Slide 0 Full-Width Intro Mode
================================ */

.cs-modal.cs-tour-intro {
  width: min(1100px, calc(100vw - 40px));
}

.cs-modal.cs-tour-intro .cs-tour {
  grid-template-columns: 1fr;   /* kill 2-column layout */
}

.cs-modal.cs-tour-intro .cs-tour-media {
  display: none;
}

.cs-modal.cs-tour-intro .cs-tour-brand {
  display: block;
}

.cs-modal.cs-tour-intro .cs-tour-content {
  padding: 60px 80px;
}

.cs-modal.cs-tour-intro .cs-tour-title {
  font-size: 2.4rem;
  line-height: 1.1;
  max-width: 900px;
}

.cs-modal.cs-tour-intro .cs-tour-body {
  max-width: 700px;
  margin-top: 18px;
}

.cs-modal.cs-tour-intro .cs-tour-footer {
  justify-content: flex-start;
  margin-top: 28px;
}

.cs-modal.cs-tour-intro .cs-tour-dots {
  display: none;
}

.cs-tour-actions{
  display:flex;
  gap: 10px;
  align-items:center;
}


.cs-tour-brand {
  display: none;
  margin-bottom: 24px;
}

.cs-tour-logo {
  height: 32px;
  width: auto;
  opacity: .95;
}

.cs-tour-intro-badge{
  display:none;
  position:absolute;
  top: 22px;
  left: 24px;
  z-index: 2;
  opacity: .95;
}

.cs-tour-logo{
  height: 30px; /* tune 26–34 */
  width:auto;
}

.cs-modal.cs-tour-intro .cs-tour-intro-badge{
  display:block;
}

.cs-tour-brand{ display:none !important; }


/* Make the right panel behave like a column layout */
.cs-tour-content{
  display:flex;
  flex-direction:column;
}

/* Only enforce tall layout on real tour slides */
.cs-modal:not(.cs-tour-intro) .cs-tour-content{
  min-height:460px; /* adjust to image height */
}

/* Let Slide 0 collapse naturally */
.cs-modal.cs-tour-intro .cs-tour-content{
  min-height:auto;
}

/* Let the copy area take up open space */
.cs-tour-body{
  flex: 1;
}

/* Push controls to the bottom */
.cs-tour-controls{
  margin-top: auto;
}

.cs-modal.cs-tour-intro .cs-tour-body{
  margin-top:12px;
}

.cs-modal.cs-tour-intro .cs-tour-controls{
  margin-top:20px;
}

/* Primary hero button (Slide 0) */
.cs-btn-tour-hero{
  padding: 14px 22px;
  font-size: 15px;
  border-radius: 14px;
  min-width: 190px;
  box-shadow: 0 6px 24px rgba(56,189,248,.15);
}

/* Subtle grey secondary */
.cs-btn-secondary-muted{
  padding: 11px 18px;
  font-size: 14px;
  border-radius: 12px;
  background: rgba(148,163,184,.12);
  border: 1px solid rgba(148,163,184,.25);
  color: #cbd5e1;
  transition: all .15s ease;
}

.cs-btn-secondary-muted:hover{
  background: rgba(148,163,184,.18);
  border-color: rgba(148,163,184,.35);
}

.cs-modal.cs-tour-intro .cs-tour-actions{
  gap: 16px;
}

.cs-btn-secondary-muted{
  font-size:13.5px;
  padding:10px 16px;
  opacity:.85;
}