/* =========================================================
   CEPS EXPLORER — Visitor Walkthrough
   Additive public-facing experience. No core CEPS data writes.
========================================================= */

.visitor-demo-bar{
  background:#111;
  color:#fff;
  display:flex;
  justify-content:center;
  gap:28px;
  padding:9px 18px;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.visitor-demo-bar span:first-child{color:var(--gold);font-weight:700}

.visitor-hero{
  min-height:650px;
  background:linear-gradient(110deg,#101010 0%,#181512 52%,#29231b 100%);
  color:#fff;
  display:grid;
  grid-template-columns:minmax(320px,1fr) minmax(360px,.85fr);
  gap:70px;
  align-items:center;
  padding:80px max(4vw,30px);
}
.visitor-hero-copy{max-width:720px;margin-left:auto}
.visitor-hero-copy h2,.visitor-hero-copy p{color:#fff}
.visitor-hero-copy h2{font-size:clamp(3.2rem,6vw,6rem);line-height:.94;margin:10px 0 25px}
.visitor-hero-copy .lead{font-family:'Cormorant Garamond',serif;font-size:1.8rem;line-height:1.25;color:#f1e9dc}
.visitor-hero-copy .eyebrow{color:#d6b26c;font-weight:700;letter-spacing:.18em;font-size:.78rem}
.visitor-hero-copy .hero-buttons{margin-top:30px}
.visitor-hero-image{max-width:620px;justify-self:start;position:relative;box-shadow:0 25px 80px rgba(0,0,0,.45)}
.visitor-hero-image img{width:100%;height:min(68vh,650px);object-fit:cover}
.image-caption{position:absolute;left:0;right:0;bottom:0;padding:15px 18px;background:linear-gradient(transparent,rgba(0,0,0,.9));font-size:.82rem;color:#fff;padding-top:45px}

.demo-notice{
  margin-top:22px;
  border:1px solid rgba(214,178,108,.45);
  background:rgba(176,141,87,.10);
  padding:14px 16px;
  font-size:.86rem;
  line-height:1.55;
  color:#eee;
}
.demo-notice strong{color:#e0bd78}

.journey-progress{max-width:1100px;margin:0 auto 55px;position:relative}
.progress-line{height:3px;background:#e8e0d3;position:absolute;left:6%;right:6%;top:20px}
.progress-line span{display:block;width:0;height:100%;background:var(--gold);transition:.45s ease}
.journey-dots{display:flex;justify-content:space-between;position:relative}
.journey-dot{
  border:0;background:transparent;cursor:pointer;
  width:72px;height:72px;border-radius:50%;
  background:#fff;border:1px solid #d9cfbf;color:#555;
  font-weight:700;font-family:Inter,sans-serif;
  position:relative;z-index:2;transition:.25s ease;
}
.journey-dot span{display:block;font-size:.62rem;font-weight:500;line-height:1.1;margin-top:5px}
.journey-dot.active,.journey-dot.completed{background:#111;color:#fff;border-color:#111;transform:translateY(-2px)}
.journey-dot.active{box-shadow:0 0 0 5px rgba(176,141,87,.16)}

.walk-card{
  max-width:1080px;margin:0 auto;
  background:#fff;border:1px solid var(--border);
  box-shadow:var(--shadow);
  display:grid;grid-template-columns:110px 1fr;
  min-height:390px;padding:45px;
  transition:.4s ease;
}
.hidden-panel{display:none}
.step-number{font-family:'Cormorant Garamond',serif;font-size:4.8rem;color:var(--gold);line-height:1}
.step-content{padding-left:15px}
.step-content h3{font-size:2.65rem;margin:0 0 18px}
.step-content>p{max-width:850px}
.data-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--border);margin-top:28px}
.data-grid div{padding:14px 18px;border-bottom:1px solid var(--border)}
.data-grid div:nth-child(odd){border-right:1px solid var(--border)}
.data-grid span,.technical-grid span,.status-demo span{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:#888;margin-bottom:4px}
.data-grid strong{font-weight:500}

.evidence-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:30px}
.evidence-strip div{padding:22px 16px;border:1px solid var(--border);text-align:center;font-size:1.8rem}
.evidence-strip strong,.evidence-strip span{display:block}
.evidence-strip strong{font-size:.9rem;margin-top:8px}
.evidence-strip span{font-size:.72rem;color:#777;margin-top:4px}

.timeline{border-left:2px solid var(--gold);margin:28px 0;padding-left:25px}
.timeline div{position:relative;padding:4px 0 18px}
.timeline div:before{content:"";position:absolute;left:-32px;top:9px;width:10px;height:10px;background:var(--gold);border-radius:50%}
.timeline b{display:inline-block;width:135px;font-size:.82rem}
.timeline span{color:#555}
.small-note{font-size:.78rem!important;color:#777!important;font-style:italic}

.principle-box,.boundary-box{margin-top:28px;padding:24px;background:#f7f2e9;border-left:4px solid var(--gold)}
.principle-box strong,.principle-box span,.boundary-box strong,.boundary-box span{display:block}
.principle-box strong{font-family:'Cormorant Garamond',serif;font-size:1.6rem}
.principle-box span{font-size:.9rem;color:#666}

.status-demo,.technical-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.status-demo div,.technical-grid div{border:1px solid var(--border);padding:18px}
.status-demo strong{font-size:1rem}
.technical-grid{grid-template-columns:repeat(2,1fr)}
.technical-grid strong{font-size:.95rem}

.boundary-box{background:#161616;color:#fff;border-left-color:var(--gold)}
.boundary-box strong{color:#e0bd78;font-size:1.3rem;letter-spacing:.08em}
.boundary-box span{color:#ddd;font-size:.88rem;margin-top:6px}

.binding-demo{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:28px}
.binding-demo div{padding:16px 10px;border:1px solid #ddd;text-align:center}
.binding-demo span{display:block;font-size:.72rem;color:#666;margin-bottom:8px}
.binding-demo b{color:#2d7a42;font-size:.9rem}

.three-boundaries{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}
.three-boundaries div{padding:22px;border-top:3px solid var(--gold);background:#fafafa}
.three-boundaries strong,.three-boundaries span{display:block}
.three-boundaries strong{font-family:'Cormorant Garamond',serif;font-size:1.35rem}
.three-boundaries span{font-size:.78rem;color:#777;margin-top:5px}

.walk-controls{display:flex;justify-content:center;align-items:center;gap:25px;margin-top:28px}
.walk-controls #stepCounter{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:#777;min-width:100px;text-align:center}
.walk-controls button:disabled{opacity:.35;cursor:not-allowed;transform:none!important}

.live-demo{background:#f1ede5}
.live-demo-card{max-width:1000px;margin:auto;padding:35px 40px;background:#fff;border:1px solid #ddd;display:flex;align-items:center;justify-content:space-between;gap:30px;box-shadow:var(--shadow)}
.live-demo-card h3{margin:7px 0}
.live-demo-card p{margin-bottom:0}
.live-label{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:#2d7a42;font-weight:700}

.audience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.audience-card{padding:25px;background:#fff;border:1px solid var(--border);transition:.3s}
.audience-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cbb083}
.audience-card span,.audience-card strong{display:block}
.audience-card span{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:#987640;margin-bottom:12px}
.audience-card strong{font-family:'Cormorant Garamond',serif;font-size:1.45rem;line-height:1.2}

.business-cta{margin-top:45px;padding:35px 40px;background:#111;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:35px}
.business-cta h3,.business-cta p{color:#fff}
.business-cta h3{font-size:2.2rem;margin:5px 0}
.business-cta .eyebrow{color:#d6b26c;font-size:.72rem}
.business-cta .hero-buttons{margin-top:0}

.invitation-section{background:#fff}
.invitation{max-width:900px;margin:auto;text-align:center;padding:20px 0}
.invitation h2{font-size:3.2rem}
.invitation .text-link{font-weight:700;color:var(--gold)}

@media(max-width:1000px){
  .visitor-hero{grid-template-columns:1fr;gap:35px}
  .visitor-hero-copy{order:1;margin:0}
  .visitor-hero-image{order:2;justify-self:center;width:min(620px,100%)}
  .audience-grid{grid-template-columns:repeat(2,1fr)}
  .binding-demo{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  .visitor-demo-bar{flex-direction:column;gap:2px;text-align:center}
  .visitor-hero{padding:55px 20px}
  .visitor-hero-copy h2{font-size:3.4rem}
  .visitor-hero-image img{height:520px}
  .journey-dots{overflow-x:auto;justify-content:flex-start;gap:12px;padding:0 0 10px}
  .journey-dot{flex:0 0 66px}
  .progress-line{display:none}
  .walk-card{grid-template-columns:1fr;padding:30px 24px}
  .step-number{font-size:3rem;margin-bottom:12px}
  .step-content{padding-left:0}
  .step-content h3{font-size:2.1rem}
  .data-grid,.evidence-strip,.status-demo,.technical-grid,.three-boundaries{grid-template-columns:1fr}
  .data-grid div:nth-child(odd){border-right:0}
  .binding-demo{grid-template-columns:repeat(2,1fr)}
  .live-demo-card,.business-cta{flex-direction:column;align-items:flex-start}
  .audience-grid{grid-template-columns:1fr}
  .business-cta{padding:28px 24px}
  .business-cta .hero-buttons{flex-wrap:wrap}
}