:root{
  --brand-purple:#E87820;
  --brand-purple-dark:#E87820;
  --brand-purple-light:#f2effc;
  --bronze:#C67C3E;
  --bronze-bg:#fbeee1;
  --silver:#8992A3;
  --silver-bg:#eef0f4;
  --gold:#D89A2A;
  --gold-bg:#fdf3dd;
  --platinum:#8E7BC7;
  --platinum-bg:#f1eefb;
  --text-dark:#1f2430;
  --text-muted:#6b7280;
  --border-soft:#e9ebf1;
  --page-bg:#f6f7fb;
}
body{
  background:var(--page-bg);
  font-family:'Inter',sans-serif;
  color:var(--text-dark);
}
.page-wrap{max-width:1200px;margin:0 auto;padding:24px 16px 56px;}

/* Header */
.page-title{font-weight:800;font-size:1.5rem;margin-bottom:2px;}
.breadcrumb-row{font-size:.85rem;color:var(--text-muted);}
.breadcrumb-row a{color:var(--text-muted);text-decoration:none;}
.breadcrumb-row .current{color:var(--text-dark);font-weight:500;}
.btn-guide{
  border:1px solid var(--border-soft);
  background:#fff;color:var(--text-dark);
  font-weight:600;font-size:.85rem;
  border-radius:10px;padding:.5rem 1rem;
  white-space:nowrap;
}
.btn-guide:hover{background:#f8f8fa;}

/* Current tier summary card */
.summary-card{
  background:#fff;border:1px solid var(--border-soft);
  border-radius:16px;padding:20px 24px;
  box-shadow:0 1px 3px rgba(20,20,43,.04);
}
.badge-circle{
  width:56px;height:56px;border-radius:50%;
  background:var(--brand-purple-light);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;color:var(--brand-purple);flex-shrink:0;
}
.tier-label{font-size:.78rem;color:var(--text-muted);font-weight:500;}
.tier-name{font-size:1.3rem;font-weight:800;color:var(--brand-purple);}
.progress-caption{font-size:.78rem;color:var(--text-muted);}
.progress-pct{font-size:.78rem;font-weight:700;color:var(--brand-purple);}
.progress{height:8px;border-radius:6px;background:#eceaf7;}
.progress-bar-brand{background:var(--brand-purple);border-radius:6px;}
.progress-note{font-size:.8rem;color:var(--text-muted);margin-top:6px;}

.stat-icon{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;flex-shrink:0;
}
.stat-label{font-size:.75rem;color:var(--text-muted);font-weight:500;}
.stat-value{font-size:1.05rem;font-weight:700;line-height:1.2;}
.stat-sub{font-size:.72rem;color:var(--text-muted);}

/* Section title */
.section-title{font-weight:800;font-size:1.2rem;margin-bottom:2px;}
.section-sub{font-size:.85rem;color:var(--text-muted);}

/* Tier cards (desktop/tablet grid) */
.tiers-panel{
  background:#fff;border:1px solid var(--border-soft);
  border-radius:16px;padding:24px;
  box-shadow:0 1px 3px rgba(20,20,43,.04);
}
.tier-card{
  border:1px solid var(--border-soft);
  border-radius:14px;
  padding:20px 18px;
  height:100%;
  display:flex;flex-direction:column;
  position:relative;
  background:#fff;
}
.tier-card.current{
  border:2px solid var(--brand-purple);
  box-shadow:0 4px 16px rgba(108,76,224,.12);
}
.current-flag{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--brand-purple);color:#fff;
  font-size:.72rem;font-weight:700;
  padding:4px 14px;border-radius:999px;
  white-space:nowrap;
}
.tier-icon-badge{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;margin-bottom:10px;
}
.tier-card h3{font-size:1.05rem;font-weight:800;margin-bottom:6px;}
.tier-card .tier-tagline{font-size:.8rem;color:var(--text-muted);margin-bottom:14px;min-height:34px;}
.req-label{font-size:.72rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.02em;}
.req-value{font-size:.85rem;font-weight:700;margin-bottom:14px;}

.feature-list{list-style:none;margin:0;padding:0;flex-grow:1;}
.feature-list li{
  display:flex;justify-content:space-between;align-items:flex-start;gap:8px;
  padding:9px 0;border-bottom:1px dashed var(--border-soft);
  font-size:.85rem;
}
.feature-list li:last-child{border-bottom:none;}
.feature-name{color:var(--text-muted);}
.feature-val{font-weight:600;text-align:right;}
.feature-val.yes{color:#1f9d55;}
.feature-val.no{color:#d1495b;}

.tier-cta{
  margin-top:16px;width:100%;
  border-radius:10px;font-weight:700;font-size:.85rem;
  padding:.55rem;
}

/* Feature key column (desktop only, leftmost) */
.feature-key-col{padding-top:0;}
.feature-key-col .key-spacer{height:170px;}
.feature-key-list{list-style:none;margin:0;padding:0;}
.feature-key-list li{
  display:flex;align-items:center;gap:8px;
  padding:9px 0;border-bottom:1px dashed transparent;
  font-size:.85rem;font-weight:600;color:var(--text-dark);
  min-height:38.5px;
}
.feature-key-list .key-icon{
  width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;flex-shrink:0;
}

/* Footer note bar */
.footer-note{
  background:#fff;border:1px solid var(--border-soft);
  border-radius:14px;padding:14px 20px;
  font-size:.82rem;color:var(--text-muted);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
}
.footer-note a{color:var(--brand-purple);text-decoration:none;font-weight:600;}

/* Mobile tab nav for tiers */
.tier-tabs .nav-link{
  border-radius:10px;font-weight:700;font-size:.82rem;
  color:var(--text-muted);border:1px solid var(--border-soft);
  margin-right:6px;padding:.4rem .8rem;
}
.tier-tabs .nav-link.active{
  background:var(--brand-purple);color:#fff;border-color:var(--brand-purple);
}

@media (max-width:991.98px){
  .summary-card .row > div{margin-bottom:6px;}
}
@media (max-width:575.98px){
  .stat-icon{width:36px;height:36px;font-size:.95rem;}
  .stat-value{font-size:.85rem;}
  .stat-label{font-size:.68rem;}
  .stat-sub{font-size:.65rem;}
  .tier-name{font-size:1.1rem;}
}