/* PipSePaisa exact compact mobile composition — based on approved references */
@media (max-width: 768px) {
  :root { --mobile-edge: 6px; }
  html { overflow-x: hidden !important; }
  body { overflow-x: hidden !important; }
  .container,
  .page-partner #partner-programs > .container {
    width: calc(100% - (var(--mobile-edge) * 2)) !important;
    max-width: none !important;
    margin-inline: var(--mobile-edge) !important;
  }

  /* Full compact navbar: keep all desktop links visible like the reference. */
  .topbar { position: relative !important; box-shadow: 0 2px 8px rgba(40,25,4,.06) !important; }
  .nav { height: 31px !important; min-height: 31px !important; gap: 3px !important; padding: 0 !important; }
  .brand { gap: 3px !important; font-size: 8px !important; line-height: 1 !important; white-space: nowrap !important; flex: 0 0 auto !important; }
  .brand img { width: 21px !important; height: 21px !important; border-radius: 5px !important; box-shadow: none !important; }
  .brand span { display: inline !important; }
  .menu,
  .menu.is-open { display: flex !important; align-items: center !important; justify-content: center !important; gap: 1px !important; flex: 1 1 auto !important; min-width: 0 !important; white-space: nowrap !important; }
  .menu a { display: block !important; padding: 10px 3px 9px !important; border-radius: 0 !important; font-size: 5.6px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: -.02em !important; }
  .menu a.active::after { bottom: 4px !important; height: 1px !important; }
  .nav-actions,.actions { display: flex !important; gap: 3px !important; flex: 0 0 auto !important; }
  .mobile-menu { display: none !important; }
  .theme-btn { display: grid !important; width: 21px !important; height: 21px !important; font-size: 10px !important; border-radius: 50% !important; }
  .nav .btn,.nav .login { min-height: 21px !important; padding: 4px 9px !important; border-radius: 6px !important; font-size: 6.5px !important; box-shadow: none !important; }

  /* Global compact vertical rhythm. */
  .section,.category,.category.alt,.broker-showcase,.social-showcase,.social-section,.services-premium,.partner-promo-section,.mentor-spotlight-section {
    padding: 17px 0 !important;
  }
  .section-head,.section-heading { max-width: 100% !important; margin: 0 auto 9px !important; padding-inline: 4px !important; }
  .section-head .mini,.section-heading .small,.mini { font-size: 5.7px !important; letter-spacing: .11em !important; }
  .section-head h2,.section-heading h2 { margin: 3px 0 4px !important; font-size: 16px !important; line-height: 1.05 !important; letter-spacing: -.035em !important; }
  .section-head p,.section-heading p { margin: 0 !important; font-size: 5.8px !important; line-height: 1.35 !important; }

  /* Shared three-across broker cards. */
  .broker-grid,.broker-logo-grid {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 5px !important;
  }
  .broker-card,.broker-logo-card { border-radius: 7px !important; box-shadow: 0 3px 8px rgba(55,35,5,.08) !important; }
  .broker-card img { width: 100% !important; aspect-ratio: 3/1 !important; object-fit: cover !important; }
  .broker-logo-card picture { aspect-ratio: 3/1 !important; }
  .broker-logo-card picture img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .broker-card-footer { display: none !important; }

  /* Social blocks remain in one compact row. */
  .social-grid,.social-grid-three {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 6px !important;
    max-width: none !important;
  }
  .social-card,.social-platform {
    min-height: 0 !important;
    padding: 8px 3px !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 9px rgba(55,35,5,.08) !important;
  }
  .social-icon {
    width: 20px !important;
    height: 20px !important;
    margin: 0 auto 3px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
  }
  .social-icon svg { width: 11px !important; height: 11px !important; }
  .social-card h3,.social-platform h3 { margin: 0 0 1px !important; font-size: 6.7px !important; line-height: 1.1 !important; }
  .social-card p,.social-platform p { font-size: 4.8px !important; line-height: 1.15 !important; }

  /* Compact 4-column footer matching the reference composition. */
  footer { padding: 17px 0 8px !important; }
  .footer-grid {
    display: grid !important;
    grid-template-columns: 1.55fr repeat(3,1fr) !important;
    gap: 8px !important;
  }
  .footer-brand { font-size: 9px !important; }
  .footer-grid p { margin: 4px 0 !important; font-size: 4.7px !important; line-height: 1.35 !important; }
  .footer-grid h4 { margin: 1px 0 4px !important; font-size: 5.8px !important; }
  .footer-grid ul { gap: 3px !important; font-size: 4.7px !important; }
  footer li { margin: 0 !important; }
  .disclaimer,.risk { margin-top: 8px !important; padding-top: 6px !important; font-size: 4.2px !important; line-height: 1.3 !important; }
  .copyright { margin-top: 5px !important; font-size: 4px !important; gap: 4px !important; flex-direction: row !important; }

  /* ================= HOME ================= */
  body:not(.page-partner):not(:has(.course-section)):not(:has(.tools-suite)) .hero { padding: 7px 0 6px !important; }
  .hero-overlay-banner {
    min-height: 137px !important;
    height: 137px !important;
    border-radius: 8px !important;
    background-size: cover !important;
    background-position: center top !important;
  }
  .hero-text-layer {
    width: 59% !important;
    height: 100% !important;
    padding: 7px 7px 5px !important;
    justify-content: center !important;
  }
  .hero-eyebrow { margin-bottom: 3px !important; padding: 2px 4px !important; font-size: 4.7px !important; line-height: 1 !important; }
  .hero-overlay-banner h1 { margin: 0 0 3px !important; font-size: 15.5px !important; line-height: .96 !important; }
  .hero-course { margin: 0 0 3px !important; padding: 2px 4px !important; border-left-width: 2px !important; font-size: 4.8px !important; line-height: 1.1 !important; }
  .hero-quote { margin: 0 0 3px !important; padding: 3px 4px !important; border-radius: 4px !important; }
  .hero-quote strong { margin-bottom: 1px !important; padding: 1px 3px !important; border-radius: 2px !important; font-size: 4.3px !important; }
  .hero-quote p { display: -webkit-box !important; overflow: hidden !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; font-size: 3.7px !important; line-height: 1.2 !important; }
  .hero-features { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 2px !important; margin: 2px 0 3px !important; }
  .hero-feature { gap: 2px !important; padding-right: 1px !important; }
  .hero-feature > span { width: 13px !important; height: 13px !important; border-radius: 3px !important; font-size: 6px !important; }
  .hero-feature b { font-size: 3.8px !important; }
  .hero-feature small { font-size: 3.2px !important; }
  .hero-primary-cta { min-height: 16px !important; margin: 0 !important; padding: 3px 8px !important; border-radius: 4px !important; font-size: 5.5px !important; }

  .broker-showcase { padding: 11px 0 13px !important; }
  .social-showcase { padding: 11px 0 14px !important; }

  .services-banner-grid {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 5px !important;
  }
  .service-banner-card { border-radius: 7px !important; }
  .service-banner-card img { border-radius: 7px !important; }

  .mentor-spotlight { min-height: 0 !important; display: grid !important; grid-template-columns: 43% 57% !important; gap: 0 !important; border-radius: 9px !important; overflow: hidden !important; }
  .mentor-portrait { min-height: 128px !important; height: 128px !important; border-radius: 0 !important; }
  .mentor-person { height: 126px !important; max-height: 126px !important; width: auto !important; }
  .mentor-role-badge { left: 4px !important; right: auto !important; bottom: 4px !important; padding: 2px 4px !important; border-radius: 3px !important; font-size: 3.6px !important; }
  .mentor-content { padding: 10px 8px !important; }
  .mentor-eyebrow { font-size: 4.5px !important; }
  .mentor-content h2 { margin: 3px 0 4px !important; font-size: 13px !important; line-height: 1.02 !important; }
  .mentor-description { display: -webkit-box !important; overflow: hidden !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important; margin: 0 0 5px !important; font-size: 4.5px !important; line-height: 1.3 !important; }
  .mentor-highlights { gap: 2px !important; margin-bottom: 5px !important; }
  .mentor-highlights span { padding: 2px 3px !important; border-radius: 3px !important; font-size: 3.5px !important; }
  .mentor-cta-row { gap: 4px !important; }
  .mentor-cta-row a,.mentor-content .btn { min-height: 15px !important; padding: 3px 6px !important; border-radius: 4px !important; font-size: 4.4px !important; }

  .partner-promo-grid {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 5px !important;
  }
  .partner-promo-card,.visual-promo-card,.visual-promo-card picture,.visual-promo-card img { border-radius: 7px !important; }

  /* Keep the complete comparison table visible instead of converting rows to cards. */
  .broker-comparison-section { padding: 14px 0 12px !important; }
  .broker-table-wrap { overflow: hidden !important; border-radius: 7px !important; }
  .broker-comparison-table { display: table !important; width: 100% !important; min-width: 0 !important; table-layout: fixed !important; }
  .broker-comparison-table colgroup { display: table-column-group !important; }
  .broker-comparison-table thead { display: table-header-group !important; }
  .broker-comparison-table tbody { display: table-row-group !important; }
  .broker-comparison-table tr { display: table-row !important; border: 0 !important; box-shadow: none !important; }
  .broker-comparison-table th,.broker-comparison-table td {
    display: table-cell !important;
    width: auto !important;
    padding: 3px 1px !important;
    border-bottom: 1px solid #eee1d1 !important;
    text-align: center !important;
    font-size: 3.6px !important;
    line-height: 1.15 !important;
  }
  .broker-comparison-table th { font-size: 3.1px !important; }
  .broker-comparison-table td::before { display: none !important; content: none !important; }
  .broker-name { display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 1px !important; }
  .broker-name img,.broker-name img.broker-logo-icon { width: 23px !important; height: 12px !important; padding: 0 !important; border-radius: 2px !important; }
  .broker-name strong { font-size: 3.6px !important; }
  .broker-comparison-table .badge { padding: 1px 2px !important; font-size: 3px !important; }
  .broker-data-note { margin: 4px 2px 0 !important; font-size: 3.5px !important; line-height: 1.25 !important; }
  .broker-comparison-section .cta { display: none !important; }

  /* ================= PARTNER / COURSES / TOOLS SHARED HERO ================= */
  .page-partner .hero,.page-partner ~ .hero,
  body:has(.course-section) .hero,
  body:has(.tools-suite) .hero { padding: 7px 0 7px !important; }
  .page-partner .hero-box,
  body:has(.course-section) .hero-box,
  body:has(.tools-suite) .hero-box {
    display: block !important;
    position: relative !important;
    height: 144px !important;
    min-height: 144px !important;
    border-radius: 8px !important;
  }
  .page-partner .hero-copy,
  body:has(.course-section) .hero-copy,
  body:has(.tools-suite) .hero-copy {
    width: 58% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 10px 7px !important;
    justify-content: center !important;
  }
  .page-partner .hero h1,
  body:has(.course-section) .hero h1,
  body:has(.tools-suite) .hero h1 { margin: 3px 0 !important; font-size: 15px !important; line-height: .98 !important; }
  .page-partner .hero p,
  body:has(.course-section) .hero p,
  body:has(.tools-suite) .hero p { display: -webkit-box !important; overflow: hidden !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; font-size: 4.4px !important; line-height: 1.25 !important; }
  .page-partner .hero .mini,
  body:has(.course-section) .hero .mini,
  body:has(.tools-suite) .hero .mini { font-size: 4.3px !important; }
  .page-partner .hero .pills,
  body:has(.course-section) .hero .pills,
  body:has(.tools-suite) .hero .pills { gap: 2px !important; margin: 4px 0 !important; }
  .page-partner .hero .pill,
  body:has(.course-section) .hero .pill,
  body:has(.tools-suite) .hero .pill { padding: 2px 3px !important; border-radius: 3px !important; font-size: 3.6px !important; }
  .page-partner .hero .login,
  body:has(.course-section) .hero .login,
  body:has(.tools-suite) .hero .login { min-height: 16px !important; padding: 3px 7px !important; border-radius: 4px !important; font-size: 4.7px !important; }
  .page-partner .hero-visual,
  body:has(.course-section) .hero-visual,
  body:has(.tools-suite) .hero-visual {
    position: absolute !important;
    inset: 0 0 0 auto !important;
    width: 44% !important;
    height: 144px !important;
    min-height: 144px !important;
    background-size: cover !important;
    background-position: center !important;
  }

  /* Partner page. */
  .benefits-bg .grid-4 {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 4px !important;
  }
  .benefits-bg .feature-card,.benefit-mini-banner { border-radius: 6px !important; }

  .page-partner #partner-programs .partner-detail {
    display: grid !important;
    grid-template-columns: 49% 51% !important;
    gap: 6px !important;
    margin: 0 0 8px !important;
    align-items: stretch !important;
  }
  .page-partner #partner-programs .partner-image {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 1/1 !important;
    border-radius: 7px !important;
  }
  .page-partner #partner-programs .partner-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .page-partner #partner-programs .partner-info {
    min-height: 0 !important;
    padding: 8px 6px !important;
    border-radius: 7px !important;
  }
  .program-kicker { margin-bottom: 2px !important; font-size: 3.7px !important; }
  .program-kicker::before { width: 7px !important; height: 1px !important; }
  .partner-info h3 { margin: 0 0 2px !important; font-size: 10px !important; }
  .partner-info > p { display: -webkit-box !important; overflow: hidden !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; margin: 0 0 2px !important; font-size: 3.5px !important; line-height: 1.2 !important; }
  .info-row { grid-template-columns: 15px 1fr !important; gap: 3px !important; padding: 3px 0 !important; }
  .info-ico { width: 14px !important; height: 14px !important; border-radius: 4px !important; }
  .info-ico svg { width: 8px !important; height: 8px !important; }
  .info-row h4 { margin: 0 !important; font-size: 4px !important; }
  .info-row p { display: -webkit-box !important; overflow: hidden !important; -webkit-line-clamp: 1 !important; -webkit-box-orient: vertical !important; font-size: 3px !important; line-height: 1.1 !important; }
  .partner-info > .login { min-height: 13px !important; margin-top: 3px !important; padding: 2px 5px !important; font-size: 3.7px !important; border-radius: 3px !important; }
  .program-note { margin-top: 2px !important; font-size: 2.8px !important; }
  .partner-programs-note { margin: 2px 0 0 !important; padding: 3px !important; font-size: 3px !important; }

  .cta-banner { height: 80px !important; min-height: 80px !important; border-radius: 7px !important; }
  .cta-copy { position: absolute !important; width: 62% !important; height: 100% !important; padding: 7px 6px !important; justify-content: center !important; }
  .cta-copy .logo-row { padding: 1px 3px !important; font-size: 3px !important; }
  .cta-copy .logo-row img { width: 8px !important; height: 8px !important; }
  .cta-copy h2 { margin: 2px 0 !important; font-size: 10px !important; }
  .cta-copy > p { font-size: 3px !important; line-height: 1.15 !important; }
  .cta-highlights { gap: 2px !important; margin: 3px 0 !important; }
  .cta-highlights span { padding: 1px 2px !important; border-radius: 2px !important; font-size: 2.8px !important; }
  .cta-copy > .login { min-height: 12px !important; padding: 2px 4px !important; font-size: 3px !important; }
  .cta-art { inset: 0 0 0 auto !important; width: 42% !important; height: 100% !important; border-radius: 50% 0 0 55% / 40% 0 0 65% !important; border: 0 !important; }
  .cta-person { height: 155% !important; max-width: 100% !important; right: -4% !important; bottom: -55% !important; }
  .name-tag { right: 2px !important; left: auto !important; bottom: 2px !important; min-width: 48px !important; padding: 2px 3px !important; border-radius: 3px !important; }
  .name-tag strong { font-size: 3.4px !important; }
  .name-tag small { font-size: 2.4px !important; }

  /* Courses page. */
  .course-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 6px !important; }
  .course-card { min-height: 0 !important; padding: 8px 6px !important; border-radius: 8px !important; }
  .course-card h3 { margin: 2px 0 !important; font-size: 9px !important; }
  .course-card p { font-size: 3.6px !important; line-height: 1.2 !important; }
  .course-card .price { margin: 4px 0 !important; font-size: 10px !important; }
  .course-card .topics { gap: 2px !important; margin-bottom: 3px !important; }
  .course-card .topics li { font-size: 3.2px !important; line-height: 1.15 !important; }
  .course-card .highlight { margin: 3px 0 0 !important; padding: 3px !important; font-size: 3.3px !important; }
  .course-card .course-btn,.course-card .login { min-height: 14px !important; margin-top: 3px !important; padding: 3px !important; border-radius: 3px !important; font-size: 3.8px !important; }
  .why-section .grid-4 { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 4px !important; }
  .why-section .feature-card,.course-process-banner { border-radius: 6px !important; }

  /* Tools page. */
  body:has(.tools-suite) .hero-copy { width: 43% !important; }
  body:has(.tools-suite) .hero-visual { width: 57% !important; padding: 5px !important; }
  .tools-suite { width: 100% !important; max-width: none !important; border-radius: 6px !important; }
  .tools-suite-bar { min-height: 12px !important; padding: 2px 3px !important; font-size: 2.8px !important; }
  .tools-suite-screen { padding: 3px !important; }
  .tools-suite-caption { padding: 2px 3px !important; }
  .tools-suite-caption b { font-size: 3.4px !important; }
  .tools-suite-caption small { font-size: 2.5px !important; }
  .tools-suite-tabs { gap: 2px !important; padding: 2px !important; }
  .tools-suite-tab { min-height: 14px !important; padding: 2px !important; border-radius: 3px !important; font-size: 2.6px !important; }

  .category-grid {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 5px !important;
  }
  .services-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 5px !important; }
  .resource-card,.services-grid .resource-card {
    min-height: 0 !important;
    padding: 7px 5px !important;
    border-radius: 7px !important;
  }
  .resource-card .num { top: 3px !important; right: 4px !important; font-size: 8px !important; }
  .resource-card .iconbox { width: 17px !important; height: 17px !important; margin-bottom: 3px !important; border-radius: 5px !important; font-size: 8px !important; }
  .resource-card .iconbox svg { width: 9px !important; height: 9px !important; }
  .resource-card h3 { margin: 1px 0 2px !important; font-size: 5.3px !important; }
  .resource-card p { display: -webkit-box !important; overflow: hidden !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; margin: 0 0 3px !important; font-size: 3.2px !important; line-height: 1.15 !important; }
  .resource-card a { font-size: 3.2px !important; }

  /* Disable hover shifts on touch layouts. */
  .broker-card:hover,.broker-logo-card:hover,.social-card:hover,.social-platform:hover,.resource-card:hover,.feature-card:hover { transform: none !important; }
}

