/* Invert Contrast Mode - Conditions & Guidance Icons */
  html[data-contrast="invert"] .condition-item-card .icon-circle,
  html[data-contrast="invert"] .guidance-icon-wrapper i {
    color: #22d3ee !important;
  }

  /* Invert Contrast Mode - Spine Gateway Icons */
  html[data-contrast="invert"] .spine-gateway-pill .spine-pill-icon,
  html[data-contrast="invert"] .spine-gateway-pill .spine-pill-icon i,
  html[data-contrast="invert"] .spine-gateway-pill .spine-pill-icon svg,
  html[data-contrast="invert"] .spine-gateway-pill .spine-pill-icon svg path {
    color: #ffffff !important; /* Resolves to Visual White due to double-inversion */
    fill: #ffffff !important;
  }
  
  html[data-contrast="invert"] .spine-gateway-pill:hover .spine-pill-icon,
  html[data-contrast="invert"] .spine-gateway-pill:hover .spine-pill-icon i,
  html[data-contrast="invert"] .spine-gateway-pill:hover .spine-pill-icon svg,
  html[data-contrast="invert"] .spine-gateway-pill:hover .spine-pill-icon svg path {
    color: #ffffff !important; /* Resolves to Visual White due to double-inversion */
    fill: #ffffff !important;
  }

  /* Dark Contrast Mode - Section Backgrounds */
  html[data-contrast="dark"] .faq-editorial-section,
  html[data-contrast="dark"] .outcomes-section,
  html[data-contrast="dark"] .guidance-section,
  html[data-contrast="dark"] .guidance-card,
  html[data-contrast="dark"] .spectrum-number,
  html[data-contrast="dark"] .clinical-card,
  html[data-contrast="dark"] .clinical-card-section,
  html[data-contrast="dark"] .conditions-section .card-body,
  html[data-contrast="dark"] .condition-item-card .icon-circle,
  html[data-contrast="dark"] .conditions-note p {
    background: #000000 !important;
  }

  /* Light Contrast Mode - Comprehensive Overrides */
  html[data-contrast="light"] .clinical-card-section,
  html[data-contrast="light"] .conditions-section,
  html[data-contrast="light"] .spectrum-section,
  html[data-contrast="light"] .guidance-section,
  html[data-contrast="light"] .outcomes-section,
  html[data-contrast="light"] .faq-editorial-section {
    background: #ffffff !important;
  }

  html[data-contrast="light"] .clinical-card,
  html[data-contrast="light"] .conditions-section .card-body,
  html[data-contrast="light"] .condition-item-card .icon-circle,
  html[data-contrast="light"] .spectrum-number,
  html[data-contrast="light"] .guidance-card,
  html[data-contrast="light"] .spine-gateway-pill,
  html[data-contrast="light"] .accordion-item,
  html[data-contrast="light"] .accordion-button {
    background: #ffffff !important;
    border: 1px solid #000000 !important;
    box-shadow: none !important;
  }

  html[data-contrast="light"] #main-content h1,
  html[data-contrast="light"] #main-content h2,
  html[data-contrast="light"] #main-content h3,
  html[data-contrast="light"] #main-content h4,
  html[data-contrast="light"] #main-content h5,
  html[data-contrast="light"] #main-content p,
  html[data-contrast="light"] #main-content span,
  html[data-contrast="light"] #main-content i,
  html[data-contrast="light"] #main-content .text-dark,
  html[data-contrast="light"] #main-content .text-muted,
  html[data-contrast="light"] #main-content .opacity-75 {
    color: #000000 !important;
  }

  /* Text Scaling Features (Bigger Text) */
  
  /* Spectrum Section Layout Fixes for Scaled Text */
  body.acc-text-x1 .spectrum-bottom, body.acc-text-x2 .spectrum-bottom, body.acc-text-x3 .spectrum-bottom { margin-top: 0 !important; }
  body.acc-text-x1 .spectrum-footer, body.acc-text-x2 .spectrum-footer, body.acc-text-x3 .spectrum-footer { margin-top: 40px !important; }

  /* Force vertical layout on high scaling to prevent horizontal text crushing */
  body.acc-text-x2 .spectrum-container, body.acc-text-x3 .spectrum-container { grid-template-columns: 1fr !important; gap: 0 !important; }
  body.acc-text-x2 .spectrum-col, body.acc-text-x3 .spectrum-col { min-height: auto !important; padding: 0 0 60px 80px !important; align-items: flex-start !important; text-align: left !important; display: block !important; }
  body.acc-text-x2 .spectrum-axis, body.acc-text-x3 .spectrum-axis { width: 2px !important; height: 100% !important; left: 40px !important; top: 0 !important; transform: none !important; background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.3) 10%, rgba(255, 255, 255, 0.3) 90%, transparent) !important; }
  body.acc-text-x2 .spectrum-node, body.acc-text-x3 .spectrum-node { left: 40px !important; top: 30px !important; transform: translateX(-50%) !important; }
  body.acc-text-x2 .spectrum-content-block, body.acc-text-x3 .spectrum-content-block { position: relative !important; top: auto !important; bottom: auto !important; padding: 0 !important; text-align: left !important; }
  body.acc-text-x2 .spectrum-top .spectrum-node::before, body.acc-text-x3 .spectrum-top .spectrum-node::before, body.acc-text-x2 .spectrum-bottom .spectrum-node::after, body.acc-text-x3 .spectrum-bottom .spectrum-node::after { display: none !important; }

  /* Level 1 (120%) */
  body.acc-text-x1 .clinical-heading { font-size: 50px !important; }
  body.acc-text-x1 .clinical-text p { font-size: 21px !important; }
  body.acc-text-x1 .conditions-title, body.acc-text-x1 .guidance-title, body.acc-text-x1 .faq-title { font-size: 48px !important; }
  body.acc-text-x1 .spectrum-title, body.acc-text-x1 .outcomes-title { font-size: 42px !important; }
  body.acc-text-x1 .spectrum-desc, body.acc-text-x1 .guidance-intro, body.acc-text-x1 .guidance-card-text, body.acc-text-x1 .guidance-footer p, body.acc-text-x1 .accordion-button { font-size: 21px !important; }
  body.acc-text-x1 .outcomes-intro { font-size: 23px !important; }
  body.acc-text-x1 .outcome-minimal-text { font-size: 26px !important; }
  body.acc-text-x1 .accordion-body p { font-size: 20px !important; }
  body.acc-text-x1 .card-body .h5 { font-size: 24px !important; }
  body.acc-text-x1 .card-body .small { font-size: 17px !important; }
  body.acc-text-x1 .related-label { font-size: 14px !important; }
  body.acc-text-x1 .related-heading { font-size: 29px !important; }
  body.acc-text-x1 .related-desc, body.acc-text-x1 .spine-pill-text { font-size: 21px !important; }
  body.acc-text-x1 .related-pill { font-size: 16px !important; }
  body.acc-text-x1 .spine-gateway-title { font-size: 35px !important; }
  body.acc-text-x1 .spine-gateway-desc { font-size: 22px !important; }
  body.acc-text-x1 .spine-link { font-size: 19px !important; }
  body.acc-text-x1 .physician-eyebrow { font-size: 16px !important; }
  body.acc-text-x1 .physician-title { font-size: 58px !important; }
  body.acc-text-x1 .physician-text { font-size: 22px !important; }
  body.acc-text-x1 .physician-btn { font-size: 19px !important; }
  body.acc-text-x1 .role-eyebrow { font-size: 16px !important; }
  body.acc-text-x1 .role-title { font-size: 48px !important; }
  body.acc-text-x1 .role-intro { font-size: 22px !important; }
  body.acc-text-x1 .role-card-heading { font-size: 21px !important; }
  body.acc-text-x1 .role-list li { font-size: 20px !important; }
  body.acc-text-x1 .role-context-heading { font-size: 24px !important; }
  body.acc-text-x1 .role-bullet-list li, body.acc-text-x1 .role-footer { font-size: 19px !important; }
  body.acc-text-x1 .benefit-icon { font-size: 24px !important; }
  body.acc-text-x1 .benefit-text { font-size: 19px !important; }

  /* Level 2 (140%) */
  body.acc-text-x2 .clinical-heading { font-size: 59px !important; }
  body.acc-text-x2 .clinical-text p { font-size: 25px !important; }
  body.acc-text-x2 .conditions-title, body.acc-text-x2 .guidance-title, body.acc-text-x2 .faq-title { font-size: 56px !important; }
  body.acc-text-x2 .spectrum-title, body.acc-text-x2 .outcomes-title { font-size: 49px !important; }
  body.acc-text-x2 .spectrum-desc, body.acc-text-x2 .guidance-intro, body.acc-text-x2 .guidance-card-text, body.acc-text-x2 .guidance-footer p, body.acc-text-x2 .accordion-button { font-size: 25px !important; }
  body.acc-text-x2 .outcomes-intro { font-size: 27px !important; }
  body.acc-text-x2 .outcome-minimal-text { font-size: 31px !important; }
  body.acc-text-x2 .accordion-body p { font-size: 24px !important; }
  body.acc-text-x2 .card-body .h5 { font-size: 28px !important; }
  body.acc-text-x2 .card-body .small { font-size: 20px !important; }
  body.acc-text-x2 .related-label { font-size: 17px !important; }
  body.acc-text-x2 .related-heading { font-size: 34px !important; }
  body.acc-text-x2 .related-desc, body.acc-text-x2 .spine-pill-text { font-size: 25px !important; }
  body.acc-text-x2 .related-pill { font-size: 19px !important; }
  body.acc-text-x2 .spine-gateway-title { font-size: 40px !important; }
  body.acc-text-x2 .spine-gateway-desc { font-size: 26px !important; }
  body.acc-text-x2 .spine-link { font-size: 22px !important; }
  body.acc-text-x2 .physician-eyebrow { font-size: 19px !important; }
  body.acc-text-x2 .physician-title { font-size: 67px !important; }
  body.acc-text-x2 .physician-text { font-size: 26px !important; }
  body.acc-text-x2 .physician-btn { font-size: 22px !important; }
  body.acc-text-x2 .role-eyebrow { font-size: 19px !important; }
  body.acc-text-x2 .role-title { font-size: 56px !important; }
  body.acc-text-x2 .role-intro { font-size: 26px !important; }
  body.acc-text-x2 .role-card-heading { font-size: 25px !important; }
  body.acc-text-x2 .role-list li { font-size: 23px !important; }
  body.acc-text-x2 .role-context-heading { font-size: 28px !important; }
  body.acc-text-x2 .role-bullet-list li, body.acc-text-x2 .role-footer { font-size: 22px !important; }
  body.acc-text-x2 .benefit-icon { font-size: 28px !important; }
  body.acc-text-x2 .benefit-text { font-size: 22px !important; }

  /* Level 3 (175%) */
  body.acc-text-x3 .clinical-heading { font-size: 74px !important; line-height: 1.1 !important; }
  body.acc-text-x3 .clinical-text p { font-size: 31px !important; }
  body.acc-text-x3 .conditions-title, body.acc-text-x3 .guidance-title, body.acc-text-x3 .faq-title { font-size: 70px !important; line-height: 1.1 !important; }
  body.acc-text-x3 .spectrum-title, body.acc-text-x3 .outcomes-title { font-size: 61px !important; }
  body.acc-text-x3 .spectrum-desc, body.acc-text-x3 .guidance-intro, body.acc-text-x3 .guidance-card-text, body.acc-text-x3 .guidance-footer p, body.acc-text-x3 .accordion-button { font-size: 31px !important; }
  body.acc-text-x3 .outcomes-intro { font-size: 33px !important; }
  body.acc-text-x3 .outcome-minimal-text { font-size: 39px !important; }
  body.acc-text-x3 .accordion-body p { font-size: 30px !important; }
  body.acc-text-x3 .card-body .h5 { font-size: 35px !important; }
  body.acc-text-x3 .card-body .small { font-size: 25px !important; }
  body.acc-text-x3 .related-label { font-size: 21px !important; }
  body.acc-text-x3 .related-heading { font-size: 42px !important; }
  body.acc-text-x3 .related-desc, body.acc-text-x3 .spine-pill-text { font-size: 31px !important; }
  body.acc-text-x3 .related-pill { font-size: 24px !important; }
  body.acc-text-x3 .spine-gateway-title { font-size: 50px !important; line-height: 1.1 !important; }
  body.acc-text-x3 .spine-gateway-desc { font-size: 32px !important; }
  body.acc-text-x3 .spine-link { font-size: 28px !important; }
  body.acc-text-x3 .physician-eyebrow { font-size: 24px !important; }
  body.acc-text-x3 .physician-title { font-size: 84px !important; line-height: 1.1 !important; }
  body.acc-text-x3 .physician-text { font-size: 32px !important; }
  body.acc-text-x3 .physician-btn { font-size: 28px !important; }
  body.acc-text-x3 .role-eyebrow { font-size: 24px !important; }
  body.acc-text-x3 .role-title { font-size: 70px !important; line-height: 1.1 !important; }
  body.acc-text-x3 .role-intro { font-size: 32px !important; }
  body.acc-text-x3 .role-card-heading { font-size: 31px !important; }
  body.acc-text-x3 .role-list li { font-size: 29px !important; }
  body.acc-text-x3 .role-context-heading { font-size: 35px !important; }
  body.acc-text-x3 .role-bullet-list li, body.acc-text-x3 .role-footer { font-size: 28px !important; }
  body.acc-text-x3 .benefit-icon { font-size: 35px !important; }
  body.acc-text-x3 .benefit-text { font-size: 28px !important; }

  /* ==========================================================================
     MOBILE SPECIFIC (≤480px) OVERRIDES FOR CLINICAL SECTION
     ========================================================================== */
  @media (max-width: 480px) {
    /* Stack elements vertically and clean up spacing */
    .clinical-card-section .row {
      display: flex;
      flex-direction: column;
    }
    
    /* Ensure content takes full width and reduces padding for small screens */
    .clinical-card {
      padding: 30px 20px;
      text-align: center;
    }
    
    .clinical-card-content {
      padding-left: 0;
      margin-bottom: 30px; /* Space between text and visual block */
    }
    
    /* Tighten typography gaps */
    .clinical-heading {
      font-size: 28px;
      margin-bottom: 20px;
      line-height: 1.3;
    }
    
    .clinical-text p {
      font-size: 16px;
      margin-bottom: 15px;
    }
    
    /* Center the action button */
    .clinical-card-section .service-cta {
      text-align: center !important;
      margin-top: 10px !important;
    }
    
    /* Re-center and slightly scale down the visual motif to fit mobile viewports */
    .clinical-visuals {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      min-height: auto;
    }
    
    .diagnostic-motif-container {
      width: 220px;
      height: 220px;
      margin: 0 auto;
    }
    
    /* Scale down the massive motif icons so they don't break horizontal flow */
    .diagnostic-motif-container .motif-main { font-size: 90px; }
    .diagnostic-motif-container .motif-float-1 { font-size: 30px; }
    .diagnostic-motif-container .motif-float-2 { font-size: 26px; }
    .diagnostic-motif-container .motif-float-3 { font-size: 22px; }
  }

  /* ==========================================================================
     MOBILE SPECIFIC (≤480px) OVERRIDES FOR PROCEDURE OVERVIEW SECTION
     ========================================================================== */
  @media (max-width: 480px) {
    /* Stack elements vertically and add breathing room between text and grid */
    .procedure-overview-section .row {
      display: flex;
      flex-direction: column;
    }

    /* Provide generous spacing between the introductory note and the benefits grid */
    .overview-heading-block {
      margin-bottom: 40px;
      padding-right: 0;
      text-align: left;
    }

    /* Tighten typography gaps for better small-screen readability */
    .overview-title {
      font-size: 28px;
      margin-bottom: 16px;
      line-height: 1.3;
    }

    .overview-intro-text {
      font-size: 16px;
      margin-bottom: 20px;
      line-height: 1.6;
    }

    /* Optimize the info note padding for narrow screens */
    .overview-note {
      padding: 15px;
      font-size: 15px;
    }

    /* Display the benefits as a single stack with vertical gap */
    .benefits-grid {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Make touch targets comfortable by expanding padding and stacking inline icon + text if needed */
    .benefit-card {
      padding: 24px 20px;
      display: flex;
      align-items: center; /* Optionally place icon alongside text for better vertical space usage */
      flex-direction: row;
      gap: 16px;
      text-align: left;
    }

    /* Adjust the icon box to sit nicely next to the text */
    .benefit-icon {
      margin-bottom: 0;
      flex-shrink: 0;
      width: 42px;
      height: 42px;
      font-size: 18px;
    }

    /* Make the text large enough for easy reading on phones */
    .benefit-text {
      font-size: 16px;
      margin: 0;
    }
  }

  /* ==========================================================================
     MOBILE SPECIFIC (≤480px) OVERRIDES FOR CONDITIONS TREATED SECTION
     ========================================================================== */
  @media (max-width: 480px) {
    /* Reduce massive desktop padding (100px) to give mobile screen breathing room */
    .conditions-section {
      padding: 50px 0 !important;
    }

    /* Shrink the section titles so they don't break onto awkward lines */
    .conditions-intro .sub-title {
      font-size: 12px !important;
    }
    .conditions-intro .conditions-title {
      font-size: 28px !important;
      line-height: 1.3 !important;
      margin-bottom: 12px !important;
    }
    .conditions-intro .conditions-desc {
      font-size: 15px !important;
      line-height: 1.6 !important;
    }

    /* Target the grid holding the cards to shrink the gap */
    .conditions-section .row.g-4 {
      --bs-gutter-y: 1rem; /* Bootstrap native variable override */
    }

    /* Make the cards compact but accessible */
    .condition-item-card .card-body {
      padding: 20px !important;
    }

    /* Align card contents in a horizontal row for better use of vertical space on phones */
    .condition-item-card .card-body > .d-flex.align-items-center.mb-3 {
      margin-bottom: 10px !important;
    }

    /* Slightly shrink the icon circle */
    .condition-item-card .icon-circle {
      width: 40px !important;
      height: 40px !important;
      font-size: 16px;
    }

    /* Card Title & Text Adjustments */
    .condition-item-card .h5 {
      font-size: 18px !important;
    }
    .condition-item-card p {
      font-size: 14px !important;
      margin-bottom: 10px !important;
    }

    /* "Learn More" link */
    .condition-item-card .mt-3 {
      margin-top: 10px !important;
      font-size: 14px !important;
    }

    /* Fix the Post-Surgical banner taking up too much room */
    .conditions-section .col-lg-8.mx-auto .card-body {
      padding: 20px !important;
    }
    .conditions-section .col-lg-8.mx-auto .h5 {
      font-size: 18px !important;
    }

    /* Info Note Box optimization */
    .conditions-note {
      margin-top: 30px !important;
    }
    .conditions-note p {
      padding: 16px 20px !important;
      font-size: 13px !important;
      line-height: 1.5 !important;
      text-align: left !important;
    }
    /* Focus the visual timeline axis */
    .spectrum-axis {
      left: 20px !important;
      height: calc(100% - 80px) !important; /* Shorter line to guarantee no footer collision */
      top: 30px !important; 
      background: rgba(255, 255, 255, 0.3) !important; /* Override the desktop gradient that bleeds down */
    }

    /* Hide any lingering desktop connectors */
    .spectrum-top .spectrum-node::before,
    .spectrum-bottom .spectrum-node::after {
      display: none !important;
    }

    /* Bring narrative nodes closer to axis */
    .spectrum-node {
      left: 20px !important;
      top: 30px !important; /* Align exactly with top of parent container */
      width: 16px !important;
      height: 16px !important;
      transform: translateX(-50%) !important;
    }

    /* Column content positioning relative to new axis */
    .spectrum-col {
      padding: 0 0 30px 45px !important; /* Reduced bottom padding */
      position: relative !important;
    }

    /* Refine the header area */
    .spectrum-header {
      text-align: left !important;
      margin-bottom: 40px !important;
    }
    
    .spectrum-label {
      font-size: 10px !important;
      margin-bottom: 10px !important;
    }
    
    .spectrum-title {
      font-size: 26px !important;
      line-height: 1.25 !important;
    }

    /* Content block text optimization */
    .spectrum-number {
      font-size: 40px !important;
      margin-bottom: 8px !important;
      line-height: 1 !important;
    }
    
    .spectrum-item-title {
      font-size: 18px !important;
      margin-bottom: 8px !important;
    }
    
    .spectrum-desc {
      font-size: 14px !important;
      line-height: 1.5 !important;
      margin-bottom: 0 !important;
    }

    /* Reset the heavy negative margins from desktop */
    .spectrum-bottom {
      margin-top: 0 !important;
    }

    .spectrum-footer {
      margin-top: 10px !important;
      padding-top: 20px !important;
      text-align: left !important;
      border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .spectrum-footer p {
      font-size: 14px !important;
      margin: 0 !important;
    }
  }

  /* ==========================================================================
     TABLET SPECIFIC (≤991px) OVERRIDES FOR SPECTRUM SECTION
     ========================================================================== */
  @media (max-width: 991px) {
    /* Focus the visual timeline axis */
    .spectrum-axis {
      height: calc(100% - 60px) !important; /* Stop the line early so it doesn't crash into the footer */
      background: rgba(255, 255, 255, 0.3) !important; /* Override the desktop gradient that bleeds down */
    }

    /* Reset the heavy negative margins from desktop that cause tablet collisions */
    .spectrum-bottom {
      margin-top: 0 !important;
    }

    .spectrum-footer {
      margin-top: 20px !important;
      padding-top: 30px !important;
      border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
  }

  /* ==========================================================================
     MOBILE SPECIFIC (≤480px) OVERRIDES FOR PROCEDURE FLOW SECTION
     ========================================================================== */
  @media (max-width: 480px) {
    /* Reduce desktop vertical padding */
    .procedure-flow-section {
      padding: 50px 0 !important;
    }

    /* Header spacing */
    .flow-header {
      margin-bottom: 30px !important;
    }

    /* Eyebrow text */
    .flow-eyebrow {
      font-size: 12px !important;
      margin-bottom: 12px !important;
    }

    /* Title text */
    .flow-title {
      font-size: 28px !important;
      line-height: 1.3 !important;
      margin-bottom: 16px !important;
    }

    /* Intro description */
    .flow-description {
      font-size: 15px !important;
      line-height: 1.6 !important;
    }

    /* Info note block */
    .flow-note {
      font-size: 14px !important;
      padding-left: 15px !important;
      margin-bottom: 40px !important; /* Provide breathing room before the timeline */
    }

    /* Timeline Heading */
    .flow-list-heading {
      font-size: 20px !important;
      margin-bottom: 30px !important;
      padding-bottom: 10px !important;
    }

    /* Timeline Container & Items spacing */
    .timeline-item {
      margin-bottom: 30px !important;
    }
    
    /* Shrink the number marker circles */
    .timeline-marker {
      width: 30px !important;
      height: 30px !important;
      font-size: 12px !important;
      margin-right: 15px !important;
    }

    /* Adjust vertical connecting line to match the shrunken marker's center point */
    .flow-timeline::before {
      left: 29px !important;
    }

    /* Scale down the timeline text to prevent narrow wrapping */
    .timeline-text {
      font-size: 15px !important;
      line-height: 1.5 !important;
      padding-top: 5px !important;
    }
  }

  /* ==========================================================================
     MOBILE SPECIFIC (≤480px) OVERRIDES FOR CARE ROLE SECTION
     ========================================================================== */
  @media (max-width: 480px) {
    /* Reduce desktop vertical padding */
    .care-role-section {
      padding: 60px 0 !important;
    }

    /* Left Column Context adjustments */
    .role-eyebrow {
      font-size: 11px !important;
      letter-spacing: 1.5px !important;
      margin-bottom: 12px !important;
    }

    .role-title {
      font-size: 28px !important;
      line-height: 1.3 !important;
      margin-bottom: 16px !important;
    }

    .role-intro {
      font-size: 15px !important;
      line-height: 1.6 !important;
      margin-bottom: 30px !important;
    }

    .role-context-group {
      margin-top: 20px !important;
      margin-bottom: 30px !important;
    }

    .role-context-heading {
      font-size: 18px !important;
      margin-bottom: 15px !important;
    }

    .role-bullet-list li {
      font-size: 14px !important;
      line-height: 1.5 !important;
      margin-bottom: 10px !important;
    }

    /* Right Column Card & Footer Adjustments */
    .role-card {
      padding: 24px 20px !important;
      margin-top: 20px !important;
      margin-bottom: 30px !important;
      border-radius: 10px !important;
    }

    .role-card-heading {
      font-size: 16px !important;
      margin-bottom: 15px !important;
      line-height: 1.4 !important;
    }

    .role-list li {
      font-size: 14px !important;
      line-height: 1.5 !important;
      margin-bottom: 12px !important;
      padding-left: 24px !important;
    }

    /* Adjust the checkmark icon position for smaller text */
    .role-list li::before {
      font-size: 12px !important;
      top: 4px !important;
    }

    .role-footer {
      font-size: 13px !important;
      line-height: 1.5 !important;
      padding-top: 15px !important;
      margin-top: 0 !important;
    }
  }

  /* ==========================================================================
     MOBILE SPECIFIC (≤480px) OVERRIDES FOR IMAGE GUIDANCE SECTION
     ========================================================================== */
  @media (max-width: 480px) {
    /* Reduce desktop vertical padding */
    .guidance-section {
      padding: 60px 0 !important;
    }

    /* Header spacing */
    .guidance-header {
      margin-bottom: 30px !important;
    }

    /* Eyebrow text */
    .guidance-eyebrow {
      font-size: 11px !important;
      letter-spacing: 1.5px !important;
      margin-bottom: 10px !important;
    }

    /* Title text */
    .guidance-title {
      font-size: 28px !important;
      line-height: 1.3 !important;
      margin-bottom: 12px !important;
    }

    /* Intro description */
    .guidance-intro {
      font-size: 15px !important;
      line-height: 1.6 !important;
    }

    /* Container for the cards */
    .guidance-grid {
      gap: 15px !important;
      margin-bottom: 30px !important;
    }

    /* Individual Card styling */
    .guidance-card {
      padding: 24px 20px !important;
    }

    /* Disable hover animation on touch devices */
    .guidance-card:hover {
      transform: none !important;
    }

    /* Card Icon Wrapper */
    .guidance-icon-wrapper {
      width: 50px !important;
      height: 50px !important;
      font-size: 1.25rem !important;
      margin-bottom: 15px !important;
    }

    /* Card Text */
    .guidance-card-text {
      font-size: 15px !important;
      line-height: 1.5 !important;
    }

    /* Footer Note */
    .guidance-footer {
      padding-top: 20px !important;
    }

    .guidance-footer p {
      font-size: 13px !important;
      line-height: 1.5 !important;
      margin: 0 !important;
    }
  }

  /* ==========================================================================
     MOBILE SPECIFIC (≤480px) OVERRIDES FOR PHYSICIAN EXPERTISE SECTION
     ========================================================================== */
  @media (max-width: 480px) {
    /* Reduce desktop vertical padding */
    .physician-section {
      padding: 60px 0 !important;
    }

    /* Eyebrow text */
    .physician-eyebrow {
      font-size: 11px !important;
      letter-spacing: 1.5px !important;
      margin-bottom: 15px !important;
    }

    /* Title text */
    .physician-title {
      font-size: 28px !important;
      line-height: 1.3 !important;
      margin-bottom: 30px !important;
    }

    /* Adjust the card container */
    .physician-card {
      flex-direction: column !important; /* Force stack if it wasn't already caught by 991px rule */
      border-radius: 12px !important;
      margin-bottom: 20px !important;
      overflow: hidden !important;
    }

    /* Image Wrapper */
    .physician-image-wrapper {
      position: relative !important;
      width: 100% !important;
      height: 320px !important; /* Shorter height on phones to reveal text sooner */
      min-height: 320px !important; 
      flex: none !important;
      overflow: hidden !important;
    }

    .physician-image-wrapper img {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
      object-position: bottom center !important;
    }

    /* Text info wrapper */
    .physician-info-wrapper {
      padding: 25px 20px !important;
      text-align: left !important;
    }

    /* Bio Text */
    .physician-text {
      font-size: 15px !important;
      line-height: 1.6 !important;
      margin-bottom: 20px !important;
    }

    /* CTA Button */
    .physician-btn {
      margin-top: 10px !important;
      display: inline-block !important; /* revert to default flow */
    }
  }

  /* ==========================================================================
     MOBILE SPECIFIC (≤480px) OVERRIDES FOR OUTCOMES SECTION
     ========================================================================== */
  @media (max-width: 480px) {
    /* Reduce massive desktop padding */
    .outcomes-section {
      padding: 60px 0 !important;
    }

    /* Left Column Header tweaks */
    .outcomes-header {
      margin-bottom: 40px !important;
    }

    .outcomes-eyebrow {
      font-size: 11px !important;
      letter-spacing: 1.5px !important;
      margin-bottom: 12px !important;
    }

    .outcomes-title {
      font-size: 28px !important;
      line-height: 1.3 !important;
      margin-bottom: 16px !important;
    }

    .outcomes-intro {
      font-size: 15px !important;
      line-height: 1.6 !important;
    }

    /* Floating note adjusted to sit naturally */
    .outcomes-float-note {
      margin-top: 25px !important;
      font-size: 13px !important;
      line-height: 1.5 !important;
      padding-top: 20px !important;
    }

    /* Right Column Minimal List adjustments */
    .outcomes-minimal-list {
      margin-top: 20px !important; /* Spacing from the left column when stacked */
    }

    .outcome-minimal-item {
      padding: 15px 20px !important; /* Make the hover target more compact */
      margin-bottom: 15px !important;
      border-radius: 8px !important;
    }

    /* Text inside the outcome items */
    .outcome-minimal-text {
      font-size: 15px !important;
      line-height: 1.5 !important;
    }
  }

  /* ==========================================================================
     MOBILE SPECIFIC (≤480px) OVERRIDES FOR RELATED TREATMENTS SECTION
     ========================================================================== */
  @media (max-width: 480px) {
    /* Reduce desktop vertical padding */
    .related-section {
      padding: 60px 0 !important;
    }

    /* Adjust the main flex layout */
    .related-layout {
      gap: 20px !important;
    }

    /* Header Group */
    .related-label {
      font-size: 11px !important;
      letter-spacing: 1.5px !important;
      margin-bottom: 8px !important;
    }

    .related-heading {
      font-size: 24px !important;
      line-height: 1.3 !important;
      margin-bottom: 12px !important;
    }

    .related-desc {
      font-size: 14px !important;
      line-height: 1.6 !important;
    }

    /* Links Group */
    .related-links-group {
      margin-left: 0 !important; /* Remove the 40px desktop left margin since it stacks on mobile */
      gap: 8px !important;
      flex-direction: column !important; /* Stack pills vertically for easier tapping */
      width: 100% !important;
    }

    /* Individual Pills */
    .related-pill {
      text-align: center !important;
      padding: 12px 20px !important; /* Larger touch target area */
      font-size: 13px !important;
    }
  }

  /* ==========================================================================
     MOBILE SPECIFIC (≤480px) OVERRIDES FOR SPINE GATEWAY SECTION
     ========================================================================== */
  @media (max-width: 480px) {
    /* Reduce massive desktop vertical padding (100px) */
    .spine-gateway-section {
      padding: 60px 0 !important;
    }

    /* Header tweaks */
    .spine-gateway-header {
      margin-bottom: 30px !important;
    }

    /* Title size reduction */
    .spine-gateway-title {
      font-size: 24px !important;
      line-height: 1.3 !important;
      margin-bottom: 12px !important;
    }

    /* Description text */
    .spine-gateway-desc {
      font-size: 15px !important;
      line-height: 1.6 !important;
    }

    /* Grid container for the pills */
    .spine-gateway-grid {
      gap: 15px !important;
      flex-direction: column !important; /* Ensure it stacks even if the 768px rule missed it */
    }

    /* Individual large pill buttons */
    .spine-gateway-pill {
      padding: 15px 20px !important; /* Optimize padding for touch */
    }

    /* Text inside the pill */
    .spine-pill-text {
      font-size: 14px !important;
      line-height: 1.4 !important;
      margin-right: 15px !important;
      text-align: left !important;
    }

    /* The little circle icon */
    .spine-pill-icon {
      width: 32px !important;
      height: 32px !important;
      font-size: 12px !important;
      flex-shrink: 0 !important; /* Ensure the text doesn't squish the icon */
    }
  }

  /* ==========================================================================
     MOBILE SPECIFIC (≤480px) OVERRIDES FOR FAQ SECTION
     ========================================================================== */
  @media (max-width: 480px) {
    /* Reduce desktop vertical padding */
    .faq-editorial-section {
      padding: 60px 0 !important;
    }

    /* Overall flex layout to guarantee stack */
    .faq-layout {
      flex-direction: column !important;
    }

    /* Left Header Column */
    .faq-header-col {
      flex: none !important;
      width: 100% !important;
      padding-right: 0 !important;
      margin-bottom: 30px !important;
    }

    .faq-title {
      font-size: 28px !important;
      line-height: 1.3 !important;
      position: static !important; /* Release sticky positioning */
      text-align: left !important;
      margin-top: 0 !important;
    }

    /* Right Accordion Column */
    .faq-list-col {
      flex: none !important;
      width: 100% !important;
    }

    /* Target the accordion items from the global component */
    .about-faq-section .accordion-item {
      margin-bottom: 12px !important;
    }

    .about-faq-section .accordion-header .accordion-button {
      font-size: 15px !important;
      padding: 18px 20px !important; /* Larger touch area for thumbs */
      line-height: 1.4 !important;
      align-items: flex-start !important; /* Keep the +/- icon aligned top-right if text wraps */
    }

    /* Adjust the +/- collapse icon size/positioning */
    .about-faq-section .accordion-item .accordion-button::after {
      width: 20px !important;
      height: 20px !important;
      margin-left: 15px !important;
      margin-top: 2px !important; /* Nudge down to align with smaller text */
      background-size: 12px !important; /* Smaller icon inside the box */
      flex-shrink: 0 !important;
    }

    /* Expanded Text Body */
    .about-faq-section .accordion-item .accordion-body {
      padding: 0 20px 20px 20px !important;
    }

    .about-faq-section .accordion-item .accordion-body p {
      font-size: 14px !important;
      line-height: 1.6 !important;
    }
  }

  /* ==========================================================================
     MOBILE SPECIFIC (≤480px) OVERRIDES FOR SCHEDULE EVALUATION SECTION
     ========================================================================== */
  @media (max-width: 480px) {
    /* Reduce massive desktop vertical padding (100px top, 120px bottom) */
    .schedule-evaluation-section {
      padding: 60px 0 80px 0 !important;
    }

    /* Target the central content container */
    .schedule-content {
      padding: 0 15px !important;
    }

    /* Title size reduction */
    .schedule-title {
      font-size: 28px !important;
      line-height: 1.3 !important;
      margin-bottom: 20px !important;
    }

    /* Description text */
    .schedule-desc {
      font-size: 15px !important;
      line-height: 1.6 !important;
      margin-bottom: 30px !important;
    }

    /* Ensure the button wrapper is centered */
    .schedule-btn-wrapper {
      text-align: center !important;
    }
  }

  /* ==========================================================================
     TABLET & MOBILE (≤991px) OVERRIDES FOR SPECTRUM SECTION
     ========================================================================== */
  @media (max-width: 991px) {
    /* Reset the heavy inline negative margins from desktop when the grid collapses to 1 column at 991px */
    .spectrum-bottom {
      margin-top: 0 !important;
    }
    .spectrum-footer {
      margin-top: 40px !important;
    }

    /* Hide any lingering desktop connectors */
    .spectrum-top .spectrum-node::before,
    .spectrum-bottom .spectrum-node::after {
      display: none !important;
    }

    /* Fix axis line height so it doesn't crash into footer on tablets */
    .spectrum-axis {
      height: calc(100% - 80px) !important;
      background: rgba(255, 255, 255, 0.3) !important;
    }
  }