/* =========================================================================
   Insights Details Page Styles
   Using VW (Viewport Width) for fluid 1:1 scaling from 1440px Figma design
   ========================================================================= */

/* For Desktop (Web screens) - Fluid scaling based on 1440px */
@media (min-width: 768px) {

  /* --- Hero Section --- */
  .insights-details-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 500px;
    overflow: hidden;
  }

  .insights-details-hero-bg {
    position: absolute;
    top: 0;
    left: -1.5972vw;
    /* -23/1440 */
    width: 102.7778vw;
    /* 1480/1440 */
    height: 100%;
    background: linear-gradient(135.16deg, #000000 -4.05%, rgba(0, 0, 0, 0) 75.07%), url('../assets/images/insightdetailsherp.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    border-radius: 0 !important;
  }

  .insights-details-hero-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    padding-left: 4.4444vw;
    /* 64/1440 */
    gap: 1.2917vw;
    /* 33px gap between title and meta */
  }

  .insights-details-hero-content::before {
    content: '';
    flex: 511;
    /* Proportionate top space per Figma */
  }

  .insights-details-hero-content::after {
    content: '';
    flex: 134;
    /* Proportionate bottom space per Figma */
  }

  .insights-details-hero-title-container {
    position: static;
    max-width: 58.3333vw;
    /* Keeps dynamic post titles wrapping within the hero column instead of stretching full-width */
  }

  .insights-details-hero-title {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 4.6528vw;
    /* 67/1440 */
    line-height: 4.7917vw;
    /* 69/1440 */
    letter-spacing: 0.01em;
    color: #FFFFFF;
    margin: 0;
  }

  .insights-details-hero-meta {
    position: static;
    padding-left: 0.9028vw;
    /* 13/1440 */
    display: flex;
    align-items: center;
    gap: 1.1111vw;
    /* 16/1440 */
  }

  .meta-item {
    display: flex;
    align-items: center;
    gap: 0.4167vw;
    /* 6/1440 */
  }

  .meta-item span {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 400;
    font-size: 1.25vw;
    /* 18/1440 */
    line-height: 2.0139vw;
    /* 29/1440 */
    letter-spacing: 0.01em;
    color: #FFA726;
  }

  .meta-item i {
    color: #FFA726;
    font-size: 1.3889vw;
    /* 20/1440 */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .meta-calendar-icon {
    width: 1.3889vw;
    /* 20/1440 */
    height: 1.3889vw;
    /* 20/1440 */
    object-fit: cover !important;
  }

  /* --- Details Body Section --- */
  .insights-details-section {
    width: 100%;
    background: #F4F5F5;
    padding-top: 3.472vw;
    /* Reduced from 85/1440 gap between hero and content */
    padding-bottom: 0;
    display: flex;
    justify-content: center;
  }

  .insights-details-container {
    width: 95.9028vw;
    /* 1381/1440 */
    max-width: 1381px;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0 !important;
  }

  .insights-details-content {
    padding: 0 5.5556vw;
    /* 80/1440 horizontal padding only */
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0 !important;
  }

  .insights-details-body {
    width: 100%;
    max-width: 84.7917vw;
    /* 1221/1440 - Figma node 1867-2252 width */
    display: flex;
    flex-direction: column;
    gap: 2.7777vw;
    /* Reduced from 75px to 40/1440 */
    margin-top: 0 !important;
  }

  .insights-details-paragraph {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 300;
    font-size: 1.29vw;
    /* 18/1440 */
    line-height: 2.0089vw;
    /* 38/1440 */
    letter-spacing: 0.01em;
    color: #000000;
    margin: 0;
    margin-top: 0 !important;
  }

  .insights-details-subtitle {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 3.125vw;
    /* 45/1440 */
    line-height: 3.4722vw;
    /* 50/1440 */
    letter-spacing: 0.01em;
    color: #000000;
    width: 49.9305vw;
    /* 719/1440 */
    margin: 0;
  }

  .insights-details-list {
    width: 57.4305vw;
    /* 827/1440 */
    margin: 0;
    margin-left: 4.4583vw;
    /* Indent by 57px (167px total from screen edge) */
    padding-left: 2.0833vw;
    /* 30/1440 */
    font-family: 'Mona Sans', sans-serif;
    font-weight: 300;
    font-size: 1.29vw;
    /* 18/1440 */
    line-height: 2.5167vw;
    /* 42/1440 */
    letter-spacing: 0.01em;
    color: #000000;
    list-style-type: none;
  }

  .insights-details-list li {
    position: relative;
  }

  .insights-details-list li::before {
    content: '•';
    position: absolute;
    left: -1.9333vw;
    /* 12/1440 - tighten gap to match Figma */
    color: #000000;
  }

  /* Generic tags produced by the native WordPress editor (the_content()) -
     mirrors the .insights-details-paragraph/-subtitle/-list rules above so
     anything an editor types is styled automatically, with no special
     classes required. */
  .insights-details-body p {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 300;
    font-size: 1.29vw;
    line-height: 2.0089vw;
    letter-spacing: 0.01em;
    color: #000000;
    margin: 0;
  }

  .insights-details-body h2,
  .insights-details-body h3 {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 3.125vw;
    line-height: 3.4722vw;
    letter-spacing: 0.01em;
    color: #000000;
    max-width: 49.9305vw;
    margin: 0;
  }

  .insights-details-body ul,
  .insights-details-body ol {
    width: 57.4305vw;
    margin: 0;
    margin-left: 4.4583vw;
    padding-left: 2.0833vw;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 300;
    font-size: 1.29vw;
    line-height: 2.5167vw;
    letter-spacing: 0.01em;
    color: #000000;
    list-style-type: none;
  }

  .insights-details-body ul li,
  .insights-details-body ol li {
    position: relative;
  }

  .insights-details-body ul li::before,
  .insights-details-body ol li::before {
    content: '•';
    position: absolute;
    left: -1.9333vw;
    color: #000000;
  }

  .insights-details-body img,
  .insights-details-body figure {
    width: 100%;
    max-width: 89.5833vw;
    height: auto;
    border-radius: 4px;
    margin: 0 auto;
    display: block;
  }

  .insights-details-image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 3.777vw;
    /* Reduced from 86/1440 gap from the list above */
    padding-bottom: 4vw;
    /* Reduced from 80/1440 */
  }

  .insights-details-full-image {
    width: 89.5833vw;
    /* 1290/1440 */
    height: 43.75vw;
    /* 630/1440 */
    border-radius: 1.4583vw;
    /* 21/1440 */
    object-fit: cover;
  }

  /* --- Related Insights Section VW Overrides --- */
  .insights-details-page-body .insights-section {
    padding-top: 3.977vw !important;
    /* Reduced from 100/1440 gap from details content */
    padding-bottom: 4.872vw !important;
    /* Reduced from 109.56/1440 */
  }

  .insights-details-page-body .insights-label {
    font-size: 2.0833vw !important;
    /* 30/1440 */
    line-height: 2.0833vw !important;
  }

  .insights-details-page-body .insights-label-wrap svg,
  .insights-details-page-body .insights-label-wrap img {
    width: 0.3937vw !important;
    /* 5.67/1440 */
    height: 1.9541vw !important;
    /* 28.14/1440 */
  }

  .insights-details-page-body .insights-title {
    font-size: 2.8472vw !important;
    /* 41/1440 */
    line-height: 3.2638vw !important;
    /* 47/1440 */
    width: 35.0694vw !important;
    /* 505/1440 */
  }

  .insights-details-page-body .btn-discover-now-insights {
    width: 18.75vw !important;
    /* 270/1440 */
    height: 3.75vw !important;
    /* 54/1440 */
    border-radius: 2.0138vw !important;
    /* 29/1440 */
    padding: 0 !important;
  }

  .insights-details-page-body .btn-discover-now-insights .btn-text {
    font-size: 1.6666vw !important;
    /* 24/1440 */
    line-height: 2.0833vw !important;
    /* 30/1440 */
    top: 0.8708vw !important;
    /* 12.54/1440 */
    left: 4.7493vw !important;
    /* 68.39/1440 */
    width: 12.8vw !important;
    /* 184.32/1440 */
    height: 2.2097vw !important;
    /* 31.82/1440 */
  }

  .insights-details-page-body .btn-discover-now-insights .icon-circle {
    top: 0.3472vw !important;
    /* 5/1440 */
    left: 0.4166vw !important;
    /* 6/1440 */
    width: 3.0784vw !important;
    /* 44.33/1440 */
    height: 3.0555vw !important;
    /* 44/1440 */
  }

  .insights-details-page-body .btn-discover-now-insights .discover-arrow-img {
    width: 3.0784vw !important;
    /* 44.33/1440 */
    height: 3.0555vw !important;
    /* 44/1440 */
    border-radius: 1.6666vw !important;
    /* 24/1440 */
  }

  .insights-details-page-body .insights-header-top {
    position: relative !important;
    display: block !important;
    width: 90.4861vw !important;
    /* 1303/1440 */
    max-width: 90.4861vw !important;
    height: 5.6528vw !important;
    /* 81.4/1440 - enough to contain all children */
    margin: 0 4.7222vw 0 4.7917vw !important;
    /* 0 68px 0 69px */
    padding: 0 !important;
  }

  .insights-details-page-body .insights-label-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 32.8472vw !important;
    /* 473/1440 */
    height: 2.7208vw !important;
    /* 39.18/1440 */
    display: flex !important;
    align-items: center !important;
    gap: 0.5555vw !important;
    margin: 0 !important;
    padding-left: 3.75vw !important;
    /* 54/1440 - bar starts at x:54 in Figma */
    box-sizing: border-box !important;
  }

  .insights-details-page-body .insights-title {
    position: absolute !important;
    top: 0.4444vw !important;
    /* 6.4/1440 */
    left: 30.9028vw !important;
    /* 445/1440 */
    width: 35.0694vw !important;
    /* 505/1440 */
    height: auto !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .insights-details-page-body .btn-discover-now-insights {
    position: absolute !important;
    top: 1.9444vw !important;
    /* 28/1440 */
    left: 71.7361vw !important;
    /* 1033/1440 */
    width: 18.75vw !important;
    /* 270/1440 */
    height: 3.75vw !important;
    /* 54/1440 */
    border-radius: 2.0138vw !important;
    /* 29/1440 */
    padding: 0 !important;
    margin: 0 !important;
  }

  /* --- Related Insights Cards --- */
  .insights-related-cards-container {
    width: 91.7361vw;
    /* 1321/1440 */
    margin: 0 auto;
    margin-top: 6.0028vw;
    /* 86.44/1440 gap between title and cards */
  }

  .insights-related-cards-row {
    display: flex;
    gap: 0.8333vw;
    /* 12/1440 */
    align-items: stretch;
  }

  .insights-related-card {
    background: #E9EAEB;
    border-radius: 1.3194vw;
    /* 19/1440 */
    padding: 1.1805vw 1.3888vw 3.0555vw;
    /* 17px 20px 44px */
    display: flex;
    flex-direction: column;
    gap: 2.2916vw;
    /* 33/1440 */
  }

  .insights-related-card-large {
    width: 37.9861vw;
    /* 547/1440 */
    flex-shrink: 0;
  }

  .insights-related-card-small {
    flex: 1;
  }

  .insights-related-card-img {
    width: 100%;
    height: 18.4027vw;
    /* 265/1440 */
    border-radius: 1.4583vw;
    /* 21/1440 */
    overflow: hidden;
  }

  .insights-related-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.4583vw;
    /* 21/1440 */
  }

  .insights-related-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.9027vw;
    /* 13/1440 */
    flex: 1;
  }

  .insights-related-card-date {
    display: flex;
    align-items: center;
    gap: 0.4861vw;
    /* 7/1440 */
  }

  .insights-related-cal-icon {
    width: 1.8055vw;
    /* 26/1440 */
    height: 1.7361vw;
    /* 25/1440 */
    object-fit: cover !important;
  }

  .insights-related-card-date span {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.25vw;
    /* 18/1440 */
    line-height: 1;
    color: #000000;
  }

  .insights-related-card-title {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 1.5972vw;
    /* 23/1440 */
    line-height: 1;
    letter-spacing: 0.01em;
    color: #000000;
    margin: 0;
  }

  .insights-related-card-title-large {
    font-size: 1.9444vw;
    /* 28/1440 */
  }

  .insights-related-card-desc {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 400;
    font-size: 0.9722vw;
    /* 14/1440 */
    line-height: 1.3888vw;
    /* 20/1440 */
    letter-spacing: 0.01em;
    color: #292626;
    margin: 0;
  }

  .insights-related-read-more {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 1.4583vw;
    /* 21/1440 */
    line-height: 1;
    letter-spacing: 0.01em;
    color: #000000;
    text-decoration: none;
    margin-top: auto;
  }

  .insights-related-read-more:hover {
    text-decoration: underline;
  }

  /* --- Pre-footer overrides ---
     Was a full fixed-height/absolute-position re-implementation (height,
     top/left, icon/button sizing) - all of that is now handled dynamically
     by the shared base in style-v2.css, including this page. Only the
     title's own wider wrap-width is a genuine difference worth keeping. */
  .insights-details-page-body .pre-footer-title {
    max-width: 52.0138vw !important;
    /* 749/1440 */
  }
}