/* Slightly larger compact mode for tablets while keeping the same approved composition. */
@media (min-width: 481px) and (max-width: 768px) {
  .menu a { font-size: 8px !important; padding-inline: 5px !important; }
  .brand { font-size: 11px !important; }
  .hero-overlay-banner { height: 230px !important; min-height: 230px !important; }
  .hero-text-layer { padding: 13px 14px !important; }
  .hero-overlay-banner h1 { font-size: 25px !important; }
  .page-partner .hero-box,body:has(.course-section) .hero-box,body:has(.tools-suite) .hero-box { height: 230px !important; min-height: 230px !important; }
  .page-partner .hero-visual,body:has(.course-section) .hero-visual,body:has(.tools-suite) .hero-visual { height: 230px !important; min-height: 230px !important; }
}

/* High-specificity mobile overrides for rules in public-upgrades.css. */
@media (max-width: 768px) {
  body.page-partner .hero-box > .hero-visual.partner-hero-visual {
    inset: 0 !important;
    width: 100% !important;
    height: 144px !important;
    min-height: 144px !important;
    background-size: 100% 100% !important;
    background-position: center !important;
  }
  body:has(.course-section) .hero-box > .hero-visual {
    inset: 0 !important;
    width: 100% !important;
    height: 144px !important;
    min-height: 144px !important;
    background-size: cover !important;
    background-position: center top !important;
  }
  body.page-tools .hero-box > .hero-visual.tools-visual {
    inset: 0 0 0 auto !important;
    width: 57% !important;
    height: 144px !important;
    min-height: 144px !important;
    padding: 5px !important;
  }
  body.page-tools .tools-suite {
    inset: 5px !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    padding: 3px !important;
    gap: 2px !important;
    border-radius: 6px !important;
  }
  .course-card .topic {
    display: flex !important;
    align-items: flex-start !important;
    gap: 2px !important;
    font-size: 3.15px !important;
    line-height: 1.15 !important;
  }
  .course-card .check { width: 6px !important; height: 6px !important; flex: 0 0 6px !important; font-size: 3.5px !important; }
  .course-card .ribbon { top: 4px !important; right: -16px !important; padding: 2px 18px !important; font-size: 2.5px !important; }
  .course-card .old,.course-card .save { font-size: 3px !important; }
  .mentor-content .mentor-quote { margin: 0 0 5px !important; padding: 3px 5px !important; font-size: 3.8px !important; line-height: 1.2 !important; }
  .mentor-content .mentor-cta { min-height: 15px !important; align-self: flex-start !important; padding: 3px 6px !important; border-radius: 4px !important; font-size: 4.3px !important; }
}

