/* Match Dashboard's 10px mobile content inset and prevent the FI desktop
   full-viewport offset from widening any My Plan view. */
@media (max-width: 760px) {
  html body #profile-section#profile-section#profile-section.active .profile-page.banymay-my-plan.is-retirement-resilience .rr-summary[role="status"] {
    display: none !important;
  }

  html body #profile-section#profile-section.active {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    overflow-x: clip !important;
  }
  html body #profile-section#profile-section.active > .profile-page.banymay-my-plan,
  html body #profile-section#profile-section.active > .profile-page.banymay-my-plan.is-retirement-resilience {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 10px 20px !important;
    overflow-x: clip !important;
  }
  html body #profile-section#profile-section.active .my-plan-sidebar,
  html body #profile-section#profile-section.active .my-plan-main,
  html body #profile-section#profile-section.active .my-plan-view,
  html body #profile-section#profile-section.active .my-plan-projection-scenarios,
  html body #profile-section#profile-section.active .my-plan-projection-scenario,
  html body #profile-section#profile-section.active .my-plan-fi-details {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
  }
  html body #profile-section#profile-section.active :is(
    .my-plan-panel,
    .my-plan-kpi-card,
    .my-plan-projection-tabs,
    .my-plan-projection-assumptions,
    .my-plan-projection-results,
    .my-plan-projection-chart-panel,
    .my-plan-projection-requirements,
    .rr-dashboard-grid,
    .rr-kpi-strip,
    .rr-panel
  ) {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}