/* For Mobile (Below 992px) - Fallback to standard px/layout */
@media (max-width: 767px) {

  /* --- Hero Section --- */
  .insights-details-hero {
    position: relative;
    width: 100%;
    height: 100svh !important;
    min-height: 500px !important;
    overflow: hidden;
    display: block !important;
    padding: 0 !important;
  }

  .insights-details-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #0000006B, #0000006B), url('../assets/images/herodetailpage.svg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 1;
  }

  .insights-details-hero-content {
    position: absolute !important;
    /* Hero content was sitting just below the middle (53.7%). Centred
       slightly above it instead: 45vh - 120px (half the 241px block). The
       block naturally starts 333px down, hence the -453px. Offsetting the
       wrapper moves title and meta together, so their gap is unchanged.
       vh because this hero is 100vh. */
    top: calc(45vh - 453px) !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 3;
    display: block !important;
  }

  .insights-details-hero-title-container {
    position: absolute !important;
    top: 333px !important;
    left: 25px !important;
    width: 278px !important;
    max-width: 278px !important;
  }

  .insights-details-hero-title {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 38.2px !important;
    line-height: 43px !important;
    letter-spacing: 0 !important;
    color: #FFFFFF !important;
    margin: 0 !important;
  }

  .insights-details-hero-meta {
    position: absolute !important;
    top: 545px !important;
    left: 25px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .meta-item {
    display: flex;
    align-items: center;
    gap: 4px !important;
  }

  .meta-item:nth-child(2) {
    gap: 8px !important;
  }

  .meta-item span {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    line-height: 29px !important;
    letter-spacing: 0.01em !important;
    color: #FFA726 !important;
  }

  .meta-item i {
    color: #FFA726 !important;
    font-size: 12px !important;
  }

  .meta-calendar-icon {
    width: 12px !important;
    height: 11px !important;
    object-fit: contain !important;
  }

  /* --- Details Body Section --- */
  .insights-details-section {
    width: 100% !important;
    background: #FFFFFF !important;
    /* Figma uses #FFFFFF for body */
    padding: 0 !important;
    /* Reset */
  }

  .insights-details-container {
    width: 100% !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
  }

  .insights-details-content {
    padding: 7.6336vw 0 0 0 !important;
    /* Top 30px */
    display: flex !important;
    justify-content: center !important;
  }

  .insights-details-body {
    width: 85.4962vw !important;
    /* Exactly 336px relative to 393px */
    display: flex;
    flex-direction: column;
    gap: 4.0712vw !important;
    /* 16px relative to 393px */
  }

  .insights-details-paragraph {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 4.0712vw !important;
    /* 16px relative to 393px */
    line-height: 5.5980vw !important;
    /* 22px relative to 393px */
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    margin: 0 !important;
  }

  .insights-details-subtitle {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 5.5979vw !important;
    /* 22px relative to 393px */
    line-height: 7.1246vw !important;
    /* 28px relative to 393px */
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    margin: 5.3435vw 0 0 0 !important;
    /* 21px top margin + 16px gap = 37px total gap from first paragraph */
  }

  .insights-details-list {
    margin: 0 !important;
    padding-left: 5.0890vw !important;
    /* 20px */
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 4.0712vw !important;
    /* 16px */
    line-height: 5.5980vw !important;
    /* 22px */
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    list-style-type: none !important;
  }

  .insights-details-list li {
    position: relative !important;
  }

  .insights-details-list li::before {
    content: '•' !important;
    /* Reverted to dot per user request */
    position: absolute !important;
    left: -3.0534vw !important;
    /* -12px */
    color: #000000 !important;
  }

  /* Generic tags produced by the native WordPress editor (the_content()) -
     mirrors the .insights-details-paragraph/-subtitle/-list rules above. */
  .insights-details-body p {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 4.0712vw !important;
    line-height: 5.5980vw !important;
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    margin: 0 !important;
  }

  .insights-details-body h2,
  .insights-details-body h3 {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 5.5979vw !important;
    line-height: 7.1246vw !important;
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    margin: 5.3435vw 0 0 0 !important;
  }

  .insights-details-body ul,
  .insights-details-body ol {
    margin: 0 !important;
    padding-left: 5.0890vw !important;
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 4.0712vw !important;
    line-height: 5.5980vw !important;
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    list-style-type: none !important;
  }

  .insights-details-body ul li,
  .insights-details-body ol li {
    position: relative !important;
  }

  .insights-details-body ul li::before,
  .insights-details-body ol li::before {
    content: '•' !important;
    position: absolute !important;
    left: -3.0534vw !important;
    color: #000000 !important;
  }

  .insights-details-body img,
  .insights-details-body figure {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    margin: 0 !important;
    display: block !important;
  }

  .insights-details-image-wrapper {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 9.1603vw !important;
    /* 36px */
    margin-bottom: 0 !important;
    padding: 0 7.3791vw !important;
    /* 29px */
  }

  .insights-details-full-image {
    width: 100% !important;
    height: 233px !important;
    /* Exact height */
    object-fit: cover !important;
    border-radius: 4px !important;
    /* Exact radius */
  }

  .insights-details-image-wrapper+.insights-details-content {
    padding-top: 3.0534vw !important;
    /* 12px gap from image to next paragraph */
  }

  /* --- Related Insights Section Mobile Overrides --- */
  .insights-details-page-body .insights-section {
    background: #FFFFFF !important;
    padding-top: 33px !important;
    /* Exact gap from content above */
    padding-bottom: 55px !important;
    /* Gap between Load More and pre-footer */
    margin-bottom: 0 !important;
  }

  .insights-details-page-body .insights-header-top {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    /* Override the 27px left margin from global styles */
    padding: 0 30px !important;
    /* Exact 30px gap to screen edges */
    box-sizing: border-box !important;
    gap: 20px !important;
  }

  .insights-details-page-body .insights-label-wrap {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 0 !important;
    /* gap handles spacing */
    padding: 0 !important;
    /* prevent padding from shrinking text space */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: transparent !important;
    border: none !important;
  }

  .insights-details-page-body .insights-label-wrap::before {
    display: none !important;
  }

  .insights-details-page-body .insights-label {
    width: auto !important;
    font-size: 0 !important;
    line-height: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .insights-details-page-body .insights-label::before {
    content: "" !important;
    display: block !important;
    width: 3.77px !important;
    height: 31px !important;
    background: #FFA726 !important;
    margin-right: 7.83px !important;
    /* Creates the exact gap between bar and text */
  }

  .insights-details-page-body .insights-label::after {
    content: "Lorem Blogs" !important;
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 30px !important;
    color: #FFA726 !important;
    white-space: nowrap !important;
    /* Force text to stay on one line */
  }

  .insights-details-page-body .insights-title {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin-top: 0 !important;
    /* Prevent default heading margins from inflating gap */
    margin-bottom: 0 !important;
    /* gap handles spacing */
  }

  .insights-details-page-body .insights-title::after {
    content: "Lorem ipsum dolor sit amet\A consectetur adipiscing elit" !important;
    white-space: pre-wrap !important;
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 24px !important;
    color: #000000 !important;
    display: block !important;
  }

  .insights-details-page-body .btn-discover-now-insights {
    position: static !important;
    margin-top: 20px !important;
    /* optional separation for button */
  }

  .insights-details-page-body .btn-discover-now-insights {
    display: none !important;
  }

  .insights-details-page-body .insights-header-top>div:last-child {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* --- Related Insights Cards Mobile --- */
  .insights-related-cards-container {
    width: 100% !important;
    padding: 0 17px !important;
    /* Centered padding (393 - 359 = 34 / 2) */
    margin-top: 27px !important;
    /* Exact 27px gap from header */
  }

  .insights-related-cards-row {
    display: flex !important;
    flex-direction: row !important;
    /* Figma uses side-by-side */
    flex-wrap: wrap !important;
    /* Wrap to new line */
    justify-content: space-between !important;
    gap: 11px !important;
    /* 11px gap between cards */
    padding: 0 !important;
  }

  .insights-related-load-more {
    margin-top: 41px !important;
    text-align: center !important;
  }

  .insights-related-load-more a {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 24px !important;
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    text-decoration: none !important;
  }

  .insights-related-card {
    background: #E9EAEB !important;
    /* User said card bg is fine */
    border-radius: 5px !important;
    padding: 7px 8px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: calc(50% - 5.5px) !important;
    min-width: unset !important;
    /* Allow flex to shrink if needed */
  }

  .insights-related-card-large {
    width: calc(50% - 5.5px) !important;
    /* Reset large card class override */
  }

  .insights-related-card-img {
    width: 100% !important;
    height: 92px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
  }

  .insights-related-card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 4px !important;
  }

  .insights-related-card-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .insights-related-card-date {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
  }

  .insights-related-cal-icon {
    width: 10px !important;
    height: 10px !important;
    object-fit: contain !important;
  }

  .insights-related-card-date span {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 8px !important;
    line-height: 12px !important;
    color: #000000 !important;
  }

  .insights-related-card-title {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    line-height: 14px !important;
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    margin: 0 !important;
  }

  .insights-related-card-title-large {
    font-size: 10px !important;
  }

  .insights-related-card-desc {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 10px !important;
    line-height: 14px !important;
    letter-spacing: 0.01em !important;
    color: #292626 !important;
    margin: 0 !important;
  }

  .insights-related-read-more {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 8px !important;
    line-height: 12px !important;
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    text-decoration: none !important;
  }


  /* Was a full fixed-height/absolute-position re-implementation - the
     shared base (style-v2.css) now handles this page's pre-footer
     dynamically too. Kept: the one rule that was a genuine content
     difference, not a positioning hack. */
  .insights-details-page-body .cs-pre-footer .insights-mobile-pre-footer-title {
    color: #FFFFFF !important;
  }
}

/* =============================================================
   TABLET (768-1199px)
   Card excerpts/dates are 0.9722cqi, which is 7.5px at 768. This file
   loads after style-v2.css so it needs its own floor.
   ============================================================= */
@container (min-width: 768px) and (max-width: 1199px) {

  .insights-related-card-desc,
  .insights-related-card-date,
  .insights-related-card-title,
  .insights-details-body p,
  .insights-details-body li {
    font-size: max(12px, 0.9722cqi);
  }

  .insights-details-hero-breadcrumb .breadcrumb-home,
  .insights-details-hero-breadcrumb .current,
  .insights-details-hero-breadcrumb a,
  .insights-details-hero-meta,
  .insights-details-hero-meta span {
    font-size: max(12px, 1.25cqi);
  }

  .insights-related-card-date,
  .insights-related-card-date span,
  .insights-related-read-more,
  .insights-related-read-more a {
    font-size: max(12px, 1.4583cqi);
  }
}

/* Mobile hero: long titles (5+ lines) used to run over the read-time/date line,
   which was pinned 212px below the title top (room for 4 lines of 43px + a 40px
   gap). The meta now follows the title in normal flow: the title box keeps a
   212px minimum height, so titles of 1-4 lines put the meta exactly where it
   was; longer titles push it down and keep the same 40px gap. */
@media (max-width: 767px) {
  .insights-details-hero-title-container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 333px 0 0 25px !important;
    min-height: 212px !important;
    padding-bottom: 40px !important;
    box-sizing: border-box !important;
  }

  .insights-details-hero-meta {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin-left: 25px !important;
    width: max-content !important;
  }
}

