/* RPS Timeline styles */
.rps-timeline {
  --rail-width: 5px;
  --rail-color: rgba(255,255,255,.0);
  --rail-glow: rgba(105,200,255,1.9);
  --dot-size: 15px;
  --dot-glow: 4px;
  --card-bg: rgba(20, 25, 80, .35);
  --card-border: rgba(255,255,255,.08);
  --card-shadow: 0 12px 40px rgba(0,0,0,.35);
  --watermark: rgba(255,255,255,.06);
  --heading: #fff;
  --emphasis: #e33;
  --label: #fff;
  --muted: rgba(255,255,255,.72);
  --sticky-top: clamp(200px, 20vh, 200px);
  position: relative;
  max-width: min(900px, 90vw);
  margin: 0 auto;
  padding: clamp(0px, 0vw, 0px) 0;
}



.rps-heading { margin-bottom: clamp(40px, 8vw, 80px); }
.rps-heading__text { margin:0; font-size: clamp(28px,5vw,56px); font-weight:800; color:var(--heading); }
.rps-heading__prefix { opacity:.9; margin-right:.35em; }
.rps-heading__emphasis { color: var(--emphasis); }

.rps-rail { position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:var(--rail-width); background: linear-gradient(to bottom, transparent 10%, var(--rail-color) 80px, var(--rail-color) calc(100% - 80px), transparent 100%); }
.rps-rail::after { content:""; position:absolute; left:50%; transform:translateX(-50%); width:var(--rail-width); top:0; height:var(--rail-progress, 0%); background: linear-gradient(to bottom, var(--rail-glow), rgba(0,133,255,.2)); box-shadow: 0 0 32px 8px var(--rail-glow); }

.rps-items { list-style:none; margin:0; padding:0; }
.rps-item { position:relative; min-height: clamp(300px, 45vh, 400px); display:grid; grid-template-columns: 1fr var(--rail-width) 1fr; column-gap: clamp(20px,6vw,80px); align-items:center; padding: clamp(16px, 3vw, 24px) 0; }
.rps-label { text-align: right; grid-column:1/2; position:sticky; top:var(--sticky-top); align-self:start; padding-top: 130px; }
.rps-label__word { color:var(--label); font-weight:800; font-size: clamp(28px,6vw,72px); letter-spacing:.4px; }

.rps-dot { grid-column:2/3; position:relative; height:100%; display:flex; align-items:center; justify-content:center; }
.rps-dot>span { width:var(--dot-size); height:var(--dot-size); border-radius:50%; background:#cfefff; box-shadow:0 0 var(--dot-glow) 6px rgba(135,214,255,.45); outline:3px solid rgba(255,255,255,.9); transition:transform .25s ease, box-shadow .25s ease, outline-color .25s ease; }
.rps-item.is-active .rps-dot>span { transform:scale(1.18); box-shadow:0 0 36px 8px rgba(135,214,255,.75); outline-color:#fff; }

.rps-card { grid-column:3/4; background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; padding: clamp(18px,3vw,28px); box-shadow:var(--card-shadow); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transform: translateY(24px); opacity:0; transition: transform .6s ease, opacity .6s ease; }
.rps-card.is-visible { transform: translateY(0); opacity:1; }
.rps-card__badge { text-transform:uppercase; letter-spacing:.14em; font-size:.85rem; color:var(--muted); margin-bottom:.6rem; }
.rps-card__title { font-size:clamp(22px,2.4vw,32px); line-height:1.2; color:#fff; margin:0 0 .5rem; }
.rps-card__body { margin:0; color:var(--muted); font-size:clamp(15px, 1.1vw, 18px); }

/* watermark word */
/*.rps-watermark { position:absolute; left: clamp(16px, 4vw, 48px); right: clamp(16px, 52%, 56%); top:50%; transform:translateY(-50%); font-weight:900; font-size:clamp(50px, 10vw, 120px); line-height:.9; color:rgba(255,255,255,.06); pointer-events:none; white-space:nowrap; }*/

.rps-watermark { position:absolute; left: clamp(-116px, 4vw, -100px); right: clamp(16px, 52%, 56%); top:40%; transform:translateY(-50%); font-weight:900; font-size:clamp(50px, 10vw, 100px); line-height:.9; color:rgba(255,255,255,.06); pointer-events:none; white-space:nowrap; }

.rps-timeline .rps-rail { margin-top: 0; }

/* --- sticky center dot (pushes down as you scroll) --- */
.rps-timeline .rps-item { 
  /* sticky won't work if any ancestor is overflow hidden */
  overflow: visible !important;
  position: relative;
}

.rps-timeline .rps-dot {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: clamp(120px, 35vh, 280px); /* where the dot sticks in viewport */
  left: 50%;
  transform: translateX(-50%);
  display: grid;             /* center the visual span */
  place-items: center;
  z-index: 4;
  pointer-events: none;       /* it's decorative */
}

/* keep your existing visual styles; this just ensures the dot shows */
.rps-timeline .rps-dot > span {
  width: var(--dot-size, 12px);
  height: var(--dot-size, 12px);
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 6px rgba(158,206,255,.12),
    0 0 18px 2px rgba(139,225,255,.5);
}

/* optional: slightly lower stick point on phones */
@media (max-width: 980px) {
  .rps-timeline .rps-dot { top: 28vh; }
}





@media (max-width:880px){
  .rps-item { grid-template-columns:1fr; }
  .rps-label { position:static; margin-bottom:16px; }
  .rps-dot { display:none; }
  .rps-rail { left:8px; transform:none; opacity:.5; }
  .rps-card { grid-column:1/-1; }
  .rps-watermark { display:none; }
}