/* --- INTERACTIVE SECTION STYLES --- */

      /* Intro Panel (Fixed Background Layer on Desktop) */
      #intro-panel {
          /* Fixed position relative to viewport */
          position: fixed;
          top: 0;
          left: 5%;
          width: 40%; 
          height: 100vh;
          z-index: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          transition: opacity 0.5s ease;
      }

      /* List Panel (Scrollable Foreground Layer) */
      #list-panel {
          position: relative;
          z-index: 10;
          /* Starts at 40%, overlapping Intro */
          margin-left: 55%; 
          width: 45%; 
          min-height: 100vh;
          padding-top: 30px;
          padding-bottom: 100px;
          transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
      }
	  
	  .mode-active #list-panel {
		  
		  padding-top: 150px;
	  }
      
      /* Active Mode: List Panel moves Left and expands */
      .mode-active #list-panel {
          margin-left: 0px;
          width: 100%; /* Full width */
      }

      /* Inner Layout of List Panel */
      #list-panel-inner {
          display: flex;
          flex-direction: column; /* Default stack */
          gap: 2rem;
          min-height: 100vh; /* Ensure full height */
          position: relative;
		  justify-content: center;
      }
      
      /* Active Mode: Inner Layout becomes Flex Row */
      .mode-active #list-panel-inner {
          flex-direction: row;
          align-items: flex-start; /* Important for sticky child to work */
          gap: 0; 
      }

      /* Titles Wrapper */
      #titles-wrapper {
          width: 100%;
          transition: width 0.6s ease;
      }
      
      /* Active Mode: Titles become sticky sidebar */
      .mode-active #titles-wrapper {
          width: 25.5%; /* Fixed width sidebar on desktop */
          flex-shrink: 0;
          position: sticky; /* CSS Sticky positioning */
          top: 150px; /* Distance from top when sticky */
          align-self: flex-start; /* Required for sticky in flex container */
          height: fit-content;
          z-index: 40;
          padding-left: 30px; /* Add some padding to separate from edge */
      }

      /* Content Area */
      #dynamic-content-area {
          width: 100%;
          opacity: 0;
          display: none; /* Hidden initially */
          transition: opacity 0.5s ease;
		  position: relative;
		  z-index: 99;
      }
	  
	  #dynamic-content-area h3 {
		  font-weight:400;
	  }

      /* Active Mode: Content Area Visible */
      .mode-active #dynamic-content-area {
          display: block;
          opacity: 1;
          flex: 1; /* Take remaining space */
          margin-left: 0px; /* Space between sidebar and content */
          padding-right: 50px;
      }
      
      /* List Item Styling */
      .list-item-el {
          background: rgba(0,0,0,0.6);
          border-bottom: 1px solid rgba(255,255,255,0.1);
          border-left: 0;
          border-right: 0;
          border-top: 0;
          border-radius: 0; /* Remove border radius */
          margin-bottom: 0; /* Remove margin bottom */
          transition: all 0.3s ease;
          backdrop-filter: blur(10px);
      }
      .list-item-el:hover {
          background: rgba(255,255,255,0.05);
          border-color: rgba(255,255,255,0.2);
          transform: translateX(-5px);
      }
      .list-item-el:focus-visible {
          outline: 2px solid #00A4E0;
          outline-offset: 2px;
      }
      /* First item border top if needed, or container border */
      #list-container > .list-item-el:first-child {
          border-top: 1px solid rgba(255,255,255,0.1);
      }

      /* Active Item Styling */
      .list-item-active {
          border-color: #00A4E0 !important;
          background: rgba(0, 164, 224, 0.1) !important;
          border-left: 4px solid #00A4E0 !important; /* Keep left accent for active state visual */
		   border-top: 1px solid #00A4E0 !important; 
      }
      .mode-active .list-item-el {
          /* Compact style when sidebar */
          padding: 1rem;
      }
      .mode-active .list-item-el h3 {
          font-size: 0.9rem;
      }
      .mode-active .icon-box {
          width: 2rem;
          height: 2rem;
      }
      .mode-active .icon-box svg {
          width: 1.25rem;
          height: 1.25rem;
      }
	  
	  #content-injection-point p{
		color: rgb(209 213 219 / var(--tw-text-opacity, 1));
		line-height: 1.625;
		font-size: 1.125rem;
		line-height: 1.75rem;
		margin-bottom: 1.5rem;
		
	  }
	  
	  #content-injection-point menu, #content-injection-point ol, #content-injection-point ul {
		list-style: circle;
		margin: 20px;
		padding: 10px;
	  }
	  
	  #content-injection-point ul li{
		line-height: 1.625;
		font-size: 1.125rem;
		line-height: 1.75rem;
		margin-bottom: .5rem;
	  }
	  
	  #content-injection-point h3{
		font-size: 1.8rem;
		line-height: 2.3rem;
		margin-bottom: 1.5rem;
	  }
	  
	  #content-injection-point h4{
		font-size: 1.5rem;
		line-height: 2rem;
		margin-bottom: 1.2rem;
	  }



	 @media (min-width: 2300px) {
		 #intro-panel{
			
			width: 700px;
		 }

        
		 
	 }
	 
	@media (min-width: 1920px) {
		 #list-panel {
          
          padding-top: 50px;
          
        }

        #intro-panel{
			left: calc((100vw - 1600px) / 2);
             min-height: 80vh;
			
		 }

          #list-panel-inner {
            min-height: 80vh;
        }

	 
	}
	 
	 
	 
	 @media (min-width: 950px) and (max-width: 1024px) {
		 .bento-item{
			display:block!important; 
		 }
	 
	 }
      /* --- RESPONSIVE OVERRIDES (Tablet/Mobile) --- */
      @media (max-width: 1024px) {
		#titles-wrapper{
			width:90%;
			margin:0 auto;
		}

        article{
            padding-left: 1rem;
            padding-right: 1rem;
        }
		
		#interactive-section{
			height:auto;
			min-height: fit-content;
		}
		
          /* Stack Intro and List Panel */
          #intro-panel {
              position: relative;
              width: 100%;
              height: auto;
              left:0;
              min-height: 30vh; /* Changed to 30vh */
              padding-top: 120px;
              padding-bottom: 20px; /* Changed to 20px */
              /* Ensure text is readable if over background */
          }
          
          #list-panel {
              margin-left: 0;
              width: 100%;
              min-height: auto;
              padding-top: 50px;
          }

          /* Force Container Full Width */
          #interactive-container {
              width: 100% !important;
              max-width: 100% !important;
              padding-left: 1rem;
              padding-right: 1rem;
          }

          /* Tablet/Mobile specific inner layout settings */
          #list-panel-inner {
              min-height: fit-content !important;
              height: auto !important;
          }
          
          /* Active Mode Tablet Overrides */
          .mode-active #titles-wrapper {
              width: 55px; /* Fixed small width for icons only */
              padding-left: 0;
          }
          
          /* Hide Text in Sidebar on Tablet when Active */
          .mode-active .list-item-el h3,
          .mode-active .list-item-el .arrow-icon {
              display: none !important;
          }
          
          .mode-active .list-item-el {
              justify-content: center;
              padding: 1rem 0;
          }
          
          .mode-active .icon-box {
              margin: 0;
          }

          .mode-active #dynamic-content-area {
              margin-left: 0px;
              padding-right: 0;
          }
          
          #cta-section {
              min-height: 50vh !important;
              height: auto !important;
          }
          
          #cta-content {
              width: 90vw;
          }
		  
		  .list-item-active svg{
			display:none;
		  }
		  
		  .list-item-active .icon-box svg{
			display:block;
		  }
      }
	  
	   @media (max-width: 700px) {
			.mode-active #titles-wrapper {
				width: 35px;
				padding-left: 0;
			}

             #intro-panel {
                padding-top: 20px;
            }

            article{
                padding-left: 0rem;
                padding-right: 0rem;
            }

            #titles-wrapper{
                width:100%;
            }

		}
		
	 /* --- FAQ / Accordion Styles (moved in) --- */
	 
		
		
      .tm-acc-arrow {
       /* border-bottom: 2px solid #ffffff;
        border-right: 2px solid #ffffff;*/
        margin-right: 5px;
       /* transform: rotate(45deg);
        transition: transform 0.3s ease;*/
        width: 10px;
        height: 10px;
		color: #fff;
      }
	  
	  .tm-acc-arrow::before {
		content: "+";
		margin-top: -10px;
		display: block;
	}

      .tm-acc-card {
        background: #000000;
        border-bottom: 1px solid #e0e0e0;
      }

      .tm-acc-card:last-child { border-bottom: none; }

      .tm-acc-inner {
        color: #ffffff;
        font-size: 15px;
        line-height: 1.6;
        padding: 20px 24px;
      }

      .tm-acc-panel {
        background-color: #3c3b3b;
        border-top: 1px solid #f0f0f0;
        display: none; /* jQuery will handle showing this */
        overflow: hidden;
      }

      .tm-acc-trigger {
        align-items: center;
        background: #202020;
        color: #ffffff;
        cursor: pointer;
        display: flex;
        font-weight: 600;
        justify-content: space-between;
        padding: 18px 24px;
        transition: all 0.2s ease;
        user-select: none;
      }
	  
	  .tm-acc-trigger span {
			font-size: 1.3rem;
			font-weight: 300;
		}

      .tm-acc-trigger:hover {
        background-color: #393838;
        color: #F7C100; /* Trend Micro Red */
      }

      .tm-faq-wrapper {
        border: 1px solid #000000;
        font-family: "Segoe UI", SegoeUI, Roboto, Arial, sans-serif;
        margin: 20px 0;
        max-width: 100%;
      }

      .tm-acc-card.active .tm-acc-arrow::before {
        content:"-";
      }

      .tm-acc-card.active .tm-acc-trigger {
        background-color: #000000;
        color: #F7C100;
      }
	  
	  /*********** article page  **********/

     
	  
	  .left-content-holder a{
		 text-decoration:none !important;
	  }
	  
	  /* Specific styles for metadata curtain animation */
      .metadata-row { position: relative; padding: 0.5rem 0; overflow: hidden; }
      .metadata-curtain { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #00A4E0; z-index: 20; transform-origin: left; }
      .metadata-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: #9ca3af; margin-bottom: 0.25rem; }
      .metadata-value { font-size: 1.125rem; font-family: monospace; font-weight: 600; color: white; }