/* Tables inside articles (2 of the old getsold.ae posts have one; no other
   page has tables): readable rows - header row bold, thin row lines, top-aligned
   cells. Text keeps the article's own font, size and colour. */
.insights-details-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5em;
}

.insights-details-body th,
.insights-details-body td {
  text-align: left;
  vertical-align: top;
  padding: 0.7em 1.2em 0.7em 0;
  border-bottom: 1px solid #D5D9DB;
}

.insights-details-body th,
.insights-details-body tr:first-child td {
  font-weight: 600;
  border-bottom-color: #263238;
}

.insights-details-body th p,
.insights-details-body td p {
  margin: 0;
}

@media (max-width: 767px) {
  /* A table wider than the phone (e.g. 4 columns) scrolls sideways inside its
     own box instead of being cut off; tables that fit look the same. */
  .insights-details-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .insights-details-body th,
  .insights-details-body td {
    padding: 0.6em 0.8em 0.6em 0;
  }
}

/* Blog details - article text (web only, 2026-10-02):
   - headings use the full text width (were capped at 719 of 1221 at 1440, so they wrapped early);
   - text after a heading or after a paragraph sits 16px below it (was 40 - looked like an empty line);
   - 40px kept above headings and around images / tables, as before. */
@media (min-width: 768px) {
  .insights-details-body {
    gap: 0 !important;
  }

  .insights-details-body h2,
  .insights-details-body h3 {
    max-width: none !important;
  }

  .insights-details-body > * + * {
    margin-top: 2.7777vw !important;
    /* 40/1440 - as before */
  }

  .insights-details-body > :is(p, h2, h3, h4, ul, ol) + :is(p, ul, ol) {
    margin-top: 1.1111vw !important;
    /* 16/1440 */
  }
}

