/* ValoraX Mobile Experience 2026
   Dedicated mobile layer loaded after styles.css + experience.css.
   Goal: product-grade mobile UX, deterministic layouts, concise hierarchy,
   large touch targets, no parallax/tilt dependence and no blocking overlays. */

@media (max-width: 980px) {
  :root {
    --vx-mobile-edge: 14px;
    --vx-mobile-radius: 18px;
    --vx-mobile-dock-space: 0px;
  }

  html {
    scroll-padding-top: 112px;
    -webkit-text-size-adjust: 100%;
  }

  body.vx-experience,
  body.vx-member-experience {
    overflow-x: hidden !important;
  }

  /* -----------------------------------------------------------------------
     Mobile header
     ----------------------------------------------------------------------- */
  body.vx-experience .topbar,
  body.vx-member-experience .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 3000 !important;
    min-height: 60px;
    border-bottom: 1px solid rgba(16, 21, 18, .08) !important;
    background: #f4f3ef !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.vx-experience .nav,
  body.vx-member-experience .nav {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    align-items: center !important;
    min-height: 60px !important;
    gap: 8px !important;
  }

  body.vx-experience .brand,
  body.vx-member-experience .brand {
    min-width: 0;
    font-size: .96rem !important;
  }

  body.vx-experience .brand-mark,
  body.vx-member-experience .brand-mark {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
  }

  body.vx-experience .menu-label,
  body.vx-member-experience .menu-label {
    display: grid !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    justify-self: end !important;
    border: 1px solid rgba(16, 21, 18, .10) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.72) !important;
    box-shadow: none !important;
    touch-action: manipulation;
  }

  body.vx-experience .nav-actions,
  body.vx-member-experience .nav-actions {
    display: none !important;
  }

  body.vx-experience #primary-navigation,
  body.vx-member-experience #primary-navigation {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 3200 !important;
    width: auto !important;
    max-height: min(72dvh, 500px) !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    border: 1px solid rgba(16, 21, 18, .10) !important;
    border-radius: 17px !important;
    background: #fff !important;
    box-shadow: 0 20px 55px rgba(18, 30, 25, .16) !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: auto !important;
  }

  body.vx-experience #primary-navigation[hidden],
  body.vx-member-experience #primary-navigation[hidden] {
    display: none !important;
  }

  body.vx-experience #primary-navigation:not([hidden]),
  body.vx-member-experience #primary-navigation:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  body.vx-experience #primary-navigation a,
  body.vx-member-experience #primary-navigation a {
    display: flex !important;
    min-height: 46px !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 14px !important;
    border-radius: 11px !important;
    color: #38413d !important;
    font-size: .92rem !important;
    font-weight: 650 !important;
    background: transparent !important;
    pointer-events: auto !important;
    touch-action: manipulation;
  }

  body.vx-experience #primary-navigation a::after,
  body.vx-member-experience #primary-navigation a::after {
    display: none !important;
  }

  body.vx-experience #primary-navigation a[aria-current="page"],
  body.vx-member-experience #primary-navigation a[aria-current="page"] {
    color: var(--accent, var(--vx-green)) !important;
    background: rgba(23,63,53,.055) !important;
  }

  body.brain-theme-bordeaux.vx-member-experience
  #primary-navigation a[href="brain-teaser.html"][aria-current="page"] {
    color: var(--brain-bordeaux) !important;
    background: rgba(118,28,57,.055) !important;
  }

  body.vx-experience #primary-navigation .mobile-account-nav-link,
  body.vx-member-experience #primary-navigation .mobile-account-nav-link {
    margin-top: 6px !important;
    color: #fff !important;
    background: var(--vx-ink) !important;
  }

  body::before,
  body::after,
  body.mobile-menu-open::before,
  body.mobile-menu-open::after,
  .mobile-menu-overlay,
  .menu-overlay,
  .nav-overlay,
  .mobile-nav-overlay,
  [data-mobile-menu-overlay] {
    pointer-events: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Member secondary bar: one compact row. */
  body.vx-member-experience .environment-bar {
    position: sticky !important;
    top: 60px !important;
    z-index: 1200 !important;
    min-height: 44px !important;
    border-bottom: 1px solid rgba(16,21,18,.08) !important;
    background: rgba(244,243,239,.99) !important;
  }

  body.vx-member-experience .environment-bar-inner {
    display: block !important;
    min-height: 44px !important;
    padding-block: 5px !important;
  }

  body.vx-member-experience .environment-identity,
  body.vx-member-experience .environment-switch-link {
    display: none !important;
  }

  body.vx-member-experience .environment-subnav {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    width: 100% !important;
  }

  body.vx-member-experience .environment-subnav-link {
    display: flex !important;
    min-height: 34px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 7px !important;
    border-radius: 9px !important;
    font-size: .72rem !important;
    white-space: nowrap !important;
  }

  body.vx-member-experience .environment-subnav-link[aria-current="page"],
  body.vx-member-experience .environment-subnav-link.active {
    background: rgba(23,63,53,.08) !important;
  }

  body.env-market.vx-member-experience
  .environment-subnav-link[aria-current="page"],
  body.env-market.vx-member-experience
  .environment-subnav-link.active {
    background: rgba(95,89,141,.09) !important;
  }

  /* Reduce motion cost on touch devices. */
  .vx-product-frame,
  .vx-story-visual,
  .vx-story-visual img,
  .vx-progress-screen,
  body.vx-track-experience .premium-hero-media {
    transform: none !important;
  }

  .vx-product-glow,
  .vx-float-note {
    display: none !important;
  }
}

