.progressOverview {
    max-width: 400px;
    background: #e3deff;
    border-radius: 16px;
    display: inline-block;
    padding:40px;
    margin-bottom: 10px;
    margin-right: 8px;
    vertical-align: top;
}

.streakContainer {
    background: #e3deff;
    border-radius: 16px;
    padding:20px;
    margin-bottom: 10px;
    text-align: center;
}

.progressChart {
    background: #e3deff;
    border-radius: 16px;
    padding:30px;
    padding-bottom:20px;
    margin-bottom: 10px;
}

.progressMeterChartRow > .progressChart {
    margin-bottom: 10px;
}

.progressAdherenceMount {
    margin-bottom: 10px;
}

.progressAdherenceMount .adherenceMeter {
    margin: 0;
    max-width: 100%;
}

.progressAdherenceMount .recoveryPillarsCard {
    padding: 24px 28px;
}

.progressAdherenceMount .rpTitle,
.progressAdherenceMount .rpSubtitle,
.progressAdherenceMount .rpCombined {
    display: none;
}

.progressAdherenceMount .rpPillars {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}

.progressAdherenceMount .rpPillar {
    flex: 1 1 220px;
    border-top: none;
    padding: 10px 0;
}

.recommendedExercises {
    background: #e3deff;
    border-radius: 16px;
    padding:40px;
    padding-bottom: 10px;
}

.innerRecommendedExercises {
    padding-bottom:10px;
}

.rightSideContainer {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 415px);
}

.progressHighlight {
    background:#e3deff;
    border-radius: 16px;
    margin:4px;
    padding: 8px;
    padding-right: 2px;
    max-width: 400px;
    min-width:330px;
    height:150px;
    display: inline-block;
    vertical-align: top;
}

.progressHighlightLeft {
    width:100px;display:inline-block;
    padding-top:12px;
    height:100%;
}

.progressHighlightRight {
    margin-left:16px;width:200px;display:inline-block;vertical-align:middle;
}

.progressHighlightImgContainer {
    height:110px;width:110px;background:white;border-radius:110px;text-align:center;padding-top:8px;
}

.highlightContainer {
    display: block;
    vertical-align: top;
    width: 100%;
    background: #e3deff;
    border-radius: 16px;
    padding:40px;
    padding-bottom: 10px;
}

.progressTitle {
    font-style: normal;
    font-weight: 600;
    font-size: 40px;
    line-height: 125%;
}

.progressStatContainer {
    height: 101px;

    background: white;
    border-radius: 16px;
    padding:10px;
    margin-bottom: 10px;
}

.streakContainer {
    position:relative;
}

.pastStreakEntry {
    position: absolute;
    width:25px;
    height:175px;
    margin:10px;
    z-index: 110;
    left: 10px;
    background:green;
}

.streakEntry {
    border: 2px solid white;
    height:180px;
    background: white;
    border-radius: 16px;
    padding:10px;
    display: inline-block;
    width:275px;
    margin:10px;
    min-width: 200px;
}

.progressStatTitle {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
}

.progressStatTitle.small {
    font-size: 14px;
}

.streakRecord {
    color:var(--bia-muted);
}

.recordStreak {
    border: 2px solid #6c5fc0;
    background: #fbe2c0;
}


@media only screen and (max-width: 998px) {
  .rightSideContainer {
        width:100%;
    }
    .progressOverview {
        width:100%;
        max-width: 100%;
    }
}


@media only screen and (max-width: 768px) {
    .progressOverview {
        padding:10px;
        width:100%;
    }

    .progressChart {
        padding:20px;
        width:100%;
    }

    .rightSideContainer {
        width:100%;
    }

    .highlightContainer {
        padding:10px;
    }

    .innerRecommendedExercises {
        overflow-x: scroll;
        white-space: nowrap;
    }

    }

/* ── Progress Calendar & Streak Redesign ──────────────────────────────────── */

/* Outer flex wrapper: streak card + calendar card side by side */
.pc-wrap {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    align-items: flex-start;
}

