/* ============================================
   GLOBAL RESPONSIVE TYPOGRAPHY
   Unified font sizing for all pages
   ============================================ */

/* ============================================
   BASE PARAGRAPH STYLES - All Pages
   ============================================ */

/* Base Body Text - Desktop (Default) */
.carmax p,
.carmax li,
.shopeasy p,
.shopeasy li,
.vanly p,
.vanly li,
.vanly-content p,
.vanly-content li,
.watchour p,
.watchour li,
.watchour-content p,
.watchour-content li,
.coinagora p,
.coinagora li,
.ovaboss p,
.ovaboss li {
  font-size: 18px !important;
  line-height: 1.7 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

/* List Items - Desktop */
.carmax ul li,
.carmax ol li,
.shopeasy ul li,
.shopeasy ol li,
.vanly ul li,
.vanly ol li,
.watchour ul li,
.watchour ol li,
.coinagora ul li,
.coinagora ol li,
.ovaboss ul li,
.ovaboss ol li {
  font-size: 17px !important;
}

/* ============================================
   PROJECT DESCRIPTION SPANS - All Pages
   ============================================ */

/* Carmax & Ovaboss (shared naming) */
.carmax .project-description-span,
.carmax .problem-description-span,
.carmax .research-details-span,
.carmax .solution-details-span,
.carmax .design-process-details-span,
.carmax .project-description-span2,
.ovaboss .project-description-span,
.ovaboss .problem-description-span,
.ovaboss .research-details-span,
.ovaboss .solution-details-span,
.ovaboss .design-process-details-span,
.ovaboss .project-description-span2 {
  font-size: 18px !important;
  line-height: 1.8 !important;
  color: var(--gray-600, #556070) !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  max-width: 100% !important;
}

/* Vanly (vanly-specific naming) */
.vanly .project-description-span-vanly,
.vanly .problem-description-span-vanly,
.vanly .research-details-span-vanly,
.vanly .solution-details-span-vanly {
  font-size: 18px !important;
  line-height: 1.8 !important;
  color: var(--gray-600, #556070) !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  max-width: 100% !important;
}

/* Watchour (watchour-specific naming) */
.watchour .project-description-span-watchour,
.watchour .problem-description-span-watchour,
.watchour .research-details-span-watchour,
.watchour .solution-details-span-watchour {
  font-size: 18px !important;
  line-height: 1.8 !important;
  color: var(--gray-600, #556070) !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  max-width: 100% !important;
}

/* Coinagora */
.coinagora .project-description-span-coinagora,
.coinagora .problem-description-span-coinagora,
.coinagora .research-details-span-coinagora,
.coinagora .solution-details-span-coinagora {
  font-size: 18px !important;
  line-height: 1.8 !important;
  color: var(--gray-600, #556070) !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  max-width: 100% !important;
}

/* ShopEasy (shopeasy-specific naming) */
.shopeasy .project-description-span-shopeasy,
.shopeasy .problem-description-span-shopeasy,
.shopeasy .problem-description-span2-shopeasy,
.shopeasy .research-details-span-shopeasy,
.shopeasy .solution-details-span-shopeasy,
.shopeasy .design-process-details-span-shopeasy {
  font-size: 18px !important;
  line-height: 1.8 !important;
  color: var(--gray-600, #556070) !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  max-width: 100% !important;
}

/* ============================================
   ALL SPAN ELEMENTS IN CONTENT SECTIONS
   Comprehensive coverage for all generated class names
   ============================================ */

/* All spans within description content areas */
.carmax [class*="description"] span,
.carmax [class*="details"] span,
.carmax [class*="research"] span,
.carmax [class*="solution"] span,
.carmax [class*="process"] span,
.carmax [class*="outcome"] span,
.ovaboss [class*="description"] span,
.ovaboss [class*="details"] span,
.ovaboss [class*="research"] span,
.ovaboss [class*="solution"] span,
.ovaboss [class*="process"] span,
.ovaboss [class*="outcome"] span,
.vanly [class*="description"] span,
.vanly [class*="details"] span,
.vanly [class*="research"] span,
.vanly [class*="solution"] span,
.watchour [class*="description"] span,
.watchour [class*="details"] span,
.watchour [class*="research"] span,
.watchour [class*="solution"] span,
.coinagora [class*="description"] span,
.coinagora [class*="details"] span,
.coinagora [class*="research"] span,
.coinagora [class*="solution"] span,
.shopeasy [class*="description"] span,
.shopeasy [class*="details"] span,
.shopeasy [class*="research"] span,
.shopeasy [class*="solution"] span {
  font-size: 18px !important;
  line-height: 1.8 !important;
  color: var(--gray-600, #556070) !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

/* ============================================
   STRONG/IMPLEMENTATION SPANS
   ============================================ */
.carmax .strong-ui-ux-design-implementation-span,
.ovaboss .strong-ui-ux-design-implementation-span,
.watchour .strong-ui-ux-design-implementation-span,
.coinagora .strong-ui-ux-design-implementation-span,
.shopeasy .strong-ui-ux-design-implementation-span,
.vanly .strong-ui-ux-design-implementation-span {
  font-size: 18px !important;
  line-height: 1.8 !important;
  color: var(--gray-600, #556070) !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

/* ============================================
   TYPOGRAPHY-P1 CLASSES (Used in all pages)
   ============================================ */
.typography-p1 {
  font-size: 18px !important;
  line-height: 1.7 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

/* All spans with typography-p1 class */
span.typography-p1,
.typography-p1 span {
  font-size: 18px !important;
  line-height: 1.7 !important;
}

/* ============================================
   TABLET - 1024px and below
   ============================================ */
@media screen and (max-width: 1024px) {
  /* Base paragraphs */
  .carmax p,
  .carmax li,
  .shopeasy p,
  .shopeasy li,
  .vanly p,
  .vanly li,
  .vanly-content p,
  .vanly-content li,
  .watchour p,
  .watchour li,
  .watchour-content p,
  .watchour-content li,
  .coinagora p,
  .coinagora li,
  .ovaboss p,
  .ovaboss li {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  
  /* List items */
  .carmax ul li,
  .carmax ol li,
  .shopeasy ul li,
  .shopeasy ol li,
  .vanly ul li,
  .vanly ol li,
  .watchour ul li,
  .watchour ol li,
  .coinagora ul li,
  .coinagora ol li,
  .ovaboss ul li,
  .ovaboss ol li {
    font-size: 16px !important;
  }
  
  /* Description spans */
  .carmax .project-description-span,
  .carmax .problem-description-span,
  .carmax .research-details-span,
  .carmax .solution-details-span,
  .carmax .design-process-details-span,
  .carmax .project-description-span2,
  .ovaboss .project-description-span,
  .ovaboss .problem-description-span,
  .ovaboss .research-details-span,
  .ovaboss .solution-details-span,
  .ovaboss .design-process-details-span,
  .ovaboss .project-description-span2,
  .vanly .project-description-span-vanly,
  .vanly .problem-description-span-vanly,
  .vanly .research-details-span-vanly,
  .vanly .solution-details-span-vanly,
  .watchour .project-description-span-watchour,
  .watchour .problem-description-span-watchour,
  .watchour .research-details-span-watchour,
  .watchour .solution-details-span-watchour,
  .coinagora .project-description-span-coinagora,
  .coinagora .problem-description-span-coinagora,
  .coinagora .research-details-span-coinagora,
  .coinagora .solution-details-span-coinagora,
  .shopeasy .project-description-span-shopeasy,
  .shopeasy .problem-description-span-shopeasy,
  .shopeasy .problem-description-span2-shopeasy,
  .shopeasy .research-details-span-shopeasy,
  .shopeasy .solution-details-span-shopeasy,
  .shopeasy .design-process-details-span-shopeasy {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  
  /* All content spans */
  .carmax [class*="description"] span,
  .carmax [class*="details"] span,
  .ovaboss [class*="description"] span,
  .ovaboss [class*="details"] span,
  .vanly [class*="description"] span,
  .vanly [class*="details"] span,
  .watchour [class*="description"] span,
  .watchour [class*="details"] span,
  .coinagora [class*="description"] span,
  .coinagora [class*="details"] span,
  .shopeasy [class*="description"] span,
  .shopeasy [class*="details"] span {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  
  /* Strong/implementation spans */
  .carmax .strong-ui-ux-design-implementation-span,
  .ovaboss .strong-ui-ux-design-implementation-span,
  .watchour .strong-ui-ux-design-implementation-span,
  .coinagora .strong-ui-ux-design-implementation-span,
  .shopeasy .strong-ui-ux-design-implementation-span,
  .vanly .strong-ui-ux-design-implementation-span {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  
  /* Typography classes */
  .typography-p1 {
    font-size: 16px !important;
  }
}

/* ============================================
   MOBILE - 768px and below
   ============================================ */
@media screen and (max-width: 768px) {
  /* Base paragraphs */
  .carmax p,
  .carmax li,
  .shopeasy p,
  .shopeasy li,
  .vanly p,
  .vanly li,
  .vanly-content p,
  .vanly-content li,
  .watchour p,
  .watchour li,
  .watchour-content p,
  .watchour-content li,
  .coinagora p,
  .coinagora li,
  .ovaboss p,
  .ovaboss li {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
  
  /* List items */
  .carmax ul li,
  .carmax ol li,
  .shopeasy ul li,
  .shopeasy ol li,
  .vanly ul li,
  .vanly ol li,
  .watchour ul li,
  .watchour ol li,
  .coinagora ul li,
  .coinagora ol li,
  .ovaboss ul li,
  .ovaboss ol li {
    font-size: 15px !important;
  }
  
  /* Description spans */
  .carmax .project-description-span,
  .carmax .problem-description-span,
  .carmax .research-details-span,
  .carmax .solution-details-span,
  .carmax .design-process-details-span,
  .carmax .project-description-span2,
  .ovaboss .project-description-span,
  .ovaboss .problem-description-span,
  .ovaboss .research-details-span,
  .ovaboss .solution-details-span,
  .ovaboss .design-process-details-span,
  .ovaboss .project-description-span2,
  .vanly .project-description-span-vanly,
  .vanly .problem-description-span-vanly,
  .vanly .research-details-span-vanly,
  .vanly .solution-details-span-vanly,
  .watchour .project-description-span-watchour,
  .watchour .problem-description-span-watchour,
  .watchour .research-details-span-watchour,
  .watchour .solution-details-span-watchour,
  .coinagora .project-description-span-coinagora,
  .coinagora .problem-description-span-coinagora,
  .coinagora .research-details-span-coinagora,
  .coinagora .solution-details-span-coinagora,
  .shopeasy .project-description-span-shopeasy,
  .shopeasy .problem-description-span-shopeasy,
  .shopeasy .problem-description-span2-shopeasy,
  .shopeasy .research-details-span-shopeasy,
  .shopeasy .solution-details-span-shopeasy,
  .shopeasy .design-process-details-span-shopeasy {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
  
  /* All content spans */
  .carmax [class*="description"] span,
  .carmax [class*="details"] span,
  .ovaboss [class*="description"] span,
  .ovaboss [class*="details"] span,
  .vanly [class*="description"] span,
  .vanly [class*="details"] span,
  .watchour [class*="description"] span,
  .watchour [class*="details"] span,
  .coinagora [class*="description"] span,
  .coinagora [class*="details"] span,
  .shopeasy [class*="description"] span,
  .shopeasy [class*="details"] span {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
  
  /* Strong/implementation spans */
  .carmax .strong-ui-ux-design-implementation-span,
  .ovaboss .strong-ui-ux-design-implementation-span,
  .watchour .strong-ui-ux-design-implementation-span,
  .coinagora .strong-ui-ux-design-implementation-span,
  .shopeasy .strong-ui-ux-design-implementation-span,
  .vanly .strong-ui-ux-design-implementation-span {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
  
  /* Typography classes */
  .typography-p1 {
    font-size: 15px !important;
  }
}

/* ============================================
   SMALL MOBILE - 480px and below
   ============================================ */
@media screen and (max-width: 480px) {
  /* Base paragraphs */
  .carmax p,
  .carmax li,
  .shopeasy p,
  .shopeasy li,
  .vanly p,
  .vanly li,
  .vanly-content p,
  .vanly-content li,
  .watchour p,
  .watchour li,
  .watchour-content p,
  .watchour-content li,
  .coinagora p,
  .coinagora li,
  .ovaboss p,
  .ovaboss li {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  
  /* List items */
  .carmax ul li,
  .carmax ol li,
  .shopeasy ul li,
  .shopeasy ol li,
  .vanly ul li,
  .vanly ol li,
  .watchour ul li,
  .watchour ol li,
  .coinagora ul li,
  .coinagora ol li,
  .ovaboss ul li,
  .ovaboss ol li {
    font-size: 14px !important;
    padding-left: 20px !important;
  }
  
  /* Description spans */
  .carmax .project-description-span,
  .carmax .problem-description-span,
  .carmax .research-details-span,
  .carmax .solution-details-span,
  .carmax .design-process-details-span,
  .carmax .project-description-span2,
  .ovaboss .project-description-span,
  .ovaboss .problem-description-span,
  .ovaboss .research-details-span,
  .ovaboss .solution-details-span,
  .ovaboss .design-process-details-span,
  .ovaboss .project-description-span2,
  .vanly .project-description-span-vanly,
  .vanly .problem-description-span-vanly,
  .vanly .research-details-span-vanly,
  .vanly .solution-details-span-vanly,
  .watchour .project-description-span-watchour,
  .watchour .problem-description-span-watchour,
  .watchour .research-details-span-watchour,
  .watchour .solution-details-span-watchour,
  .coinagora .project-description-span-coinagora,
  .coinagora .problem-description-span-coinagora,
  .coinagora .research-details-span-coinagora,
  .coinagora .solution-details-span-coinagora,
  .shopeasy .project-description-span-shopeasy,
  .shopeasy .problem-description-span-shopeasy,
  .shopeasy .problem-description-span2-shopeasy,
  .shopeasy .research-details-span-shopeasy,
  .shopeasy .solution-details-span-shopeasy,
  .shopeasy .design-process-details-span-shopeasy {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  
  /* All content spans */
  .carmax [class*="description"] span,
  .carmax [class*="details"] span,
  .ovaboss [class*="description"] span,
  .ovaboss [class*="details"] span,
  .vanly [class*="description"] span,
  .vanly [class*="details"] span,
  .watchour [class*="description"] span,
  .watchour [class*="details"] span,
  .coinagora [class*="description"] span,
  .coinagora [class*="details"] span,
  .shopeasy [class*="description"] span,
  .shopeasy [class*="details"] span {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  
  /* Strong/implementation spans */
  .carmax .strong-ui-ux-design-implementation-span,
  .ovaboss .strong-ui-ux-design-implementation-span,
  .watchour .strong-ui-ux-design-implementation-span,
  .coinagora .strong-ui-ux-design-implementation-span,
  .shopeasy .strong-ui-ux-design-implementation-span,
  .vanly .strong-ui-ux-design-implementation-span {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  
  /* Typography classes */
  .typography-p1 {
    font-size: 14px !important;
  }
}