/* ---------- GAME GROUPS ---------- */

.steps-section{padding:70px 0 60px;min-width:0}
.game-group{padding:16px 0 38px}

.steps-header{
  margin-bottom:26px;
  text-align:center;
  container-type:inline-size;
}

/* FIX 1: title can wrap, never clipped */
.steps-title{
  font-size:clamp(1rem,5cqw,2rem);
  font-weight:800;
  white-space:normal;
  text-wrap:balance;
  overflow-wrap:break-word;
  text-align:center;
  line-height:1.2;
  padding-bottom:.08em;           /* stops gradient text clipping descenders */
  letter-spacing:-.02em;
  margin-bottom:14px;
  background:linear-gradient(135deg,#fff 0%,#eafff7 40%,var(--green-1) 70%,var(--purple-1) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.group-intro-text{
  margin:0 auto;
  max-width:620px;
  text-align:center;
  font-size:1.05rem;
}

/* ---------- GRID: ALWAYS 3 CARDS PER ROW ---------- */

.game-group .tools-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(6px,1.8vw,14px);
  align-items:stretch;
}
.game-group .tools-grid .tool-card:last-child:nth-child(odd){grid-column:auto}

/* ---------- GAME CARDS (scale with their own width) ---------- */

.game-card{
  container-type:inline-size;
  min-height:0;
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-decoration:none;
  text-align:center;
  border-color:rgba(139,92,246,.3);
  background:linear-gradient(155deg,rgba(139,92,246,.16),rgba(10,17,22,.94) 52%,rgba(52,211,153,.08));
  box-shadow:0 10px 25px rgba(0,0,0,.3);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.game-card:hover{
  transform:translateY(-3px);
  border-color:rgba(52,211,153,.45);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
}

.game-card-content{
  width:100%;
  flex:1;
  padding:8cqw 5cqw 7cqw;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  box-sizing:border-box;
}

/* ---------- BENEFIT PILL ---------- */

.game-benefit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:0;
  padding:.45em .8em;
  margin-bottom:5cqw;
  border:1px solid rgba(52,211,153,.38);
  border-radius:999px;
  background:rgba(52,211,153,.08);
  color:var(--green-1);
  font-size:clamp(.4rem,4cqw,.61rem);
  font-weight:400;
  line-height:1.2;
  letter-spacing:.05em;
  text-transform:uppercase;
}

/* ---------- GAME NAME ---------- */

.game-card h3{
  margin:0 0 5cqw;
  color:var(--text);
  font-size:clamp(.55rem,6.5cqw,1rem);
  font-weight:700;
  line-height:1.25;
  text-transform:uppercase;
}

/* ---------- GAME VISUAL ---------- */

.game-demo{
  width:100%;
  min-height:clamp(70px,63cqw,155px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--text);
  font-size:clamp(.9rem,11cqw,1.7rem);
  font-weight:500;
  line-height:1.35;
  flex-shrink:0;
}

.game-question{
  width:100%;
  max-width:none;
  margin:5cqw auto 0;
  color:#d7e5df;
  font-size:clamp(.5rem,5.4cqw,.82rem);
  font-weight:300;
  line-height:1.4;
}

.tool-play{
  margin-top:auto;
  padding-top:5cqw;
  color:var(--green-1);
  font-size:clamp(.5rem,5.2cqw,.8rem);
  font-weight:700;
  letter-spacing:.04em;
}

/* ---------- BACK TRACK ---------- */

.backtrack-demo{gap:2cqw}

.demo-symbol{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  font-size:clamp(1.1rem,14.7cqw,2.25rem);
}

.demo-arrow{
  font-size:clamp(.6rem,6.5cqw,1rem);
  line-height:1;
  color:rgba(234,255,247,.55);
}

/* ---------- SEQUENCE RECALL ---------- */

.sequence-demo{
  gap:3cqw;
  min-height:clamp(70px,63cqw,155px);
}

.sequence-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:3cqw;
}

.sequence-row span{
  width:clamp(9px,10cqw,25px);
  height:clamp(9px,10cqw,25px);
  border-radius:4px;
  display:block;
}

.sequence-grey{
  background:#3a4542;
  border:1px solid rgba(255,255,255,.06);
}

.sequence-green{
  background:var(--green-1);
  box-shadow:0 0 10px rgba(52,211,153,.25);
}

/* ---------- SPOT IT ---------- */

.spotit-demo{
  gap:1cqw;
  font-size:clamp(.9rem,11.5cqw,1.75rem);
  letter-spacing:.04em;
}

/* ---------- FACE MATCH ---------- */

.facematch-demo{
  gap:1cqw;
  font-size:clamp(.9rem,10.8cqw,1.65rem);
}

/* ---------- TRAFFIC LEGEND ---------- */

.traffic-demo{
  gap:3cqw;
  font-size:clamp(.8rem,10cqw,1.55rem);
  font-weight:600;
}

.traffic-demo div{
  min-width:0;
  text-align:left;
}

.traffic-demo span{
  display:inline-block;
  margin:0 2.5cqw;
  color:rgba(234,255,247,.5);
}

/* ---------- BRAIN GYM ---------- */

.braingym-demo{
  gap:2cqw;
  font-size:clamp(.7rem,7.5cqw,1.15rem);
  line-height:1.45;
}

.braingym-demo strong{
  color:var(--green-1);
  font-size:clamp(.8rem,8.8cqw,1.35rem);
}

/* ---------- REMEMBER ---------- */

.remember-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  margin:48px 0 30px;
  padding:17px;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,rgba(52,211,153,.10),rgba(139,92,246,.12));
  border:1px solid rgba(167,139,250,.22);
  box-shadow:0 14px 35px rgba(0,0,0,.25);
  align-items:center;
}

.remember-garden{
  padding-right:17px;
  border-right:1px solid rgba(167,139,250,.20);
}

.remember-label{
  margin-bottom:3px;
  color:var(--green-1);
  font-size:14px;
  font-weight:800;
  letter-spacing:.08em;
}

.remember-text{
  color:var(--text);
  font-size:14px;
  font-weight:200;
  line-height:1.3;
}

/* =========================================================
   RESPONSIVE (cards no longer change column count)
========================================================= */

@media(max-width:1024px){
  .steps-section{padding-top:63px}
}

@media(max-width:768px){
  .steps-section{padding:48px 0 42px}
  .game-group{padding:0 0 26px}
  .steps-header{margin-bottom:18px}
  .group-intro-text{font-size:.95rem}
  .game-card:hover{transform:none}
  .remember-section{grid-template-columns:1fr;gap:18px;margin:38px 0 25px;padding:18px}
  .remember-garden{padding-right:0;padding-bottom:18px;border-right:none;border-bottom:1px solid rgba(167,139,250,.20)}
}

@media(max-width:480px){
  .steps-section{padding-top:44px}
  .remember-section{margin-top:30px}
  .remember-text{font-size:13px}
}