/* Projection card heading is mobile-only; desktop keeps its existing table header. */
html body #profile-section .my-plan-projection-requirements-heading { display: none; }
/* My Plan overview: phone-sized layout matching the supplied reference. */
@media (max-width: 760px) {
  html body #profile-section#profile-section.active > .profile-page.banymay-my-plan {
    --plan-bg: #031720;
    --plan-surface: #071c26;
    --plan-border: #1c4657;
    --plan-accent: #11dce6;
    --plan-positive: #46dfa9;
    gap: 7px !important;
    padding: 7px 10px 20px !important;
    background: #031720 !important;
  }
  html body #profile-section#profile-section.active .my-plan-sidebar {
    padding: 3px !important;
    border: 1px solid #1c4657 !important;
    border-radius: 9px !important;
    background: #061a24 !important;
  }
  html body #profile-section#profile-section.active .my-plan-sidebar-title,
  html body #profile-section#profile-section.active .my-plan-heading { display: none !important; }
  html body #profile-section#profile-section.active .my-plan-nav {
    display: grid !important;
    grid-template-columns: 1fr 1.05fr 1.08fr !important;
    gap: 2px !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  html body #profile-section#profile-section.active .my-plan-nav-item {
    display: flex !important;
    flex: initial !important;
    flex-direction: row !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 43px !important;
    min-height: 43px !important;
    padding: 3px 4px !important;
    gap: 5px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #e4edf3 !important;
    font-size: clamp(8px, 2.55vw, 11px) !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    text-align: left !important;
  }
  html body #profile-section#profile-section.active .my-plan-nav-item.is-active {
    border: 1px solid #08798b !important;
    background: linear-gradient(110deg, #07556a, #063842) !important;
    color: #12e0e8 !important;
  }
  html body #profile-section#profile-section.active .my-plan-nav-icon {
    width: 19px !important;
    height: 19px !important;
    flex: 0 0 19px !important;
  }
  html body #profile-section#profile-section.active .my-plan-nav-icon svg { width: 19px !important; height: 19px !important; }
  html body #profile-section#profile-section.active .my-plan-main { gap: 0 !important; }
  html body #profile-section#profile-section.active .my-plan-overview { gap: 7px !important; }
  html body #profile-section#profile-section.active .my-plan-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  html body #profile-section#profile-section.active .my-plan-overview .my-plan-panel,
  html body #profile-section#profile-section.active .my-plan-kpi-card {
    min-height: 0 !important;
    padding: 10px !important;
    border: 1px solid #1c4657 !important;
    border-radius: 8px !important;
    background: linear-gradient(115deg, #071b26, #081923) !important;
    box-shadow: none !important;
  }
  html body #profile-section#profile-section.active .my-plan-kpi-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 55px !important;
    gap: 7px !important;
    padding: 7px 15px 7px 9px !important;
  }
  html body #profile-section#profile-section.active .my-plan-kpi-card::after,
  html body #profile-section#profile-section.active .my-plan-global-cost::after,
  html body #profile-section#profile-section.active .my-plan-lifestyle::after,
  html body #profile-section#profile-section.active .my-plan-indicators::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-top: 1px solid #96bbd0;
    border-right: 1px solid #96bbd0;
    transform: translateY(-50%) rotate(45deg);
  }
  html body #profile-section#profile-section.active .my-plan-kpi-icon,
  html body #profile-section#profile-section.active .my-plan-kpi-icon svg {
    width: 21px !important;
    height: 21px !important;
    font-size: 21px !important;
  }
  html body #profile-section#profile-section.active .my-plan-kpi-card > div { min-width: 0 !important; }
  html body #profile-section#profile-section.active .my-plan-kpi-label {
    display: block !important;
    color: #e2eaf0 !important;
    font-size: clamp(8px, 2.1vw, 10px) !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }
  html body #profile-section#profile-section.active .my-plan-kpi-value {
    display: block !important;
    margin-top: 3px !important;
    font-size: clamp(15px, 4.3vw, 19px) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }
  html body #profile-section#profile-section.active .my-plan-global-cost {
    position: relative !important;
    padding: 10px !important;
  }
  html body #profile-section#profile-section.active .my-plan-global-cost::after { top: 17px; }
  html body #profile-section#profile-section.active .my-plan-global-cost .ffi-bar-wrap {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body #profile-section#profile-section.active .my-plan-global-cost .ffi-bar-title {
    margin: 0 12px 10px 0 !important;
    font-size: clamp(10px, 2.7vw, 12px) !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }
  html body #profile-section#profile-section.active .my-plan-global-cost .ffi-bar-track {
    height: 12px !important;
    overflow: hidden !important;
    border-radius: 3px !important;
    margin: 0 !important;
  }
  html body #profile-section#profile-section.active .my-plan-global-cost .ffi-seg {
    animation: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body #profile-section#profile-section.active .my-plan-global-cost .ffi-bar-labels {
    display: flex !important;
    justify-content: space-between !important;
    gap: 6px !important;
    margin: 5px 0 0 !important;
    font-size: clamp(8px, 2.2vw, 10px) !important;
    line-height: 1.2 !important;
  }
  html body #profile-section#profile-section.active .my-plan-middle-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }
  html body #profile-section#profile-section.active .my-plan-fi-progress,
  html body #profile-section#profile-section.active .my-plan-retirement {
    padding: 10px !important;
  }
  html body #profile-section#profile-section.active .my-plan-panel h3 {
    margin: 0 !important;
    font-size: clamp(11px, 3vw, 13px) !important;
    line-height: 1.2 !important;
  }
  html body #profile-section#profile-section.active .my-plan-panel-head {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }
  html body #profile-section#profile-section.active .my-plan-inline-link {
    flex: 0 0 auto !important;
    font-size: clamp(9px, 2.35vw, 11px) !important;
  }
  html body #profile-section#profile-section.active .my-plan-fi-value {
    margin-top: 5px !important;
    font-size: clamp(27px, 7.8vw, 35px) !important;
    line-height: 1 !important;
  }
  html body #profile-section#profile-section.active .my-plan-fi-sub {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
  html body #profile-section#profile-section.active .my-plan-fi-track {
    height: 10px !important;
    margin: 7px 0 !important;
    border-radius: 3px !important;
  }
  html body #profile-section#profile-section.active .my-plan-fi-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 !important;
  }
  html body #profile-section#profile-section.active .my-plan-fi-metrics > div + div {
    padding-left: 7px !important;
    border-left: 1px solid #254351 !important;
  }
  html body #profile-section#profile-section.active .my-plan-fi-metrics span {
    font-size: clamp(8px, 2.3vw, 10px) !important;
    line-height: 1.2 !important;
  }
  html body #profile-section#profile-section.active .my-plan-fi-metrics strong {
    margin-top: 2px !important;
    font-size: clamp(15px, 4.2vw, 19px) !important;
    line-height: 1.1 !important;
  }
  html body #profile-section#profile-section.active .my-plan-fi-metrics strong small { font-size: 10px !important; }
  html body #profile-section#profile-section.active .my-plan-note {
    margin: 5px 0 0 !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }
  html body #profile-section#profile-section.active .my-plan-legacy-progress,
  html body #profile-section#profile-section.active .my-plan-secondary-action { display: none !important; }
  html body #profile-section#profile-section.active .my-plan-retirement-rows {
    gap: 0 !important;
    margin: 5px 0 0 !important;
  }
  html body #profile-section#profile-section.active .my-plan-retirement-row {
    min-height: 25px !important;
    grid-template-columns: 22px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
  html body #profile-section#profile-section.active .my-plan-row-icon,
  html body #profile-section#profile-section.active .my-plan-row-icon svg {
    width: 17px !important;
    height: 17px !important;
    font-size: 17px !important;
  }
  html body #profile-section#profile-section.active .my-plan-retirement-row strong {
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  html body #profile-section#profile-section.active .my-plan-lifestyle,
  html body #profile-section#profile-section.active .my-plan-indicators {
    position: relative !important;
    padding: 9px !important;
  }
  html body #profile-section#profile-section.active .my-plan-lifestyle::after,
  html body #profile-section#profile-section.active .my-plan-indicators::after { top: 17px; }
  html body #profile-section#profile-section.active .my-plan-overview .my-plan-lifestyle > h3,
  html body #profile-section#profile-section.active .my-plan-overview .my-plan-indicators > h3 {
    margin: 0 12px 6px 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  html body #profile-section#profile-section.active .my-plan-overview .my-plan-lifestyle-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
  }
  html body #profile-section#profile-section.active .my-plan-overview .my-plan-lifestyle-item,
  html body #profile-section#profile-section.active .my-plan-overview .my-plan-lifestyle-item:first-child {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: initial !important;
    min-height: 36px !important;
    gap: 6px !important;
    padding: 2px 16px 2px 2px !important;
    border: 1px solid #1b3948 !important;
    border-radius: 20px !important;
  }
  html body #profile-section#profile-section.active .my-plan-overview .my-plan-lifestyle-item::after {
    content: "›";
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-55%);
    color: #15d8e2;
    font-size: 19px;
  }
  html body #profile-section#profile-section.active .my-plan-overview .my-plan-lifestyle-icon,
  html body #profile-section#profile-section.active .my-plan-overview .my-plan-lifestyle-icon svg {
    width: 30px !important;
    height: 30px !important;
  }
  html body #profile-section#profile-section.active .my-plan-overview .my-plan-lifestyle-icon svg { width: 17px !important; height: 17px !important; }
  html body #profile-section#profile-section.active .my-plan-overview .my-plan-lifestyle-item > div {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 5px !important;
    min-width: 0 !important;
  }
  html body #profile-section#profile-section.active .my-plan-overview .my-plan-lifestyle-item > div > span {
    font-size: clamp(9px, 2.6vw, 11px) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  html body #profile-section#profile-section.active .my-plan-overview .my-plan-lifestyle-item strong {
    display: flex !important;
    align-items: baseline !important;
    gap: 2px !important;
    margin: 0 !important;
    font-size: clamp(13px, 3.8vw, 17px) !important;
    line-height: 1.1 !important;
  }
  html body #profile-section#profile-section.active .my-plan-overview .my-plan-lifestyle-item strong > small {
    font-size: clamp(8px, 2.2vw, 10px) !important;
  }
  html body #profile-section#profile-section.active .my-plan-indicator-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  html body #profile-section#profile-section.active .my-plan-indicator-item,
  html body #profile-section#profile-section.active .my-plan-indicator-item + .my-plan-indicator-item {
    min-height: 40px !important;
    align-content: center !important;
    justify-items: start !important;
    padding: 4px 6px !important;
    border: 1px solid #1b3948 !important;
    border-radius: 5px !important;
    text-align: left !important;
  }
  html body #profile-section#profile-section.active .my-plan-indicator-label {
    font-size: clamp(8px, 2.25vw, 10px) !important;
    line-height: 1.15 !important;
  }
  html body #profile-section#profile-section.active .my-plan-indicator-item strong {
    margin-top: 2px !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }
  html body #profile-section#profile-section.active .profile-info-tip {
    display: inline-grid !important;
    place-items: center !important;
    width: 13px !important;
    height: 13px !important;
    font-size: 8px !important;
  }
}