/* images sit inside <p> in the posts - keep their 40px above and below (web) */
@media (min-width: 768px) {
  .insights-details-body > p:has(img),
  .insights-details-body > p:has(img) + * {
    margin-top: 2.7777vw !important;
  }
}

/* some older posts carry pasted Google Docs spacing (margin 12pt) on their paragraphs - ignore it (web) */
@media (min-width: 768px) {
  .insights-details-body > p {
    margin-bottom: 0 !important;
  }
}

/* empty "blank line" paragraphs in older posts (marked by functions.php) - hidden on web only */
@media (min-width: 768px) {
  .insights-details-body > p.sold-empty-p {
    display: none !important;
  }
}

/* =============================================================================================================
   Blog Details = Figma "Desktop - 11" (node 4132:1455, 2026-10-05) - WEB + TABLET only (>= 768px); mobile later.
   Sizes are Figma px at 1440 written as vw (n/1440), like the rest of the site, so the page scales with the screen.
   Related Insights, pre-footer and footer are not touched.
   ============================================================================================================= */
@media (min-width: 768px) {

  /* --- Hero (4132:1456): 818 tall; title box 933 wide at top 418 (220 tall, text centred in it); meta 24 below --- */
  .insights-details-page-body .insights-details-hero {
    height: 56.8056vw;
    /* 818 */
    min-height: 0;
  }

  .insights-details-page-body .insights-details-hero-bg {
    background-image: linear-gradient(150.54deg, #000000 4.05%, rgba(0, 0, 0, 0) 75.07%), url('../assets/images/insightdetailsherp.png');
  }

  .insights-details-page-body .insights-details-hero-content {
    display: block;
    padding-top: 29.0278vw;
    /* 418 */
  }

  .insights-details-page-body .insights-details-hero-content::before,
  .insights-details-page-body .insights-details-hero-content::after {
    content: none;
  }

  .insights-details-page-body .insights-details-hero-title-container {
    max-width: 64.7917vw;
    /* 933 */
    min-height: 15.2778vw;
    /* 220 - 3 lines; a longer title grows the box and moves the meta down */
    display: flex;
    align-items: center;
  }

  .insights-details-page-body .insights-details-hero-title {
    font-size: 3.9583vw;
    /* 57 */
    line-height: 4.3056vw;
    /* 62 */
    letter-spacing: 0.01em;
    font-weight: 700;
  }

  .insights-details-page-body .insights-details-hero-meta {
    margin-top: 1.6667vw;
    /* 24 */
  }

  .insights-details-page-body .insights-details-hero-meta .meta-calendar-icon {
    width: 1.6667vw;
    /* 24 */
    height: 1.5278vw;
    /* 22 */
    object-fit: contain !important;
  }

  /* --- Article column: 890 wide, centred (275 each side at 1440); 81 below the hero, 70 above Related --- */
  .insights-details-page-body .insights-details-section {
    padding-top: 5.625vw;
    /* 81 */
    padding-bottom: 4.8611vw;
    /* 70 (+57 Related top padding = Figma 127) */
  }

  .insights-details-page-body .insights-details-container {
    width: 61.8056vw;
    /* 890 */
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
  }

  .insights-details-page-body .insights-details-content {
    padding: 0;
  }

  .insights-details-page-body .insights-details-body {
    max-width: none;
  }

  /* --- Text (4132:1764, 4137:2114): Mona Sans, black, 1% letter-spacing, left aligned --- */
  .insights-details-page-body .insights-details-body :is(p, li, h2, h3, h4, h5, h6) {
    font-family: 'Mona Sans', sans-serif !important;
    color: #000000 !important;
    letter-spacing: 0.01em !important;
    text-align: left;
    white-space: normal !important;
    max-width: none !important;
    width: auto;
  }

  /* body text + lists: 18 / 38 Regular */
  .insights-details-page-body .insights-details-body :is(p, li, ul, ol) {
    font-size: max(15px, 1.25vw) !important;
    font-weight: 400 !important;
    line-height: 2.1111 !important;
    /* 38 / 18 */
  }

  /* intro = the paragraphs before the first heading: 18 / 30 */
  .insights-details-page-body .insights-details-body > p:not(:is(h2, h3, h4, h5, h6) ~ p) {
    line-height: 1.6667 !important;
    /* 30 / 18 */
  }

  .insights-details-page-body .insights-details-body h2 {
    font-size: max(26px, 2.5694vw) !important;
    /* 37 */
    font-weight: 600 !important;
    /* SemiBold (Figma: Medium) - SEO doc #18: H2 bigger and bolder, H3 smaller and lighter */
    line-height: 1.2162 !important;
    /* 45 / 37 */
  }

  .insights-details-page-body .insights-details-body h3 {
    font-size: max(17px, 1.3889vw) !important;
    /* 20 */
    font-weight: 500 !important;
    /* Medium (Figma: SemiBold) - SEO doc #18 */
    line-height: 1.6 !important;
    /* 32 / 20 */
  }

  .insights-details-page-body .insights-details-body :is(h4, h5, h6) {
    font-size: max(15px, 1.25vw) !important;
    /* 18 - SEO doc #18 (2026-10-07): each level smaller than the one above (was 26, bigger than H3's 20) */
    font-weight: 500 !important;
    line-height: 1.5556 !important;
    /* 28 / 18 */
  }

  /* pasted Google Docs spans (Arial 11pt, line-height 1.38, white-space pre) take the article's own text style;
     bold / italic keep their weight */
  .insights-details-page-body .insights-details-body :is(p, li, h2, h3, h4) [style] {
    font-size: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    white-space: normal !important;
  }

  /* lists: native disc bullets, 27 indent (Figma "ms-27") */
  .insights-details-page-body .insights-details-body :is(ul, ol) {
    width: auto !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 1.875vw !important;
    /* 27 */
    padding-inline-start: 1.875vw !important;
    white-space: normal !important;
    /* a pasted list with white-space: pre turned the line breaks between bullets into blank lines */
  }

  .insights-details-page-body .insights-details-body ul {
    list-style: disc outside !important;
  }

  .insights-details-page-body .insights-details-body ol {
    list-style: decimal outside !important;
  }

  .insights-details-page-body .insights-details-body :is(ul, ol) li {
    margin: 0 !important;
  }

  .insights-details-page-body .insights-details-body :is(ul, ol) li::before {
    content: none !important;
  }

  .insights-details-page-body .insights-details-body li > p {
    margin: 0 !important;
  }

  /* pasted blank lines inside list items (marked sold-empty-p by functions.php) left a gap after every bullet */
  .insights-details-page-body .insights-details-body p.sold-empty-p {
    display: none !important;
  }

  /* --- Spacing between blocks (Figma frame gaps) --- */
  .insights-details-page-body .insights-details-body > * {
    margin-bottom: 0 !important;
  }

  .insights-details-page-body .insights-details-body > * + * {
    margin-top: 1.9444vw !important;
    /* 28 between blocks */
  }

  .insights-details-page-body .insights-details-body > h2 + * {
    margin-top: 0.8333vw !important;
    /* 12 under an H2 */
  }

  .insights-details-page-body .insights-details-body > h3 + * {
    margin-top: 0.2778vw !important;
    /* 4 under an H3 (H4 keeps the 28 block gap: "United Arab Emirates" -> text, 4137:2125 -> 4137:2137) */
  }

  .insights-details-page-body .insights-details-body > h3 + :is(h4, h5, h6) {
    margin-top: 0.8333vw !important;
    /* 12: "A. Google Search Ads" -> "United Arab Emirates" */
  }

  .insights-details-page-body .insights-details-body > p + :is(ul, ol) {
    margin-top: 0 !important;
    /* a list continues the paragraph that introduces it */
  }

  .insights-details-page-body .insights-details-body > :is(ul, ol) + p {
    margin-top: 0.2778vw !important;
    /* 4 */
  }

  /* intro -> first heading: 56 (4132:1764 ends 1019, 4137:2114 starts 1075) */
  .insights-details-page-body .insights-details-body > p + :is(h2, h3, h4):not(:is(h2, h3, h4, h5, h6) ~ *) {
    margin-top: 3.8889vw !important;
  }

  /* --- Images (4134:2084): column wide, 12 radius, 80 above and below --- */
  .insights-details-page-body .insights-details-body > :is(p, figure):has(img),
  .insights-details-page-body .insights-details-body > :is(p, figure):has(img) + * {
    margin-top: 5.5556vw !important;
    /* 80 */
  }

  .insights-details-page-body .insights-details-body img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 0.8333vw;
    /* 12 */
  }

  .insights-details-page-body .insights-details-image-wrapper {
    margin-top: 5.5556vw;
    /* 80 */
    padding-bottom: 0;
  }

  .insights-details-page-body .insights-details-image-wrapper + .insights-details-content {
    margin-top: 5.5556vw !important;
    /* 80 */
  }

  .insights-details-page-body .insights-details-full-image {
    width: 100%;
    height: 35vw;
    /* 504 */
    border-radius: 0.8333vw;
    /* 12 */
    object-fit: cover;
  }
}

