/* Jullion Club - South African rewrite additions.
   Load AFTER assets/styles.css so these rules win where they overlap. */

/* --- Hero journey card --- */
.journey-list{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  counter-reset:journey;
}
.journey-list li{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.07);
}
.journey-when{
  flex:0 0 78px;
  color:#d4af37;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.journey-what{
  color:#fff;
  font-size:1.02rem;
  font-weight:600;
  line-height:1.4;
}
.journey-note{
  margin:18px 0 0;
  color:rgba(255,255,255,.45);
  font-size:11px;
  line-height:1.6;
}

/* --- Problem section --- */
.problem-section .lede{
  font-size:1.18rem;
  line-height:1.85;
  color:var(--muted);
  max-width:760px;
  margin:0 0 20px;
}
.problem-section .lede strong{color:var(--ink)}

/* --- Timeline (what you get) --- */
.timeline{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.timeline article{
  padding:28px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:15px;
  background:rgba(255,255,255,.03);
}
.timeline article b{
  color:#d4af37;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.timeline h3{
  font-size:21px;
  margin:14px 0 8px;
  color:#fff;
}
.timeline p{color:rgba(255,255,255,.62);margin:0}
.timeline-note{
  margin:26px 0 0;
  color:rgba(255,255,255,.4);
  font-size:12px;
}

/* --- Four-step grid --- */
.steps-four{grid-template-columns:repeat(4,1fr)}

/* --- Why section --- */
.why-section{background:var(--cream)}
.reasons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.reasons>div{
  background:#fff;
  border:1px solid #e4ded2;
  border-radius:15px;
  padding:26px;
}
.reasons span{
  color:#aa8434;
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.1em;
}
.reasons h3{font-size:20px;margin:14px 0 8px}
.reasons p{color:var(--muted);margin:0}

/* --- Form tweaks --- */
.optional{
  color:var(--muted);
  font-weight:400;
  text-transform:none;
}

/* --- Responsive --- */
@media(max-width:900px){
  .timeline{grid-template-columns:1fr}
  .steps-four{grid-template-columns:1fr 1fr}
  .reasons{grid-template-columns:1fr}
}
@media(max-width:800px){
  .steps-four{grid-template-columns:1fr}
  .journey-when{flex-basis:70px}
  .problem-section .lede{font-size:1.05rem}
}