@media (max-width: 760px) {
  :root {
    --vx-mobile-edge: 14px;
  }

  html {
    scroll-padding-top: 108px;
  }

  body.vx-experience .container,
  body.vx-member-experience .container {
    width: calc(100% - (var(--vx-mobile-edge) * 2)) !important;
    max-width: none !important;
  }

  body.vx-experience .section,
  body.vx-member-experience .section {
    padding-block: 34px !important;
  }

  /* -----------------------------------------------------------------------
     Motion: subtle on mobile, never a layout dependency
     ----------------------------------------------------------------------- */
  .vx-motion-ready [data-vx-reveal] {
    transform: translate3d(0, 14px, 0) !important;
    transition-duration: .54s !important;
    will-change: auto !important;
  }

  .vx-motion-ready [data-vx-reveal].is-visible {
    transform: none !important;
  }

  .vx-motion-ready [data-vx-reveal="clip"] {
    clip-path: inset(0 0 8% 0 round 14px) !important;
    transform: translate3d(0, 14px, 0) !important;
    transition-duration: .62s !important;
  }

  .vx-motion-ready [data-vx-reveal="clip"].is-visible {
    clip-path: inset(0 0 0 0 round 14px) !important;
    transform: none !important;
  }

  /* -----------------------------------------------------------------------
     Public home — mobile composition designed independently
     ----------------------------------------------------------------------- */
  .vx-home-hero {
    min-height: auto !important;
    padding: 38px 0 42px !important;
  }

  .vx-home-hero::before {
    width: 110vw !important;
    right: -78vw !important;
    top: -16vw !important;
    opacity: .72;
  }

  .vx-home-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .vx-hero-copy {
    max-width: none !important;
  }

  .vx-kicker {
    margin-bottom: 15px !important;
    font-size: .64rem !important;
    letter-spacing: .085em !important;
  }

  .vx-hero-title {
    max-width: 11.8ch !important;
    font-size: clamp(2.72rem, 12.3vw, 3.72rem) !important;
    line-height: .94 !important;
    letter-spacing: -.058em !important;
    text-wrap: balance;
  }

  .vx-hero-title em {
    margin-top: .06em !important;
  }

  .vx-hero-subtitle {
    max-width: 34ch !important;
    margin-top: 17px !important;
    font-size: .91rem !important;
    line-height: 1.52 !important;
  }

  .vx-hero-rolling {
    display: none !important;
  }

  .vx-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 22px !important;
  }

  .vx-hero-actions .btn {
    width: 100% !important;
    min-height: 47px !important;
    justify-content: center !important;
  }

  .vx-hero-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    margin-top: 22px !important;
    padding-top: 16px !important;
  }

  .vx-hero-metric {
    min-width: 0 !important;
    padding-inline: 9px !important;
    border-right: 1px solid var(--vx-line);
  }

  .vx-hero-metric:first-child {
    padding-left: 0 !important;
  }

  .vx-hero-metric:last-child {
    padding-right: 0 !important;
    border-right: 0;
  }

  .vx-hero-metric strong {
    font-size: 1.22rem !important;
  }

  .vx-hero-metric span {
    margin-top: 3px !important;
    font-size: .59rem !important;
    line-height: 1.25 !important;
  }

  .vx-product-stage {
    min-height: 0 !important;
    aspect-ratio: auto !important;
    perspective: none !important;
  }

  .vx-product-frame {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    border-radius: 15px !important;
    box-shadow: 0 14px 36px rgba(18,30,25,.10) !important;
  }

  .vx-product-frame::before {
    height: 25px !important;
  }

  .vx-product-frame img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  .vx-campus {
    padding: 6px 0 48px !important;
  }

  .vx-campus-inner {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 20px 0 !important;
  }

  .vx-campus-copy {
    max-width: 36ch;
    font-size: .7rem !important;
  }

  .vx-campus-copy strong {
    font-size: .8rem !important;
  }

  .vx-campus-copy small {
    margin-top: 4px !important;
    font-size: .58rem !important;
  }

  .vx-campus-logos {
    display: grid !important;
    grid-template-columns: 1.2fr .8fr !important;
    gap: 18px !important;
    justify-items: start !important;
  }

  .vx-campus-logo {
    min-height: 42px !important;
    opacity: .72 !important;
  }

  .vx-campus-logo img {
    max-height: 34px !important;
    max-width: 100% !important;
  }

  .vx-manifesto {
    padding: 64px 0 !important;
  }

  .vx-manifesto-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .vx-manifesto-label {
    font-size: .66rem !important;
  }

  .vx-manifesto h2 {
    max-width: 10.5ch !important;
    font-size: clamp(2.65rem, 12vw, 3.6rem) !important;
    line-height: .95 !important;
  }

  .vx-manifesto p {
    max-width: 31ch !important;
    margin-top: 18px !important;
    font-size: .9rem !important;
    line-height: 1.55 !important;
  }

  .vx-story {
    padding: 62px 0 !important;
  }

  .vx-story-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 36px !important;
  }

  .vx-story-head h2 {
    max-width: 12ch !important;
    font-size: 2.48rem !important;
    line-height: .97 !important;
  }

  .vx-story-head p {
    max-width: 32ch !important;
    font-size: .86rem !important;
    line-height: 1.5 !important;
  }

  .vx-story-list {
    gap: 56px !important;
  }

  .vx-story-item,
  .vx-story-item:nth-child(even) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .vx-story-item:nth-child(even) .vx-story-copy,
  .vx-story-copy {
    order: 1 !important;
  }

  .vx-story-item:nth-child(even) .vx-story-visual,
  .vx-story-visual {
    order: 2 !important;
  }

  .vx-story-copy {
    padding: 0 2px !important;
  }

  .vx-story-index {
    font-size: .62rem !important;
  }

  .vx-story-copy h3 {
    max-width: 12ch !important;
    margin-top: 10px !important;
    font-size: 2rem !important;
    line-height: .98 !important;
  }

  .vx-story-copy p {
    max-width: 34ch !important;
    margin-top: 12px !important;
    font-size: .86rem !important;
    line-height: 1.52 !important;
  }

  .vx-story-link {
    margin-top: 16px !important;
    font-size: .78rem !important;
  }

  .vx-story-visual {
    width: 100% !important;
    min-height: 0 !important;
    border-radius: 17px !important;
    box-shadow: 0 14px 36px rgba(18,30,25,.08) !important;
  }

  .vx-story-visual--course {
    aspect-ratio: 1214 / 902 !important;
  }

  .vx-story-visual--library {
    aspect-ratio: 1273 / 923 !important;
  }

  .vx-story-visual--brain {
    aspect-ratio: 1231 / 633 !important;
  }

  .vx-story-visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
  }

  .vx-universes {
    padding: 60px 0 !important;
  }

  .vx-universe-head {
    margin-bottom: 24px !important;
  }

  .vx-universe-head h2 {
    max-width: 11ch !important;
    font-size: 2.55rem !important;
    line-height: .96 !important;
  }

  .vx-universe-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .vx-universe {
    min-height: 286px !important;
    padding: 24px 20px !important;
    border-radius: 19px !important;
    box-shadow: none !important;
  }

  .vx-universe > span {
    font-size: .62rem !important;
  }

  .vx-universe h3 {
    max-width: 8ch !important;
    margin-top: 30px !important;
    font-size: 2.7rem !important;
    line-height: .91 !important;
  }

  .vx-universe-tags {
    gap: 6px !important;
    margin-top: auto !important;
    padding-top: 22px !important;
  }

  .vx-universe-tags span {
    padding: 6px 8px !important;
    font-size: .61rem !important;
  }

  .vx-universe-link {
    margin-top: 15px !important;
    font-size: .78rem !important;
  }

  .vx-progress-section {
    padding: 64px 0 !important;
  }

  .vx-progress-card {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    padding: 0 !important;
  }

  .vx-progress-copy h2 {
    max-width: 10ch !important;
    font-size: 2.62rem !important;
    line-height: .96 !important;
  }

  .vx-progress-copy p {
    max-width: 32ch !important;
    margin-top: 14px !important;
    font-size: .86rem !important;
    line-height: 1.54 !important;
  }

  .vx-progress-screen {
    order: 2;
    width: 100% !important;
    aspect-ratio: 1271 / 701 !important;
    border-radius: 16px !important;
    transform: none !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.18) !important;
  }

  .vx-final-cta {
    padding: 66px 0 76px !important;
  }

  .vx-final-inner {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .vx-final-cta h2 {
    max-width: 11ch !important;
    font-size: 2.72rem !important;
    line-height: .95 !important;
  }

  .vx-final-actions {
    width: 100%;
  }

  .vx-final-actions .btn {
    width: 100% !important;
    min-height: 47px !important;
    justify-content: center !important;
  }

  /* -----------------------------------------------------------------------
     Track pages — image first, message second
     ----------------------------------------------------------------------- */
  body.vx-track-experience .premium-hero-section {
    padding: 22px 0 46px !important;
  }

  body.vx-track-experience .premium-hero-shell {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  body.vx-track-experience .premium-hero-media {
    order: -1 !important;
    width: 100% !important;
    border-radius: 17px !important;
    transform: none !important;
    box-shadow: 0 14px 36px rgba(18,30,25,.09) !important;
  }

  body.vx-track-experience .premium-hero-copy {
    padding: 0 2px !important;
  }

  body.vx-track-experience .premium-hero-copy .eyebrow {
    font-size: .64rem !important;
  }

  body.vx-track-experience .premium-hero-copy h1 {
    max-width: 12ch !important;
    margin-top: 10px !important;
    font-size: 2.62rem !important;
    line-height: .95 !important;
    letter-spacing: -.052em !important;
  }

  body.vx-track-experience .premium-hero-copy p {
    max-width: 33ch !important;
    margin-top: 14px !important;
    font-size: .87rem !important;
    line-height: 1.5 !important;
  }

  body.vx-track-experience .premium-hero-copy .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 20px !important;
  }

  body.vx-track-experience .premium-hero-copy .hero-actions .btn {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
  }

  body.vx-track-experience .track-numbers {
    display: grid !important;
    grid-template-columns: repeat(3,1fr) !important;
    gap: 0 !important;
    margin-top: 22px !important;
    padding-top: 15px !important;
  }

  body.vx-track-experience .track-numbers > div {
    min-width: 0;
    padding-inline: 8px !important;
    border-right: 1px solid var(--vx-line);
  }

  body.vx-track-experience .track-numbers > div:first-child {
    padding-left: 0 !important;
  }

  body.vx-track-experience .track-numbers > div:last-child {
    border-right: 0;
  }

  body.vx-track-experience .track-numbers strong {
    font-size: 1.1rem !important;
  }

  body.vx-track-experience .track-numbers span {
    font-size: .6rem !important;
  }

  body.vx-track-experience .track-pillar-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
    border: 0 !important;
  }

  body.vx-track-experience .track-pillar {
    min-height: 162px !important;
    padding: 17px !important;
    border: 1px solid var(--vx-line) !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.48) !important;
  }

  body.vx-track-experience .track-pillar h2 {
    margin-top: 28px !important;
    font-size: 1.12rem !important;
  }

  body.vx-track-experience .track-pillar p {
    font-size: .74rem !important;
    line-height: 1.4 !important;
  }

  body.vx-track-experience .compact-cta {
    display: grid !important;
    gap: 18px !important;
    padding: 22px !important;
    border-radius: 18px !important;
  }

  body.vx-track-experience .compact-cta h2 {
    font-size: 1.7rem !important;
  }

  body.vx-track-experience .compact-cta .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* -----------------------------------------------------------------------
     Generic public pages
     ----------------------------------------------------------------------- */
  body.vx-experience .page-hero:not(.profile-hero-v2) {
    padding-top: 34px !important;
    padding-bottom: 24px !important;
  }

  body.vx-experience .page-hero:not(.profile-hero-v2) h1 {
    max-width: 12ch !important;
    font-size: 2.58rem !important;
    line-height: .96 !important;
    letter-spacing: -.052em !important;
  }

  body.vx-experience .page-hero:not(.profile-hero-v2) p {
    max-width: 34ch !important;
    margin-top: 12px !important;
    font-size: .86rem !important;
    line-height: 1.5 !important;
  }

  body.catalogue-page.vx-experience .toolbar,
  body.vx-member-experience .toolbar {
    position: static !important;
    top: auto !important;
    margin-bottom: 16px !important;
    padding: 10px !important;
    border-radius: 15px !important;
    box-shadow: none !important;
  }

  body.catalogue-page.vx-experience .toolbar .search,
  body.vx-member-experience .toolbar .search {
    width: 100% !important;
  }

  body.catalogue-page.vx-experience .filters,
  body.vx-member-experience .filters {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body.catalogue-page.vx-experience .filters::-webkit-scrollbar,
  body.vx-member-experience .filters::-webkit-scrollbar {
    display: none;
  }

  body.catalogue-page.vx-experience .chip,
  body.vx-member-experience .chip {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    font-size: .72rem !important;
  }

  body.guides-page.vx-experience .guide-card-compact {
    min-height: 0 !important;
    padding: 19px !important;
    border-radius: 16px !important;
  }

  body.guides-page.vx-experience .guide-card-compact h2,
  body.guides-page.vx-experience .guide-card-compact h3 {
    font-size: 1.25rem !important;
  }

  body.pricing-page.vx-experience .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.pricing-page.vx-experience .pricing-card {
    min-height: 0 !important;
    padding: 22px !important;
    border-radius: 18px !important;
  }

  body.pricing-page.vx-experience .pricing-card h2 {
    font-size: 1.75rem !important;
  }

  body.pricing-page.vx-experience .pricing-amount {
    margin-block: 12px !important;
    font-size: 2.55rem !important;
  }

  body.pricing-page.vx-experience .pricing-card ul {
    margin-block: 18px !important;
  }

  body.pricing-page.vx-experience .pricing-card .btn {
    width: 100% !important;
    min-height: 47px !important;
    justify-content: center !important;
  }

  .seo-commercial-section {
    padding-block: 34px !important;
  }

  .seo-commercial-path-grid,
  .seo-topic-module-grid,
  .seo-method-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .seo-commercial-path-grid a,
  .seo-topic-module-grid article,
  .seo-method-grid article {
    min-height: 0 !important;
    padding: 18px !important;
    border-radius: 15px !important;
  }

  .seo-topic-module-grid h3,
  .seo-method-grid h3 {
    margin-top: 20px !important;
  }

  .seo-interview-question-box {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 20px !important;
    border-radius: 17px !important;
  }

  .seo-question-list {
    gap: 7px !important;
  }

  .seo-question-list span {
    padding: 11px 12px !important;
    font-size: .78rem !important;
  }

  /* -----------------------------------------------------------------------
     Member bottom dock
     ----------------------------------------------------------------------- */
  body.vx-member-experience {
    --vx-mobile-dock-space: calc(76px + env(safe-area-inset-bottom, 0px));
    padding-bottom: var(--vx-mobile-dock-space) !important;
  }

  .vx-mobile-dock {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 2600;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    min-height: 58px;
    padding: 5px;
    border: 1px solid rgba(16,21,18,.10);
    border-radius: 18px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 14px 42px rgba(18,30,25,.16);
  }

  .vx-mobile-dock a {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 48px;
    place-items: center;
    align-content: center;
    gap: 5px;
    padding: 4px 2px;
    border-radius: 13px;
    color: #777d79;
    font-size: .56rem;
    font-weight: 750;
    line-height: 1;
    text-align: center;
    touch-action: manipulation;
  }

  .vx-mobile-dock a::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: #b8bcb9;
    transition: width .24s var(--vx-ease), background .24s ease;
  }

  .vx-mobile-dock a[aria-current="page"] {
    color: var(--vx-dock-active, var(--vx-green));
    background: rgba(23,63,53,.045);
  }

  .vx-mobile-dock a[aria-current="page"]::before {
    width: 18px;
    background: var(--vx-dock-active, var(--vx-green));
  }

  body.env-market.vx-member-experience .vx-mobile-dock {
    --vx-dock-active: var(--vx-purple);
  }

  body.brain-theme-bordeaux.vx-member-experience .vx-mobile-dock {
    --vx-dock-active: var(--brain-bordeaux);
  }

  /* -----------------------------------------------------------------------
     Member dashboard
     ----------------------------------------------------------------------- */
  body.member-dashboard-page.vx-member-experience .vx-member-intro {
    padding: 34px 0 18px !important;
  }

  body.member-dashboard-page.vx-member-experience .vx-member-intro-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    margin-top: 8px !important;
  }

  body.member-dashboard-page.vx-member-experience .vx-member-intro h1 {
    max-width: 11ch !important;
    font-size: 2.78rem !important;
    line-height: .95 !important;
  }

  body.member-dashboard-page.vx-member-experience .vx-member-intro p {
    max-width: 31ch !important;
    font-size: .84rem !important;
    line-height: 1.5 !important;
  }

  body.member-dashboard-page.vx-member-experience .vx-member-stats {
    grid-template-columns: repeat(2,1fr) !important;
    gap: 7px !important;
  }

  body.member-dashboard-page.vx-member-experience .vx-member-stats > div {
    min-height: 70px !important;
    padding: 11px !important;
    border-radius: 13px !important;
  }

  body.member-dashboard-page.vx-member-experience .vx-member-stats strong {
    font-size: 1.25rem !important;
  }

  body.member-dashboard-page.vx-member-experience .vx-member-progress-line {
    margin-top: 20px !important;
  }

  body.member-dashboard-page.vx-member-experience .dashboard-path-section {
    padding-top: 30px !important;
  }

  body.member-dashboard-page.vx-member-experience .dashboard-section-heading h2 {
    max-width: 12ch !important;
    font-size: 2.25rem !important;
    line-height: .96 !important;
  }

  body.member-dashboard-page.vx-member-experience .dashboard-path-grid {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  body.member-dashboard-page.vx-member-experience .dashboard-path-card {
    min-height: 286px !important;
    padding: 19px !important;
    border-radius: 18px !important;
  }

  body.member-dashboard-page.vx-member-experience .dashboard-path-copy {
    padding-top: 32px !important;
  }

  body.member-dashboard-page.vx-member-experience .dashboard-path-copy h3 {
    font-size: 1.55rem !important;
    line-height: 1.05 !important;
  }

  body.member-dashboard-page.vx-member-experience .dashboard-path-copy p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: .78rem !important;
  }

  body.member-dashboard-page.vx-member-experience .dashboard-path-actions {
    gap: 7px !important;
    margin-top: 16px !important;
  }

  body.member-dashboard-page.vx-member-experience .dashboard-path-actions .btn {
    min-height: 42px !important;
  }

  body.member-dashboard-page.vx-member-experience .dashboard-quick-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }

  body.member-dashboard-page.vx-member-experience .dashboard-quick-card {
    min-height: 126px !important;
    padding: 16px !important;
    border-radius: 17px !important;
  }

  body.member-dashboard-page.vx-member-experience .dashboard-quick-card h2 {
    font-size: 1.18rem !important;
    line-height: 1.05 !important;
  }

  body.member-dashboard-page.vx-member-experience .dashboard-quick-card p {
    display: none !important;
  }

  /* -----------------------------------------------------------------------
     Course libraries — compact list cards
     ----------------------------------------------------------------------- */
  body.vx-member-experience .page-hero {
    padding: 30px 0 20px !important;
  }

  body.vx-member-experience .page-hero h1 {
    max-width: 12ch !important;
    font-size: 2.52rem !important;
    line-height: .96 !important;
  }

  body.vx-member-experience .page-hero p {
    max-width: 34ch !important;
    margin-top: 10px !important;
    font-size: .84rem !important;
  }

  body.vx-member-experience .grid-3#course-grid {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  body.vx-member-experience .course-card {
    display: grid !important;
    grid-template-columns: 108px minmax(0,1fr) !important;
    min-height: 134px !important;
    border-radius: 16px !important;
  }

  body.vx-member-experience .course-cover {
    min-height: 134px !important;
    padding: 13px 11px !important;
  }

  body.vx-member-experience .course-cover::after {
    opacity: .55;
  }

  body.vx-member-experience .course-cover h3 {
    margin-top: auto !important;
    font-size: 1.1rem !important;
    line-height: 1.02 !important;
    overflow-wrap: anywhere;
  }

  body.vx-member-experience .course-tag {
    padding: 5px 7px !important;
    font-size: .55rem !important;
  }

  body.vx-member-experience .course-body {
    display: flex !important;
    min-width: 0 !important;
    padding: 13px !important;
    flex-direction: column !important;
  }

  body.vx-member-experience .course-meta {
    font-size: .65rem !important;
  }

  body.vx-member-experience .course-body > p {
    margin-top: 8px !important;
    font-size: .78rem !important;
    line-height: 1.42 !important;
    -webkit-line-clamp: 2 !important;
  }

  body.vx-member-experience .course-card .card-actions {
    margin-top: auto !important;
    padding-top: 9px !important;
  }

  body.vx-member-experience .course-card .card-actions .btn {
    min-height: 34px !important;
    padding: 0 11px !important;
    font-size: .7rem !important;
  }

  body.vx-member-experience .favorite-label {
    width: 34px !important;
    height: 34px !important;
  }

  /* -----------------------------------------------------------------------
     Course reader — content first
     ----------------------------------------------------------------------- */
  body.vx-course-page {
    scroll-padding-top: 158px !important;
  }

  body.vx-course-page .content-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  body.vx-course-page .sidebar {
    position: sticky !important;
    top: 104px !important;
    z-index: 900 !important;
    display: flex !important;
    max-height: none !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-radius: 13px !important;
    background: rgba(250,249,246,.98) !important;
    box-shadow: 0 8px 24px rgba(18,30,25,.07) !important;
    scrollbar-width: none;
  }

  body.vx-course-page .sidebar::-webkit-scrollbar {
    display: none;
  }

  body.vx-course-page .sidebar-title {
    display: none !important;
  }

  body.vx-course-page .sidebar a {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    padding: 8px 10px !important;
    border-radius: 9px !important;
    font-size: .68rem !important;
    white-space: nowrap !important;
  }

  body.vx-course-page .lesson {
    width: 100% !important;
    padding: 18px !important;
    border-radius: 17px !important;
  }

  body.vx-course-page .lesson-intro h2 {
    font-size: 1.72rem !important;
  }

  body.vx-course-page .lesson-intro .note {
    padding: 14px !important;
    font-size: .82rem !important;
  }

  body.vx-course-page .course-tools {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  body.vx-course-page .course-tools-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }

  body.vx-course-page .course-tools-actions .btn {
    min-height: 42px !important;
    padding-inline: 8px !important;
    font-size: .69rem !important;
  }

  body.vx-course-page .professional-check {
    padding: 14px !important;
    font-size: .8rem !important;
  }

  body.vx-course-page .lesson > section[data-course-section] {
    padding-block: 24px !important;
  }

  body.vx-course-page .lesson > section[data-course-section] h3 {
    font-size: 1.28rem !important;
  }

  body.vx-course-page .lesson > section[data-course-section] p,
  body.vx-course-page .detail-list li {
    font-size: .9rem !important;
    line-height: 1.62 !important;
  }

  body.vx-course-page .formula {
    margin-inline: -4px !important;
    padding: 16px 10px !important;
    overflow-x: auto !important;
    font-size: .84rem !important;
  }

  body.vx-course-page .formula-variables {
    padding: 14px !important;
  }

  body.vx-course-page .formula-variables dl {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  body.vx-course-page .formula-variables dt {
    margin-top: 9px !important;
  }

  body.vx-course-page .glossary-grid {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  body.vx-course-page .glossary-item,
  body.vx-course-page .worked-example,
  body.vx-course-page .detail-callout {
    padding: 14px !important;
    border-radius: 13px !important;
  }

  body.vx-course-page .lesson-nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  body.vx-course-page .lesson-nav .btn {
    width: 100% !important;
    min-height: 43px !important;
    justify-content: center !important;
  }

  body.vx-course-page .lesson-nav a:last-child {
    order: -1;
  }

  body.vx-course-page .next-course-link {
    margin-top: 14px !important;
    font-size: .76rem !important;
  }

  /* -----------------------------------------------------------------------
     Brain Teaser
     ----------------------------------------------------------------------- */
  body.brain-theme-bordeaux.vx-member-experience .page-hero {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 92px !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 30px 0 22px !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-hero-copy h1,
  body.brain-theme-bordeaux.vx-member-experience .page-hero h1 {
    max-width: 10ch !important;
    margin-top: 8px !important;
    font-size: 2.48rem !important;
    line-height: .96 !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-hero-copy p {
    max-width: 29ch !important;
    margin-top: 10px !important;
    font-size: .8rem !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-hero-visual {
    width: 92px !important;
    height: 92px !important;
    aspect-ratio: 1 !important;
    justify-self: end !important;
    border-radius: 20px !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-hero-visual img {
    padding: 9px !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-layout {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-teaser-card {
    padding: 17px !important;
    border-radius: 18px !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-level-selector {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 14px !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-level-selector > div:first-child span {
    font-size: .72rem !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-level-buttons {
    display: grid !important;
    grid-template-columns: repeat(3,1fr) !important;
    gap: 5px !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-level-buttons .btn {
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 0 5px !important;
    font-size: .66rem !important;
  }

  body.brain-theme-bordeaux.vx-member-experience #brain-title {
    font-size: 1.7rem !important;
    line-height: 1.04 !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-prompt {
    font-size: .92rem !important;
    line-height: 1.58 !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-actions .btn {
    min-height: 43px !important;
    padding-inline: 7px !important;
    font-size: .7rem !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-sidebar {
    display: grid !important;
    grid-template-columns: repeat(3,1fr) !important;
    gap: 7px !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-stat-card {
    min-height: 96px !important;
    padding: 12px !important;
    border-radius: 14px !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-stat-card .kicker {
    font-size: .57rem !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-stat-card strong {
    font-size: 1.12rem !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-stat-card p {
    display: none !important;
  }

  /* -----------------------------------------------------------------------
     Profile / progression
     ----------------------------------------------------------------------- */
  body.profile-progress-page.vx-member-experience .profile-hero-v2 {
    margin-top: 20px !important;
    padding: 23px 19px !important;
    border-radius: 18px !important;
  }

  body.profile-progress-page.vx-member-experience .profile-hero-v2 h1 {
    font-size: 2.35rem !important;
  }

  body.profile-progress-page.vx-member-experience .profile-grid-v2 {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin-top: 10px !important;
  }

  body.profile-progress-page.vx-member-experience .profile-identity-card {
    position: static !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0,1fr) !important;
    gap: 6px 12px !important;
    padding: 16px !important;
    border-radius: 17px !important;
  }

  body.profile-progress-page.vx-member-experience .profile-identity-card .avatar {
    grid-row: 1 / span 3;
    width: 54px !important;
    height: 54px !important;
  }

  body.profile-progress-page.vx-member-experience .profile-identity-card h2,
  body.profile-progress-page.vx-member-experience .profile-identity-card #profile-track,
  body.profile-progress-page.vx-member-experience .profile-identity-card .profile-bio {
    grid-column: 2;
  }

  body.profile-progress-page.vx-member-experience .profile-identity-card .profile-bio {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  body.profile-progress-page.vx-member-experience .profile-identity-card #open-profile-editor,
  body.profile-progress-page.vx-member-experience .profile-identity-card .profile-stat {
    grid-column: 1 / -1;
  }

  body.profile-progress-page.vx-member-experience .profile-identity-card #open-profile-editor {
    width: 100% !important;
    margin-top: 7px !important;
  }

  body.profile-progress-page.vx-member-experience .profile-environment-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.profile-progress-page.vx-member-experience .profile-track-card,
  body.profile-progress-page.vx-member-experience .profile-weekly-card,
  body.profile-progress-page.vx-member-experience .profile-favorites-card,
  body.profile-progress-page.vx-member-experience .profile-activity-card {
    padding: 16px !important;
    border-radius: 17px !important;
  }

  body.profile-progress-page.vx-member-experience .profile-env-stats {
    grid-template-columns: repeat(3,1fr) !important;
    gap: 5px !important;
  }

  body.profile-progress-page.vx-member-experience .profile-env-stats > div {
    padding: 9px 5px !important;
  }

  body.profile-progress-page.vx-member-experience .profile-env-stats strong {
    font-size: 1rem !important;
  }

  body.profile-progress-page.vx-member-experience .profile-env-stats span {
    font-size: .59rem !important;
  }

  body.profile-progress-page.vx-member-experience
  .profile-favorites-card .activity-row:nth-child(n+6),
  body.profile-progress-page.vx-member-experience
  .profile-activity-card .activity-row:nth-child(n+6) {
    display: none !important;
  }

  body.profile-progress-page.vx-member-experience .profile-dialog {
    width: calc(100% - 18px) !important;
    max-height: calc(100dvh - 18px) !important;
    border-radius: 18px !important;
  }

  /* -----------------------------------------------------------------------
     Quiz / generic member panels
     ----------------------------------------------------------------------- */
  body.vx-member-experience .panel,
  body.vx-member-experience .quiz-card {
    border-radius: 17px !important;
  }

  body.vx-member-experience .quiz-card {
    padding: 17px !important;
  }

  body.vx-member-experience .quiz-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  body.vx-member-experience .quiz-actions .btn {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
  }

  /* -----------------------------------------------------------------------
     Footer
     ----------------------------------------------------------------------- */
  body.vx-member-experience .footer {
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.vx-experience .footer,
  body.vx-member-experience .footer {
    padding-top: 34px !important;
  }

  body.vx-experience .footer-inner,
  body.vx-member-experience .footer-inner {
    gap: 16px !important;
  }

  body.vx-experience .footer-links,
  body.vx-member-experience .footer-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  body.vx-experience .footer-links a,
  body.vx-member-experience .footer-links a {
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 9px !important;
    border: 1px solid var(--vx-line) !important;
    border-radius: 999px !important;
    font-size: .67rem !important;
  }
}

@media (max-width: 390px) {
  :root {
    --vx-mobile-edge: 12px;
  }

  .vx-hero-title {
    font-size: 2.52rem !important;
  }

  .vx-hero-metric span {
    font-size: .55rem !important;
  }

  .vx-universe {
    min-height: 268px !important;
  }

  .vx-universe h3 {
    font-size: 2.45rem !important;
  }

  body.vx-track-experience .track-pillar-grid {
    grid-template-columns: 1fr !important;
  }

  body.vx-track-experience .track-pillar {
    min-height: 128px !important;
  }

  body.vx-track-experience .track-pillar h2 {
    margin-top: 17px !important;
  }

  body.vx-member-experience .course-card {
    grid-template-columns: 96px minmax(0,1fr) !important;
  }

  body.vx-member-experience .course-cover {
    min-height: 128px !important;
    padding: 11px 9px !important;
  }

  body.vx-member-experience .course-cover h3 {
    font-size: 1rem !important;
  }

  .vx-mobile-dock {
    left: 7px;
    right: 7px;
  }

  .vx-mobile-dock a {
    font-size: .52rem;
  }

  body.brain-theme-bordeaux.vx-member-experience .page-hero {
    grid-template-columns: 1fr 76px !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-hero-visual {
    width: 76px !important;
    height: 76px !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-level-buttons .btn {
    font-size: .6rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vx-mobile-dock a::before {
    transition: none !important;
  }
}


/* ==========================================================================
   Mobile precision fix — progression section title
   ========================================================================== */

@media (max-width: 760px) {
  .vx-progress-copy h2 {
    max-width: 14ch !important;
    font-size: clamp(2rem, 9.2vw, 2.35rem) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    text-wrap: balance !important;
  }
}

@media (max-width: 390px) {
  .vx-progress-copy h2 {
    max-width: none !important;
    font-size: clamp(1.9rem, 9vw, 2.15rem) !important;
    line-height: 1 !important;
  }
}


/* ==========================================================================
   Portrait precision pass — 2026-08-22
   ========================================================================== */

@media (max-width: 600px) and (orientation: portrait) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body.vx-experience *,
  body.vx-member-experience * {
    box-sizing: border-box;
  }

  /* Titles may wrap between words, never inside them. */
  body.vx-experience h1,
  body.vx-experience h2,
  body.vx-experience h3,
  body.vx-member-experience h1,
  body.vx-member-experience h2,
  body.vx-member-experience h3 {
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  .vx-shine-word {
    max-width: 100%;
    white-space: nowrap;
  }

  /* Home hero */
  .vx-home-hero {
    padding-block: 32px 38px !important;
  }

  .vx-hero-title {
    max-width: 10.8ch !important;
    font-size: clamp(2.35rem, 11.2vw, 3.05rem) !important;
    line-height: .96 !important;
  }

  .vx-hero-subtitle {
    max-width: 32ch !important;
    font-size: .87rem !important;
  }

  .vx-product-frame,
  .vx-product-frame img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* Story screenshots: frame follows the real image rather than creating
     portrait-height empty boxes. */
  .vx-story-visual,
  .vx-story-visual--course,
  .vx-story-visual--library,
  .vx-story-visual--brain {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
  }

  .vx-story-visual--course {
    aspect-ratio: 1214 / 902 !important;
  }

  .vx-story-visual--library {
    aspect-ratio: 1273 / 923 !important;
  }

  .vx-story-visual--brain {
    aspect-ratio: 1231 / 633 !important;
  }

  .vx-story-visual img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* Corporate / Market: no oversized portrait cards or broken words. */
  .vx-universe-grid {
    width: 100% !important;
    gap: 10px !important;
  }

  .vx-universe {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 24px 19px !important;
    border-radius: 18px !important;
  }

  .vx-universe h3 {
    max-width: none !important;
    margin-top: 24px !important;
    font-size: clamp(2.15rem, 10.5vw, 2.75rem) !important;
    line-height: .94 !important;
  }

  .vx-universe-bottom {
    margin-top: 36px !important;
    gap: 15px !important;
  }

  .vx-universe-topics {
    gap: 5px !important;
  }

  .vx-universe-topics span {
    padding: 6px 8px !important;
    font-size: .58rem !important;
  }

  /* Progression showcase */
  .vx-progress-showcase {
    padding-bottom: 64px !important;
  }

  .vx-progress-card {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 24px 18px !important;
    border-radius: 20px !important;
  }

  .vx-progress-copy h2 {
    max-width: none !important;
    font-size: clamp(1.9rem, 8.8vw, 2.28rem) !important;
    line-height: 1 !important;
  }

  .vx-progress-copy p {
    max-width: 32ch !important;
    margin-top: 13px !important;
    font-size: .82rem !important;
    line-height: 1.52 !important;
  }

  .vx-progress-screen {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1271 / 701 !important;
    transform: none !important;
    border-radius: 14px !important;
  }

  /* Public premium hero / guide cards */
  .premium-hero-shell,
  .premium-guide-shell {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    grid-template-columns: 1fr !important;
  }

  .premium-hero-media,
  .premium-guide-media {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9.5 !important;
  }

  .premium-hero-media img,
  .premium-guide-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .premium-hero-copy h1,
  .premium-guide-copy h1 {
    max-width: none !important;
    font-size: clamp(2rem, 9.6vw, 2.55rem) !important;
    line-height: .98 !important;
  }

  /* Pillar and commercial cards: one stable portrait column. */
  body.vx-track-experience .track-pillar-grid,
  .seo-topic-module-grid,
  .seo-method-grid,
  .seo-commercial-path-grid {
    grid-template-columns: 1fr !important;
  }

  body.vx-track-experience .track-pillar,
  .seo-topic-module-grid article,
  .seo-method-grid article,
  .seo-commercial-path-grid a {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* Pricing / generic cards */
  .pricing-card,
  .guide-card-compact,
  .course-row,
  .panel,
  .quiz-card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* Member dashboard: portrait favours clear vertical cards. */
  body.member-dashboard-page.vx-member-experience .dashboard-path-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 18px !important;
  }

  body.member-dashboard-page.vx-member-experience .dashboard-quick-grid {
    grid-template-columns: 1fr !important;
  }

  body.member-dashboard-page.vx-member-experience .dashboard-quick-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 16px !important;
  }

  /* Course library: keep compact cards, but avoid a narrow text column on
     small portrait phones. */
  body.vx-member-experience .course-card {
    width: 100% !important;
    grid-template-columns: 94px minmax(0, 1fr) !important;
    min-height: 124px !important;
  }

  body.vx-member-experience .course-cover {
    min-height: 124px !important;
  }

  body.vx-member-experience .course-body {
    min-width: 0 !important;
    padding: 12px !important;
  }

  body.vx-member-experience .course-body > p {
    -webkit-line-clamp: 2 !important;
  }

  /* Brain Teaser: remove the narrow title/image collision zone. */
  body.brain-theme-bordeaux.vx-member-experience .page-hero {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-hero-copy h1,
  body.brain-theme-bordeaux.vx-member-experience .page-hero h1 {
    max-width: none !important;
    font-size: clamp(2.1rem, 10vw, 2.7rem) !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-hero-visual {
    width: 86px !important;
    height: 86px !important;
    justify-self: start !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-sidebar {
    grid-template-columns: 1fr !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-stat-card {
    min-height: 0 !important;
    height: auto !important;
  }

  /* Profile / account */
  body.profile-progress-page.vx-member-experience .profile-track-card,
  body.profile-progress-page.vx-member-experience .profile-weekly-card,
  body.profile-progress-page.vx-member-experience .profile-favorites-card,
  body.profile-progress-page.vx-member-experience .profile-activity-card,
  .account-devices-card,
  .account-device-row {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  body.profile-progress-page.vx-member-experience .profile-env-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Course reader */
  body.vx-course-page .lesson {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
  }

  body.vx-course-page .formula,
  body.vx-course-page .worked-example,
  body.vx-course-page .detail-callout,
  body.vx-course-page .formula-variables {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  /* Avoid a five-item dock feeling squeezed on very narrow portrait screens. */
  .vx-mobile-dock {
    left: 6px !important;
    right: 6px !important;
    padding: 4px !important;
  }

  .vx-mobile-dock a {
    min-width: 0 !important;
    font-size: .5rem !important;
  }
}

@media (max-width: 390px) and (orientation: portrait) {
  .vx-hero-title {
    font-size: 2.28rem !important;
  }

  .vx-universe h3 {
    font-size: 2.12rem !important;
  }

  body.vx-member-experience .course-card {
    grid-template-columns: 84px minmax(0, 1fr) !important;
  }

  body.vx-member-experience .course-cover {
    min-height: 118px !important;
    padding: 10px 8px !important;
  }

  body.vx-member-experience .course-cover h3 {
    font-size: .94rem !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-level-buttons .btn {
    font-size: .57rem !important;
    padding-inline: 3px !important;
  }
}


/* ==========================================================================
   Portrait + mobile balance touch-up — 2026-08-22b
   ========================================================================== */
@media (max-width: 760px) {
  .vx-campus-inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .vx-campus-copy {
    text-align: left;
  }
  .vx-campus-marquee {
    mask-image: none;
    -webkit-mask-image: none;
  }
  .vx-campus-track,
  .vx-campus-group {
    gap: 28px;
  }
  .vx-campus-logo img {
    max-height: 38px;
  }

  .vx-manifesto h2,
  .vx-story-head h2,
  .vx-progress-copy h2,
  .vx-final-cta h2,
  body.vx-track-experience .premium-hero-copy h1,
  body.pricing-page.vx-experience .premium-hero-copy h1 {
    max-width: none !important;
  }

  body.pricing-page.vx-experience .pricing-card-topline {
    min-height: 0;
  }
  body.pricing-page.vx-experience .pricing-card h2 {
    min-height: 0;
    margin-top: 22px;
  }
}