/*
 * BENEPESO beneficiary phone layout
 *
 * This file is intentionally loaded last.  The project has several page-level
 * polish layers, so phone rules kept here must win the cascade consistently.
 * The 600px breakpoint covers common 320-430 CSS-pixel phones (including the
 * Realme 6i in portrait) while retaining the existing tablet/desktop design.
 */

@media (max-width: 600px) {
  html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    font-size: 14px;
  }

  *, *::before, *::after { box-sizing: border-box; }

  img, svg, video, iframe { max-width: 100%; }

  :where(h1, h2, h3, h4, p, a, button, label, span, strong, small) {
    overflow-wrap: break-word;
  }

  :where(input, select, textarea, button) {
    max-width: 100%;
    font-family: inherit;
  }

  :where(input, select, textarea) { font-size: 16px !important; }
  :where(button, .btn, .btn-main, .btn-primary, .btn-secondary) { touch-action: manipulation; }

  :where(.content-wrap, .content-container, .welcome-inner, .topbar-inner) {
    width: calc(100% - 24px) !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-inline: auto !important;
  }
  .welcome-inner {
    min-height: 0 !important;
    padding-block: 0 !important;
  }

  /* Shared beneficiary header */
  .topbar { min-height: 64px; }
  .topbar-inner {
    min-height: 64px;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center !important;
    gap: 8px !important;
    padding-block: 8px;
  }
  .brand-area { min-width: 0; gap: 9px; }
  .brand-logo {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
  }
  .brand-title { font-size: 18px !important; line-height: 1.1; }
  .brand-subtitle { margin-top: 2px; font-size: 8px !important; letter-spacing: .08em; }
  .menu-button {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px;
    padding: 10px !important;
    border-radius: 11px !important;
  }
  .brand-area {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    justify-content: center;
  }
  .topbar-inner > .bp-update-center {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: 42px !important;
    margin: 0 !important;
  }
  .menu-area {
    top: calc(100% + 8px) !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-height: calc(100dvh - 82px);
    padding: 10px !important;
    overflow-y: auto;
    border-radius: 14px !important;
  }
  .menu-area .menu-item,
  .menu-area .btn-login { min-height: 43px; padding: 10px 12px !important; font-size: 13px !important; }
  .menu-area .account-area,
  .menu-area .account-button { width: 100% !important; }

  /* Public index */
  .public-index-page .public-home-hero.search-hero.welcome-area {
    min-height: 0 !important;
    padding: 26px 0 0 !important;
  }
  .public-index-page .public-home-hero-inner { display: grid !important; gap: 12px !important; }
  .public-index-page .public-home-hero-grid { gap: 12px !important; }
  .public-index-page .public-hero-copy,
  .public-index-page .public-home-hero .centered-text { text-align: center !important; }
  .public-index-page .public-hero-copy .welcome-badge { margin-inline: auto !important; }
  .public-index-page .public-home-hero .welcome-title {
    margin: 14px auto 12px !important;
    font-size: clamp(29px, 9.3vw, 38px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em;
  }
  .public-index-page .public-home-hero .centered-text {
    margin-inline: auto !important;
    font-size: 13px !important;
    line-height: 1.62 !important;
  }
  .public-index-page .public-hero-actions { gap: 8px !important; margin-top: 16px !important; }
  .public-index-page .public-hero-actions a {
    width: 100%;
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 11.5px !important;
  }
  .public-index-page .public-program-shortcuts { margin-top: 18px !important; text-align: center; }
  .public-index-page .public-program-shortcuts > div { justify-content: center; }
  /* The summary already repeats these three shortcuts on a phone. */
  .public-index-page:not(.public-about-page) .public-program-shortcuts { display: none !important; }
  .public-index-page .public-hero-summary { padding: 13px !important; border-radius: 15px !important; text-align: center; }
  .public-index-page .public-summary-head { justify-content: center !important; flex-wrap: wrap; }
  .public-index-page .public-summary-count { min-height: 0 !important; margin: 12px 0 !important; }
  .public-index-page .public-summary-count strong { font-size: 34px !important; }
  .public-index-page .public-summary-programs { gap: 6px !important; }
  .public-index-page .public-summary-programs > a {
    grid-template-columns: 38px minmax(0, 1fr) 38px !important;
    gap: 7px !important;
    min-height: 50px !important;
    padding: 5px 7px !important;
    align-items: center !important;
  }
  .public-index-page .public-summary-programs a > i,
  .public-index-page .public-summary-programs a > em {
    align-self: center !important;
    justify-self: center !important;
  }
  .public-index-page .public-summary-programs a > i { width: 36px !important; height: 36px !important; }
  .public-index-page .public-summary-programs a > span {
    align-content: center !important;
    justify-items: center !important;
    text-align: center !important;
  }
  .public-index-page .public-summary-programs a b { width: 100%; text-align: center !important; }
  .public-index-page .public-summary-programs small { display: none !important; }
  .public-index-page .public-summary-foot {
    gap: 4px !important;
    align-items: center !important;
    flex-direction: column;
    margin-top: 10px !important;
    padding-top: 9px !important;
    text-align: center;
  }

  .public-index-page .public-home-hero .v-search-box-centered { margin: 0 !important; }
  .public-index-page .public-home-hero .v-search-box-centered .input-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 7px !important;
    border-radius: 13px !important;
  }
  .public-index-page .public-home-hero .input-wrapper > .search-icon { display: none !important; }
  .public-index-page .public-home-hero .v-search-box-centered input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
  }
  .public-index-page .public-home-hero .public-schedule-select,
  .public-index-page .public-home-hero .public-schedule-toggle,
  .public-index-page .public-home-hero .v-search-box-centered .btn-main { width: 100% !important; }
  .public-index-page .public-home-hero .public-schedule-toggle,
  .public-index-page .public-home-hero .v-search-box-centered .btn-main { min-height: 44px !important; }

  /* The hero filter is the single phone filter. The desktop directory toolbar
     repeats the same schedule control and only adds unnecessary scrolling. */
  .public-index-page .public-directory-toolbar { display: none !important; }

  .public-index-page .public-trust-strip { margin: 0 !important; padding: 0 !important; }
  .public-index-page .public-trust-strip .content-wrap { width: calc(100% - 24px) !important; }
  .public-index-page .public-trust-strip .content-wrap > span {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 3px !important;
    padding: 11px 8px !important;
    align-items: center;
    justify-items: center;
    text-align: center;
  }
  .public-index-page .public-trust-strip svg {
    grid-row: auto !important;
    margin-bottom: 2px;
    justify-self: center;
  }
  .public-index-page .public-route { width: calc(100% - 24px) !important; padding: 16px !important; }
  .public-index-page .public-route-heading { text-align: center; }
  .public-index-page .public-route-heading h2 { font-size: 21px !important; text-align: center; }
  .public-index-page .public-route-flow li { min-height: 0 !important; padding: 10px !important; align-items: center; }
  .public-index-page .public-route-flow .route-icon { align-self: center; justify-self: center; }
  .public-index-page .public-directory-toolbar form { padding: 7px !important; }
  .public-index-page .public-directory-toolbar input,
  .public-index-page .public-directory-toolbar button,
  .public-index-page .public-directory-toolbar .public-schedule-toggle { min-height: 44px !important; height: auto !important; }
  .public-index-page .section-heading h2 { font-size: 26px !important; }
  .public-index-page .program-card { width: 100% !important; }

  /* Public program details: keep an inset around the sheet, give the identity
     area room to breathe, and keep the close control away from the title. */
  .public-index-page #programModalOverlay { padding: 10px !important; }
  .public-index-page #programModalOverlay .modal-landscape {
    width: 100% !important;
    height: calc(100dvh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 17px !important;
  }
  .public-index-page #programModalOverlay .modal-left {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 14px !important;
    min-height: 112px;
    padding: 15px 56px 15px 15px !important;
  }
  .public-index-page #programModalOverlay .modal-left-img-wrapper {
    width: 92px !important;
    max-height: 76px !important;
    margin: 0 !important;
    border-radius: 9px !important;
  }
  .public-index-page #programModalOverlay .modal-left-content { text-align: left !important; }
  .public-index-page #programModalOverlay .modal-left-content h2 {
    font-size: 19px !important;
    line-height: 1.2 !important;
  }
  .public-index-page #programModalOverlay .modal-code {
    margin-top: 7px !important;
    padding: 5px 9px !important;
    font-size: 9.5px !important;
    white-space: normal !important;
  }
  .public-index-page #programModalOverlay .m-scroll-area { padding: 18px 16px 12px !important; }
  .public-index-page #programModalOverlay .modal-service-heading { align-items: center; text-align: center; }
  .public-index-page #programModalOverlay .m-section h4 { text-align: center; }
  .public-index-page #programModalOverlay .m-grid-item { text-align: center; }
  .public-index-page #programModalOverlay .m-grid-header { justify-content: center; }
  .public-index-page #programModalOverlay .modal-footer > div { text-align: center; }

  /* Public About page */
  .public-about-page .public-about-hero.search-hero.welcome-area {
    min-height: 0 !important;
    padding: 24px 0 12px !important;
  }
  .public-about-page .public-about-hero-inner {
    width: calc(100% - 24px) !important;
    min-height: 0 !important;
    gap: 12px !important;
    padding-block: 0 !important;
  }
  .public-about-page .public-about-hero-copy { text-align: center !important; }
  .public-about-page .public-about-hero-copy .welcome-badge { margin-inline: auto !important; }
  .public-about-page .public-about-hero .welcome-title {
    margin: 13px 0 11px !important;
    font-size: clamp(29px, 9.4vw, 38px) !important;
    line-height: 1.08 !important;
  }
  .public-about-page .public-about-hero .centered-text { font-size: 13px !important; line-height: 1.6 !important; text-align: center !important; }
  .public-about-page .public-about-hero .public-hero-actions { display: grid !important; grid-template-columns: 1fr; gap: 8px !important; }
  .public-about-page .public-about-hero .public-hero-actions a { width: 100%; min-height: 44px !important; padding: 10px 14px !important; font-size: 11.5px !important; }
  .public-about-page .public-about-identity { width: 100% !important; padding: 14px !important; }
  .public-about-page .public-about-seal { width: 58px !important; height: 58px !important; }
  .public-about-page .public-about-overview { width: calc(100% - 24px) !important; padding: 26px 0 30px !important; }
  .public-about-page .public-about-heading { margin-bottom: 18px !important; }
  .public-about-page .public-about-heading h2,
  .public-about-page .public-about-standards h2,
  .public-about-page .public-about-contact h2,
  .public-about-page .public-purpose-copy h2 { font-size: 24px !important; }
  .public-about-page .public-about-grid article { padding: 16px !important; }
  .public-about-page .public-about-purpose { padding: 30px 0 !important; }
  .public-about-page .public-purpose-visual { transform: scale(.88); margin-block: -20px; }
  .public-about-page .public-about-standards { padding: 28px 0 !important; }
  .public-about-page .public-about-contact { width: calc(100% - 24px) !important; margin-block: 14px !important; padding: 16px !important; }

  /* Small, readable in-app notices instead of desktop-width toasts. */
  .toast-notification {
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
    padding: 12px !important;
    font-size: 11.5px !important;
  }

  /* Login and signup */
  body.auth-page {
    display: block !important;
    min-height: 100dvh;
    padding: 10px !important;
    overflow-x: hidden;
  }
  .auth-page .box,
  .auth-page .card,
  .auth-page .card.compact {
    width: 100% !important;
    max-width: 440px !important;
    min-width: 0 !important;
    margin-inline: auto !important;
  }
  .auth-page .card,
  .auth-page .card.compact {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
    border-radius: 16px !important;
  }
  .auth-page .left,
  .auth-page .card.compact .left {
    min-height: 0 !important;
    padding: 11px 14px !important;
    border-right: 0 !important;
    border-bottom: 4px solid var(--green) !important;
  }
  .auth-page .brand {
    width: fit-content !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0 10px !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    text-align: left !important;
  }
  .auth-page .logo {
    grid-row: auto !important;
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }
  .auth-page .left h1 { align-self: center; margin: 0 !important; font-size: 20px !important; line-height: 1.1; }
  .auth-page .left p { display: none !important; }
  .auth-page .auth-benefits { display: none !important; }
  .auth-page .right,
  .auth-page .card.compact .right { min-width: 0 !important; padding: 18px 15px 20px !important; }
  .auth-page .right-inner { width: 100% !important; max-width: none !important; }
  .auth-page .auth-context-bar {
    width: fit-content !important;
    max-width: 100%;
    min-height: 0 !important;
    margin: 0 auto 8px 0 !important;
    justify-content: center !important;
  }
  .auth-page .auth-return {
    width: fit-content !important;
    min-height: 28px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 5px 10px !important;
    border: 1px solid #d7e5de !important;
    border-radius: 999px !important;
    background: #f7fbf9 !important;
    box-shadow: none !important;
    font-size: 10px !important;
  }
  .auth-page .auth-return svg { width: 14px !important; height: 14px !important; }
  .auth-page .role-label { font-size: 8px !important; }
  .auth-page .right h2 { margin-bottom: 5px !important; font-size: 22px !important; line-height: 1.2; text-align: center; }
  .auth-page .sub { margin-bottom: 16px !important; font-size: 11.5px !important; line-height: 1.5 !important; text-align: center; }
  .auth-page .form-group { margin-bottom: 10px !important; }
  .auth-page .form-group label { margin-bottom: 4px !important; font-size: 10px !important; }
  .auth-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .auth-page select { min-height: 46px !important; height: 46px !important; padding-block: 8px !important; font-size: 13px !important; }
  .auth-page .remember-option input[type="checkbox"] {
    width: 17px !important;
    min-width: 17px !important;
    height: 17px !important;
    min-height: 17px !important;
  }
  .auth-page .has-leading-icon input { padding-left: 42px !important; }
  .auth-page .auth-form-options {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 20px !important;
    gap: 8px !important;
    margin: 2px 0 10px !important;
    padding: 0 !important;
    font-size: 10px !important;
  }
  .auth-page .remember-option,
  .auth-page .auth-form-options > a {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
  }
  .auth-page .auth-form-options > a { justify-self: end; text-align: right; }
  .auth-page .btn { min-height: 46px !important; margin-top: 14px !important; padding: 10px 14px !important; font-size: 12px !important; }
  .auth-page .auth-divider { margin: 13px 0 10px !important; font-size: 8px !important; }
  .auth-page .google-signin { min-height: 42px; }
  .auth-page .small,
  .auth-page .auth-support-link { font-size: 9.5px !important; line-height: 1.45 !important; }

  .auth-signup .signup-progress-copy { margin-bottom: 6px !important; }
  .auth-signup .step-tracker { margin-bottom: 13px !important; }
  .auth-signup .signup-progress-copy { text-align: center; }
  .auth-signup .form-row { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
  .auth-signup .form-row.form-row--mobile-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .auth-signup .form-step { min-width: 0; }
  .auth-signup .signup-actions { gap: 8px !important; }
  .auth-signup .auth-account-footer {
    flex-direction: column !important;
    gap: 5px !important;
    margin-top: 8px !important;
    text-align: center;
  }
  .auth-signup .auth-account-footer > span[aria-hidden="true"] { display: none !important; }
  .auth-signup .auth-account-footer .small,
  .auth-signup .auth-account-footer .auth-support-link { width: 100% !important; text-align: center; }
  .bp-back-to-top { display: none !important; }

  /* Auth and beneficiary dialogs */
  .auth-page .modal-bg,
  :where(.home-page, .beneficiary-programs-page) .modal {
    padding: 8px !important;
  }
  .auth-page .modal,
  :where(.home-page, .beneficiary-programs-page) .modal-content,
  :where(.home-page, .beneficiary-programs-page) .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 20px 16px !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
  }
  .auth-page .modal-title,
  :where(.home-page, .beneficiary-programs-page) .modal-content h2 { font-size: 20px !important; }
  .auth-page .modal-subtitle,
  :where(.home-page, .beneficiary-programs-page) .modal-content p { font-size: 11.5px; }
  .auth-page .modal-icon-header { width: 52px !important; height: 52px !important; margin-bottom: 12px !important; }
  .auth-page .modal-close-btn,
  :where(.home-page, .beneficiary-programs-page) .close-modal { width: 40px !important; height: 40px !important; }

  /* Authenticated home */
  .home-page .welcome-area { min-height: 0 !important; padding: 42px 0 32px !important; }
  .home-page .welcome-inner { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 26px !important; }
  .home-page .welcome-left { max-width: 100% !important; text-align: center; }
  .home-page .welcome-badge { max-width: 100%; margin-inline: auto; font-size: 8px !important; white-space: normal; }
  .home-page .welcome-title { margin: 13px 0 12px !important; font-size: clamp(29px, 9vw, 37px) !important; line-height: 1.08 !important; }
  .home-page .welcome-text { font-size: 13px !important; line-height: 1.6 !important; }
  .home-page .welcome-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; margin-top: 20px !important; }
  .home-page .welcome-actions a { width: 100%; min-height: 44px; padding: 10px 14px !important; font-size: 11.5px !important; }
  .home-page .welcome-stats { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px !important; margin-top: 18px !important; }
  .home-page .stat-box { min-width: 0 !important; padding: 8px 5px !important; justify-content: center; }
  .home-page .stat-icon { display: none !important; }
  .home-page .stat-title { font-size: 11px !important; }
  .home-page .stat-sub { font-size: 7px !important; }
  .home-page .welcome-right { min-width: 0 !important; }
  .home-page .hero-graphic { min-height: 270px !important; }
  .home-page .bp-service-orbit { width: min(270px, 88vw) !important; }
  .home-page .program-area,
  .home-page .service-guide-section,
  .home-page .service-help-section { padding-block: 38px !important; }
  .home-page .area-title,
  .home-page .content-enhancement-heading h2 { font-size: 24px !important; }
  .home-page .home-official-advisory,
  .home-page .bp-service-snapshot { padding: 15px !important; }
  .home-page .home-readiness-panel {
    gap: 12px !important;
    padding: 16px 14px !important;
  }
  .home-page .home-readiness-heading {
    display: grid !important;
    gap: 5px !important;
    align-self: stretch !important;
    text-align: center;
  }
  .home-page .home-readiness-heading .area-title,
  .home-page .home-readiness-heading .area-sub { margin: 0 !important; }
  .home-page .home-readiness-heading > a {
    width: fit-content !important;
    min-height: 0 !important;
    margin: 2px auto 0 !important;
    padding: 2px 0 !important;
    line-height: 1.35 !important;
  }
  .home-page .home-readiness-list { margin-top: 0 !important; }

  /* The desktop footer's generous spacing becomes excessive on a phone. */
  .site-footer {
    min-height: 0 !important;
    margin-top: 0 !important;
    padding: 28px 0 18px !important;
  }
  .site-footer .footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    text-align: center !important;
  }
  .site-footer .footer-brand {
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 7px !important;
    min-width: 0 !important;
    text-align: center !important;
  }
  .site-footer .footer-brand > div,
  .site-footer .brand-text-footer { width: 100%; min-width: 0; }
  .site-footer .footer-logo {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    margin: 0 auto !important;
  }
  .site-footer .footer-title { font-size: 18px !important; line-height: 1.15 !important; }
  .site-footer .footer-sub {
    max-width: 260px;
    margin: 3px auto 0 !important;
    font-size: 8px !important;
    line-height: 1.45;
    white-space: normal !important;
  }
  .site-footer .footer-col { display: grid; justify-items: center; gap: 4px; }
  .site-footer .footer-grid > .footer-col:nth-child(2) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(290px, 100%);
    margin-inline: auto;
    column-gap: 10px;
  }
  .site-footer .footer-grid > .footer-col:nth-child(2) .footer-head { grid-column: 1 / -1; }
  .site-footer .footer-head { margin: 0 0 3px !important; font-size: 10px !important; }
  .site-footer .footer-col a,
  .site-footer .footer-text {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    font-size: 10.5px !important;
    line-height: 1.45 !important;
  }
  .site-footer .footer-contact-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .site-footer .footer-bottom {
    align-items: center !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin-top: 20px !important;
    padding-top: 14px !important;
    text-align: center !important;
    font-size: 9px !important;
    line-height: 1.45;
  }
  .site-footer .footer-mini { max-width: 290px; letter-spacing: .06em; }
  .home-page .bp-service-snapshot-v2 .bp-snapshot-controls {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
  }
  .home-page .bp-service-snapshot-v2 .bp-service-snapshot-status,
  .home-page .bp-service-snapshot-v2 .bp-service-snapshot-action {
    width: min(100%, 230px) !important;
    max-width: 230px !important;
    grid-column: 1 !important;
    justify-self: center !important;
  }
  .home-page .bp-service-snapshot-v2 .bp-service-snapshot-action {
    min-height: 40px !important;
    justify-content: center !important;
  }

  .home-page .quick-top {
    align-items: center !important;
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center;
  }
  .home-page .quick-top > div:first-child { width: 100%; text-align: center; }
  .home-page .quick-link {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center;
    gap: 8px !important;
    padding: 15px !important;
    text-align: center;
  }
  .home-page .quick-link > div { text-align: center !important; }
  .home-page .quick-link .quick-icon { margin-inline: auto !important; }
  .home-page .quick-link .quick-arrow { position: static !important; justify-self: center; }

  /* On a phone the journey reads top-to-bottom. Keep each numbered marker
     above its step so the visual order matches the reading order. */
  .home-page .service-step-grid > li {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    gap: 7px !important;
    padding: 16px 14px !important;
    text-align: center !important;
  }
  .home-page .service-step-grid > li > span {
    margin: 0 auto 3px !important;
    justify-self: center !important;
  }
  .home-page .service-step-grid > li > div { width: 100%; text-align: center !important; }
  .home-page .service-step-grid p { max-width: 270px; margin-inline: auto !important; }

  .home-page .program-area .area-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 11px !important;
    text-align: center !important;
  }
  .home-page .program-area .area-head > * { min-width: 0; justify-self: center !important; }
  .home-page .program-heading-copy { width: 100%; justify-items: center; text-align: center; }
  .home-page .program-heading-meta { justify-content: center !important; }
  .home-page .program-area .area-title,
  .home-page .program-area .area-sub { text-align: center !important; }
  .home-page .program-area .area-sub { max-width: 310px; margin-inline: auto; }
  .home-page .program-area .see-more,
  .home-page .home-official-advisory > a {
    width: fit-content !important;
    min-height: 0 !important;
    margin-inline: auto !important;
    padding: 5px 4px !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--green) !important;
    text-align: center;
    text-decoration: none;
  }
  .home-page .home-official-advisory {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center;
    gap: 8px !important;
    text-align: center;
  }
  .home-page .home-official-advisory > * { grid-column: 1 !important; grid-row: auto !important; }
  .home-page .home-advisory-mark { margin-inline: auto; }
  .home-page .home-advisory-meta { justify-items: center; text-align: center; }

  /* Beneficiary programs */
  .beneficiary-programs-page .page-wrap > .welcome-area.programs-hero {
    min-height: 0 !important;
    padding: 44px 0 38px !important;
  }
  .beneficiary-programs-page .programs-hero .welcome-inner { width: calc(100% - 24px) !important; }
  .beneficiary-programs-page .programs-hero .welcome-left { width: 100% !important; max-width: 100% !important; }
  .beneficiary-programs-page .programs-hero .welcome-badge { font-size: 8px !important; }
  .beneficiary-programs-page .page-wrap > .welcome-area.programs-hero .welcome-title {
    margin: 13px 0 12px !important;
    font-size: clamp(31px, 10vw, 39px) !important;
    line-height: 1.06 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .beneficiary-programs-page .page-wrap > .welcome-area.programs-hero .welcome-text {
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.62 !important;
  }
  .beneficiary-programs-page .programs-hero-note { width: 100% !important; margin-top: 20px !important; padding: 12px !important; text-align: left; }
  .beneficiary-programs-page .programs-hero-note svg { width: 25px !important; height: 25px !important; }
  .beneficiary-programs-page .program-area { padding: 38px 0 42px !important; }
  .beneficiary-programs-page .program-area .content-wrap { width: calc(100% - 24px) !important; }
  .beneficiary-programs-page .area-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
    align-items: start !important;
  }
  .beneficiary-programs-page .head-text { width: 100% !important; min-width: 0 !important; text-align: left !important; }
  .beneficiary-programs-page .area-title {
    margin: 0 0 7px !important;
    font-size: 27px !important;
    line-height: 1.15 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .beneficiary-programs-page .area-sub { max-width: 100% !important; font-size: 12px !important; line-height: 1.55 !important; }
  .beneficiary-programs-page .program-discovery-controls {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 5px !important;
  }
  .beneficiary-programs-page .program-discovery-controls > .search-container,
  .beneficiary-programs-page .program-discovery-controls > .schedule-filter-wrap,
  .beneficiary-programs-page .program-discovery-controls input,
  .beneficiary-programs-page .program-schedule-toggle { width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; }
  .beneficiary-programs-page .program-discovery-controls input { padding-left: 39px !important; padding-right: 10px !important; font-size: 12px !important; }
  .beneficiary-programs-page .program-schedule-toggle { padding: 8px 11px !important; font-size: 11.5px !important; }
  .beneficiary-programs-page .program-filter-guidance {
    grid-column: auto !important;
    max-width: 100%;
    margin: -3px auto 0 !important;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .beneficiary-programs-page .program-filter-guidance .program-results-icon { flex: 0 0 20px; }
  .beneficiary-programs-page .program-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  .beneficiary-programs-page .program-card { width: 100% !important; min-width: 0 !important; border-radius: 14px !important; }
  .beneficiary-programs-page .program-card .card-img-wrap { height: 138px !important; padding: 8px 10px !important; }
  .beneficiary-programs-page .program-card .card-img-wrap img { object-fit: contain !important; }
  .beneficiary-programs-page .program-card .card-body { padding: 15px !important; }
  .beneficiary-programs-page .program-card .card-title { font-size: 18px !important; }
  .beneficiary-programs-page .program-card .card-desc { font-size: 11.5px !important; line-height: 1.55 !important; }
  .beneficiary-programs-page .program-card .card-footer-info { gap: 8px !important; padding-top: 12px !important; }
  .beneficiary-programs-page .program-card .program-card-schedule { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
  .beneficiary-programs-page .program-card .program-card-schedule span {
    min-width: 0;
    min-height: 48px !important;
    padding: 7px !important;
    align-items: center;
    text-align: center !important;
  }
  .beneficiary-programs-page .program-card .program-card-schedule strong { font-size: 10.5px !important; }
  .beneficiary-programs-page .program-card .program-btn,
  .beneficiary-programs-page .program-card .btn-check-status { min-height: 43px !important; font-size: 11.5px !important; }
  .beneficiary-programs-page .completed-area { padding: 34px 0 42px !important; }
  .beneficiary-programs-page .completed-list { gap: 8px !important; }
  .beneficiary-programs-page .completed-item {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 13px !important;
    justify-items: center;
    text-align: center;
  }
  .beneficiary-programs-page .comp-icon { width: 40px !important; height: 40px !important; margin: 0 !important; }
  .beneficiary-programs-page .comp-info { min-width: 0; text-align: center; }
  .beneficiary-programs-page .comp-status {
    grid-column: 1 !important;
    justify-self: center !important;
    margin: 3px 0 0 !important;
  }

  .beneficiary-programs-page .batch-chooser-dialog {
    width: calc(100% - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 20px 14px 16px !important;
  }
  .beneficiary-programs-page .batch-chooser-kicker {
    width: 100%;
    margin-bottom: 5px !important;
    justify-content: center;
    text-align: center;
  }
  .beneficiary-programs-page .batch-chooser-dialog h2 {
    margin: 0 38px 6px !important;
    font-size: 23px !important;
    line-height: 1.15;
    text-align: center;
  }
  .beneficiary-programs-page .batch-chooser-intro { margin-bottom: 14px !important; font-size: 11.5px !important; line-height: 1.5 !important; text-align: center; }
  .beneficiary-programs-page .batch-choice-list { gap: 7px !important; }
  .beneficiary-programs-page .batch-choice-card { padding: 10px !important; gap: 8px !important; }
  .beneficiary-programs-page .batch-choice-number { width: 34px !important; height: 34px !important; }

  .beneficiary-programs-page #programDetailsModal .program-details-dialog,
  .beneficiary-programs-page #applicationModal .modal-content {
    width: calc(100% - 16px) !important;
    max-width: none !important;
    max-height: calc(100dvh - 16px) !important;
  }
  .beneficiary-programs-page .program-details-split { height: auto !important; max-height: calc(100dvh - 16px) !important; }
  .beneficiary-programs-page .program-details-identity {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 12px 50px 12px 12px !important;
    align-items: center;
  }
  .beneficiary-programs-page .program-details-image-wrap {
    width: 78px !important;
    height: 58px !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border-radius: 9px !important;
  }
  .beneficiary-programs-page #programDetailsModal .details-header { padding: 0 !important; text-align: center !important; }
  .beneficiary-programs-page #programDetailsModal .program-details-kicker { margin-bottom: 4px !important; font-size: 7.5px !important; }
  .beneficiary-programs-page #programDetailsModal .details-heading-row { padding: 0 !important; justify-content: center !important; }
  .beneficiary-programs-page #programDetailsModal .details-heading-row h2 { font-size: 20px !important; text-align: center !important; }
  .beneficiary-programs-page #programDetailsModal .details-header .batch-code { margin: 4px auto 6px !important; text-align: center !important; }
  .beneficiary-programs-page .program-details-scroll { padding: 14px 12px !important; }
  .beneficiary-programs-page .program-details-review-heading {
    width: 100%;
    gap: 3px !important;
    margin: 0 0 12px !important;
    padding-bottom: 9px !important;
    align-items: center !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center;
  }
  .beneficiary-programs-page .program-details-section { margin-bottom: 13px !important; }
  .beneficiary-programs-page .program-details-section h3 { margin-bottom: 7px !important; text-align: center; }
  .beneficiary-programs-page .program-details-section > p { font-size: 12px !important; line-height: 1.58 !important; }
  .beneficiary-programs-page #programDetailsModal .program-schedule-panel { margin-bottom: 10px !important; padding: 8px !important; }
  .beneficiary-programs-page #programDetailsModal .program-schedule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .beneficiary-programs-page #programDetailsModal .program-schedule-item {
    min-height: 57px !important;
    padding: 7px !important;
    align-items: center;
    text-align: center;
  }
  .beneficiary-programs-page #programDetailsModal .program-schedule-label { font-size: 7.5px !important; }
  .beneficiary-programs-page #programDetailsModal .program-schedule-value { font-size: 10.5px !important; }
  .beneficiary-programs-page .program-detail-record-meta {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
    margin-bottom: 12px !important;
    padding: 8px !important;
    justify-items: center;
    text-align: center;
  }
  .beneficiary-programs-page .program-detail-record-meta strong { justify-self: center !important; text-align: center !important; }
  .beneficiary-programs-page #programDetailsModal .program-detail-list { gap: 6px !important; }
  .beneficiary-programs-page #programDetailsModal .program-detail-list li { padding: 8px 9px !important; }
  .beneficiary-programs-page #programDetailsModal .details-footer { padding: 10px 15px !important; }
  /* All three program applications share this phone-first form shell. */
  .beneficiary-programs-page #applicationModal { padding: 8px !important; align-items: flex-end; }
  .beneficiary-programs-page #applicationModal .modal-content {
    height: calc(100dvh - 16px) !important;
    padding: 16px 14px 0 !important;
    overflow: hidden !important;
  }
  .beneficiary-programs-page #applicationModal .modal-close {
    top: 11px !important;
    right: 11px !important;
    width: 44px !important;
    height: 44px !important;
  }
  .beneficiary-programs-page #applicationModal .application-modal-heading {
    padding: 2px 44px 12px !important;
  }
  .beneficiary-programs-page #applicationModal .application-modal-eyebrow {
    gap: 6px !important;
    margin-bottom: 4px !important;
    font-size: 8px !important;
  }
  .beneficiary-programs-page #applicationModal .application-modal-heading h2 {
    margin-bottom: 3px !important;
    font-size: 25px !important;
    line-height: 1.12 !important;
  }
  .beneficiary-programs-page #applicationModal .application-modal-heading p { font-size: 11.5px !important; line-height: 1.4 !important; }
  .beneficiary-programs-page #applicationModal .wizard-nav {
    margin-inline: -14px !important;
    padding: 10px 12px 11px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .beneficiary-programs-page #applicationModal .wizard-nav::-webkit-scrollbar { display: none; }
  .beneficiary-programs-page #applicationModal .wizard-nav--compact .wizard-step-indicator {
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }
  .beneficiary-programs-page #applicationModal .wizard-nav--scrollable {
    justify-content: flex-start !important;
    scroll-snap-type: x proximity;
  }
  .beneficiary-programs-page #applicationModal .wizard-nav--scrollable .wizard-step-indicator {
    min-width: 78px !important;
    flex: 0 0 78px !important;
    scroll-snap-align: center;
  }
  .beneficiary-programs-page #applicationModal .wizard-number {
    width: 28px !important;
    height: 28px !important;
    margin-bottom: 4px !important;
    font-size: 10px !important;
  }
  .beneficiary-programs-page #applicationModal .wizard-step-indicator::after {
    top: 13px !important;
    left: calc(50% + 15px) !important;
    width: calc(100% - 30px) !important;
  }
  .beneficiary-programs-page #applicationModal .wizard-label {
    min-height: 24px !important;
    font-size: 7.5px !important;
    line-height: 1.2 !important;
  }
  .beneficiary-programs-page #applicationModal .application-progress-summary {
    margin-inline: -14px !important;
    padding: 8px 14px !important;
    align-items: center !important;
    flex-direction: row !important;
    gap: 8px !important;
  }
  .beneficiary-programs-page #applicationModal .application-progress-summary strong { flex: 0 0 auto; font-size: 9.5px !important; }
  .beneficiary-programs-page #applicationModal .application-progress-summary span { font-size: 8.5px !important; line-height: 1.35; text-align: right; }
  .beneficiary-programs-page #applicationModal #multiStepForm {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 -4px 0 0 !important;
    padding: 12px 4px 18px 0 !important;
    overflow-y: auto !important;
    scroll-padding-bottom: 18px;
  }
  .beneficiary-programs-page #applicationModal .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 11px 8px !important;
  }
  .beneficiary-programs-page #applicationModal .form-grid > .span-2,
  .beneficiary-programs-page #applicationModal .form-grid > .mobile-wide,
  .beneficiary-programs-page #applicationModal .form-grid > .section-title,
  .beneficiary-programs-page #applicationModal .form-grid > .dynamic-table-wrap,
  .beneficiary-programs-page #applicationModal .form-grid > .form-group:has(textarea),
  .beneficiary-programs-page #applicationModal .form-grid > .form-group:has(input[type="file"]),
  .beneficiary-programs-page #applicationModal .form-grid > .form-group:has(.checkbox-grid),
  .beneficiary-programs-page #applicationModal .form-grid > .form-group:has(.dynamic-table-wrap) {
    grid-column: 1 / -1 !important;
  }
  .beneficiary-programs-page #applicationModal #tupad-step-3 .tupad-fitness-field { grid-column: 1 / -1 !important; }
  .beneficiary-programs-page #applicationModal .form-group { min-width: 0; gap: 5px !important; }
  .beneficiary-programs-page #applicationModal .form-group label {
    min-height: 0;
    font-size: 8.5px !important;
    line-height: 1.3 !important;
  }
  .beneficiary-programs-page #applicationModal .form-group input:not([type="checkbox"]):not([type="file"]),
  .beneficiary-programs-page #applicationModal .form-group select,
  .beneficiary-programs-page #applicationModal .form-group textarea {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 45px !important;
    padding: 9px 10px !important;
    font-size: 16px !important;
  }
  .beneficiary-programs-page #applicationModal .section-title {
    margin: 4px 0 1px !important;
    padding: 0 0 8px 12px !important;
    font-size: 15px !important;
  }
  .beneficiary-programs-page #applicationModal .checkbox-grid { gap: 5px !important; padding: 8px !important; }
  .beneficiary-programs-page #applicationModal .checkbox-grid label { min-height: 44px !important; padding: 8px !important; font-size: 12px !important; }
  .beneficiary-programs-page #applicationModal .dynamic-table-wrap { padding: 8px !important; overflow-x: auto; }
  .beneficiary-programs-page #applicationModal .dynamic-table { min-width: 430px; }
  .beneficiary-programs-page #applicationModal .privacy-acknowledgment { align-items: flex-start; font-size: 11px !important; line-height: 1.45 !important; }
  .beneficiary-programs-page #applicationModal .privacy-acknowledgment input { width: 18px; height: 18px; margin-top: 1px; }
  .beneficiary-programs-page #applicationModal .form-actions {
    position: static !important;
    bottom: auto !important;
    gap: 8px !important;
    margin: 18px 0 0 !important;
    padding: 12px 0 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  .beneficiary-programs-page #applicationModal .form-actions .btn-primary,
  .beneficiary-programs-page #applicationModal .form-actions .btn-secondary {
    min-width: 0 !important;
    min-height: 46px !important;
    flex: 1 1 0;
    padding: 10px !important;
    font-size: 11px !important;
  }
  .beneficiary-programs-page #applicationModal .form-actions.single-btn .btn-primary { flex-basis: 100%; width: 100%; }

  /* Authenticated About */
  .about-page .about-hero-custom { min-height: 0 !important; padding: 40px 0 34px !important; }
  .about-page .about-hero-custom .welcome-title { font-size: clamp(29px, 9vw, 36px) !important; line-height: 1.08 !important; }
  .about-page .about-hero-custom .welcome-text { font-size: 13px !important; line-height: 1.6 !important; }
  .about-page .about-hero-actions { gap: 8px !important; margin-top: 20px !important; }
  .about-page .about-hero-actions a { min-height: 44px !important; padding: 10px 13px !important; font-size: 11px !important; }
  .about-page .about-hero-assurance { font-size: 9.5px !important; }
  .about-page .stats-glass-panel { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 !important; padding: 10px 0 !important; }
  .about-page .stat-item { min-width: 0; padding: 10px 5px !important; }
  .about-page .stat-item + .stat-item { border-top: 0 !important; border-left: 1px solid var(--about-border) !important; }
  .about-page .stat-icon { width: 32px !important; height: 32px !important; }
  .about-page .stat-num { font-size: 22px !important; }
  .about-page .stat-label { font-size: 7.5px !important; }
  .about-page .content-section { padding: 36px 0 !important; }
  .about-page .section-title-wrap { margin-bottom: 22px !important; }
  .about-page .section-title-wrap h2 { font-size: 24px !important; }
  .about-page .section-title-wrap p { font-size: 12px !important; }
  .about-page :where(.grid-two, .grid-three) { grid-template-columns: minmax(0, 1fr) !important; gap: 11px !important; }
  .about-page :where(.about-card, .service-card) { min-height: 0 !important; padding: 17px !important; }
  .about-page .service-card h4 { font-size: 17px !important; }
  .about-page .service-card p { font-size: 11.5px !important; }
  .about-page .team-card { padding: 16px !important; gap: 13px !important; }
  .about-page .team-avatar { width: 72px !important; height: 72px !important; }
  .about-page .contact-glass-panel { padding: 17px !important; }
  .about-page .activity-gallery-card { flex-basis: 92% !important; }
  .about-page .activity-modal-overlay { padding: 8px !important; }
  .about-page .activity-modal { width: 100% !important; max-height: calc(100dvh - 16px) !important; border-radius: 15px !important; }
  .about-page .activity-modal-media { padding: 58px 12px 12px !important; }
  .about-page .activity-modal-content { padding: 18px 16px 20px !important; }
  .about-page .activity-modal-content h2 { font-size: 22px !important; }
  .about-page .modal-overlay { padding: 8px !important; }
  .about-page .manager-modal { width: 100% !important; max-height: calc(100dvh - 16px); overflow-y: auto; border-radius: 15px !important; }

  /* Beneficiary Profile, including activity/notification history */
  .beneficiary-profile-page .profile-container {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    padding: 24px 0 38px !important;
  }
  .beneficiary-profile-page .landscape-id-card { padding: 16px !important; border-radius: 15px !important; }
  .beneficiary-profile-page .id-card-inner { min-height: 0 !important; display: grid !important; grid-template-columns: 68px minmax(0, 1fr); gap: 13px !important; align-items: center; }
  .beneficiary-profile-page .id-avatar { width: 68px !important; height: 68px !important; }
  .beneficiary-profile-page .id-details { min-width: 0; }
  .beneficiary-profile-page .id-badges { gap: 5px !important; }
  .beneficiary-profile-page :where(.badge-role, .badge-status) { padding: 5px 7px !important; font-size: 7.5px !important; }
  .beneficiary-profile-page .id-name { margin: 7px 0 5px !important; font-size: 21px !important; line-height: 1.15 !important; }
  .beneficiary-profile-page .id-meta { gap: 5px 10px !important; font-size: 8.5px !important; }
  .beneficiary-profile-page .profile-tabs-nav { width: 100% !important; gap: 5px !important; padding: 6px !important; overflow-x: auto !important; }
  .beneficiary-profile-page .profile-tab { min-width: max-content !important; min-height: 40px !important; padding: 8px 11px !important; font-size: 9.5px !important; }
  .beneficiary-profile-page .profile-content-card { padding: 17px !important; border-radius: 14px !important; }
  .beneficiary-profile-page .content-header { margin-bottom: 18px !important; padding-bottom: 13px !important; }
  .beneficiary-profile-page .content-header h3 { font-size: 19px !important; }
  .beneficiary-profile-page .content-header p { font-size: 10.5px !important; }
  .beneficiary-profile-page #profileForm .info-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 11px !important; }
  .beneficiary-profile-page #profileForm .info-group label { min-height: 0 !important; font-size: 10px !important; }
  .beneficiary-profile-page #profileForm .form-input { min-height: 44px !important; height: auto !important; font-size: 12px !important; }
  .beneficiary-profile-page .profile-record-note { padding: 11px !important; }
  .beneficiary-profile-page .profile-record-note strong { font-size: 11px !important; }
  .beneficiary-profile-page .profile-record-note span { font-size: 10.5px !important; }
  .beneficiary-profile-page #my-programs .status-card-horizontal { padding: 14px !important; border-radius: 13px !important; }
  .beneficiary-profile-page #activity-log .log-timeline { padding-left: 0 !important; }
  .beneficiary-profile-page #activity-log .log-timeline::before { display: none !important; }
  .beneficiary-profile-page #activity-log .log-card-premium {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 12px !important;
    border-radius: 12px !important;
  }
  .beneficiary-profile-page .log-event-icon { width: 38px !important; height: 38px !important; }
  .beneficiary-profile-page .log-event-heading { gap: 5px !important; }
  .beneficiary-profile-page #activity-log .action-pill { padding: 4px 7px !important; font-size: 7.5px !important; }
  .beneficiary-profile-page .log-module-name { font-size: 11px !important; }
  .beneficiary-profile-page .log-description { font-size: 10.5px !important; line-height: 1.5 !important; }
  .beneficiary-profile-page .log-event-time { grid-column: 2 !important; gap: 5px !important; font-size: 9px !important; }
  .beneficiary-profile-page .security-overview,
  .beneficiary-profile-page #security .security-form-panel { padding: 17px !important; }
  .beneficiary-profile-page .security-card { border-radius: 14px !important; }
  .beneficiary-profile-page :where(.modal-overlay, .modal.status-modal) { padding: 8px !important; }
  .beneficiary-profile-page :where(.profile-confirm-dialog, .status-modal-dialog) { width: 100% !important; max-width: 100% !important; max-height: calc(100dvh - 16px) !important; overflow-y: auto; border-radius: 15px !important; }

  /* Verification */
  .verification-page .verify-hero.welcome-area { padding: 30px 0 24px !important; }
  .verification-page .verify-hero .content-wrap,
  .verification-page .results-area.content-wrap,
  .verification-page .verification-guidance.content-wrap { width: calc(100% - 24px) !important; }
  .verification-page .welcome-title { margin-top: 12px !important; font-size: 29px !important; line-height: 1.08 !important; }
  .verification-page .centered-text { font-size: 12.5px !important; }
  .verification-page .verification-route-choice { gap: 7px !important; margin-top: 14px !important; }
  .verification-page .verification-route-choice > * { padding: 11px !important; }
  .verification-page .v-search-box { margin-top: 14px !important; padding: 12px !important; }
  .verification-page .v-input-wrapper { gap: 8px !important; }
  .verification-page :where(.v-select, .v-search-entry) { min-height: 48px !important; height: 48px !important; }
  .verification-page .v-btn { width: 100% !important; min-height: 44px !important; flex-basis: auto !important; }
  .verification-page .results-area { padding: 26px 0 34px !important; }
  .verification-page .v-card-horizontal { padding: 14px !important; }
  .verification-page .v-person-avatar { width: 40px !important; height: 40px !important; }
  .verification-page .v-name { font-size: 18px !important; }
  .verification-page .verification-guidance { padding: 17px !important; margin-bottom: 34px !important; }
  .verification-page .verification-status-grid article { padding: 14px !important; }
  .verification-page .verification-correction-panel { padding: 14px !important; }

  /* Standalone privacy notice */
  .privacy-page header { padding: 12px 12px 58px !important; }
  .privacy-page .wrap { width: calc(100% - 20px) !important; }
  .privacy-page .topbar { padding: 8px 10px !important; border-radius: 13px !important; }
  .privacy-page .brand img { width: 36px !important; height: 36px !important; }
  .privacy-page .hero { padding-top: 31px !important; }
  .privacy-page h1 { font-size: 31px !important; }
  .privacy-page header p { font-size: 13px !important; }
  .privacy-page main { margin-top: -30px !important; padding: 20px 15px !important; border-radius: 15px !important; }
  .privacy-page main h2 { margin-top: 26px !important; font-size: 18px !important; }
  .privacy-page main p,
  .privacy-page main li { font-size: 12.5px !important; }
  .privacy-page .summary { gap: 10px !important; margin-bottom: 24px !important; padding: 14px !important; }
  .privacy-page ul { padding: 14px 14px 14px 30px !important; }
  .privacy-page .actions { margin-top: 28px !important; padding-top: 18px !important; }
  .privacy-page .back { width: 100%; min-height: 44px; justify-content: center; font-size: 11.5px; }

  /* Final component safety net. Page-specific rules above control the visual
     design; these rules prevent any remaining card, media, dialog, or table
     variant from retaining a desktop-only width on a phone. */
  body :where(main, section, article, aside, form, fieldset, figure, div) { min-width: 0; }
  body :where(img, video, canvas) {
    display: block;
  }
  body :where(input, select, textarea) { font-size: 16px !important; }
  body :where(.card, .info-card, .security-card, .status-card-horizontal, .log-card-premium,
    .about-card, .service-card, .team-card, .program-card, .no-results-card,
    .profile-readiness-panel, .verification-correction-panel, .service-access-panel,
    .service-help-panel, .contact-glass-panel) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body :where(.grid-two, .grid-three, .info-grid, .results-grid, .program-grid,
    .program-grid-container, .verification-status-grid, .service-step-grid,
    .applicant-guide-grid, .checkbox-grid) > * { min-width: 0 !important; }
  body :where(button, [class^="btn-"], [class*=" btn-"], .btn, .v-btn, .program-btn,
    .notice-button, .account-button) {
    max-width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
  }
  body :where(button, [class^="btn-"], [class*=" btn-"], .btn, .v-btn, .program-btn) > :where(svg, i) {
    flex: 0 0 auto;
    align-self: center;
  }
  body :where(.dynamic-table-wrap, .table-wrap, .table-wrapper, .scrollable-table-wrap) {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  body :where(.modal-overlay, .activity-modal-overlay, .profile-correction-modal,
    .status-modal, .age-notice-modal, .signup-privacy-modal) {
    padding: 8px !important;
  }
  body :where(.manager-modal, .activity-modal, .status-modal-dialog,
    .profile-confirm-dialog, .application-privacy-dialog, .archive-summary-dialog,
    .spes-baby-dialog, .small-modal) {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    min-width: 0 !important;
    overflow-y: auto !important;
  }
  body :where(.modal-close, .modal-close-btn, .activity-modal-close) {
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }
  body :where(.modal-title, .notice-title, .archive-summary-title) {
    font-size: clamp(18px, 5.8vw, 23px) !important;
    line-height: 1.22 !important;
    overflow-wrap: anywhere;
  }

  .beneficiary-programs-page #applicationModal .wizard-step-indicator.is-current .wizard-number {
    animation: beneficiaryWizardStepIn .36s cubic-bezier(.2, .8, .2, 1) both;
  }

  /* About activity gallery: align the complete heading group, not only its
     text, and keep the photograph/card inside the phone content column. */
  .about-page .activity-gallery-heading {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    gap: 16px !important;
    margin-bottom: 8px !important;
    padding-top: 0 !important;
    text-align: center !important;
  }
  .about-page .activity-gallery-heading > div:first-child { max-width: 36rem; }
  .about-page .activity-gallery-controls {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, 42px) !important;
    justify-content: space-between !important;
    justify-self: stretch !important;
    padding: 0 !important;
    margin-top: 2px !important;
  }
  .about-page .activity-gallery-controls > :first-child { justify-self: start; }
  .about-page .activity-gallery-controls > :last-child { justify-self: end; }
  .about-page .activity-gallery-footer {
    justify-content: center !important;
    margin: 0 0 2px !important;
    text-align: center !important;
  }
  .about-page .activity-gallery-status-wrap { width: min(100%, 255px); justify-content: center !important; }
  .about-page .activity-gallery-frame {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
  .about-page .activity-gallery-track {
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
    padding: 18px 0 24px !important;
  }
  .about-page .activity-gallery-card {
    flex: 0 0 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .about-page .activity-gallery-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* A dedicated icon column keeps every contact icon centered against its
     complete text/link block, including wrapped email and Facebook labels. */
  .about-page .contact-list {
    width: 100%;
    gap: 0 !important;
  }
  .about-page .contact-list li {
    width: 100%;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    align-items: center !important;
    justify-content: stretch !important;
    padding: 14px 0 !important;
    text-align: left !important;
  }
  .about-page .contact-list li > svg {
    grid-column: 1;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: center !important;
  }
  .about-page .contact-list li > a {
    grid-column: 2;
    min-width: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  /* Modal navigation remains visible at the lower edge: previous on the
     left, record position centered, and next on the right. */
  .about-page .activity-modal-footer {
    position: sticky !important;
    z-index: 2;
    bottom: 0;
    width: 100%;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 18px !important;
    padding: 10px 0 max(2px, env(safe-area-inset-bottom)) !important;
    background: #fff;
  }
  .about-page .activity-modal-footer > span {
    grid-column: 2;
    grid-row: 1;
    text-align: center;
  }
  .about-page .activity-modal-footer > div { display: contents !important; }
  .about-page #activityModalPrev { grid-column: 1; grid-row: 1; justify-self: start; }
  .about-page #activityModalNext { grid-column: 3; grid-row: 1; justify-self: end; }

  /* Keep the decorative status dot in its own lane so wrapped eligibility
     and requirement text can never paint over it. */
  .beneficiary-programs-page #programDetailsModal .program-detail-list li {
    min-height: 40px;
    display: flex !important;
    align-items: center !important;
    padding: 9px 10px 9px 30px !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere;
  }
  .beneficiary-programs-page #programDetailsModal .program-detail-list li::before {
    top: 50% !important;
    left: 12px !important;
    width: 7px !important;
    height: 7px !important;
    transform: translateY(-50%);
  }
}