/* Portfolio Projections: the same phone layout for all three scenario tabs. */
@media (max-width: 760px) {
  html body #profile-section#profile-section.active .my-plan-projections,
  html body #profile-section#profile-section.active .my-plan-projection-scenarios,
  html body #profile-section#profile-section.active .my-plan-projection-scenario.is-active {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2px !important;
    width: 100% !important;
    padding: 2px !important;
    overflow: hidden !important;
    border: 1px solid #1b4657 !important;
    border-radius: 8px !important;
    background: #071c26 !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-tab {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 49px !important;
    padding: 4px 2px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #eaf1f4 !important;
    font-size: clamp(8px, 2.38vw, 10px) !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    text-align: center !important;
    white-space: normal !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-tab + .my-plan-projection-tab {
    border-left: 1px solid #234657 !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-tab.is-active {
    border: 1px solid #087f91 !important;
    background: linear-gradient(110deg, #08778b, #075264) !important;
    color: #fff !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-tab small {
    display: block !important;
    padding: 2px 0 0 !important;
    color: #d7e6ed !important;
    font-size: clamp(7px, 2vw, 9px) !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-assumptions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-assumption,
  html body #profile-section#profile-section.active .my-plan-projection-assumption:first-child,
  html body #profile-section#profile-section.active .my-plan-projection-assumption + .my-plan-projection-assumption {
    display: grid !important;
    grid-template-columns: 23px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 49px !important;
    padding: 7px !important;
    border: 1px solid #1b4657 !important;
    border-radius: 8px !important;
    background: #071c26 !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-assumption .my-plan-row-icon,
  html body #profile-section#profile-section.active .my-plan-projection-result .my-plan-row-icon,
  html body #profile-section#profile-section.active .my-plan-projection-assumption .my-plan-row-icon svg,
  html body #profile-section#profile-section.active .my-plan-projection-result .my-plan-row-icon svg {
    width: 21px !important;
    height: 21px !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-assumption > div,
  html body #profile-section#profile-section.active .my-plan-projection-result > div { min-width: 0 !important; }
  html body #profile-section#profile-section.active .my-plan-projection-assumption span:not(.my-plan-row-icon),
  html body #profile-section#profile-section.active .my-plan-projection-result span:not(.my-plan-row-icon) {
    font-size: clamp(8px, 2.25vw, 10px) !important;
    line-height: 1.2 !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-assumption strong {
    margin-top: 2px !important;
    color: #12dce6 !important;
    font-size: clamp(15px, 4.1vw, 18px) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-edit {
    display: flex !important;
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    min-height: 29px !important;
    padding: 4px 8px !important;
    border: 1px solid #1b4657 !important;
    border-radius: 7px !important;
    background: #071c26 !important;
    color: #0fdfec !important;
    font-size: 10px !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-edit::after {
    content: "›";
    margin-left: auto;
    color: #c5dce8;
    font-size: 19px;
    line-height: 10px;
    text-decoration: none;
  }
  html body #profile-section#profile-section.active .my-plan-projection-results {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    min-width: 0 !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-result {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    align-content: center !important;
    align-items: start !important;
    gap: 2px 4px !important;
    min-height: 70px !important;
    padding: 7px 4px !important;
    border-radius: 7px !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-result .my-plan-row-icon { grid-row: 1 !important; }
  html body #profile-section#profile-section.active .my-plan-projection-result strong {
    display: block !important;
    margin: 5px 0 0 !important;
    color: #12dce6 !important;
    font-size: clamp(11px, 3.12vw, 14px) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    letter-spacing: -0.04em !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-result:nth-child(2) strong { color: #53e2a9 !important; }
  html body #profile-section#profile-section.active .my-plan-projection-result:nth-child(3) strong { color: #ffd34d !important; }
  html body #profile-section#profile-section.active .my-plan-projection-chart-panel {
    min-width: 0 !important;
    padding: 11px !important;
    border-radius: 8px !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-chart-head {
    display: block !important;
    margin: 0 0 6px !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-chart-head h2 {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-chart-head > span { display: none !important; }
  html body #profile-section#profile-section.active .my-plan-projection-chart-panel .profile-chart {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-chart-panel .profile-chart-legend {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 4px 13px !important;
    margin: 3px 0 4px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-chart-panel .profile-legend-dot {
    width: 8px !important;
    height: 8px !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-chart-panel .profile-chart-graph {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 175px !important;
    overflow: hidden !important;
    background:
      repeating-linear-gradient(90deg, rgba(142,163,182,.13) 0 1px, transparent 1px 18%),
      repeating-linear-gradient(0deg, rgba(142,163,182,.13) 0 1px, transparent 1px 25%),
      #071c26 !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-chart-panel .profile-chart-svg {
    width: 100% !important;
    height: 100% !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-chart-panel .profile-chart-axis {
    font-size: 9px !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-requirements {
    min-width: 0 !important;
    padding: 9px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-requirements-heading { display: block !important; margin: 0 0 8px !important; }
  html body #profile-section#profile-section.active .my-plan-projection-requirements-heading h2 {
    margin: 0 0 2px !important;
    color: #f3f7fa !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-requirements-heading p {
    margin: 0 !important;
    color: #adc4d3 !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-requirements-body,
  html body #profile-section#profile-section.active .my-plan-projection-requirements-body[hidden] {
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-requirements .profile-table {
    display: grid !important;
    gap: 5px !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-requirements .profile-table-head { display: none !important; }
  html body #profile-section#profile-section.active .my-plan-projection-requirements .profile-table-row:not(.profile-table-head) {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 7px !important;
    border: 1px solid #1c4657 !important;
    border-radius: 7px !important;
    background: #071c26 !important;
    font-size: 10px !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-requirements .profile-table-row:not(.profile-table-head) > span {
    min-width: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
    text-align: left !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-requirements .profile-table-row:not(.profile-table-head) > span:nth-child(1) {
    grid-column: span 2 !important;
    grid-row: 1 !important;
    color: #13dfe9 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-requirements .profile-table-row[data-fi-level="col"] > span:first-child::after {
    content: "Essential expenses";
  }
  html body #profile-section#profile-section.active .my-plan-projection-requirements .profile-table-row[data-fi-level="colplus"] > span:first-child::after {
    content: "Comfortable lifestyle";
  }
  html body #profile-section#profile-section.active .my-plan-projection-requirements .profile-table-row[data-fi-level="fi"] > span:first-child::after {
    content: "Full lifestyle";
  }
  html body #profile-section#profile-section.active .my-plan-projection-requirements .profile-table-row:not(.profile-table-head) > span:first-child::after {
    display: block;
    color: #afc7d5;
    font-size: 9px;
    font-weight: 400;
  }
  html body #profile-section#profile-section.active .my-plan-projection-requirements .profile-table-row:not(.profile-table-head) > span:nth-child(2),
  html body #profile-section#profile-section.active .my-plan-projection-requirements .profile-table-row:not(.profile-table-head) > span:nth-child(3) {
    grid-column: span 2 !important;
    grid-row: 1 !important;
    font-weight: 700 !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-requirements [data-fi-field="annual"]::before,
  html body #profile-section#profile-section.active .my-plan-projection-requirements [data-fi-field="net"]::before {
    display: block;
    color: #afc7d5;
    font-size: 9px;
    font-weight: 400;
  }
  html body #profile-section#profile-section.active .my-plan-projection-requirements [data-fi-field="annual"]::before { content: "Annual Cost"; }
  html body #profile-section#profile-section.active .my-plan-projection-requirements [data-fi-field="net"]::before { content: "Net Cost"; }
  html body #profile-section#profile-section.active .my-plan-projection-requirements .profile-table-row:not(.profile-table-head) > span:nth-child(n+4) {
    grid-row: 2 !important;
    margin-top: 5px !important;
    padding-top: 5px !important;
    border-top: 1px solid #244655 !important;
    font-size: clamp(8px, 2.2vw, 10px) !important;
    font-weight: 700 !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-requirements [data-fi-field="req1"]::before { content: "Req 1%"; }
  html body #profile-section#profile-section.active .my-plan-projection-requirements [data-fi-field="req2"]::before { content: "Req 2%"; }
  html body #profile-section#profile-section.active .my-plan-projection-requirements [data-fi-field="req3"]::before { content: "Req 3%"; }
  html body #profile-section#profile-section.active .my-plan-projection-requirements [data-fi-field="req4"]::before { content: "Req 4%"; }
  html body #profile-section#profile-section.active .my-plan-projection-requirements [data-fi-field="req5"]::before { content: "Req 5%"; }
  html body #profile-section#profile-section.active .my-plan-projection-requirements [data-fi-field="finite"]::before { content: "Finite"; }
  html body #profile-section#profile-section.active .my-plan-projection-requirements [data-fi-field^="req"]::before,
  html body #profile-section#profile-section.active .my-plan-projection-requirements [data-fi-field="finite"]::before {
    display: block;
    color: #afc7d5;
    font-size: clamp(8px, 2.1vw, 9px);
    font-weight: 400;
  }
}

/* Final phone-width and compact scenario pager. The shared mobile section
   already has its own 12px padding, so remove that double gutter here. */
@media (max-width: 760px) {
  html body #profile-section#profile-section.active .my-plan-view[hidden],
  html body #profile-section#profile-section.active .my-plan-projection-scenario[hidden] {
    display: none !important;
  }
  html body #profile-section#profile-section.active .my-plan-projections:not([hidden]) {
    touch-action: pan-y !important;
  }
  html body #profile-section#profile-section.active {
    padding: 0 !important;
    gap: 0 !important;
  }
  html body #profile-section#profile-section.active > .profile-page.banymay-my-plan,
  html body #profile-section#profile-section.active > .profile-page.banymay-my-plan.is-retirement-resilience {
    margin: 0 !important;
    padding: 8px 8px 20px !important;
    gap: 6px !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-tabs {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) repeat(3, 27px) !important;
    align-items: center !important;
    gap: 1px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 6px !important;
    border: 1px solid #1b4657 !important;
    border-radius: 8px !important;
    background: #071c26 !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-tabs::before {
    content: "Contributions + Dividends";
    grid-column: 1 !important;
    min-width: 0;
    overflow: hidden;
    color: #13dce6;
    font-size: clamp(10px, 3.05vw, 13px);
    font-weight: 750;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  html body #profile-section#profile-section.active .my-plan-projection-tabs:has([data-my-plan-projection-mode="nocontrib"].is-active)::before {
    content: "Dividends Only";
  }
  html body #profile-section#profile-section.active .my-plan-projection-tabs:has([data-my-plan-projection-mode="hold"].is-active)::before {
    content: "Hold Only";
  }
  html body #profile-section#profile-section.active .my-plan-projection-tab,
  html body #profile-section#profile-section.active .my-plan-projection-tab.is-active,
  html body #profile-section#profile-section.active .my-plan-projection-tab + .my-plan-projection-tab {
    display: grid !important;
    place-items: center !important;
    width: 27px !important;
    height: 32px !important;
    min-height: 32px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
  }
  html body #profile-section#profile-section.active .my-plan-projection-tab small { display: none !important; }
  html body #profile-section#profile-section.active .my-plan-projection-tab::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #557787;
    box-shadow: none;
  }
  html body #profile-section#profile-section.active .my-plan-projection-tab.is-active::after {
    width: 9px;
    height: 9px;
    background: #14d9e6;
    box-shadow: 0 0 0 3px rgba(20, 217, 230, .14);
  }
  html body #profile-section#profile-section.active .my-plan-projection-tab:focus-visible {
    outline: 2px solid #14d9e6 !important;
    outline-offset: -2px !important;
  }
}