/* ── Streak card ──────────────────────────────────────────────────────────── */
.pc-streak-card {
    flex: 0 0 200px;
    background: linear-gradient(145deg, #6c5ce7 0%, #6c5fc0 100%);
    border-radius: 18px;
    padding: 20px 16px 16px;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 180px;
}

.pc-streak-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pc-streak-flame {
    font-size: 34px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.pc-streak-nums { flex: 1; }

.pc-streak-big {
    font-size: 40px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.pc-streak-unit {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.85;
    margin-top: 2px;
}

.pc-streak-best {
    text-align: center;
    background: rgba(255,255,255,0.18);
    border-radius: 10px;
    padding: 6px 10px;
}

.pc-streak-best-num {
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}

.pc-streak-best-lbl {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.8;
}

.pc-streak-msg {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.9;
    line-height: 1.4;
}

.pc-dot-row {
    display: flex;
    justify-content: space-between;
}

.pc-dot-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pc-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    border: 2px solid rgba(255,255,255,0.3);
}

.pc-dot--on {
    background: white;
    border-color: white;
    box-shadow: 0 0 6px rgba(255,255,255,0.6);
}

.pc-dot--today {
    border-color: white;
    border-width: 2.5px;
}

.pc-dot-lbl {
    font-size: 10px;
    font-weight: 700;
    opacity: 0.7;
}

/* ── Calendar card ────────────────────────────────────────────────────────── */
.pc-cal-card {
    flex: 1;
    background: white;
    border-radius: 18px;
    padding: 16px;
    min-width: 0;
}

/* Origin star marker */
.cal-heatmap-origin-star {
    position: absolute;
    bottom: 1px;
    right: 2px;
    font-size: 8px;
    line-height: 1;
    color: rgba(255,255,255,0.9);
}

.cal-heatmap-cell {
    position: relative; /* needed for origin star */
}

/* Day number must stay readable across the whole heatmap intensity range, up to the
   solid purple of the busiest cells -- only a near-black passes AA on that mid-tone. */
.cal-heatmap-day-num {
    color: #1a1a2e;
}

.cal-heatmap-cell--origin {
    outline: 2px solid #ffc870;
    outline-offset: -2px;
}

.cal-heatmap-cell--planned {
    border: 2px dashed #ffc870;
    background: rgba(255,200,112,0.15) !important;
}
.cal-heatmap-cell--planned .cal-heatmap-day-num { color: #c9a227; }

/* ── Type legend ──────────────────────────────────────────────────────────── */
.pc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f0eeff;
}

.pc-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pc-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.pc-legend-lbl {
    font-size: 11px;
    color: #888;
    font-weight: 500;
}

/* ── Responsive: stack on narrow screens ─────────────────────────────────── */
@media (max-width: 520px) {
    .pc-wrap { flex-direction: column; }
    .pc-streak-card { flex: none; width: 100%; box-sizing: border-box; }
}


/* ── Parent Progress: combined tabs, activity table, journey accordion ───── */

.pp-section {
    width: 100%;
    margin-top: 8px;
    background: #e3deff;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 10px;
}

/* Tabs */
.pp-tab-bar {
    display: flex;
    border-bottom: 2px solid #d0c8f8;
    background: #e3deff;
    padding: 0 16px;
    gap: 4px;
}

.pp-tab {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #5b4fb0;
    padding: 14px 20px 12px;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    border-radius: 0;
    transition: color 0.15s, border-color 0.15s;
}

.pp-tab:hover {
    color: #4a3da8;
}

.pp-tab.active {
    color: #4a3da8;
    border-bottom-color: #6c5fc0;
}

.pp-tab-panel {
    padding: 16px 16px 20px;
}

/* Explainer */
.pp-explainer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: white;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 1px solid #d8d2f8;
}

.pp-explainer-icon {
    flex-shrink: 0;
    color: #6c5fc0;
    margin-top: 1px;
}

.pp-explainer-text {
    font-size: 13px;
    color: #5a5280;
    line-height: 1.5;
}

/* Overall progress bar */
.pp-overall-bar-wrap {
    margin-bottom: 18px;
}

.pp-overall-bar-labels {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

.pp-overall-bar-title {
    font-weight: 700;
    font-size: 14px;
    color: #2a2540;
}

.pp-overall-bar-pct {
    font-weight: 800;
    font-size: 18px;
    color: #1a5c43;
}

.pp-overall-bar-sub {
    font-size: 12px;
    color: #595959;
    margin-top: 4px;
}

.pp-bar-track {
    height: 10px;
    background: rgba(255,255,255,0.6);
    border-radius: 99px;
    overflow: hidden;
}

.pp-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.4s ease;
}

.pp-bar-fill--complete { background: linear-gradient(90deg, var(--bia-teal), #3db896); }
.pp-bar-fill--active   { background: linear-gradient(90deg, #89C4FF, #5aa8f0); }
.pp-bar-fill--locked   { background: #c8c2e8; }
.pp-bar-fill--done     { background: var(--bia-teal-surface); }

/* Chapter accordion */
.pp-accordion {
    background: white;
    border-radius: 14px;
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(145,135,211,0.13);
}

.pp-accordion--locked {
    opacity: 0.75;
}

.pp-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.pp-accordion-header:hover {
    background: #f5f3ff;
}

.pp-acc-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.pp-acc-dot {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.pp-acc-dot--done   { background: var(--bia-teal-surface); }
.pp-acc-dot--active { background: #89C4FF; box-shadow: 0 0 0 3px rgba(137,196,255,0.3); }
.pp-acc-dot--locked { background: #c8c2e8; }

.pp-acc-info {
    min-width: 0;
}

.pp-acc-name {
    font-weight: 700;
    font-size: 15px;
    color: #2a2540;
    line-height: 1.2;
}

.pp-acc-count {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.pp-acc-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.pp-acc-bar-mini {
    width: 80px;
    height: 6px;
    background: #ede9ff;
    border-radius: 99px;
    overflow: hidden;
}

.pp-acc-bar-fill {
    height: 100%;
    border-radius: 99px;
}

.pp-acc-bar-fill--done   { background: var(--bia-teal-surface); }
.pp-acc-bar-fill--active { background: #89C4FF; }
.pp-acc-bar-fill--locked { background: #c8c2e8; }

.pp-acc-chevron {
    color: #6c5fc0;
    transition: transform 0.22s ease;
    flex-shrink: 0;
}

.pp-accordion--open .pp-acc-chevron {
    transform: rotate(180deg);
}

/* Accordion body: hidden by default, visible when open */
.pp-accordion-body {
    display: none;
    border-top: 1px solid #ede9ff;
}

.pp-accordion--open .pp-accordion-body {
    display: block;
}

.pp-lock-msg {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #5b4fb0;
    background: #f0eeff;
    padding: 10px 14px;
    border-bottom: 1px solid #e4dfff;
}

.pp-lock-msg svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.pp-chapter-desc-body {
    font-size: 13px;
    color: #6b6485;
    padding: 10px 16px 4px;
    line-height: 1.5;
    margin: 0;
}

/* Exercise rows inside accordion */
.pp-ex-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f4f2ff;
    transition: background 0.12s;
}

.pp-ex-row:last-child {
    border-bottom: none;
}

.pp-ex-row:hover {
    background: #faf9ff;
}

.pp-ex-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 5px;
}

.pp-ex-dot--complete  { background: var(--bia-teal-surface); }
.pp-ex-dot--progress  { background: #ffc870; }
.pp-ex-dot--improve   { background: #fb7179; }
.pp-ex-dot--locked    { background: #c8c2e8; }
.pp-ex-dot--available { background: #89C4FF; box-shadow: 0 0 0 3px rgba(137,196,255,0.25); }
.pp-ex-dot--skipped, .pp-ex-dot--shadow-skipped { background: #b0accc; }

.pp-ex-body {
    flex: 1;
    min-width: 0;
}

.pp-ex-title {
    font-weight: 600;
    font-size: 14px;
    color: #2a2540;
    line-height: 1.35;
}

.pp-ex-desc {
    font-size: 13px;
    color: #6b6485;
    margin-top: 3px;
    line-height: 1.45;
}

.pp-ex-status-msg {
    font-size: 12px;
    font-weight: 500;
    margin-top: 4px;
    border-radius: 6px;
    display: inline-block;
    padding: 2px 8px;
}

.pp-ex-status-msg--complete  { color: #1a7a50; background: #e8faf3; }
.pp-ex-status-msg--progress  { color: #7a5000; background: #fff8e8; }
.pp-ex-status-msg--improve   { color: #9a1c22; background: #fde8e9; }
.pp-ex-status-msg--locked    { color: #5a4f8a; background: #f0eeff; }
.pp-ex-status-msg--available { color: #1a5f9e; background: #e8f4ff; }

.pp-ex-badge-wrap {
    flex-shrink: 0;
    align-self: center;
}

.pp-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}

.pp-badge--complete  { background: #d4f5e8; color: #1a7a50; }
.pp-badge--progress  { background: #fff3d4; color: #7a5000; }
.pp-badge--improve   { background: #fde8e9; color: #9a1c22; }
.pp-badge--locked    { background: #f0eeff; color: #5b4fb0; }
.pp-badge--available { background: #dceeff; color: #1a5f9e; }

/* Activity table */
.pp-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    min-width: 440px;
}

.pp-table thead tr {
    background: #6c5fc0;
    color: white;
}

.pp-table th {
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.3px;
}

.pp-table th:first-child { border-radius: 10px 0 0 10px; }
.pp-table th:last-child  { border-radius: 0 10px 10px 0; }

.pp-table tbody tr {
    background: white;
    transition: background 0.15s;
}

.pp-table tbody tr:nth-child(even) {
    background: #f3f0ff;
}

.pp-table tbody tr:hover {
    background: #d4ccff;
}

.pp-table td {
    padding: 11px 14px;
    vertical-align: middle;
    border-bottom: 1px solid #e8e4ff;
}

.pp-table tbody tr:last-child td {
    border-bottom: none;
}

.pp-sud {
    display: inline-block;
    font-weight: 700;
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 5px;
    line-height: 1.3;
}

.pp-sud-low  { color: #1a7a50; background: #d4f5e8; }
.pp-sud-mid  { color: #a05a00; background: #fff0d4; }
.pp-sud-high { color: #b5242c; background: #fde8e9; }

/* Responsive */
@media (max-width: 600px) {
    .pp-tab { padding: 12px 14px 10px; font-size: 14px; }
    .pp-tab-panel { padding: 12px 10px 16px; }

    .pp-acc-bar-mini { width: 50px; }
    .pp-accordion-header { padding: 12px 12px; }
    .pp-ex-row { gap: 10px; padding: 10px 12px; }
    .pp-ex-desc { font-size: 12px; }

    .pp-table,
    .pp-table thead,
    .pp-table tbody,
    .pp-table th,
    .pp-table td,
    .pp-table tr { display: block; }

    .pp-table { min-width: 0; }
    .pp-table thead tr { display: none; }

    .pp-table tbody tr {
        margin-bottom: 10px;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(145,135,211,0.18);
    }

    .pp-table td {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 9px 14px;
        border-bottom: 1px solid #ede9ff;
    }

    .pp-table td:last-child { border-bottom: none; }

    .pp-table td::before {
        content: attr(data-label);
        flex: 0 0 90px;
        font-weight: 600;
        font-size: 12px;
        color: #6c5fc0;
        padding-top: 2px;
    }
}

/* ── Recovery Pillars page ────────────────────────────────────────────────── */

.pillarsPage {
    max-width: 980px;
    margin: 0 auto;
    padding: 8px 12px 40px;
    box-sizing: border-box;
}

.pillarsHero {
    display: none;
}

.pillarsTitle {
    margin: 0 0 6px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    color: #2a2744;
}

.pillarsSubtitle {
    margin: 0 0 10px;
    font-size: 14px;
    color: #4c476b;
    max-width: 640px;
    line-height: 1.45;
}

.pillarsRingsMount {
    margin-top: 4px;
}

.pillarsRingsMount .adherenceMeterMount .adherenceMeter {
    margin: 0;
    max-width: 100%;
}

.pillarsRingsMount .recoveryPillarsCard {
    background: #ffffff;
    border: 1px solid #efecfb;
    padding: 22px 24px;
}

.pillarSection {
    background: #ffffff;
    border-radius: 0 0 20px 20px;
    padding: 0;
    margin-bottom: 14px;
    border: 1px solid #efecfb;
    overflow: hidden;
    position: relative;
}

/* Tab-swap: only the active panel is visible. */
.pillarSection[data-pillar-key]:not(.pillarSection--active) {
    display: none;
}

.pillarSection[data-pillar-key].pillarSection--active {
    animation: progPillarPanelIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes progPillarPanelIn {
    from {
        opacity: 0;
        transform: translateX(18px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.pillarSectionContent {
    padding: 20px 24px 22px;
}

.pillarSectionIntro {
    margin: 0 0 14px;
    font-size: 13px;
    color: #6b6b82;
    line-height: 1.5;
    max-width: 640px;
}

/* pillarGauge styles live in css/adherence.css so the component stays usable
   anywhere the adherence meter ships (progress page, exercise page, etc.). */

/* Pillars sub-nav: rendered as physical folder tabs sitting on top of the active
   panel. The active tab overlaps the panel's top border so the two blend into one
   continuous surface; inactive tabs sit lower and recede behind. */
.pillarsSubNav {
    display: flex;
    gap: 4px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    align-items: stretch;
}

.pillarsSubNavItem:first-child {
    border-top-left-radius: 20px;
}
.pillarsSubNavItem:last-child {
    border-top-right-radius: 20px;
}

.pillarsSubNavItem {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px 14px;
    border: 1px solid #efecfb;
    border-bottom: none;
    border-radius: 14px 14px 0 0;
    background: #f3effc;
    color: #6b6b82;
    text-decoration: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    margin-top: 6px;
    margin-bottom: -1px;
    transition: margin-top 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.pillarsSubNavItem:not(.pillarsSubNavItem--active):hover {
    color: #2a2744;
    text-decoration: none;
    margin-top: 3px;
    background: #faf7ff;
}

.pillarsSubNavItem--active {
    color: #2a2744;
    background: #ffffff;
    margin-top: 0;
    z-index: 2;
}

.pillarsSubNavItem__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Highlights sub-tabs (Achievements / Glossary) */
.highlightsSubNav {
    display: flex;
    gap: 8px;
    padding: 6px;
    margin-bottom: 18px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid #efecfb;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(145, 135, 211, 0.1);
}

.highlightsSubNavItem {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #6b6b82;
    text-decoration: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.highlightsSubNavItem:hover {
    background: #f5f2ff;
    color: #2a2744;
}

.highlightsSubNavItem--active {
    color: #2a2744;
    background: rgba(145, 135, 211, 0.18);
}

.highlightsSubNavItem__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.highlightsSubPanel {
    display: none;
    animation: progPanelIn 0.2s ease-out;
}

.highlightsSubPanel--active {
    display: block;
}

/* Practice KPIs */
.pillarKpis {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.pillarKpi {
    flex: 1 1 140px;
    background: #ffffff;
    border: 1px solid #ece9f7;
    border-radius: 12px;
    padding: 16px 16px 14px 22px;
    min-width: 120px;
    position: relative;
    cursor: default;
    box-shadow: 0 2px 8px rgba(145, 135, 211, 0.06);
}

.pillarKpi::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 16px;
    bottom: 14px;
    width: 3px;
    border-radius: 3px;
    background: var(--bia-teal-surface);
}

.pillarKpiBadge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #4a3da8 0%, #2f9275 100%);
    animation: pillarKpiBadgePulse 2s ease-in-out infinite;
}

.pillarKpiBadge svg {
    flex: 0 0 auto;
}

@keyframes pillarKpiBadgePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pillarKpiBadge { animation: none; }
}

.pillarKpiNum {
    font-size: 30px;
    font-weight: 700;
    color: #2a2744;
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.pillarKpiOf {
    font-size: 15px;
    font-weight: 500;
    color: #6b6880;
    margin-left: 2px;
}

.pillarKpiLbl {
    font-size: 11.5px;
    color: #6b6880;
    margin-top: 6px;
    font-weight: 500;
}

/* Monthly calendar */
.pillarCalWrap {
    background: #fbfaff;
    border-radius: 16px;
    padding: 16px;
}

.pillarCalHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    font-size: 12px;
    color: #6b6b82;
}

.pillarCalCaption {
    font-weight: 600;
    color: #4c476b;
}

.pillarCalLegend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}

.pillarCalLegendLbl {
    color: #6b6880;
    margin: 0 2px;
}

.pillarCalLegendSep {
    display: inline-block;
    width: 1px;
    height: 12px;
    background: #ddd8ee;
    margin: 0 6px;
}

.pillarDayLegend {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: #efecfb;
}

.pillarDayLegend--empty {
    background: #efecfb;
}

.pillarDayLegend--done {
    background: var(--bia-teal-surface);
}

.pillarDayLegend--streak {
    background: linear-gradient(135deg, var(--bia-accent) 0%, var(--bia-teal) 100%);
    box-shadow: 0 0 4px rgba(119, 106, 200, 0.45);
}

.pillarMonthsRow {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
}

.pillarMonth {
    flex: 0 0 auto;
    width: 230px;
    background: #ffffff;
    border-radius: 12px;
    padding: 12px;
    border: 1px solid #ecebf5;
}

.pillarMonthLabel {
    font-size: 14px;
    font-weight: 600;
    color: #2a2744;
    margin-bottom: 8px;
}

.pillarMonthDayHeader {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    font-size: 10px;
    color: #6b6880;
    text-align: center;
    margin-bottom: 4px;
}

.pillarMonthGrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.pillarDay {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 11px;
    color: #6b6b82;
    background: #efecfb;
    box-sizing: border-box;
}

.pillarDay--void {
    background: transparent;
    color: #c8c0ec;
}

.pillarDay--future {
    color: transparent;
}

.pillarDay--empty { background: #efecfb; color: #6b6b82; }
.pillarDay--done { background: var(--bia-teal-surface); color: var(--bia-fg); }

.pillarDay--inStreak {
    background: linear-gradient(135deg, var(--bia-accent) 0%, var(--bia-teal) 100%);
    background-size: 180% 180%;
    color: #ffffff;
    animation: pillarStreakGlow 3.2s ease-in-out infinite;
}

@keyframes pillarStreakGlow {
    0%, 100% {
        background-position: 0% 50%;
        box-shadow: 0 0 4px rgba(119, 106, 200, 0.35), 0 0 0 rgba(85, 204, 170, 0);
    }
    50% {
        background-position: 100% 50%;
        box-shadow: 0 0 10px rgba(119, 106, 200, 0.55), 0 0 6px rgba(85, 204, 170, 0.35);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pillarDay--inStreak {
        animation: none;
        box-shadow: 0 0 6px rgba(119, 106, 200, 0.45);
    }
}

.pillarDay--today {
    outline: 2px solid #2a2744;
    outline-offset: -2px;
}

/* Habituation */
.habList {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.habRow {
    background: #fbfaff;
    border-radius: 14px;
    padding: 12px 14px;
}

.habRowHead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    gap: 10px;
}

.habRowTitle {
    font-size: 15px;
    font-weight: 600;
    color: #2a2744;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.habRowMeta {
    font-size: 12px;
    color: #6b6880;
    white-space: nowrap;
}

.habRowBody {
    display: flex;
    align-items: center;
    gap: 14px;
}

.habSpark {
    flex: 1 1 auto;
    min-width: 120px;
    height: 34px;
}

.habSpark svg {
    display: block;
    width: 100%;
    height: 100%;
}

.habNumbers {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #4c476b;
    white-space: nowrap;
    flex: 0 0 auto;
}

.habFirst {
    color: #6b6880;
}

.habArrow {
    color: #6b6880;
}

.habLatest {
    font-weight: 700;
    color: #2a2744;
}

.habDelta {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    margin-left: 4px;
}

.habDelta.habBetter {
    background: rgba(85, 204, 170, 0.15);
    color: #2f8a72;
}

.habDelta.habSame {
    background: #efecfb;
    color: #6b6b82;
}

.habDelta.habUp {
    background: rgba(251, 113, 121, 0.15);
    color: #c65159;
}

a.habRowAgain {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: stretch;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: #ffffff;
    padding: 0;
    border-radius: 10px;
    background: #6c5fc0;
    border: none;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.2;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

a.habRowAgain:hover {
    background: var(--bia-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(145, 135, 211, 0.28);
}

.habRowAgain__label {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    line-height: 1;
    color: #ffffff;
}

/* Inline points readout, rendered as a translucent inset within the same
   button so the action and its reward read as one cohesive control. */
.habRowAgain__pts {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    padding: 10px 14px 10px 13px;
    background: var(--bia-teal-surface);
    color: var(--bia-fg);
    line-height: 1;
}

.habRowAgain__ptsNum {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
    letter-spacing: 0.2px;
}

.habRowAgain__ptsLbl {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.3px;
}

a.habRowAgain:hover .habRowAgain__pts {
    background: #46b896;
}

@media only screen and (max-width: 540px) {
    .habRowBody {
        flex-wrap: wrap;
    }
    a.habRowAgain {
        width: 100%;
        justify-content: center;
    }
    .habRowAgain__label {
        flex: 1 1 auto;
        justify-content: center;
    }
}

.pillarEmpty {
    background: #fbfaff;
    border-radius: 14px;
    padding: 16px;
    font-size: 13px;
    color: #6b6b82;
    line-height: 1.5;
}

/* Inhibitory Learning */
.ilGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.ilCard {
    background: #fbfaff;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ilCard--wide {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #e9f9f2 0%, #f5f2ff 100%);
}

.ilCardHead {
    font-size: 12px;
    color: #6b6880;
    font-weight: 600;
}

.ilCardNum {
    font-size: 28px;
    font-weight: 700;
    color: #2a2744;
    line-height: 1.1;
}

.ilCardOf {
    font-size: 15px;
    font-weight: 500;
    color: #6b6880;
    margin-left: 2px;
}

.ilCardBody {
    font-size: 12px;
    color: #6b6b82;
    line-height: 1.4;
    margin-top: 2px;
}

/* Inhibitory-learning skills cards: clickable variant */
.ilSkillsHint {
    margin: 0 0 10px;
    color: #6b6880;
    font-size: 12px;
    font-style: italic;
}

.ilCard--clickable {
    text-align: left;
    border: 1px solid #efecfb;
    cursor: pointer;
    font: inherit;
    color: inherit;
    width: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.ilCard--clickable:hover,
.ilCard--clickable:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(145, 135, 211, 0.18);
    border-color: #d6cff5;
    outline: none;
}
.ilCard--clickable .ilCardHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ilCardChevron {
    color: #6c5fc0;
    display: inline-flex;
}
.ilCard--locked {
    background: #f7f6fb;
    border-color: #ece9f8;
}
.ilCard--locked .ilCardHead {
    color: #a9a4c4;
}
.ilCardLockBlock {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}
.ilCardLockIcon {
    color: #6c5fc0;
    flex: 0 0 auto;
    display: inline-flex;
}
.ilCardLockText {
    font-size: 12px;
    color: #6b6b82;
    line-height: 1.4;
}

/* Selected card state for inline-panel selection */
.ilCard--selected {
    background: #fff;
    border-color: #6c5fc0;
    box-shadow: 0 6px 18px rgba(145, 135, 211, 0.22);
}
.ilCard--selected .ilCardChevron {
    transform: rotate(180deg);
}
.ilCardChevron {
    transition: transform 0.2s ease;
}

/* Inline skill detail panel below the cards */
.ilSkillPanel {
    margin-top: 16px;
    background: linear-gradient(135deg, #f8f5ff 0%, #f0f7fb 100%);
    border: 1px solid #ece9f8;
    border-radius: 18px;
    padding: 20px 22px 18px;
    overflow: hidden;
}
.ilSkillPanelEyebrow {
    font-size: 11px;
    color: #6b6880;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.ilSkillPanelTitle {
    margin: 2px 0 14px;
    font-size: 22px;
    color: #2a2744;
    line-height: 1.2;
}
.ilSkillPanelBody {
    transition: opacity 0.22s ease, transform 0.22s ease;
    will-change: opacity, transform;
}
.ilSkillPanelBody--enter {
    opacity: 1;
    transform: translateY(0);
}
.ilSkillPanelBody--exit {
    opacity: 0;
    transform: translateY(6px);
}
.ilSkillPanelBody h4 {
    margin: 0 0 8px;
    font-size: 13px;
    color: #6b6880;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ilSkillDetailBlockIcon {
    display: inline-flex;
    color: #6c5fc0;
}
.ilSkillPanelBody p {
    margin: 0 0 4px;
    color: #2a2744;
    line-height: 1.55;
    font-size: 14px;
}

.ilSkillDetailHeader {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #ece9f8;
}
.ilSkillDetailHeaderStat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    background: #fff;
    border-radius: 12px;
    padding: 10px 16px;
    min-width: 88px;
}
.ilSkillDetailStatNum {
    font-size: 30px;
    font-weight: 700;
    color: #6c5fc0;
    line-height: 1;
}
.ilSkillDetailStatLbl {
    font-size: 11px;
    color: #6b6b82;
    margin-top: 4px;
    text-align: center;
}
.ilSkillDetailLead {
    flex: 1 1 auto;
    color: #2a2744;
    font-size: 14px;
    line-height: 1.55;
}

.ilSkillDetailGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.ilSkillDetailBlock {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    padding: 14px 16px;
    animation: ilSkillBlockIn 0.36s ease-out both;
}
.ilSkillDetailBlock:nth-child(2) { animation-delay: 0.06s; }
.ilSkillDetailBlock:nth-child(3) { animation-delay: 0.12s; }
@keyframes ilSkillBlockIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.ilSkillDetailExerciseList {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
}
.ilSkillDetailExerciseList li {
    padding: 6px 0;
    border-bottom: 1px solid #efecf8;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}
.ilSkillDetailExerciseList li:last-child {
    border-bottom: none;
}
.ilSkillDetailExerciseMeta {
    font-size: 11px;
    color: #6b6880;
    flex: 0 0 auto;
}
.ilSkillDetailEmpty {
    color: #6b6880;
    font-style: italic;
    font-size: 13px;
    margin: 0;
}

.ilSkillDetailLessonRow {
    margin-top: 16px;
    text-align: right;
}
.ilSkillDetailLessonBtn {
    display: inline-block;
    background: #6c5fc0;
    color: #fff;
    padding: 10px 18px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
}
.ilSkillDetailLessonBtn:hover {
    background: #7d72c4;
    color: #fff;
    transform: translateY(-1px);
}

.ilSkillDetailLocked {
    text-align: center;
    padding: 18px 0 8px;
}
.ilSkillDetailLocked h4 {
    color: #2a2744;
    font-size: 17px;
    justify-content: center;
    margin: 8px 0;
}
.ilSkillDetailLocked p {
    color: #6b6b82;
    margin-bottom: 14px;
}
.ilSkillDetailLockIcon {
    color: #6c5fc0;
    display: inline-flex;
    background: #fff;
    border-radius: 50%;
    padding: 14px;
}
.ilSkillPanelBody--locked .ilSkillDetailLessonRow {
    text-align: center;
    margin-top: 0;
}

@media only screen and (max-width: 600px) {
    .ilSkillPanel { padding: 16px; }
    .ilSkillDetailHeader {
        flex-direction: column;
        gap: 12px;
    }
    .ilSkillDetailHeaderStat {
        flex-direction: row;
        align-items: baseline;
        gap: 10px;
        align-self: flex-start;
    }
    .ilSkillDetailStatLbl { margin-top: 0; text-align: left; }
}

.pillarsBackLinkWrap {
    text-align: center;
    margin: 16px 0;
}

/* Progress page: link to the full pillars breakdown */
.progressPillarsLink {
    text-align: right;
    font-size: 12px;
    margin: -4px 4px 10px;
}

@media only screen and (max-width: 768px) {
    .pillarsPage { padding: 8px; }
    .pillarSection { border-radius: 0 0 16px 16px; }
    .pillarSectionContent { padding: 16px; }

    /* Sub-nav on mobile: stack label beneath gauge so each tab fits. */
    .pillarsSubNav {
        gap: 3px;
        padding: 0;
    }
    .pillarsSubNavItem {
        flex-direction: column;
        gap: 4px;
        padding: 8px 6px 11px;
        border-radius: 12px 12px 0 0;
        margin-top: 4px;
    }
    .pillarsSubNavItem:hover {
        margin-top: 2px;
    }
    .pillarsSubNavItem--active {
        margin-top: 0;
    }
    .pillarsSubNavItem__label {
        font-size: 11px;
        font-weight: 600;
    }

    /* Compress KPIs into a snap scroller so mobile does not get a 2x2 wall of tiles. */
    .pillarKpis {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
        margin-bottom: 4px;
    }
    .pillarKpisDots { margin-bottom: 14px; cursor: pointer; }
    .pillarKpisDots .scrollDot { cursor: pointer; }
    .pillarKpi {
        flex: 0 0 46%;
        min-width: 140px;
        scroll-snap-align: start;
    }

    /* IL card grid turns into a horizontal snap scroller on mobile. */
    .ilGrid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        gap: 10px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }
    .ilCard {
        flex: 0 0 72%;
        min-width: 220px;
        scroll-snap-align: start;
    }
    .ilCard--wide {
        flex: 0 0 86%;
        grid-column: auto;
    }
}

@media only screen and (max-width: 460px) {
    .pillarKpi { flex: 0 0 70%; }
}

/* Pillar CTA: subtle explainer shown when a pillar is not yet at 100%. */
.pillarCta {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fbfaff;
    border: 1px solid #efecfb;
    border-radius: 12px;
    padding: 12px 16px;
    margin: 0 0 18px;
}

.pillarCta__iconWrap {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(145, 135, 211, 0.15);
    color: #6b63b8;
}

.pillarCta__iconWrap svg {
    display: block;
}

.pillarCta__text {
    flex: 1 1 auto;
    font-size: 13px;
    color: #4c476b;
    line-height: 1.5;
}

.pillarCta__text b {
    color: #2a2744;
    font-weight: 700;
}

.pillarCta__link {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    color: #6b63b8;
    text-decoration: none;
    padding: 9px 16px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e3deff;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.pillarCta__link:hover {
    background: #f5f2ff;
    border-color: #c8beff;
    transform: translateY(-1px);
}

.pillarCta--overview {
    background: linear-gradient(135deg, #f5f2ff 0%, #fbfaff 100%);
    border: 1px solid #e3deff;
    margin-bottom: 16px;
}

.pillarSection--habituation .pillarCta__iconWrap {
    background: rgba(137, 196, 255, 0.2);
    color: #3b7fc7;
}
.pillarSection--habituation .pillarCta__link {
    color: #3b7fc7;
    border-color: #d3e9ff;
}
.pillarSection--habituation .pillarCta__link:hover {
    background: #eaf4ff;
    border-color: #a9cff7;
}

.pillarSection--il .pillarCta__iconWrap {
    background: rgba(85, 204, 170, 0.18);
    color: #2a8f75;
}
.pillarSection--il .pillarCta__link {
    color: #2a8f75;
    border-color: #c8efe0;
}
.pillarSection--il .pillarCta__link:hover {
    background: #e9f9f2;
    border-color: #8fd9bf;
}

@media only screen and (max-width: 540px) {
    .pillarCta {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 14px;
    }
    .pillarCta__iconWrap { order: 1; }
    .pillarCta__text { order: 2; flex: 1 1 100%; }
    .pillarCta__link { order: 3; width: 100%; text-align: center; }
}

/* ── Modern Progress Page: Hero + Tabs + Masonry ─────────────────────────── */

.progressShell {
    max-width: 1160px;
    margin: 0 auto;
    padding: 8px 12px 48px;
    box-sizing: border-box;
}

.progHeroEyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: #5b4fb0;
}

.progHeroTitle {
    margin: 0;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.1;
    color: #2a2540;
    letter-spacing: -0.5px;
}

.progHeroTitle .progHeroAccent {
    background: linear-gradient(90deg, #6c5fc0, var(--bia-teal));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.progHeroSub {
    margin: 0;
    font-size: 15px;
    color: #4c476b;
    line-height: 1.55;
    max-width: 420px;
}

.progHeroCtas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.progHeroBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.progHeroBtn--primary {
    background: linear-gradient(135deg, #6c5fc0 0%, var(--bia-accent) 100%);
    color: white;
    box-shadow: 0 8px 20px rgba(119, 106, 200, 0.35);
}

.progHeroBtn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(119, 106, 200, 0.45);
}

.progHeroBtn--secondary {
    background: rgba(255, 255, 255, 0.7);
    color: #4a3da8;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(145, 135, 211, 0.25);
}

.progHeroBtn--secondary:hover {
    background: white;
    transform: translateY(-1px);
}

/* Sticky Tab Bar. Sized to its tabs and centred rather than stretched across the
   shell, so 2 or 3 tabs read as one balanced segmented control. It falls back to
   full width (and horizontal scroll) once the tabs no longer fit. */
.progTabBar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 4px;
    padding: 8px;
    /* Centred by the auto margins, not by justify-content: when the tabs do
       overflow, a centred flex line makes the first tab unscrollable. */
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 14px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px);
    border-radius: 18px;
    border: 1px solid rgba(145, 135, 211, 0.18);
    box-shadow: 0 4px 20px rgba(145, 135, 211, 0.08);
    overflow-x: auto;
    scrollbar-width: none;
}

.progTabBar::-webkit-scrollbar {
    display: none;
}

.progTab {
    position: relative;
    z-index: 1;
    /* Equal minimum width keeps the tabs balanced against each other; auto growth
       means a longer translated label is never clipped. */
    flex: 0 0 auto;
    min-width: 150px;
    text-align: center;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #6b6485;
    padding: 12px 18px;
    border-radius: 12px;
    white-space: nowrap;
    transition: color 0.22s ease, background 0.22s ease;
}

.progTab:hover {
    color: #4a3da8;
}

/* Selected state is painted by the tab itself until JS has measured and placed
   the sliding pill. Without this the tab reads as unselected on first paint,
   since the pill has no width until progMovePill runs. */
.progTab.active {
    color: white;
    background: linear-gradient(135deg, #6c5fc0 0%, var(--bia-accent) 100%);
    box-shadow: 0 4px 14px rgba(119, 106, 200, 0.35);
}

/* Pill is positioned: hand the highlight back to it so it can slide. */
.progTabBar--pilled .progTab.active {
    background: transparent;
    box-shadow: none;
}

.progTabPill {
    position: absolute;
    top: 8px;
    left: 0;
    height: calc(100% - 16px);
    background: linear-gradient(135deg, #6c5fc0 0%, var(--bia-accent) 100%);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(119, 106, 200, 0.35);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), width 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    /* z-index 0 (not -1): a negative z-index child of a backdrop-filter parent
       is painted behind that parent's background in WebKit, so the pill vanished
       on Safari/iOS. Tabs sit at z-index 1, so the pill still stays underneath. */
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    will-change: transform, width;
}

.progTabBar--pilled .progTabPill {
    opacity: 1;
}

.progTab span {
    position: relative;
    z-index: 1;
}

/* Tab Panels */
.progPanels {
    position: relative;
}

.progPanel {
    display: none;
    animation: progPanelIn 0.2s ease-out;
}

.progPanel.active {
    display: block;
}

/* Kept short on purpose: this plays on every tab switch, so anything longer
   reads as the page being slow to respond to the click. */
@keyframes progPanelIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.progSectionHeading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 8px 4px 14px;
}

.progSectionHeading h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #2a2540;
    letter-spacing: -0.3px;
}

.progSectionHeading p {
    margin: 0;
    font-size: 13px;
    color: #6b6485;
}

/* Overview layout: two-column split where the tall pillars card anchors the right
   column and the left column stacks hero, next, and stats. Chart spans full width. */
.progOverviewGrid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.progCard {
    background: white;
    border-radius: 20px;
    padding: 20px 22px;
    border: 1px solid #efecfb;
    box-shadow: 0 4px 18px rgba(145, 135, 211, 0.08);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.progCard:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(145, 135, 211, 0.14);
}

.progCard--stats {
    grid-column: 1;
}

.progCard--chart {
    grid-column: 1 / -1;
}

.progCard--next {
    grid-column: 1;
    background: linear-gradient(135deg, #fbe2c0 0%, #e3deff 100%);
    border: none;
}

.progNextSplit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: stretch;
}

.progNextSplit--single {
    grid-template-columns: 1fr;
}

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

.progNextCol--latest {
    border-left: 1px solid rgba(145, 135, 211, 0.22);
    padding-left: 22px;
}

.progNextRow--muted {
    font-size: 12px;
    color: #5b4fb0;
    font-weight: 600;
}

.progCard--currentMilestone {
    grid-column: 1 / -1;
}

/* Top-of-overview cards: motivational hero + pillar overview. */
.progCard--heroMsg {
    grid-column: 1;
    position: relative;
    padding: 28px 32px 26px;
    background:
        radial-gradient(900px 400px at 110% -20%, rgba(251, 226, 192, 0.55), transparent 60%),
        radial-gradient(700px 400px at -10% 120%, rgba(85, 204, 170, 0.2), transparent 60%),
        linear-gradient(135deg, #f0ecff 0%, #e3deff 60%, #dcd6ff 100%);
    border: none;
    overflow: hidden;
}

.progCard--heroMsg::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 340px;
    height: 340px;
    background: radial-gradient(closest-side, rgba(145, 135, 211, 0.25), transparent 70%);
    filter: blur(30px);
    pointer-events: none;
}

.progCard--heroMsg > * {
    position: relative;
}

.progCard--heroMsg .progHeroTitle {
    font-size: 30px;
    margin-top: 6px;
}

.progCard--heroMsg .progHeroSub {
    margin-top: 10px;
}

.progCard--heroMsg .progHeroCtas {
    margin-top: 16px;
}

.progCard--heroMsg--full {
    grid-column: 1 / -1;
}

.progCard--pillarOverview {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: stretch;
    background: white;
    display: flex;
    flex-direction: column;
}

/* When pillars card is absent, put next + stats side by side to fill row 2. */
.progOverviewGrid--noPillars .progCard--next { grid-column: 1; }
.progOverviewGrid--noPillars .progCard--stats { grid-column: 2; }

.progCard--pillarOverview .adherenceMeterMount {
    margin: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

.progCard--pillarOverview .adherenceMeter {
    margin: 0;
    max-width: 100%;
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.progCard--pillarOverview .adherenceMeter .recoveryPillarsCard {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.progCard--pillarOverview .rpPillars {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.progCardTitle {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #5b4fb0;
    text-transform: none;
}

.progStatRow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.progStatTile {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #faf9ff;
    border-radius: 14px;
    padding: 12px 14px;
    border: 1px solid #f0edff;
}

.progStatTile__icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(145, 135, 211, 0.12);
}

.progStatTile__icon img {
    max-width: 34px;
    max-height: 34px;
}

.progStatTile__body {
    min-width: 0;
}

.progStatTile__label {
    font-size: 12px;
    color: #6b6880;
    font-weight: 600;
    line-height: 1.2;
}

.progStatTile__numbers {
    margin-top: 2px;
    font-size: 18px;
    font-weight: 800;
    color: #2a2540;
    line-height: 1.1;
}

.progStatTile__numbers small {
    font-size: 12px;
    font-weight: 600;
    color: #6c5fc0;
    margin-left: 2px;
}

.progNextBody {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
}

.progNextRow {
    font-size: 13px;
    color: #4c476b;
    line-height: 1.5;
}

.progNextRow b {
    color: #2a2540;
}

.progNextCtas {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
}

.progGhostBtn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    color: #4a3da8;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    border: 1px solid rgba(145, 135, 211, 0.3);
    transition: background 0.18s ease, transform 0.18s ease;
}

.progGhostBtn:hover {
    background: white;
    transform: translateY(-1px);
}

.progFullBtn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 11px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6c5fc0 0%, var(--bia-accent) 100%);
    color: white;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border: none;
    box-shadow: 0 6px 16px rgba(119, 106, 200, 0.3);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.progFullBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(119, 106, 200, 0.4);
}

/* Chart card (keeps existing selector + canvas behavior) */
.progChartCard {
    background: white;
    border-radius: 20px;
    padding: 20px 22px 16px;
    border: 1px solid #efecfb;
    box-shadow: 0 4px 18px rgba(145, 135, 211, 0.08);
}

.progChartCard .chartSelectorWrapper {
    display: inline-flex;
    background: #f4f1ff;
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.progChartCard .chartSelector {
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    color: #6b6485;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.progChartCard .chartSelector.active {
    background: white;
    color: #4a3da8;
    box-shadow: 0 2px 6px rgba(145, 135, 211, 0.2);
}

/* Highlights grid: equal-height tiles in a responsive grid so cards never
   leave ragged white gaps the way the old column-masonry did. Visual style
   ported from the exposure summary's newHighlightCard. */
.progHighlightsMasonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    align-items: stretch;
    /* Entrance stagger step, shared by the card, ring, icon and sparks so they
       stay in sync. The panel is hidden until the tab is clicked, so this whole
       sequence is what the user perceives as the tab's response time: keep the
       last card settled well under half a second. */
    --ph-step: 28ms;
    --ph-cap: 6;
}

.progHighlightsMasonry > * {
    margin: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.progHighlightsMasonry .progressHighlight {
    position: relative;
    background: linear-gradient(135deg, #f6f3ff 0%, #ecfaf4 100%);
    border-radius: 18px;
    padding: 14px 16px;
    border: 1px solid #e2dcf6;
    box-shadow: 0 4px 18px rgba(145, 135, 211, 0.08);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
    min-height: 116px;
    box-sizing: border-box;
    max-width: none;
    min-width: 0;
    opacity: 0;
    transform: scale(0.92) translateY(8px);
    animation: progressHighlightPop 360ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    animation-delay: calc(min(var(--ph-index, 0), var(--ph-cap, 6)) * var(--ph-step, 28ms));
}

@keyframes progressHighlightPop {
    0%   { opacity: 0; transform: scale(0.92) translateY(8px); }
    60%  { opacity: 1; transform: scale(1.02) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.progHighlightsMasonry .progressHighlight:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(145, 135, 211, 0.16);
}

.progHighlightsMasonry .progressHighlightLeft {
    flex: 0 0 84px;
    width: 84px;
    padding-top: 0;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progressHighlight__iconWrap {
    position: relative;
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progressHighlight__ring {
    position: absolute;
    inset: 0;
    filter: drop-shadow(0 6px 14px rgba(119, 106, 200, 0.22));
}

.progressHighlight__ringFill {
    animation: progressHighlightRingDraw 620ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    animation-delay: calc(min(var(--ph-index, 0), var(--ph-cap, 6)) * var(--ph-step, 28ms) + 120ms);
}

@keyframes progressHighlightRingDraw {
    to { stroke-dashoffset: 0; }
}

.progressHighlight__icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: progressHighlightIconBounce 560ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    animation-delay: calc(min(var(--ph-index, 0), var(--ph-cap, 6)) * var(--ph-step, 28ms));
}

.progressHighlight__icon img {
    display: block;
    max-width: 56px;
    max-height: 56px;
    width: auto;
    height: auto;
}

@keyframes progressHighlightIconBounce {
    0%   { opacity: 0; transform: scale(0.5) rotate(-12deg); }
    55%  { opacity: 1; transform: scale(1.12) rotate(4deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

.progressHighlight__spark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6c5fc0;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: progressHighlightSpark 700ms ease-out forwards;
}

.progressHighlight__spark--0 { background: #6c5fc0; --sx: 0px;   --sy: -52px; animation-delay: calc(min(var(--ph-index, 0), var(--ph-cap, 6)) * var(--ph-step, 28ms) + 180ms); }
.progressHighlight__spark--1 { background: var(--bia-teal-surface); --sx: 46px;  --sy: -28px; animation-delay: calc(min(var(--ph-index, 0), var(--ph-cap, 6)) * var(--ph-step, 28ms) + 215ms); }
.progressHighlight__spark--2 { background: #f5a623; --sx: 46px;  --sy: 28px;  animation-delay: calc(min(var(--ph-index, 0), var(--ph-cap, 6)) * var(--ph-step, 28ms) + 250ms); }
.progressHighlight__spark--3 { background: #6c5fc0; --sx: 0px;   --sy: 52px;  animation-delay: calc(min(var(--ph-index, 0), var(--ph-cap, 6)) * var(--ph-step, 28ms) + 285ms); }
.progressHighlight__spark--4 { background: var(--bia-teal-surface); --sx: -46px; --sy: 28px;  animation-delay: calc(min(var(--ph-index, 0), var(--ph-cap, 6)) * var(--ph-step, 28ms) + 320ms); }
.progressHighlight__spark--5 { background: #f5a623; --sx: -46px; --sy: -28px; animation-delay: calc(min(var(--ph-index, 0), var(--ph-cap, 6)) * var(--ph-step, 28ms) + 355ms); }

@keyframes progressHighlightSpark {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    35%  { opacity: 1; }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(0.6);
    }
}

.progHighlightsMasonry .progressHighlightRight {
    flex: 1 1 auto;
    width: auto;
    margin-left: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.progressHighlight__pill {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    color: #6f64b8;
    background: rgba(145, 135, 211, 0.14);
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 700;
    margin-bottom: 6px;
}

.progHighlightsMasonry .progressHighlightRight h4 {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #2a2744;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.progHighlightsMasonry .progressHighlightRight > span {
    font-size: 0.92rem;
    color: #4a4663;
    line-height: 1.4;
}

.progressHighlight__big {
    font-weight: 800;
    color: #6f64b8;
    font-size: 1.05em;
}

.progressHighlight__red {
    font-weight: 800;
    color: #fb7179;
}

.progressHighlight__green {
    font-weight: 800;
    color: var(--bia-teal);
}

@media (prefers-reduced-motion: reduce) {
    .progHighlightsMasonry .progressHighlight,
    .progressHighlight__icon,
    .progressHighlight__ringFill,
    .progressHighlight__spark {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        stroke-dashoffset: 0 !important;
    }
    .progressHighlight__spark { display: none; }
    /* Tab switching should be instant rather than a fade for these users. */
    .progPanel,
    .highlightsSubPanel {
        animation: none !important;
    }
}

/* Upcoming (locked) highlights */
.progLockedHeader {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin: 24px 4px 12px;
}

.progLockedHeader h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #2a2540;
    letter-spacing: -0.2px;
}

.progLockedHeader p {
    margin: 0;
    font-size: 13px;
    color: #6b6880;
}

.progHighlightsMasonry--locked .progressHighlight--locked {
    background: #fbfaff;
    border: 1.5px dashed #d6cef0;
    box-shadow: none;
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.progHighlightsMasonry--locked .progressHighlight--locked:hover {
    opacity: 1;
    transform: translateY(-1px);
    border-color: #bfb4e8;
}

.progressHighlight--locked .progressHighlight__icon img {
    filter: grayscale(1) opacity(0.55);
}

.progressHighlight--locked .progressHighlight__ring {
    filter: none;
    opacity: 0.85;
}

.progressHighlight--locked .progressHighlight__pill--locked {
    color: #6b6880;
    background: rgba(140, 132, 181, 0.12);
}

.progressHighlight--locked .progressHighlightRight h4 {
    color: #6b6485;
}

.progressHighlight--locked .progressHighlightRight span {
    color: #6b6880;
}

.progLockBadge {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    color: #6b6880;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(145, 135, 211, 0.22);
    border: 1px solid #efecfb;
}

.progLockedRemaining {
    color: #6c5fc0;
    font-weight: 600;
    margin-left: 4px;
}

.progHighlightsEmpty {
    background: white;
    border-radius: 20px;
    padding: 36px 24px;
    text-align: center;
    border: 1px dashed #e0d9f5;
}

.progHighlightsEmpty h3 {
    margin: 10px 0 6px;
    color: #2a2540;
}

.progHighlightsEmpty p {
    margin: 0;
    color: #6b6485;
    font-size: 14px;
}

.progMoreHighlightsToggleRow {
    text-align: center;
    margin-top: 8px;
}

.progShowMoreBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 999px;
    background: white;
    color: #4a3da8;
    font-weight: 700;
    font-size: 13px;
    border: 1px solid #e0d9f5;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

.progShowMoreBtn:hover {
    background: #f7f4ff;
    transform: translateY(-1px);
}

/* Pillars tab: let pillarsContent style itself, just constrain width */
.progPillarsPanel .pillarsPage {
    max-width: 100%;
    padding: 0;
}

.progPillarsPanel .pillarsHero {
    display: none;
}

.progPillarsPanel .pillarSection {
    box-shadow: 0 4px 18px rgba(145, 135, 211, 0.08);
}

/* Responsive */
@media only screen and (max-width: 960px) {
    .progOverviewGrid {
        grid-template-columns: minmax(0, 1fr);
    }
    .progCard--stats,
    .progCard--next,
    .progCard--heroMsg,
    .progCard--pillarOverview,
    .progCard--chart,
    .progCard--currentMilestone {
        grid-column: 1;
        grid-row: auto;
    }
    .progOverviewGrid--noPillars .progCard--next,
    .progOverviewGrid--noPillars .progCard--stats {
        grid-column: 1;
    }
    .progHeroTitle { font-size: 32px; }
    .progCard--heroMsg .progHeroTitle { font-size: 28px; }
    .progHighlightsMasonry { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

@media only screen and (max-width: 640px) {
    .progressShell { padding: 6px 10px 36px; }
    .progNextSplit {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .progNextCol--latest {
        border-left: none;
        border-top: 1px solid rgba(145, 135, 211, 0.22);
        padding-left: 0;
        padding-top: 16px;
    }
    .progCard--heroMsg {
        padding: 22px 20px 20px;
    }
    .progCard--heroMsg .progHeroTitle { font-size: 24px; }
    .progHeroSub { font-size: 14px; }
    /* Not enough room to centre a compact control, so span the shell instead. */
    .progTabBar {
        border-radius: 14px;
        padding: 6px;
        width: 100%;
        justify-content: space-between;
    }
    .progTab {
        padding: 10px 14px;
        font-size: 13px;
        flex: 1 1 auto;
        min-width: 0;
    }
    /* Match the bar's reduced padding so the pill lines up with the tab box. */
    .progTabPill {
        top: 6px;
        height: calc(100% - 12px);
    }
    .progHighlightsMasonry { grid-template-columns: 1fr; }
    .progCard { padding: 16px 16px; border-radius: 18px; }
    .progStatRow { grid-template-columns: 1fr; }
}

/* Glossary section embedded in the Highlights tab */
.progGlossarySection {
    margin-top: 8px;
}

.progGlossarySection .glossaryTermContainer {
    width: 32%;
    min-width: 260px;
    padding: 0 6px;
    box-sizing: border-box;
}

.progGlossarySection .glossaryCard {
    background: #ffffff;
    border: 1px solid #efecfb;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(145, 135, 211, 0.08);
    padding: 18px 20px;
    margin: 0 0 12px;
    min-height: 0;
    max-width: 100%;
    min-width: 0;
    width: 100%;
    display: block;
    cursor: default;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.progGlossarySection .glossaryCard:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(145, 135, 211, 0.16);
}

.progGlossarySection .glossaryCard.locked {
    background: transparent;
    border: 1.5px dashed #d6cef0;
    box-shadow: none;
    opacity: 0.82;
}

.progGlossarySection .glossaryCard.locked:hover {
    transform: none;
    opacity: 1;
    border-color: #bfb4e8;
    box-shadow: none;
}

.progGlossarySection .glossaryTitle {
    font-size: 15px;
    font-weight: 700;
    color: #2a2540;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
}

.progGlossarySection .glossaryCard.locked .glossaryTitle {
    color: #6b6485;
}

.progGlossarySection .glossaryDefinition {
    font-size: 13px;
    color: #4c476b;
    line-height: 1.45;
}

.progGlossarySection .glossaryCard.locked .glossaryDefinition {
    color: #6b6880;
}

@media only screen and (max-width: 900px) {
    .progGlossarySection .glossaryTermContainer { width: 48%; }
}

@media only screen and (max-width: 640px) {
    .progGlossarySection .glossaryTermContainer { width: 100%; min-width: 0; padding: 0; }
}