@keyframes beneficiaryWizardStepIn {
  0% { transform: scale(.82); }
  65% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Paired signup fields fit comfortably from large-phone width upward. */
@media (min-width: 390px) and (max-width: 600px) {
  .auth-signup .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  .auth-signup .form-row .form-group { min-width: 0; }
  .auth-signup .form-row input,
  .auth-signup .form-row select { min-width: 0; }
}

@media (max-width: 370px) {
  .brand-title { font-size: 16px !important; }
  .brand-logo { width: 36px !important; height: 36px !important; flex-basis: 36px !important; }
  .public-index-page .public-home-hero .welcome-title,
  .home-page .welcome-title,
  .beneficiary-programs-page .page-wrap > .welcome-area.programs-hero .welcome-title { font-size: 28px !important; }
  .auth-page .right,
  .auth-page .card.compact .right { padding-inline: 12px !important; }
  .auth-page .role-label { display: none; }
  .beneficiary-programs-page .program-card .program-card-schedule { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 340px) {
  .beneficiary-programs-page #applicationModal .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .beneficiary-programs-page #applicationModal .form-grid > * { grid-column: 1 !important; }
}

/* Stacked validation notice: centered above the application bottom sheet. */
@media (max-width: 600px) {
  .beneficiary-programs-page #alertModal {
    z-index: 2400 !important;
    padding: 14px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .beneficiary-programs-page #alertModal .alert-box {
    width: min(390px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
    padding: 32px 17px 19px !important;
    border-radius: 15px !important;
  }

  .beneficiary-programs-page #alertModal .alert-box h2 {
    margin: 0 0 9px !important;
    padding-inline: 34px;
    font-size: 19px !important;
    line-height: 1.3 !important;
  }

  .beneficiary-programs-page #alertModal .alert-box p {
    margin: 0 0 16px !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
  }
}

