body{font-family:Arial,sans-serif;background:#f3f5f7;margin:0;color:#222}
.container{max-width:1500px;margin:auto;padding:30px}
.foundation{background:#16579f;color:#fff;padding:30px;border-radius:18px}
.eyebrow{font-size:12px;letter-spacing:1px;font-weight:bold}
.foundation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.foundation-card{background:rgba(255,255,255,.12);padding:16px;border-radius:10px}
.journey{background:#fff;padding:20px;border-radius:14px;margin:20px 0}
.journey-line{font-size:22px;font-weight:bold}
.lead{margin-top:80px;text-align:center;font-size:18px}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}
.tab-btn{padding:14px 20px;border-radius:10px;border:1px solid #ccc;background:#fff;cursor:pointer}
.persona-header{padding:24px;color:#fff;border-radius:16px 16px 0 0}
.persona-content{background:#fff;padding:24px;border-radius:0 0 16px 16px}
blockquote{border-left:4px solid #4db7d6;padding-left:18px;font-size:22px;font-style:italic}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card{background:#f7f7f7;padding:16px;border-radius:10px}
.card h3{margin-top:0}
.section-title{margin-top:28px;border-bottom:1px solid #ddd;padding-bottom:8px}
.phases{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.phase{padding:8px 12px;border-radius:999px;background:#e5e7eb}
@media(max-width:900px){.grid,.foundation-grid{grid-template-columns:1fr}}


/* V6.1 — colored tabs + hover + colored journey phases */
.tabs{
  align-items:center;
}

.tab-btn{
  position:relative;
  overflow:hidden;
  font-weight:700;
  transition:all .22s ease;
}

.tab-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

.tab-btn.active{
  color:#fff;
  box-shadow:0 10px 22px rgba(0,0,0,.16);
}

.phase{
  font-weight:700;
  transition:all .2s ease;
}

.phase.active{
  color:#fff;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}

.phase:hover{
  transform:translateY(-1px);
}