/* ============================================================
   FINAL MOBILE ROOT FIX — 2026-07-27
   The earlier build loaded desktop responsive rules but did not
   neutralize the mobile drawer and late high-specificity upgrades.
   These rules intentionally win last and reproduce the approved
   compact, desktop-like mobile composition.
   ============================================================ */
@media (max-width: 768px) {
  html, body { min-width: 0 !important; width: 100% !important; }

  /* Keep every navigation item in one tiny horizontal row. */
  .topbar .nav > .menu,
  .topbar .nav > .menu.is-open,
  .topbar .menu,
  .topbar .menu.is-open {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    z-index: auto !important;
  }
  .topbar .nav > .menu a,
  .topbar .menu a {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 2.5px 9px !important;
    font-size: 5.2px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
  .topbar .mobile-menu,
  .topbar .menu-toggle,
  .topbar .hamburger { display: none !important; }

  /* No blank sections while waiting for scroll observers. */
  .reveal,
  .reveal.left,
  .reveal.right,
  .reveal.up,
  .reveal.down,
  .stagger > *,
  .feature-card.reveal,
  .resource-card.reveal,
  .course-card.reveal,
  .partner-image.reveal,
  .partner-info.reveal {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .partner-info .program-kicker,
  .partner-info > h3,
  .partner-info > p,
  .partner-info .info-row,
  .partner-info .login,
  .partner-info .program-note {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
  }

  /* Shared headings: prevent late desktop rules from enlarging them. */
  main .section-head h2,
  main .section-heading h2,
  .social-section .section-head h2,
  .social-showcase .section-heading h2,
  body.page-tools .section-head h2,
  body.page-partner .section-head h2,
  body:has(.course-section) .section-head h2 {
    margin: 3px 0 4px !important;
    font-size: 16px !important;
    line-height: 1.05 !important;
    letter-spacing: -.035em !important;
  }
  main .section-head p,
  main .section-heading p,
  .social-section .section-head p,
  body.page-tools .section-head p,
  body.page-partner .section-head p,
  body:has(.course-section) .section-head p {
    margin: 0 !important;
    font-size: 5.8px !important;
    line-height: 1.35 !important;
  }

  /* Partner benefits are visible artwork cards, exactly four in one row. */
  body.page-partner .benefits-bg .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  body.page-partner .benefits-bg .feature-card {
    display: block !important;
    position: relative !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 15 / 8 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.page-partner .benefits-bg .feature-card > :not(.benefit-mini-banner) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
  }
  body.page-partner .benefits-bg .benefit-mini-banner,
  body.page-partner .benefits-bg .benefit-mini-banner img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 6px !important;
    object-fit: cover !important;
  }

  /* Partner program rows: square artwork + equally sized compact info panel. */
  body.page-partner #partner-programs > .container {
    width: calc(100% - 12px) !important;
    margin-inline: 6px !important;
  }
  body.page-partner #partner-programs .partner-detail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: stretch !important;
    column-gap: 6px !important;
    row-gap: 0 !important;
    margin: 0 0 8px !important;
  }
  body.page-partner #partner-programs .partner-detail > .partner-image,
  body.page-partner #partner-programs .partner-detail > .partner-info {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
  }
  body.page-partner #partner-programs .partner-image,
  body.page-partner #partner-programs .partner-image img {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 7px !important;
  }
  body.page-partner #partner-programs .partner-info {
    display: flex !important;
    flex-direction: column !important;
    padding: 7px 6px 5px !important;
    overflow: hidden !important;
    border-radius: 7px !important;
  }
  body.page-partner #partner-programs .program-kicker {
    flex: 0 0 auto !important;
    margin: 0 0 2px !important;
    font-size: 3.4px !important;
    line-height: 1 !important;
  }
  body.page-partner #partner-programs .partner-info h3 {
    flex: 0 0 auto !important;
    margin: 0 0 2px !important;
    font-size: 9.5px !important;
    line-height: 1.03 !important;
    letter-spacing: -.025em !important;
  }
  body.page-partner #partner-programs .partner-info > p:not(.program-note) {
    display: -webkit-box !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    margin: 0 0 2px !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: 3.2px !important;
    line-height: 1.15 !important;
  }
  body.page-partner #partner-programs .info-row {
    display: grid !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    grid-template-columns: 13px minmax(0,1fr) !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 2px 0 !important;
  }
  body.page-partner #partner-programs .info-ico {
    width: 12px !important;
    height: 12px !important;
    border-radius: 3px !important;
    font-size: 5px !important;
  }
  body.page-partner #partner-programs .info-row h4 {
    margin: 0 !important;
    font-size: 3.7px !important;
    line-height: 1.05 !important;
  }
  body.page-partner #partner-programs .info-row p {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    font-size: 2.7px !important;
    line-height: 1.05 !important;
  }
  body.page-partner #partner-programs .partner-info > .login {
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    min-height: 12px !important;
    margin: 2px 0 0 !important;
    padding: 2px 5px !important;
    border-radius: 3px !important;
    font-size: 3.4px !important;
    line-height: 1 !important;
  }
  body.page-partner #partner-programs .partner-programs-note {
    width: 100% !important;
    margin: 2px 0 0 !important;
    padding: 4px 5px !important;
    border-radius: 4px !important;
    font-size: 3px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  /* Courses: two complete compact cards in one row. */
  body:has(.course-section) .course-section .course-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 6px !important;
    align-items: stretch !important;
  }
  body:has(.course-section) .course-section .course-card,
  body:has(.course-section) .course-section .course-card.advanced {
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 8px 6px 6px !important;
    border-radius: 8px !important;
    transform: none !important;
  }
  body:has(.course-section) .course-section .course-card > .mini,
  body:has(.course-section) .course-section .course-card.advanced > .mini {
    max-width: calc(100% - 24px) !important;
    padding: 2px 3px !important;
    font-size: 3px !important;
    line-height: 1 !important;
  }
  body:has(.course-section) .course-section .course-card h3,
  body:has(.course-section) .course-section .course-card.advanced h3 {
    margin: 3px 0 2px !important;
    font-size: 8.5px !important;
    line-height: 1.05 !important;
  }
  body:has(.course-section) .course-section .course-card p,
  body:has(.course-section) .course-section .course-card.advanced p {
    margin: 0 0 3px !important;
    font-size: 3.25px !important;
    line-height: 1.18 !important;
  }
  body:has(.course-section) .course-section .course-card .price,
  body:has(.course-section) .course-section .course-card.advanced .price {
    margin: 3px 0 !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
  }
  body:has(.course-section) .course-section .course-card .old,
  body:has(.course-section) .course-section .course-card .save {
    font-size: 2.8px !important;
    line-height: 1.1 !important;
  }
  body:has(.course-section) .course-section .course-card .topics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 2px 3px !important;
    margin: 3px 0 !important;
  }
  body:has(.course-section) .course-section .course-card .topic,
  body:has(.course-section) .course-section .course-card.advanced .topic {
    min-width: 0 !important;
    gap: 2px !important;
    padding: 0 !important;
    font-size: 2.8px !important;
    line-height: 1.12 !important;
  }
  body:has(.course-section) .course-section .course-card .check {
    width: 5px !important;
    height: 5px !important;
    flex: 0 0 5px !important;
    font-size: 3px !important;
  }
  body:has(.course-section) .course-section .course-card .highlight {
    margin: 3px 0 0 !important;
    padding: 2px !important;
    font-size: 2.6px !important;
    line-height: 1.1 !important;
  }
  body:has(.course-section) .course-section .course-card .course-btn {
    min-height: 13px !important;
    margin-top: 3px !important;
    padding: 2px 3px !important;
    border-radius: 3px !important;
    font-size: 3.4px !important;
    line-height: 1 !important;
  }
  body:has(.course-section) .course-section .course-card .ribbon {
    top: 4px !important;
    right: -14px !important;
    padding: 2px 15px !important;
    font-size: 2.2px !important;
  }
  body:has(.course-section) .why-section .grid-4 {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 4px !important;
  }
  body:has(.course-section) .why-section .feature-card {
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 15 / 8 !important;
    margin: 0 !important;
  }

  /* Tools: 3x2 visual banners and four compact service cards. */
  body.page-tools #tools .category-grid {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 5px !important;
  }
  body.page-tools #tools .resource-card {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 15 / 8 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 7px !important;
  }
  body.page-tools #tools .tool-mini-banner,
  body.page-tools #tools .tool-mini-banner img {
    border-radius: 7px !important;
  }
  body.page-tools #learning-journey {
    padding: 17px 0 !important;
  }
  body.page-tools #learning-journey .services-grid {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 5px !important;
  }
  body.page-tools #learning-journey .resource-card {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px 5px 6px !important;
    border-radius: 7px !important;
  }
  body.page-tools #learning-journey .resource-card .num {
    top: 3px !important;
    right: 4px !important;
    font-size: 8px !important;
    letter-spacing: 0 !important;
  }
  body.page-tools #learning-journey .resource-card .iconbox {
    width: 17px !important;
    height: 17px !important;
    margin: 0 0 3px !important;
    border-radius: 5px !important;
  }
  body.page-tools #learning-journey .resource-card .iconbox svg {
    width: 9px !important;
    height: 9px !important;
  }
  body.page-tools #learning-journey .resource-card h3 {
    margin: 1px 0 2px !important;
    font-size: 5.2px !important;
    line-height: 1.1 !important;
  }
  body.page-tools #learning-journey .resource-card p {
    display: -webkit-box !important;
    margin: 0 0 3px !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    font-size: 3px !important;
    line-height: 1.15 !important;
  }
  body.page-tools #learning-journey .resource-card > a {
    min-height: 12px !important;
    margin-top: auto !important;
    padding: 2px 3px !important;
    border-radius: 3px !important;
    font-size: 3px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 768px) {
  /* Home hero: all copy must fit inside the 137px approved banner. */
  body:not(.page-partner):not(.page-tools):not(:has(.course-section)) .hero-overlay-banner .hero-text-layer {
    justify-content: flex-start !important;
    overflow: hidden !important;
  }
  body:not(.page-partner):not(.page-tools):not(:has(.course-section)) .hero-overlay-banner .hero-eyebrow {
    flex: 0 0 auto !important;
    margin: 0 0 3px !important;
    padding: 2px 4px !important;
    font-size: 4.7px !important;
    line-height: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  body:not(.page-partner):not(.page-tools):not(:has(.course-section)) .hero-overlay-banner h1 {
    flex: 0 0 auto !important;
    margin: 0 0 3px !important;
    font-size: 15.5px !important;
    line-height: .96 !important;
    transform: none !important;
    animation: none !important;
  }
  body:not(.page-partner):not(.page-tools):not(:has(.course-section)) .hero-overlay-banner .hero-course {
    flex: 0 0 auto !important;
    margin: 0 0 3px !important;
    padding: 2px 4px !important;
    border-left-width: 2px !important;
    font-size: 4.8px !important;
    line-height: 1.1 !important;
    transform: none !important;
    animation: none !important;
  }
  body:not(.page-partner):not(.page-tools):not(:has(.course-section)) .hero-overlay-banner .hero-quote {
    flex: 0 0 auto !important;
    max-width: none !important;
    margin: 0 0 3px !important;
    padding: 3px 4px !important;
    border-radius: 4px !important;
    transform: none !important;
    animation: none !important;
  }
  body:not(.page-partner):not(.page-tools):not(:has(.course-section)) .hero-overlay-banner .hero-quote strong {
    margin: 0 0 1px !important;
    padding: 1px 3px !important;
    font-size: 4.3px !important;
    line-height: 1 !important;
  }
  body:not(.page-partner):not(.page-tools):not(:has(.course-section)) .hero-overlay-banner .hero-quote p {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    font-size: 3.7px !important;
    line-height: 1.2 !important;
  }
  body:not(.page-partner):not(.page-tools):not(:has(.course-section)) .hero-overlay-banner .hero-features {
    flex: 0 0 auto !important;
    margin: 2px 0 3px !important;
  }

  /* Partner hero must use the clean right-side artwork, not the old text banner. */
  body.page-partner .hero-box > .hero-visual.partner-hero-visual {
    background-image: url('partner-hero-curved-light.webp') !important;
    background-size: 100% 100% !important;
    background-position: center !important;
  }
  body.dark.page-partner .hero-box > .hero-visual.partner-hero-visual,
  body.dark-theme.page-partner .hero-box > .hero-visual.partner-hero-visual {
    background-image: url('partner-hero-curved-dark.webp') !important;
  }

  /* Courses use a custom hero, so override its own late responsive rules. */
  body:has(.course-section) .course-hero-box {
    display: block !important;
    position: relative !important;
    height: 144px !important;
    min-height: 144px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }
  body:has(.course-section) .course-hero-copy {
    position: relative !important;
    z-index: 8 !important;
    width: 58% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 8px 7px 6px !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  body:has(.course-section) .course-academy-label {
    gap: 2px !important;
    padding: 1px 3px 1px 2px !important;
    border-radius: 3px !important;
    font-size: 2.8px !important;
    letter-spacing: .07em !important;
  }
  body:has(.course-section) .course-academy-label img {
    width: 8px !important;
    height: 8px !important;
    border-radius: 2px !important;
  }
  body:has(.course-section) .course-hero-copy h1 {
    margin: 3px 0 2px !important;
    font-size: 11px !important;
    line-height: .98 !important;
    letter-spacing: -.03em !important;
  }
  body:has(.course-section) .course-hero-copy p {
    display: -webkit-box !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    font-size: 3px !important;
    line-height: 1.18 !important;
  }
  body:has(.course-section) .course-hero-copy .pills {
    flex-wrap: nowrap !important;
    gap: 2px !important;
    margin: 3px 0 !important;
  }
  body:has(.course-section) .course-hero-copy .pill {
    padding: 1px 2px !important;
    border-radius: 2px !important;
    font-size: 2.6px !important;
    line-height: 1 !important;
  }
  body:has(.course-section) .course-hero-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
  }
  body:has(.course-section) .course-hero-actions > a,
  body:has(.course-section) .course-hero-actions > .login,
  body:has(.course-section) .course-roadmap-btn {
    width: auto !important;
    min-height: 12px !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    font-size: 2.7px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  body:has(.course-section) .course-hero-art {
    position: absolute !important;
    z-index: 3 !important;
    inset: 0 0 0 auto !important;
    width: 46% !important;
    height: 144px !important;
    min-height: 144px !important;
    border: 0 !important;
    border-radius: 47% 0 0 59% / 39% 0 0 67% !important;
  }
  body:has(.course-section) .course-gold-curve {
    display: block !important;
    left: -20px !important;
    width: 38px !important;
    height: 100% !important;
  }
  body:has(.course-section) .course-portrait-glow {
    right: 7% !important;
    top: 9% !important;
    width: 66% !important;
  }
  body:has(.course-section) .course-mentor-portrait {
    right: -5% !important;
    bottom: -40% !important;
    height: 140% !important;
    max-width: 100% !important;
  }
  body:has(.course-section) .course-mentor-badge {
    left: auto !important;
    right: 2px !important;
    bottom: 2px !important;
    min-width: 48px !important;
    padding: 2px 3px !important;
    border-radius: 3px !important;
  }
  body:has(.course-section) .course-mentor-badge strong {
    font-size: 3.4px !important;
    line-height: 1 !important;
  }
  body:has(.course-section) .course-mentor-badge span {
    margin-top: 1px !important;
    font-size: 2.2px !important;
    line-height: 1 !important;
    letter-spacing: .04em !important;
  }
}
@media (max-width: 768px) {
  body:not(.page-partner):not(.page-tools):not(:has(.course-section)) .hero-overlay-banner .hero-eyebrow {
    padding: 1px 3px !important;
    margin-bottom: 2px !important;
    font-size: 3.6px !important;
  }
  body:not(.page-partner):not(.page-tools):not(:has(.course-section)) .hero-overlay-banner h1 {
    margin-bottom: 2px !important;
    font-size: 13.2px !important;
    line-height: .94 !important;
  }
  body:not(.page-partner):not(.page-tools):not(:has(.course-section)) .hero-overlay-banner .hero-course {
    margin-bottom: 2px !important;
    padding: 1px 3px !important;
    font-size: 3.8px !important;
    line-height: 1.05 !important;
  }
  body:not(.page-partner):not(.page-tools):not(:has(.course-section)) .hero-overlay-banner .hero-quote {
    height: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;
    margin-bottom: 2px !important;
    padding: 2px 3px !important;
    overflow: hidden !important;
  }
  body:not(.page-partner):not(.page-tools):not(:has(.course-section)) .hero-overlay-banner .hero-quote strong {
    padding: 1px 2px !important;
    font-size: 3.4px !important;
  }
  body:not(.page-partner):not(.page-tools):not(:has(.course-section)) .hero-overlay-banner .hero-quote p {
    font-size: 2.9px !important;
    line-height: 1.13 !important;
  }
  body:not(.page-partner):not(.page-tools):not(:has(.course-section)) .hero-overlay-banner .hero-features {
    margin: 1px 0 2px !important;
  }
  body:not(.page-partner):not(.page-tools):not(:has(.course-section)) .hero-overlay-banner .hero-primary-cta {
    min-height: 14px !important;
    padding: 2px 7px !important;
    font-size: 4.7px !important;
  }
}