/* Final authenticated-phone refinements: compact without crowding. */
@media (max-width: 600px) {
  .beneficiary-profile-page .profile-container { display: grid !important; gap: 14px !important; }
  .beneficiary-profile-page .landscape-id-card { padding: 20px 16px !important; }
  .beneficiary-profile-page .id-card-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    gap: 12px !important;
    text-align: center !important;
  }
  .beneficiary-profile-page .id-avatar { width: 82px !important; height: 82px !important; }
  .beneficiary-profile-page .id-details { width: 100% !important; }
  .beneficiary-profile-page .id-badges { justify-content: center !important; flex-wrap: wrap !important; }
  .beneficiary-profile-page .id-name { max-width: 100%; margin: 8px 0 !important; font-size: 23px !important; overflow-wrap: anywhere; }
  .beneficiary-profile-page .id-meta { width: 100%; display: grid !important; gap: 7px !important; font-size: 10.5px !important; }
  .beneficiary-profile-page .meta-item {
    width: 100%; min-width: 0; display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 8px !important;
    padding: 8px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px;
    background: rgba(255,255,255,.07); text-align: left; overflow-wrap: anywhere;
  }
  .beneficiary-profile-page .meta-item svg { justify-self: center; }

  .beneficiary-profile-page .profile-tabs-nav {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important; padding: 6px !important; overflow: visible !important;
  }
  .beneficiary-profile-page .profile-tabs-nav .tab-link {
    width: 100%; min-width: 0 !important; min-height: 48px !important;
    display: flex; justify-content: center; gap: 7px; padding: 8px 6px !important;
    font-size: 10.5px !important; line-height: 1.2; text-align: center;
  }
  .beneficiary-profile-page .profile-tabs-nav .tab-link svg { width: 17px !important; height: 17px !important; flex: 0 0 17px; }
  .beneficiary-profile-page .profile-tabs-nav .tab-link.active { animation: bp-tab-settle .3s cubic-bezier(.22,.8,.32,1); }
  .beneficiary-profile-page .profile-main { min-height: 0 !important; padding: 18px 14px !important; border-radius: 15px !important; }
  .beneficiary-profile-page .content-header { align-items: flex-start !important; gap: 10px !important; }
  .beneficiary-profile-page .content-header > div:first-child { min-width: 0; }
  .beneficiary-profile-page .btn-edit { flex: 0 0 auto; padding: 9px 11px !important; }
  .beneficiary-profile-page .profile-record-note { align-items: flex-start !important; }
  .beneficiary-profile-page .profile-readiness-panel { justify-items: center; text-align: center; }
  .beneficiary-profile-page .profile-readiness-panel > div:first-child { width: 100%; }
  .beneficiary-profile-page .profile-readiness-panel :where(.content-enhancement-eyebrow, h2, p) { text-align: center !important; }
  .beneficiary-profile-page .profile-readiness-panel p { margin-inline: auto; }
  .beneficiary-profile-page .profile-readiness-progress { width: min(92%, 360px) !important; margin-inline: auto !important; }

  .beneficiary-profile-page #profileForm .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px 9px !important; }
  .beneficiary-profile-page #profileForm :where(.section-divider, .full-row) { grid-column: 1 / -1 !important; }
  .beneficiary-profile-page #profileForm .info-group { min-width: 0; }
  .beneficiary-profile-page #profileForm .info-group label { min-height: 28px !important; display: flex; align-items: flex-end; line-height: 1.25 !important; }
  .beneficiary-profile-page #profileForm .form-input { width: 100%; min-width: 0; min-height: 46px !important; padding: 10px !important; }
  .beneficiary-profile-page #profileForm .persistent-hint { display: block !important; font-size: 9.5px !important; }
  .beneficiary-profile-page .profile-save-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; }
  .beneficiary-profile-page .profile-save-actions[hidden] { display: none !important; }

  .beneficiary-profile-page .profile-filter-bar {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px !important; margin: 0 0 16px !important; padding: 0 !important; overflow: visible !important;
  }
  .beneficiary-profile-page .profile-filter-chip { width: 100%; min-width: 0; min-height: 40px; padding: 7px !important; white-space: normal; }
  .beneficiary-profile-page .profile-filter-chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .beneficiary-profile-page .profile-filter-chip.active { animation: bp-filter-settle .26s ease-out; }
  .beneficiary-profile-page #my-programs .status-card-horizontal {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
    gap: 13px !important; padding: 16px !important; overflow: hidden;
    animation: bp-card-enter .34s cubic-bezier(.22,.8,.32,1) both;
  }
  .beneficiary-profile-page #my-programs .card-left { width: 100%; min-width: 0; align-items: flex-start !important; gap: 11px !important; }
  .beneficiary-profile-page #my-programs .card-left > div:last-child { min-width: 0; }
  .beneficiary-profile-page #my-programs .card-left h4 { overflow-wrap: anywhere; }
  .beneficiary-profile-page #my-programs .card-right { width: 100%; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 9px !important; text-align: left !important; }
  .beneficiary-profile-page #my-programs .btn-check-status { width: 100% !important; min-height: 46px; justify-content: center; }
  .beneficiary-profile-page .application-action-summary { grid-template-columns: minmax(0, 1fr) !important; }
  .beneficiary-profile-page .application-action-summary > div + div { border-top: 1px solid #dce9e2 !important; border-left: 0 !important; }
  .beneficiary-profile-page .bp-service-journey { overflow: visible !important; padding-bottom: 0 !important; }
  .beneficiary-profile-page .bp-service-journey-heading { align-items: center; flex-direction: column; gap: 3px; text-align: center; }
  .beneficiary-profile-page .bp-service-journey ol { width: min(100%, 240px); min-width: 0 !important; margin-inline: auto !important; grid-template-columns: minmax(0, 1fr) !important; }
  .beneficiary-profile-page .bp-service-journey li {
    grid-template-columns: 30px minmax(0, 1fr) !important; justify-items: start !important;
    align-items: center; gap: 10px !important; padding: 7px 0 !important; text-align: left !important;
  }
  .beneficiary-profile-page .bp-service-journey li::before { top: -50% !important; left: 14px !important; right: auto !important; width: 2px !important; height: 100% !important; }
  .beneficiary-profile-page .bp-service-journey li > div { text-align: left; }
  .beneficiary-profile-page .bp-service-journey li strong { font-size: 10px !important; }
  .beneficiary-profile-page .bp-service-journey li small { font-size: 9px !important; }

  .beneficiary-profile-page :where(.security-overview, #security .security-form-panel, .profile-data-rights) { padding: 16px !important; }
  .beneficiary-profile-page .security-overview { grid-template-columns: 42px minmax(0, 1fr) !important; gap: 11px !important; }
  .beneficiary-profile-page #security .password-wrap input { padding-right: 50px !important; }
  .beneficiary-profile-page .btn-security,
  .beneficiary-profile-page .profile-data-rights-actions > * { width: 100% !important; min-height: 46px !important; justify-content: center; text-align: center; }

  .beneficiary-profile-page #my-programs .content-header { flex-direction: column !important; align-items: center !important; text-align: center !important; }
  .beneficiary-profile-page #my-programs .application-count { align-self: center; justify-content: center; }
  .beneficiary-profile-page #my-programs .card-left { flex-direction: column; align-items: center !important; text-align: center; }
  .beneficiary-profile-page #my-programs .program-copy { width: 100%; text-align: center; }
  .beneficiary-profile-page #my-programs .card-right { justify-items: center; text-align: center !important; }
  .beneficiary-profile-page #my-programs .status-summary { width: 100%; align-items: center !important; text-align: center; }
  .beneficiary-profile-page #my-programs .application-action-summary > div { justify-items: center; text-align: center; }
  .beneficiary-profile-page :where(#activity-log, #security) .content-header {
    flex-direction: column !important; align-items: center !important;
    justify-content: center !important; text-align: center !important;
  }
  .beneficiary-profile-page :where(#activity-log, #security) .content-header > div:first-child { width: 100%; text-align: center; }
  .beneficiary-profile-page :where(.activity-count, .security-state) { align-self: center !important; justify-content: center; }
  .beneficiary-profile-page .security-overview h4,
  .beneficiary-profile-page .security-overview > p { text-align: center; }
  .beneficiary-profile-page .security-form-heading { text-align: center; }

  .verification-page .v-resident-field { grid-template-rows: 12px auto auto !important; }
  .verification-page .v-resident-control { grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; gap: 8px !important; }
  .verification-page .v-resident-control .v-btn { width: 100% !important; min-width: 0 !important; height: 50px !important; min-height: 50px !important; margin: 0 !important; }
  .verification-page .v-resident-control .v-input { font-size: 13px !important; }
  .verification-page .v-resident-field > .v-search-help { position: static !important; margin-top: 1px; }

  .bp-select-menu.is-phone-menu { padding: 8px; border-radius: 15px; }
  .bp-select-menu.is-phone-menu .bp-select-option { min-height: 44px; padding: 10px 12px; font-size: 12px; }

  body:is(.home-page, .beneficiary-programs-page, .about-page, .verification-page, .beneficiary-profile-page) .account-dropdown .logout-form .logout-link {
    width: 100% !important; display: flex !important; align-items: center !important;
    justify-content: center !important; gap: 10px !important; text-align: center !important;
  }
  body:is(.home-page, .beneficiary-programs-page, .about-page, .verification-page, .beneficiary-profile-page) .account-dropdown .logout-form .logout-link > span {
    width: auto !important; min-width: 0; text-align: center !important;
  }
}

@keyframes bp-tab-settle { from { opacity: .72; transform: translateY(3px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes bp-filter-settle { from { transform: scale(.97); } to { transform: scale(1); } }
@keyframes bp-card-enter { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

@media (max-width: 340px) {
  .beneficiary-profile-page #profileForm .info-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .beneficiary-profile-page #profileForm .info-group { grid-column: 1 !important; }
}

/* Signup phones: retain useful field pairs without crowding account credentials. */
@media (min-width: 350px) and (max-width: 600px) {
  .auth-signup .right,
  .auth-signup .card.compact .right { padding: 18px 16px 20px !important; }
  .auth-signup .signup-progress-copy {
    gap: 7px !important;
    margin-bottom: 6px !important;
    font-size: 9.5px !important;
  }
  .auth-signup .signup-progress-copy strong { font-size: 10px !important; }
  .auth-signup .step-tracker { margin: 6px 0 14px !important; padding-block: 7px !important; }
  .auth-signup .form-row,
  .auth-signup .form-row.form-row--mobile-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .auth-signup .form-row.form-row--credentials { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
  .auth-signup .form-row .form-group { min-width: 0; }
  .auth-signup .form-group { margin-bottom: 10px !important; }
  .auth-signup .form-group label { min-height: 0; margin-bottom: 4px !important; font-size: 10px !important; line-height: 1.25 !important; }
  .auth-signup input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .auth-signup select { min-width: 0; min-height: 46px !important; height: 46px !important; padding-inline: 11px !important; font-size: 12.5px !important; }
  .auth-signup .password-wrap input { padding-right: 36px !important; }
  .auth-signup .toggle-pass { right: 3px; width: 32px; height: 32px; }
  .auth-signup .field-hint { font-size: 10px !important; line-height: 1.4 !important; }
  .auth-signup .password-strength { margin: 0 0 8px !important; padding: 9px 10px !important; }
  .auth-signup .password-strength-head { font-size: 9.5px !important; }
  .auth-signup .password-checks {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px 8px !important;
  }
  .auth-signup .password-checks span { min-width: 0; font-size: 9px !important; overflow-wrap: anywhere; }
  .auth-signup .btn-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 12px !important;
  }
  .auth-signup .btn-group .btn {
    width: 100% !important;
    min-width: 0;
    min-height: 46px !important;
    margin: 0 !important;
    padding-inline: 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
  .auth-signup #step3 > div:first-child { margin-bottom: 10px !important; font-size: 11.5px !important; line-height: 1.5 !important; }
  .auth-signup .profile-upload-container { margin: 10px 0 12px !important; padding: 16px 12px 20px !important; }
  .auth-signup .profile-preview-box { width: 88px !important; height: 88px !important; margin-bottom: 10px !important; }
  .auth-signup .upload-label { padding: 7px 12px !important; font-size: 9.5px !important; }
  .auth-signup .privacy-acknowledgment {
    gap: 8px !important;
    margin: 10px 0 5px !important;
    padding: 12px !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
  }
  .auth-signup .privacy-acknowledgment input { width: 17px !important; height: 17px !important; }
}

@media (max-width: 349px) {
  .auth-signup .form-row,
  .auth-signup .form-row.form-row--mobile-pair { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
}

@media (max-height: 560px) and (orientation: landscape) {
  body.auth-page { padding: 8px !important; }
  .auth-page .card,
  .auth-page .card.compact { max-width: 820px !important; grid-template-columns: 170px minmax(0, 1fr) !important; }
  .auth-page .left,
  .auth-page .card.compact .left { border-right: 4px solid var(--green) !important; border-bottom: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Program dialogs: final phone cascade.
 * These rules intentionally live last because this stylesheet is the mobile
 * authority and earlier shared modal rules are broader than these two dialogs. */
@media (max-width: 600px) {
  .beneficiary-programs-page #programDetailsModal,
  .beneficiary-programs-page #applicationModal {
    padding: 8px !important;
    align-items: flex-end !important;
  }

  .beneficiary-programs-page #programDetailsModal .program-details-dialog,
  .beneficiary-programs-page #applicationModal .modal-content {
    width: calc(100% - 16px) !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    box-sizing: border-box;
    border-radius: 18px 18px 6px 6px !important;
  }

  .beneficiary-programs-page #programDetailsModal .program-details-dialog {
    overflow: hidden !important;
  }

  .beneficiary-programs-page #programDetailsModal .program-details-split {
    height: 100% !important;
    max-height: none !important;
  }

  .beneficiary-programs-page #programDetailsModal .program-details-identity {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    grid-template-rows: auto auto;
    grid-template-areas:
      "program-image program-heading"
      "program-slots program-heading";
    gap: 8px 14px !important;
    padding: 13px 54px 13px 13px !important;
    align-items: center;
  }

  .beneficiary-programs-page #programDetailsModal .program-details-image-wrap {
    grid-area: program-image;
    width: 92px !important;
    height: 68px !important;
  }

  .beneficiary-programs-page #programDetailsModal .program-details-identity > .slots-badge {
    grid-area: program-slots;
    max-width: 92px;
    margin: 0 auto !important;
    padding: 5px 7px;
    justify-content: center;
    font-size: 9px;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
  }

  .beneficiary-programs-page #programDetailsModal .program-details-identity .details-header {
    grid-area: program-heading;
    align-self: center;
    text-align: center !important;
  }

  .beneficiary-programs-page #programDetailsModal .program-details-identity .details-heading-row {
    justify-content: center !important;
    padding: 0 !important;
  }

  .beneficiary-programs-page #programDetailsModal .program-details-identity .details-heading-row h2,
  .beneficiary-programs-page #programDetailsModal .program-details-identity .details-header .batch-code {
    width: 100%;
    text-align: center !important;
  }

  .beneficiary-programs-page #programDetailsModal .program-details-content {
    min-height: 0 !important;
    overflow: hidden;
  }

  .beneficiary-programs-page #programDetailsModal .program-details-scroll {
    flex: 1 1 auto;
    padding: 15px 13px 17px !important;
    overscroll-behavior: contain;
  }

  .beneficiary-programs-page #programDetailsModal .program-details-review-heading {
    gap: 5px !important;
    margin-bottom: 13px !important;
  }

  .beneficiary-programs-page #programDetailsModal .program-details-section {
    margin-bottom: 15px !important;
  }

  .beneficiary-programs-page #programDetailsModal .program-details-section h3 {
    font-size: 15px !important;
  }

  .beneficiary-programs-page #programDetailsModal .program-details-section > p {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  .beneficiary-programs-page #programDetailsModal .program-schedule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .beneficiary-programs-page #programDetailsModal .program-schedule-item {
    min-height: 68px !important;
    padding: 8px 7px !important;
  }

  .beneficiary-programs-page #programDetailsModal .program-schedule-label {
    font-size: 8px !important;
    line-height: 1.35;
  }

  .beneficiary-programs-page #programDetailsModal .program-schedule-value {
    font-size: 11px !important;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .beneficiary-programs-page #programDetailsModal .program-detail-list {
    gap: 8px !important;
  }

  .beneficiary-programs-page #programDetailsModal .program-detail-list li {
    min-height: 46px;
    padding: 11px 12px 11px 34px !important;
    font-size: 12px;
    line-height: 1.5 !important;
  }

  .beneficiary-programs-page #programDetailsModal .program-detail-list li::before {
    left: 14px !important;
  }

  .beneficiary-programs-page #programDetailsModal .details-footer {
    flex: 0 0 auto;
    padding: 10px 13px max(10px, env(safe-area-inset-bottom)) !important;
  }

  .beneficiary-programs-page #programDetailsModal #detAction .btn-primary {
    min-height: 48px;
    padding-inline: 14px;
    white-space: normal;
    line-height: 1.3;
  }

  .beneficiary-programs-page #applicationModal .modal-content {
    padding: 14px 13px 0 !important;
    overflow: hidden !important;
  }

  .beneficiary-programs-page #applicationModal .application-modal-heading {
    padding: 1px 46px 10px !important;
    text-align: center;
  }

  .beneficiary-programs-page #applicationModal .application-modal-eyebrow {
    justify-content: center;
  }

  .beneficiary-programs-page #applicationModal .application-modal-heading h2,
  .beneficiary-programs-page #applicationModal .application-modal-heading p {
    text-align: center !important;
  }

  .beneficiary-programs-page #applicationModal .application-modal-heading h2 {
    font-size: 24px !important;
  }

  .beneficiary-programs-page #applicationModal .wizard-nav {
    margin-inline: -13px !important;
    padding: 5px 10px 6px !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 3px 0;
    overflow: visible !important;
    scroll-snap-type: none;
  }

  .beneficiary-programs-page #applicationModal .wizard-nav--scrollable .wizard-step-indicator {
    min-width: 0 !important;
    flex: 0 0 25% !important;
  }

  .beneficiary-programs-page #applicationModal .wizard-nav[data-step-count="9"] .wizard-step-indicator {
    flex-basis: 20% !important;
  }

  .beneficiary-programs-page #applicationModal .wizard-nav[data-step-count="4"] .wizard-step-indicator {
    flex-basis: 25% !important;
  }

  .beneficiary-programs-page #applicationModal .wizard-nav[data-step-count="7"] .wizard-step-indicator:nth-child(4)::after,
  .beneficiary-programs-page #applicationModal .wizard-nav[data-step-count="9"] .wizard-step-indicator:nth-child(5)::after {
    content: none;
  }

  .beneficiary-programs-page #applicationModal .wizard-label {
    min-height: 16px !important;
    font-size: 7.5px !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere;
  }

  .beneficiary-programs-page #applicationModal .wizard-number {
    width: 22px !important;
    height: 22px !important;
    margin-bottom: 1px !important;
    font-size: 8.5px !important;
  }

  .beneficiary-programs-page #applicationModal .wizard-step-indicator::after {
    top: 10px !important;
    left: calc(50% + 12px) !important;
    width: calc(100% - 24px) !important;
  }

  .beneficiary-programs-page #applicationModal .application-progress-summary {
    margin-inline: -13px !important;
    min-height: 36px;
    padding: 7px 13px !important;
    justify-content: center !important;
    text-align: center;
  }

  .beneficiary-programs-page #applicationModal .application-progress-summary strong {
    font-size: 10.5px !important;
  }

  .beneficiary-programs-page #applicationModal #multiStepForm {
    margin: 0 -5px 0 0 !important;
    padding: 12px 5px max(17px, env(safe-area-inset-bottom)) 0 !important;
    scroll-padding-block: 12px 20px;
    overscroll-behavior: contain;
  }

  .beneficiary-programs-page #applicationModal .form-grid {
    gap: 11px 9px !important;
  }

  .beneficiary-programs-page #applicationModal .form-group label {
    font-size: 9.5px !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere;
  }

  .beneficiary-programs-page #applicationModal .form-grid > .form-group > label:first-child:not(.inline-check-option) {
    min-height: 2.8em;
    display: flex;
    align-items: flex-end;
  }

  .beneficiary-programs-page #applicationModal .form-group > .inline-check-option {
    width: max-content;
    max-width: 100%;
    min-height: 22px !important;
    display: flex !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 2px !important;
    align-items: center !important;
    border: 0;
    border-radius: 0;
    color: #315342;
    background: transparent;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
  }

  .beneficiary-programs-page #applicationModal .inline-check-option input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px;
    margin: 0;
    accent-color: var(--green);
  }

  .beneficiary-programs-page #applicationModal .spes-birthplace-option {
    min-height: 22px;
    margin: -5px 0 -5px;
    gap: 0 !important;
  }

  .beneficiary-programs-page #applicationModal .privacy-acknowledgment {
    min-height: 0 !important;
    margin: 6px 0 0 !important;
    padding: 9px 10px !important;
    grid-template-columns: 17px minmax(0, 1fr);
    column-gap: 8px;
    align-items: start !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  .beneficiary-programs-page #applicationModal .privacy-acknowledgment input {
    width: 17px !important;
    height: 17px !important;
    margin: 1px 0 0 !important;
  }

  .beneficiary-programs-page #applicationModal .privacy-acknowledgment > span {
    line-height: 1.4 !important;
  }

  .beneficiary-programs-page #applicationModal .form-step:has(> .privacy-acknowledgment) .form-grid {
    gap: 4px !important;
    margin-bottom: 3px;
  }

  .beneficiary-programs-page #applicationModal .checkbox-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto;
    gap: 7px !important;
    padding: 8px !important;
  }

  .beneficiary-programs-page #applicationModal .checkbox-grid label {
    width: 100%;
    min-width: 0;
    min-height: 44px !important;
    height: auto !important;
    gap: 8px !important;
    padding: 7px 8px !important;
    align-items: center;
    border: 1px solid #deebe4;
    border-radius: 7px;
    background: #fff;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
  }

  .beneficiary-programs-page #applicationModal .checkbox-grid > label:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .beneficiary-programs-page #applicationModal .form-grid > .mobile-fill-row {
    grid-column: 1 / -1 !important;
  }

  .beneficiary-programs-page #applicationModal .checkbox-grid input[type="checkbox"] {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px;
    margin: 0;
  }

  .beneficiary-programs-page #applicationModal .form-grid > .form-group:has([name="owner_full_address"]) {
    grid-column: 1 / -1 !important;
  }

  .beneficiary-programs-page #applicationModal #productsTable {
    min-width: 100%;
  }

  .beneficiary-programs-page #applicationModal .form-group input:not([type="checkbox"]):not([type="file"]),
  .beneficiary-programs-page #applicationModal .form-group select,
  .beneficiary-programs-page #applicationModal .form-group textarea {
    min-height: 46px !important;
    padding: 9px 10px !important;
    font-size: 14px !important;
  }

  .beneficiary-programs-page #applicationModal .form-actions {
    gap: 10px !important;
    margin-top: 17px !important;
    padding-top: 10px !important;
  }

  .beneficiary-programs-page #applicationModal .form-actions .btn-primary,
  .beneficiary-programs-page #applicationModal .form-actions .btn-secondary {
    min-height: 48px !important;
    font-size: 12px !important;
  }

  /* The four-column SPES history grid becomes readable record cards on phones. */
  .beneficiary-programs-page #applicationModal .dynamic-table-wrap:has(#spesTable) {
    padding: 7px !important;
    overflow: visible !important;
  }

  .beneficiary-programs-page #applicationModal #spesTable {
    min-width: 0 !important;
    border: 0;
  }

  .beneficiary-programs-page #applicationModal #spesTable thead {
    display: none;
  }

  .beneficiary-programs-page #applicationModal #spesTable tbody {
    display: grid;
    gap: 9px;
  }

  .beneficiary-programs-page #applicationModal #spesTable tbody tr {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 8px;
    padding: 34px 9px 10px;
    border: 1px solid #d8e7df;
    border-radius: 9px;
    background: #fbfdfc;
  }

  .beneficiary-programs-page #applicationModal #spesTable tbody tr::before {
    content: "SPES record";
    position: absolute;
    top: 10px;
    left: 10px;
    color: #527064;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .beneficiary-programs-page #applicationModal #spesTable td {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 0 !important;
    border: 0;
  }

  .beneficiary-programs-page #applicationModal #spesTable td:not(.action-cell)::before {
    color: #49685a;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .beneficiary-programs-page #applicationModal #spesTable td:nth-child(1)::before { content: "Availment no."; }
  .beneficiary-programs-page #applicationModal #spesTable td:nth-child(2)::before { content: "Establishment"; }
  .beneficiary-programs-page #applicationModal #spesTable td:nth-child(3)::before { content: "Year"; }
  .beneficiary-programs-page #applicationModal #spesTable td:nth-child(4)::before { content: "SPES ID no."; }

  .beneficiary-programs-page #applicationModal #spesTable .action-cell {
    position: absolute;
    top: 5px;
    right: 6px;
    display: block;
  }

  .beneficiary-programs-page #applicationModal #spesTable .btn-remove-row {
    width: 27px;
    min-width: 27px;
    height: 27px;
    min-height: 27px;
    padding: 0;
    border-radius: 7px;
  }

  .beneficiary-programs-page #applicationModal #spesTable input {
    width: 100%;
    min-width: 0;
  }
}

