/* ==================================================
  PROGRESS PAGE
================================================== */
.apx-partner .img-block{
  max-height:none;
  background:transparent;
  margin-bottom:0;
  border-radius:0;
  box-shadow:none;
  position:static;
}
.apx-partner .img-block::after{ content:none; }

.apx-logo-wrapper{
  background:#ffffff;
  padding:16px 20px;
  border-radius:12px;
  display:inline-block;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
}
.apx-logo-wrapper img{
  display:block;
  max-width:260px;
  height:auto;
}

.progress-hero p{
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.progress-grid .card{ height: 100%; }

/* Split card: content left, media right */
.card-split{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 16px;
  align-items: stretch;
}

.card-split__content{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.card-split__content .btn-row{ margin-top: auto; }

/* Media frames (common sizes) */
.card-media{
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.media-frame{
  width: 100%;
  display: block;
}

/* Common aspect ratios */
.media-16x10{ aspect-ratio: 16 / 10; }
.media-4x3{ aspect-ratio: 4 / 3; }

.media-frame img{
  width: 100%;
  height: 100%;
  display: block;
}

/* Photo fill */
.media-cover img{ object-fit: cover; }

/* Screenshot/app images (don’t crop) */
.media-contain{
  padding: 12px;
}
.media-contain img{
  object-fit: contain;
}

/* Phase selector (replaces ugly wall of buttons) */
.phase-select{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.phase-select select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight: 700;
  outline: none;
}

.phase-select select:focus{
  border-color: rgba(255,255,255,.22);
}

.progress-list-tight{
  margin-top: .5rem;
  margin-bottom: 0;
  padding-left: 1.1rem;
}
.progress-list-tight li + li{ margin-top: .25rem; }

/* Mobile */
@media (max-width: 800px){
  .card-split{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .phase-select{ grid-template-columns: 1fr; }
}

/* Progress feature cards: image banner + content (better flow than side thumbnails) */
.progress-feature{
  padding: 0;            /* banner needs full width */
  overflow: hidden;
  border-radius: 20px;
}

/* Inner content padding to match your card feel */
.progress-body{
  padding: 22px 24px 24px;
}

/* Banner media: consistent placement */
.progress-media{
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.progress-media img{
  width: 100%;
  height: 100%;
  display: block;
}

/* Photo/graphic */
.progress-media--cover img{ object-fit: cover; }

/* App/screenshot */
.progress-media--contain{
  padding: 10px 12px;
}
.progress-media--contain img{ object-fit: contain; }

/* Shorter media block for monthly section so it doesn’t dominate */
.progress-media--short{
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  border-bottom: none;
}

/* Phase pills (no dropdown) */
.phase-pill-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.phase-btn-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap:10px;
  margin-top:12px;
}

.phase-btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding:.32rem .58rem;
  border-radius:6px;
  border:1px solid var(--btn-secondary-border);
  background:var(--btn-secondary-bg);
  color:var(--btn-secondary-text);
  font-weight:700;
  font-size:.82rem;
  text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  box-shadow:0 1px 5px rgba(0,0,0,.10);
}
.phase-btn:hover{
  background:var(--btn-secondary-hover-bg);
  transform:translateY(-1px);
  box-shadow:0 2px 7px rgba(0,0,0,.12);
  border-color:var(--btn-secondary-text);
}
.phase-btn:active{
  transform:translateY(0);
  box-shadow:0 1px 2px rgba(0,0,0,.1);
}

.inline-note{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.08);
  font-weight:700;
  color:var(--text-200);
}

@media (max-width: 768px){
  .progress-body{ padding:18px 20px 20px; }
}