/* Tablet (768-1023): the 890/1440 column would be under 640px - use a wider centred column so lines stay readable */
@media (min-width: 768px) and (max-width: 1023px) {
  .insights-details-page-body .insights-details-container {
    width: 84vw;
  }

  .insights-details-page-body .insights-details-hero-title-container {
    max-width: 84vw;
  }
}

/* =============================================================================================================
   Blog Details = Figma mobile "iPhone 14 & 15 Pro - 16" (node 2036:264, 2026-10-06) - MOBILE only (< 768px).
   Hero 2036:265, article 2036:667, Related 2036:696 / 2036:697. Web + tablet (above) untouched.
   Pre-footer (2036:308) and footer (2036:315) are the shared site sections - not changed here.
   Every size is Figma px at 393 written as vw (n/393), like the Insights listing page, so every phone shows the
   same layout scaled to its width (320, 375, 430 ... look like the 393 design). Vertical hero position = % of hero.
   ============================================================================================================= */
@media (max-width: 767px) {

  /* --- Hero (2036:265): title lines start at 327 of 852 (38.38% of the hero), 38.2/43 Bold 2%, 278 wide at left 25;
         meta 34 below the 4th line (533), left 30, 13/29 --- */
  .insights-details-page-body .insights-details-hero-content {
    top: calc(38.38% - 327px) !important;
  }

  .insights-details-page-body .insights-details-hero-title-container {
    margin: 327px 0 0 6.3613vw !important;
    width: 70.7379vw !important;
    max-width: 70.7379vw !important;
    min-height: 52.4173vw !important;
    /* 206 = 4 lines (172) + 34; longer titles grow it and push the meta down, keeping the 34 gap */
    padding-bottom: 8.6514vw !important;
  }

  .insights-details-page-body .insights-details-hero-title {
    font-size: 9.7201vw !important;
    /* 38.2 */
    line-height: 10.9415vw !important;
    /* 43 */
    letter-spacing: 0.02em !important;
  }

  .insights-details-page-body .insights-details-hero-meta {
    margin-left: 7.6336vw !important;
    /* 30 */
    gap: 2.0356vw !important;
    /* 8 */
  }

  .insights-details-page-body .insights-details-hero-meta .meta-item {
    gap: 1.0178vw !important;
    /* 4 */
  }

  .insights-details-page-body .insights-details-hero-meta .meta-item:nth-child(2) {
    gap: 2.0356vw !important;
    /* 8 */
  }

  .insights-details-page-body .insights-details-hero-meta .meta-item span {
    font-size: 3.3079vw !important;
    /* 13 */
    line-height: 7.3791vw !important;
    /* 29 */
  }

  .insights-details-page-body .insights-details-hero-meta .meta-item i {
    font-size: 3.0534vw !important;
    /* 12 */
  }

  .insights-details-page-body .insights-details-hero-meta .meta-calendar-icon {
    width: 3.0534vw !important;
    /* 12 */
    height: 2.799vw !important;
    /* 11 */
  }

  /* --- Article column (2036:667): 336 wide at x 29, 30 below the hero --- */
  .insights-details-page-body .insights-details-body {
    display: block !important;
    gap: 0 !important;
  }

  .insights-details-page-body .insights-details-body :is(p, li, ul, ol, h2, h3, h4, h5, h6) {
    font-family: 'Mona Sans', sans-serif !important;
    color: #000000 !important;
    letter-spacing: 0.01em !important;
    text-align: left;
    white-space: normal !important;
    max-width: none !important;
  }

  /* body text + lists: 14 / 22 Regular */
  .insights-details-page-body .insights-details-body :is(p, li, ul, ol) {
    font-size: 3.5623vw !important;
    line-height: 5.598vw !important;
    font-weight: 400 !important;
  }

  /* H2 20 / 28 SemiBold (2036:666) */
  .insights-details-page-body .insights-details-body h2 {
    font-size: 5.0891vw !important;
    line-height: 7.1247vw !important;
    font-weight: 600 !important;
  }

  /* H3 16 / 22 Medium (4151:3614) */
  .insights-details-page-body .insights-details-body h3 {
    font-size: 4.0712vw !important;
    line-height: 5.598vw !important;
    font-weight: 500 !important;
  }

  /* H4 (smaller labels under an H3): 15 / 22 Medium - below H3's 16 (SEO doc #18, 2026-10-07; was 18) */
  .insights-details-page-body .insights-details-body :is(h4, h5, h6) {
    font-size: 3.8168vw !important;
    line-height: 5.598vw !important;
    font-weight: 500 !important;
  }

  /* pasted Google Docs spans keep the article's text style (bold / italic keep their weight) */
  .insights-details-page-body .insights-details-body :is(p, li, h2, h3, h4) [style] {
    font-size: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    white-space: normal !important;
  }

  /* lists: native disc bullets, 21 indent (Figma "ms-21") */
  .insights-details-page-body .insights-details-body :is(ul, ol) {
    margin-left: 0 !important;
    padding-left: 5.3435vw !important;
    padding-inline-start: 5.3435vw !important;
  }

  .insights-details-page-body .insights-details-body ul {
    list-style: disc outside !important;
  }

  .insights-details-page-body .insights-details-body ol {
    list-style: decimal outside !important;
  }

  .insights-details-page-body .insights-details-body :is(ul, ol) li {
    margin: 0 !important;
  }

  .insights-details-page-body .insights-details-body :is(ul, ol) li::before {
    content: none !important;
  }

  .insights-details-page-body .insights-details-body li > p {
    margin: 0 !important;
  }

  /* pasted blank lines (marked sold-empty-p by functions.php) - no empty gaps */
  .insights-details-page-body .insights-details-body p.sold-empty-p {
    display: none !important;
  }

  /* tables keep their own readable size (they scroll sideways inside their box) */
  .insights-details-page-body .insights-details-body table :is(p, li) {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  .insights-details-page-body .insights-details-body table {
    font-size: 3.5623vw;
    line-height: 5.598vw;
  }

  /* --- Spacing (Figma frame gaps): 16 between blocks, 37 before a section H2, 6 inside an H3 group --- */
  .insights-details-page-body .insights-details-body > * {
    margin: 0 !important;
  }

  .insights-details-page-body .insights-details-body > * + * {
    margin-top: 4.0712vw !important;
    /* 16 */
  }

  .insights-details-page-body .insights-details-body > * + h2 {
    margin-top: 9.4148vw !important;
    /* 37 */
  }

  .insights-details-page-body .insights-details-body > h3 + * {
    margin-top: 1.5267vw !important;
    /* 6 */
  }

  .insights-details-page-body .insights-details-body > p + :is(ul, ol),
  .insights-details-page-body .insights-details-body > :is(ul, ol) + p {
    margin-top: 1.5267vw !important;
    /* 6 */
  }

  /* --- Images (2036:673): column wide, 4 radius, 16 above, 12 to the text below --- */
  .insights-details-page-body .insights-details-body > :is(p, figure):has(img) + * {
    margin-top: 3.0534vw !important;
    /* 12 */
  }

  .insights-details-page-body .insights-details-body img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 1.0178vw !important;
  }

  .insights-details-page-body .insights-details-image-wrapper {
    margin-top: 4.0712vw !important;
  }

  .insights-details-page-body .insights-details-image-wrapper + .insights-details-content {
    padding-top: 3.0534vw !important;
  }

  .insights-details-page-body .insights-details-full-image {
    height: auto !important;
    aspect-ratio: 336 / 233;
    object-fit: cover !important;
    border-radius: 1.0178vw !important;
  }

  /* --- Related header (2036:696): 47 below the article, 30 from the sides; label 20/30 SemiBold #FFA726 + 3.77 x 31 bar;
         title 20/24 Bold; gap 20. Shows the real label / title from Theme Settings (was CSS placeholder text
         "Lorem Blogs" / "Lorem ipsum ..."). --- */
  .insights-details-page-body .insights-section {
    padding-top: 11.9593vw !important;
    /* 47 */
    padding-bottom: 22.3919vw !important;
    /* Load More -> pre-footer 88 */
  }

  .insights-details-page-body .insights-header-top {
    padding: 0 7.6336vw !important;
    gap: 5.0891vw !important;
  }

  .insights-details-page-body .insights-label-wrap {
    height: 8.9059vw !important;
    /* 35 */
  }

  .insights-details-page-body .insights-label {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 5.0891vw !important;
    line-height: 7.6336vw !important;
    color: #FFA726 !important;
    white-space: nowrap !important;
  }

  .insights-details-page-body .insights-label::before {
    width: 0.9593vw !important;
    height: 7.888vw !important;
    margin-right: 2.0356vw !important;
  }

  .insights-details-page-body .insights-label::after,
  .insights-details-page-body .insights-title::after {
    content: none !important;
  }

  .insights-details-page-body .insights-title {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 5.0891vw !important;
    line-height: 6.1069vw !important;
    letter-spacing: 0.01em !important;
    color: #000000 !important;
  }

  /* --- Related cards (2036:697): 2 x 174, 8 apart, 11 between rows, centred ---
         Figma: 27 below the 43px title frame = 22 below the real 2-line (48px) title */
  .insights-details-page-body .insights-related-cards-container {
    padding: 0 !important;
    margin-top: 5.598vw !important;
  }

  .insights-details-page-body .insights-related-cards-row {
    justify-content: center !important;
    gap: 2.799vw 2.0356vw !important;
  }

  .insights-details-page-body .insights-related-card,
  .insights-details-page-body .insights-related-card-large {
    width: 44.2748vw !important;
    /* 174 */
    max-width: none !important;
    flex: 0 0 auto !important;
    padding: 1.7812vw 2.0356vw 3.5623vw !important;
    /* 7 8 14 */
    border-radius: 1.2723vw !important;
    gap: 1.5267vw !important;
  }

  .insights-details-page-body .insights-related-card-img {
    height: 23.4097vw !important;
    /* 92 */
    border-radius: 1.0178vw !important;
  }

  .insights-details-page-body .insights-related-card-img img {
    border-radius: 1.0178vw !important;
  }

  .insights-details-page-body .insights-related-card-body {
    gap: 0 !important;
  }

  .insights-details-page-body .insights-related-card-date {
    height: 4.0712vw !important;
    /* 16 */
    gap: 1.7812vw !important;
    /* 7 */
  }

  .insights-details-page-body .insights-related-cal-icon {
    width: 3.3079vw !important;
    height: 3.0534vw !important;
  }

  .insights-details-page-body .insights-related-card-date span {
    font-size: 2.0356vw !important;
    /* 8 */
    line-height: 3.8168vw !important;
  }

  .insights-details-page-body .insights-related-card-title {
    font-size: 2.5445vw !important;
    /* 10 */
    line-height: 3.5623vw !important;
    padding: 1.0178vw 0 !important;
    /* one line = Figma's 22px row; longer titles wrap at 14 */
  }

  .insights-details-page-body .insights-related-card-desc {
    font-size: 2.5445vw !important;
    line-height: 3.5623vw !important;
  }

  .insights-details-page-body .insights-related-read-more {
    font-size: 2.0356vw !important;
    font-weight: 600 !important;
    line-height: 6.1069vw !important;
  }

  /* --- Load More (2036:475): 31 below the cards, 20/24 --- */
  .insights-details-page-body .insights-related-load-more {
    margin-top: 7.888vw !important;
    line-height: 6.1069vw !important;
  }

  .insights-details-page-body .insights-related-load-more a {
    display: inline-block;
    vertical-align: top;
    font-size: 5.0891vw !important;
    line-height: 6.1069vw !important;
  }
}

/* Pasted Google Docs <font color="..."> inside articles (e.g. a blue heading in Stop Junk Leads): text keeps the
   article's own colour on every screen (SEO doc #18 review, 2026-10-07) */
.insights-details-page-body .insights-details-body font {
  color: inherit !important;
}

/* Bold tags pasted inside headings (14 H3s in Cost of PPC showed at 700, an H2 in Stop Junk Leads at 900): a heading
   always keeps its own level's weight - H2 SemiBold, H3/H4 Medium (SEO doc #18: "H3 smaller and not so thick") */
.insights-details-page-body .insights-details-body :is(h1, h2, h3, h4, h5, h6) :is(b, strong) {
  font-weight: inherit !important;
}