@media (min-width: 341px) and (max-width: 600px) {
  .beneficiary-programs-page #applicationModal .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .beneficiary-programs-page #applicationModal .form-grid > .span-2,
  .beneficiary-programs-page #applicationModal .form-grid > .mobile-wide,
  .beneficiary-programs-page #applicationModal .form-grid > .section-title,
  .beneficiary-programs-page #applicationModal .form-grid > .dynamic-table-wrap,
  .beneficiary-programs-page #applicationModal .form-grid > .form-group:has(textarea),
  .beneficiary-programs-page #applicationModal .form-grid > .form-group:has(input[type="file"]),
  .beneficiary-programs-page #applicationModal .form-grid > .form-group:has(.checkbox-grid),
  .beneficiary-programs-page #applicationModal .form-grid > .form-group:has(.dynamic-table-wrap) {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 340px) {
  .beneficiary-programs-page #applicationModal .form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .beneficiary-programs-page #applicationModal .form-grid > * {
    grid-column: 1 !important;
  }
}

@media (max-width: 600px) {
  .beneficiary-programs-page #alertModal .modal-close {
    top: 8px !important;
    right: 8px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .beneficiary-programs-page #alertModal .alert-box h2 {
    padding-inline: 42px !important;
    overflow-wrap: anywhere;
  }
}